Refactored README.md

README.md

@@ -1,34 +1,61 @@
-[![Github Action][action-image]][action-link]
+<p align="center">
-[![Downloads][downloads-image]][downloads-link]
+  <img src=".github/assets/logo.png" width="320" alt="Material for MkDocs">
-[![Gitter][gitter-image]][gitter-link]
+</p>
-[![PyPI][pypi-image]][pypi-link]
-[![dependabot][dependabot-image]][dependabot-link]
 
-  [action-image]: https://github.com/squidfunk/mkdocs-material/workflows/ci/badge.svg?branch=master
+<p align="center">
-  [action-link]: https://github.com/squidfunk/mkdocs-material/actions
+  <a href="https://github.com/squidfunk/mkdocs-material/actions">
-  [downloads-image]: https://img.shields.io/pypi/dm/mkdocs-material.svg
+    <img
-  [downloads-link]: https://pypistats.org/packages/mkdocs-material
+      src="https://github.com/squidfunk/mkdocs-material/workflows/ci/badge.svg?branch=master"
-  [gitter-image]: https://badges.gitter.im/squidfunk/mkdocs-material.svg
+      alt="GitHub Action"
-  [gitter-link]: https://gitter.im/squidfunk/mkdocs-material
+    />
-  [pypi-image]: https://img.shields.io/pypi/v/mkdocs-material.svg
+  </a>
-  [pypi-link]: https://pypi.python.org/pypi/mkdocs-material
+  <a href="https://pypistats.org/packages/mkdocs-material">
-  [dependabot-image]: https://img.shields.io/badge/dependabot-enabled-06f.svg
+    <img
-  [dependabot-link]: https://dependabot.com
+      src="https://img.shields.io/pypi/dm/mkdocs-material.svg" 
+      alt="Downloads"
+    />
+  </a>
+  <a href="https://gitter.im/squidfunk/mkdocs-material">
+    <img 
+      src="https://badges.gitter.im/squidfunk/mkdocs-material.svg" 
+      alt="Chat on Gitter"
+    />
+  </a>
+  <a href="https://gitter.im/squidfunk/mkdocs-material">
+    <img 
+      src="https://img.shields.io/pypi/v/mkdocs-material.svg" 
+      alt="Python Package Index"
+    />
+  </a>
+  <a href="https://amzn.to/353WRpj">
+    <img src="https://img.shields.io/static/v1?label=amazon&message=wish%20list&color=orange" />
+  </a>
+</p>
 
-# Material for MkDocs
+<p align="center">
+  Create a branded static site from a set of Markdown files to host the
+  documentation of your Open Source or commercial project – customizable,
+  searchable, mobile-friendly, 40+ languages. Set up in 5 minutes.
+</p>
 
-> ⚠️ __Help test [Material 5](https://github.com/squidfunk/mkdocs-material/issues/1498)!__
+<p align="center">
+  <a href="https://squidfunk.github.io/mkdocs-material">
+    <img src=".github/assets/screenshot.png" width=700 />
+  </a>
+</p>
 
-A Material Design theme for [MkDocs][1].
+## Features
 
-[![Material for MkDocs](https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/docs/assets/images/material.png)][2]
+* **It's just Markdown** – you just write your technical documentation in
+  Markdown, so there's no need to know any HTML, JavaScript or CSS. Material for
+  MkDocs will do the heavy lifting and generate a beautiful and functional
+  website.
 
-  [1]: https://www.mkdocs.org
+* **Looks great on every device**: Material for MkDocs is built...
-  [2]: https://squidfunk.github.io/mkdocs-material/
 
 ## Quick start
 
-Install the latest version of Material with `pip`:
+Install the latest version of Material for MkDocs with `pip`:
 
 ``` sh
 pip install mkdocs-material
@@ -41,29 +68,10 @@ theme:
   name: material
 ```
 
-## What to expect
-
-* Responsive design and fluid layout for all kinds of screens and devices,
-  designed to serve your project documentation in a user-friendly way in 41
-  languages with optimal readability.
-
-* Easily customizable primary and accent color, fonts, favicon and logo;
-  straight forward localization through theme extension; integrated with Google
-  Analytics, Disqus and GitHub.
-
-* Well-designed search interface accessible through hotkeys (<kbd>F</kbd> or
-  <kbd>S</kbd>), intelligent grouping of search results, search term
-  highlighting and lazy loading.
-
 For detailed installation instructions and a demo, visit
-https://squidfunk.github.io/mkdocs-material/
+[squidfunk.github.io/mkdocs-material][1]
 
-## Support
+  [1]: https://squidfunk.github.io/mkdocs-material/
-
-If you're happy with Material for MkDocs and feel like giving something back,
-you may check out squidfunk's [Amazon wish list][3].
-
-  [3]: https://amzn.to/353WRpj
 
 ## License
 

src/overrides/home.html

@@ -26,6 +26,7 @@
 {% block tabs %}
   {{ super() }}
 
+  <!-- Additional styles for landing page -->
   <style>
 
     /* Application header should be static for the landing page */

src/overrides/main.html

@@ -56,17 +56,25 @@
 <!-- Announcement bar -->
 {% block announce %}
   <style>
+
+    /* Add background color transition */
     .md-announce {
       transition: background-color 125ms;
     }
+
+    /* Change background color on link focus */
     .md-announce:focus-within {
       background-color: var(--md-accent-fg-color);
     }
+
+    /* Preserve link color */
     .md-announce a,
     .md-announce a:focus,
     .md-announce a:hover {
       color: currentColor;
     }
+
+    /* Don't wrap name of blog article */
     .md-announce strong {
       white-space: nowrap;
     }