Skip to content

Commit

Permalink
Moved landing page overrides to separate stylesheet
Browse files Browse the repository at this point in the history
  • Loading branch information
squidfunk committed Jul 23, 2020
1 parent 4771933 commit 98d1c35
Show file tree
Hide file tree
Showing 15 changed files with 163 additions and 182 deletions.
2 changes: 1 addition & 1 deletion .stylelintrc
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
4 changes: 2 additions & 2 deletions material/assets/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
3 changes: 0 additions & 3 deletions material/assets/stylesheets/overrides.823d2928.min.css

This file was deleted.

1 change: 0 additions & 1 deletion material/assets/stylesheets/overrides.823d2928.min.css.map

This file was deleted.

3 changes: 3 additions & 0 deletions material/assets/stylesheets/overrides.93b89301.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions material/assets/stylesheets/overrides.93b89301.min.css.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion material/overrides/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion material/overrides/main.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
8 changes: 5 additions & 3 deletions src/assets/stylesheets/overrides.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
83 changes: 0 additions & 83 deletions src/assets/stylesheets/overrides/_admonition.scss

This file was deleted.

50 changes: 50 additions & 0 deletions src/assets/stylesheets/overrides/layout/_base.scss
Original file line number Diff line number Diff line change
@@ -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 changes: 99 additions & 0 deletions src/assets/stylesheets/overrides/layout/_hero.scss
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
Loading

0 comments on commit 98d1c35

Please sign in to comment.