Moved landing page overrides to separate stylesheet

.stylelintrc

@@ -34,7 +34,7 @@
     "selector-class-pattern": "^[a-z0-9]+(-[a-z0-9]+)*(__[a-z]+)?(--[a-z]+)?$",
     "selector-descendant-combinator-no-non-space": null,
     "string-quotes": "double",
-    "unit-whitelist": ["px", "em", "deg", "ms", "%", "mm", "vh", "dppx"],
+    "unit-whitelist": ["px", "em", "deg", "ms", "%", "mm", "vh", "vw", "dppx"],
     "value-keyword-case": "lower",
     "value-no-vendor-prefix": true
   }

material/assets/manifest.json

@@ -7,8 +7,8 @@
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.a68abb33.min.js.map",
   "assets/stylesheets/main.css": "assets/stylesheets/main.daf2a690.min.css",
   "assets/stylesheets/main.css.map": "assets/stylesheets/main.daf2a690.min.css.map",
-  "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.823d2928.min.css",
+  "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.93b89301.min.css",
-  "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.823d2928.min.css.map",
+  "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.93b89301.min.css.map",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.a53427c9.min.css",
   "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.a53427c9.min.css.map"
 }

material/assets/stylesheets/overrides.823d2928.min.css

@@ -1,3 +0,0 @@
-:root{--md-admonition-icon--sponsor: url( 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 20.408c-.492.308-.903.546-1.192.709-.153.086-.308.17-.463.252h-.002a.75.75 0 01-.686 0 16.709 16.709 0 01-.465-.252 31.147 31.147 0 01-4.803-3.34C3.8 15.572 1 12.331 1 8.513 1 5.052 3.829 2.5 6.736 2.5 9.03 2.5 10.881 3.726 12 5.605 13.12 3.726 14.97 2.5 17.264 2.5 20.17 2.5 23 5.052 23 8.514c0 3.818-2.801 7.06-5.389 9.262A31.146 31.146 0 0114 20.408z"/></svg>' )}.md-typeset .admonition.sponsor{border-color:#ea4aaa}.md-typeset .sponsor>.admonition-title{background-color:rgba(234,74,170,.1)}.md-typeset .sponsor>.admonition-title::before{background-color:#ea4aaa;-webkit-mask-image:var(--md-admonition-icon--sponsor);mask-image:var(--md-admonition-icon--sponsor)}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}.md-announce .twitter{margin-left:.2em;color:#00acee}@-webkit-keyframes tx-sponsor{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.1)}}@keyframes tx-sponsor{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.1)}}.tx-sponsor{margin-top:1rem;text-align:center}.tx-sponsor a{color:#e91e63;font-variant:all-petite-caps}.tx-sponsor hr{display:inline-block;width:2rem;margin:1em;vertical-align:middle;background-color:currentColor;border:none}.tx-sponsor__heart{-webkit-animation:tx-sponsor 1000ms infinite;animation:tx-sponsor 1000ms infinite}.md-typeset .tx-switch button{cursor:pointer;transition:opacity 250ms}.md-typeset .tx-switch button:hover{opacity:.75}.md-typeset .tx-switch button>code{display:block;color:var(--md-primary-bg-color);background-color:var(--md-primary-fg-color)}.md-typeset .tx-columns{-moz-columns:2;columns:2}.md-typeset .tx-columns>*{-moz-column-break-inside:avoid;break-inside:avoid}
-
-/*# sourceMappingURL=overrides.823d2928.min.css.map*/

material/assets/stylesheets/overrides.93b89301.min.css

@@ -0,0 +1,3 @@
+.md-typeset .tx-switch button{cursor:pointer;transition:opacity 250ms}.md-typeset .tx-switch button:hover{opacity:.75}.md-typeset .tx-switch button>code{display:block;color:var(--md-primary-bg-color);background-color:var(--md-primary-fg-color)}.md-typeset .tx-columns{-moz-columns:2;columns:2}.md-typeset .tx-columns>*{-moz-column-break-inside:avoid;break-inside:avoid}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}.md-announce .twitter{margin-left:.2em;color:#00acee}.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='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}[data-md-color-scheme=slate] .tx-container{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}@media screen and (max-width: 29.9375em){.tx-hero h1{font-size:1.4rem}}.tx-hero__content{padding-bottom:6rem}@media screen and (min-width: 60em){.tx-hero{display:flex;align-items:stretch}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{order:1;width:38rem;transform:translateX(4rem)}}@media screen and (min-width: 76.25em){.tx-hero__image{transform:translateX(8rem)}}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button:hover,.tx-hero .md-button:focus{color:var(--md-default-bg-color);background-color:var(--md-accent-fg-color);border-color:var(--md-accent-fg-color)}.tx-hero .md-button--primary{color:#894da8;background-color:var(--md-primary-bg-color);border-color:var(--md-primary-bg-color)}@-webkit-keyframes tx-sponsor{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.1)}}@keyframes tx-sponsor{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.1)}}.tx-sponsor{margin-top:1rem;text-align:center}.tx-sponsor a{color:#e91e63;font-variant:all-petite-caps}.tx-sponsor hr{display:inline-block;width:2rem;margin:1em;vertical-align:middle;background-color:currentColor;border:none}.tx-sponsor__heart{-webkit-animation:tx-sponsor 1000ms infinite;animation:tx-sponsor 1000ms infinite}
+
+/*# sourceMappingURL=overrides.93b89301.min.css.map*/

material/overrides/home.html

@@ -4,7 +4,7 @@
 {% extends "overrides/main.html" %}
 {% block tabs %}
   {{ 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='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: white' /></svg>") no-repeat bottom,linear-gradient(to bottom,var(--md-primary-fg-color),#a53fd9 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(280deg,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 (max-width:30em){.tx-hero h1{font-size:1.4rem}}@media screen and (min-width:60em){.md-sidebar--secondary{display:none}.tx-hero{display:flex;align-items:stretch}.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>
+  <style>.md-header{position:initial}.md-main__inner{margin:0}.md-content{display:none}@media screen and (min-width:60em){.md-sidebar--secondary{display:none}}@media screen and (min-width:76.25em){.md-sidebar--primary{display:none}}</style>
   <section class="tx-container">
     <div class="md-grid md-typeset">
       <div class="tx-hero">

material/overrides/main.html

@@ -22,7 +22,7 @@
   <meta name="twitter:title" content="{{ title }}">
   <meta name="twitter:description" content="{{ config.site_description }}">
   <meta name="twitter:image" content="{{ image }}">
-  <link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.823d2928.min.css' | url }}">
+  <link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.93b89301.min.css' | url }}">
 {% endblock %}
 {% block announce %}
   <a href="https://twitter.com/squidfunk">

src/assets/stylesheets/overrides.scss

@@ -36,7 +36,9 @@
 
 @import "config";
 
-@import "overrides/admonition";
-@import "overrides/announce";
-@import "overrides/sponsor";
 @import "overrides/typeset";
+
+@import "overrides/layout/announce";
+@import "overrides/layout/base";
+@import "overrides/layout/hero";
+@import "overrides/layout/sponsor";

src/assets/stylesheets/overrides/_admonition.scss

@@ -1,83 +0,0 @@
-////
-/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
-///
-/// Permission is hereby granted, free of charge, to any person obtaining a
-/// copy of this software and associated documentation files (the "Software"),
-/// to deal in the Software without restriction, including without limitation
-/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
-/// and/or sell copies of the Software, and to permit persons to whom the
-/// Software is furnished to do so, subject to the following conditions:
-///
-/// The above copyright notice and this permission notice shall be included in
-/// all copies or substantial portions of the Software.
-///
-/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
-/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
-/// DEALINGS
-////
-
-// ----------------------------------------------------------------------------
-// Variables
-// ----------------------------------------------------------------------------
-
-///
-/// Admonition flavours
-///
-$admonitions: (
-  sponsor:                    heart-fill-24 #EA4AAA
-) !default;
-
-// ----------------------------------------------------------------------------
-// Rules: layout
-// ----------------------------------------------------------------------------
-
-// Icon definitions
-:root {
-  @each $names, $props in $admonitions {
-    $name: nth($names, 1);
-    $icon: nth($props, 1);
-
-    // Inline icon through PostCSS in Webpack
-    --md-admonition-icon--#{$name}: svg-load(
-      "@primer/octicons/build/svg/#{$icon}.svg"
-    );
-  }
-}
-
-// ----------------------------------------------------------------------------
-// Rules: flavours
-// ----------------------------------------------------------------------------
-
-@each $names, $props in $admonitions {
-  $name: nth($names, 1);
-  $tint: nth($props, 2);
-
-  // Define base class
-  .md-typeset .admonition.#{$name} {
-    border-color: $tint;
-  }
-
-  // Define base class
-  .md-typeset .#{$name} > .admonition-title {
-    background-color: transparentize($tint, 0.9);
-
-    // Icon
-    &::before {
-      background-color: $tint;
-      mask-image: var(--md-admonition-icon--#{$name});
-    }
-  }
-
-  // Define synonyms for base class
-  @if length($names) > 1 {
-    @for $n from 2 through length($names) {
-      .#{nth($names, $n)} {
-        @extend .#{$name};
-      }
-    }
-  }
-}

src/assets/stylesheets/overrides/layout/_base.scss

@@ -0,0 +1,50 @@
+////
+/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Landing page container
+.tx-container {
+  padding-top: px2rem(20px);
+  background:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,
+    linear-gradient(
+      to bottom,
+      var(--md-primary-fg-color),
+      hsla(280, 67%, 55%, 1) 99%,
+      var(--md-default-bg-color) 99%
+    );
+
+  // Adjust background for slate theme
+  [data-md-color-scheme="slate"] & {
+    background:
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,
+      linear-gradient(
+        to bottom,
+        var(--md-primary-fg-color),
+        hsla(280, 67%, 55%, 1) 99%,
+        var(--md-default-bg-color) 99%
+      );
+  }
+}

src/assets/stylesheets/overrides/layout/_hero.scss

@@ -0,0 +1,99 @@
+////
+/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Landing page hero
+.tx-hero {
+  margin: 0 px2rem(16px);
+  color: var(--md-primary-bg-color);
+
+  // Make main headline thicker
+  h1 {
+    margin-bottom: px2rem(20px);
+    color: currentColor;
+    font-weight: 700;
+
+    // [mobile portrait -]: Adjust headline
+    @include break-to-device(mobile portrait) {
+      font-size: px2rem(28px);
+    }
+  }
+
+  // Ensure that blob doesn't overlap buttons
+  &__content {
+    padding-bottom: px2rem(120px);
+  }
+
+  // [tablet landscape +]: Display content and image next to each other
+  @include break-from-device(tablet landscape) {
+    display: flex;
+    align-items: stretch;
+
+    // Increase bottom spacing and set dimensions
+    &__content {
+      max-width: px2rem(380px);
+      margin-top: px2rem(70px);
+      padding-bottom: 14vw;
+    }
+
+    // Swap with teaser and set dimensions
+    &__image {
+      order: 1;
+      width: px2rem(760px);
+      transform: translateX(#{px2rem(80px)});
+    }
+  }
+
+  // [screen +]: Adjust spacing
+  @include break-from-device(screen) {
+
+    // Ensure the image aligns with the repository information
+    &__image {
+      transform: translateX(#{px2rem(160px)});
+    }
+  }
+
+  // Adjust spacing of buttons and invert them
+  .md-button {
+    margin-top: px2rem(10px);
+    margin-right: px2rem(10px);
+    color: var(--md-primary-bg-color);
+
+    // Invert hover and focus button states
+    &:hover,
+    &:focus {
+      color: var(--md-default-bg-color);
+      background-color: var(--md-accent-fg-color);
+      border-color: var(--md-accent-fg-color);
+    }
+
+    // Invert primary button
+    &--primary {
+      color: hsla(280deg, 37%, 48%, 1);
+      background-color: var(--md-primary-bg-color);
+      border-color: var(--md-primary-bg-color);
+    }
+  }
+}

src/overrides/home.html

@@ -44,68 +44,6 @@
       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='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: white' /></svg>") no-repeat bottom,
-        linear-gradient(
-          to bottom,
-          var(--md-primary-fg-color),
-          hsla(280, 67%, 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(280deg, 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);
-    }
-
-    /* [mobile portrait -]: Adjust headline */
-    @media screen and (max-width: 30em) {
-
-      /* Make main headline smaller */
-      .tx-hero h1 {
-        font-size: 1.4rem;
-      }
-    }
-
     /* [tablet landscape +]: Display content and image next to each other */
     @media screen and (min-width: 60em) {
 
@@ -113,26 +51,6 @@
       .md-sidebar--secondary {
         display: none;
       }
-
-      /* Use flex layout to align items */
-      .tx-hero {
-        display: flex;
-        align-items: stretch;
-      }
-
-      /* 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 */
@@ -142,11 +60,6 @@
       .md-sidebar--primary {
         display: none;
       }
-
-      /* Ensure the image aligns with the repository information */
-      .tx-hero__image {
-        transform: translateX(8rem);
-      }
     }
   </style>