1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-12 01:50:52 +01:00

Moved landing page overrides to separate stylesheet

This commit is contained in:
squidfunk 2020-07-23 10:04:22 +02:00
parent 4771933f10
commit 98d1c354df
15 changed files with 163 additions and 182 deletions

View File

@ -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
}

View File

@ -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.map": "assets/stylesheets/overrides.823d2928.min.css.map",
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.93b89301.min.css",
"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"
}

View File

@ -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*/

File diff suppressed because one or more lines are too long

View File

@ -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*/

File diff suppressed because one or more lines are too long

View File

@ -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">

View File

@ -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">

View File

@ -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";

View File

@ -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};
}
}
}
}

View File

@ -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%
);
}
}

View File

@ -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);
}
}
}

View File

@ -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>