Redesigned landing page

docs/index.md

@@ -1,49 +1,4 @@
 ---
 template: overrides/home.html
+title: Material for MkDocs
 ---
-
-# Material <small>for MkDocs</small>
-
-## Create beautiful project documentation
-
-Material is a theme for [MkDocs][1], an excellent static site generator geared
-towards project documentation. It is built using Google's [Material Design][2]
-guidelines.
-
-[![Material for MkDocs](assets/images/material.png)](assets/images/material.png)
-
-  [1]: https://www.mkdocs.org
-  [2]: https://material.io/design/
-
-## Quick start
-
-Install the latest version of Material with `pip`:
-
-``` sh
-pip install mkdocs-material
-```
-
-Add the following line to `mkdocs.yml`:
-
-``` yaml
-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 instructions see the [getting started guide][3].
-
-  [3]: getting-started.md

material/overrides/home.html

@@ -1,7 +1,33 @@
 {#-
   This file was automatically generated - do not edit
 -#}
-{% extends "base.html" %}
+{% extends "overrides/main.html" %}
-{% block announce %}
+{% block tabs %}
-  Material for MkDocs 5.0.0rc3
+  {{ super() }}
+  <style>.md-header{position:initial}.md-main__inner{margin:0}.md-content{display:none}.tx-container{padding-top:1rem;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1123.97,2.105c0.222,0 0,256.95 0,256.95l-1125.2,0l0,-48.177c0,0 15.954,4.645 54.489,4.645c116.177,0 196.902,-91.837 324.776,-91.837c120.62,0 113.834,45.468 254.071,45.468c140.237,0 214.262,-167.049 491.868,-167.049Z' style='fill: white' /></svg>") no-repeat bottom,linear-gradient(to bottom,var(--md-primary-fg-color),hsla(160deg,47%,55%,1) 99%,#fff 99%)}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}.tx-hero__content{padding-bottom:6rem}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button--primary{background-color:var(--md-primary-bg-color);color:hsla(193deg,37%,48%,1);border-color:var(--md-primary-bg-color)}.tx-hero .md-button:focus,.tx-hero .md-button:hover{background-color:var(--md-accent-fg-color);color:var(--md-default-bg-color);border-color:var(--md-accent-fg-color)}@media screen and (min-width:60em){.md-sidebar--secondary{display:none}.tx-hero{display:flex;align-items:stretch;justify-items:space-between}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{width:38rem;order:1;transform:translateX(4rem)}}@media screen and (min-width:76.25em){.md-sidebar--primary{display:none}.tx-hero__image{transform:translateX(8rem)}}</style>
+  <section class="tx-container">
+    <div class="md-grid md-typeset">
+      <div class="tx-hero">
+        <div class="tx-hero__image">
+          <img src="assets/images/illustration.png">
+        </div>
+        <div class="tx-hero__content">
+          <h1>Beautiful and functional project documentation</h1>
+          <p>
+            Create a static site to host the documentation of your Open Source
+            or commercial project in a matter of minutes – hackable,
+            mobile-ready, translated into 41 languages, client-side search.
+          </p>
+          <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-button md-button--primary">
+            Get started
+          </a>
+          <a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-button">
+            Go to GitHub
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
 {% endblock %}
+{% block content %}{% endblock %}
+{% block footer %}{% endblock %}

material/overrides/main.html

@@ -0,0 +1,7 @@
+{#-
+  This file was automatically generated - do not edit
+-#}
+{% extends "base.html" %}
+{% block announce %}
+  Material for MkDocs 5.0.0rc3
+{% endblock %}

src/overrides/home.html

@@ -20,8 +20,167 @@
   IN THE SOFTWARE.
 -->
 
-{% extends "base.html" %}
+{% extends "overrides/main.html" %}
 
-{% block announce %}
+<!-- Render hero under tabs -->
-  Material for MkDocs 5.0.0rc3
+{% block tabs %}
+  {{ super() }}
+
+  <style>
+
+    /* Application header should be static for the landing page */
+    .md-header {
+      position: initial;
+    }
+
+    /* Remove spacing, as we cannot hide it completely */
+    .md-main__inner {
+      margin: 0;
+    }
+
+    /* Hide main content for now */
+    .md-content {
+      display: none;
+    }
+
+    /* Gradient background + blob */
+    .tx-container {
+      padding-top: 1rem;
+      background:
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1123.97,2.105c0.222,0 0,256.95 0,256.95l-1125.2,0l0,-48.177c0,0 15.954,4.645 54.489,4.645c116.177,0 196.902,-91.837 324.776,-91.837c120.62,0 113.834,45.468 254.071,45.468c140.237,0 214.262,-167.049 491.868,-167.049Z' style='fill: white' /></svg>") no-repeat bottom,
+        linear-gradient(
+          to bottom,
+          var(--md-primary-fg-color),
+          hsla(160deg, 47%, 55%, 1) 99%,
+          white 99%
+        );
+    }
+
+    /* Set inverted text color on hero */
+    .tx-hero {
+      margin: 0 .8rem;
+      color: var(--md-primary-bg-color);
+    }
+
+    /* Make main headline thicker */
+    .tx-hero h1 {
+      margin-bottom: 1rem;
+      color: currentColor;
+      font-weight: 700;
+    }
+
+    /* Ensure that blob doesn't overlap buttons */
+    .tx-hero__content {
+      padding-bottom: 6rem;
+    }
+
+    /* Adjust spacing of buttons and invert them */
+    .tx-hero .md-button {
+      margin-top: .5rem;
+      margin-right: .5rem;
+      color: var(--md-primary-bg-color);
+    }
+
+    /* Invert primary button */
+    .tx-hero .md-button--primary {
+      background-color: var(--md-primary-bg-color);
+      color: hsla(193deg, 37%, 48%, 1);
+      border-color: var(--md-primary-bg-color);
+    }
+
+    /* Invert hover and focus button states */
+    .tx-hero .md-button:hover,
+    .tx-hero .md-button:focus {
+      background-color: var(--md-accent-fg-color);
+      color: var(--md-default-bg-color);
+      border-color: var(--md-accent-fg-color);
+    }
+
+    /* [tablet landscape +]: Display content and image next to each other */
+    @media screen and (min-width: 60em) {
+
+      /* Hide table of contents */
+      .md-sidebar--secondary {
+        display: none;
+      }
+
+      /* Use flex layout to align items */
+      .tx-hero {
+        display: flex;
+        align-items: stretch;
+        justify-items: space-between;
+      }
+
+      /* Increase bottom spacing and set dimensions */
+      .tx-hero__content {
+        max-width: 19rem;
+        margin-top: 3.5rem;
+        padding-bottom: 14vw;
+      }
+
+      /* Swap with teaser and set dimensions */
+      .tx-hero__image {
+        width: 38rem;
+        order: 1;
+        transform: translateX(4rem);
+      }
+    }
+
+    /* [screen +]: Adjust spacing */
+    @media screen and (min-width: 76.25em) {
+
+      /* Hide navigation */
+      .md-sidebar--primary {
+        display: none;
+      }
+
+      /* Ensure the image aligns with the repository information */
+      .tx-hero__image {
+        transform: translateX(8rem);
+      }
+    }
+  </style>
+
+  <!-- Hero for landing page -->
+  <section class="tx-container">
+    <div class="md-grid md-typeset">
+      <div class="tx-hero">
+
+        <!-- Hero image -->
+        <div class="tx-hero__image">
+          <img src="assets/images/illustration.png">
+        </div>
+
+        <!-- Hero content -->
+        <div class="tx-hero__content">
+          <h1>Beautiful and functional project documentation</h1>
+          <p>
+            Create a static site to host the documentation of your Open Source
+            or commercial project in a matter of minutes – hackable,
+            mobile-ready, translated into 41 languages, client-side search.
+          </p>
+          <a
+            href="{{ page.next_page.url | url }}"
+            title="{{ page.next_page.title | striptags }}"
+            class="md-button md-button--primary"
+          >
+            Get started
+          </a>
+          <a
+            href="{{ config.repo_url }}"
+            title="{{ lang.t('source.link.title') }}"
+            class="md-button"
+          >
+            Go to GitHub
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
 {% endblock %}
+
+<!-- Content -->
+{% block content %}{% endblock %}
+
+<!-- Application footer -->
+{% block footer %}{% endblock %}