mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-23 23:21:00 +01:00
Moved landing page overrides to separate stylesheet
This commit is contained in:
squidfunk
parent
4771933f10
commit
98d1c354df
@ -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
|
||||
}
|
||||
|
||||
@ -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"
|
||||
}
|
||||
@ -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
3
material/assets/stylesheets/overrides.93b89301.min.css
vendored
Normal file
3
material/assets/stylesheets/overrides.93b89301.min.css
vendored
Normal 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
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
src/assets/stylesheets/overrides/layout/_base.scss
Normal file
50
src/assets/stylesheets/overrides/layout/_base.scss
Normal 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%
|
||||
);
|
||||
}
|
||||
}
|
||||
99
src/assets/stylesheets/overrides/layout/_hero.scss
Normal file
99
src/assets/stylesheets/overrides/layout/_hero.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user