diff --git a/material/overrides/main.html b/material/overrides/main.html
index ca419df12..716eb4b34 100644
--- a/material/overrides/main.html
+++ b/material/overrides/main.html
@@ -22,7 +22,7 @@
-
+
{% endblock %}
{% block announce %}
diff --git a/src/assets/stylesheets/overrides.scss b/src/assets/stylesheets/overrides.scss
index c655f885b..c37f3ae8b 100644
--- a/src/assets/stylesheets/overrides.scss
+++ b/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";
diff --git a/src/assets/stylesheets/overrides/_admonition.scss b/src/assets/stylesheets/overrides/_admonition.scss
deleted file mode 100644
index 984601ca2..000000000
--- a/src/assets/stylesheets/overrides/_admonition.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-////
-/// Copyright (c) 2016-2020 Martin Donath
-///
-/// 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};
- }
- }
- }
-}
diff --git a/src/assets/stylesheets/overrides/_announce.scss b/src/assets/stylesheets/overrides/layout/_announce.scss
similarity index 100%
rename from src/assets/stylesheets/overrides/_announce.scss
rename to src/assets/stylesheets/overrides/layout/_announce.scss
diff --git a/src/assets/stylesheets/overrides/layout/_base.scss b/src/assets/stylesheets/overrides/layout/_base.scss
new file mode 100644
index 000000000..b6a7de57c
--- /dev/null
+++ b/src/assets/stylesheets/overrides/layout/_base.scss
@@ -0,0 +1,50 @@
+////
+/// Copyright (c) 2016-2020 Martin Donath
+///
+/// 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,") 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,") no-repeat bottom,
+ linear-gradient(
+ to bottom,
+ var(--md-primary-fg-color),
+ hsla(280, 67%, 55%, 1) 99%,
+ var(--md-default-bg-color) 99%
+ );
+ }
+}
diff --git a/src/assets/stylesheets/overrides/layout/_hero.scss b/src/assets/stylesheets/overrides/layout/_hero.scss
new file mode 100644
index 000000000..5365abad6
--- /dev/null
+++ b/src/assets/stylesheets/overrides/layout/_hero.scss
@@ -0,0 +1,99 @@
+////
+/// Copyright (c) 2016-2020 Martin Donath
+///
+/// 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);
+ }
+ }
+}
diff --git a/src/assets/stylesheets/overrides/_sponsor.scss b/src/assets/stylesheets/overrides/layout/_sponsor.scss
similarity index 100%
rename from src/assets/stylesheets/overrides/_sponsor.scss
rename to src/assets/stylesheets/overrides/layout/_sponsor.scss
diff --git a/src/overrides/home.html b/src/overrides/home.html
index 0a0a66def..00d0fcc67 100644
--- a/src/overrides/home.html
+++ b/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,") 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);
- }
}