starred/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2026-07-29 01:02:42 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refactored CSS variables integration

Browse Source
This commit is contained in:
squidfunk
2020-02-25 20:25:05 +01:00
parent b623010993
commit 309c2b7c03
36 changed files with 246 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/assets/stylesheets/_config.scss
View File

@@ -48,99 +48,3 @@ $break-devices: (
large: px2em(2000px)
)
);
@function hex2rgb($hex) {
@return red($hex), green($hex), blue($hex);
}
// ----------------------------------------------------------------------------
// Variables: base colors
// ----------------------------------------------------------------------------
// Primary and accent colors
$md-color-primary: $clr-indigo-500 !default;
$md-color-accent: $clr-indigo-a200 !default;
// Shades of black
$md-color-black: hsla(0, 0%, 0%, 0.87) !default;
$md-color-black--light: hsla(0, 0%, 0%, 0.54) !default;
$md-color-black--lighter: hsla(0, 0%, 0%, 0.26) !default;
$md-color-black--lightest: hsla(0, 0%, 0%, 0.07) !default;
$md-color-black--transparent: hsla(0, 0%, 0%, 0) !default;
// Shades of white
$md-color-white: hsla(0, 0%, 100%, 1) !default;
$md-color-white--light: hsla(0, 0%, 100%, 0.7) !default;
$md-color-white--lighter: hsla(0, 0%, 100%, 0.3) !default;
$md-color-white--lightest: hsla(0, 0%, 100%, 0.12) !default;
$md-color-white--transparent: hsla(0, 0%, 100%, 0) !default;
// ----------------------------------------------------------------------------
// CSS Variables: base colors
// ----------------------------------------------------------------------------
:root {
// Primary and accent colors
--md-color-primary: #{$md-color-primary};
--md-color-primary-values: #{hex2rgb($md-color-primary)};
--md-color-accent: #{$md-color-accent};
--md-color-accent-values: #{hex2rgb($md-color-accent)};
// Shades of black
--md-color-text: #{$md-color-black};
--md-color-text-values: 0, 0, 0;
--md-color-text--light: #{$md-color-black--light};
--md-color-text--lighter: #{$md-color-black--lighter};
--md-color-text--lightest: #{$md-color-black--lightest};
--md-color-text--transparent: #{$md-color-black--transparent};
// Shades of white
--md-color-background: #{$md-color-white};
--md-color-background--light: #{$md-color-white--light};
--md-color-background--lighter: #{$md-color-white--lighter};
--md-color-background--lightest: #{$md-color-white--lightest};
--md-color-background--transparent: #{$md-color-white--transparent};
// Code blocks
--md-code-background: hsla(0, 0%, 92.5%, 0.5);
--md-code-color: #37474F;
}
:root.dark-mode {
// Primary and accent colors
--md-color-primary: #{$md-color-primary};
--md-color-accent: #{$md-color-accent};
// Shades of white
--md-color-background: #{$md-color-white};
--md-color-background--light: #{$md-color-white--light};
--md-color-background--lighter: #{$md-color-white--lighter};
--md-color-background--lightest: #{$md-color-white--lightest};
--md-color-background--transparent: #{$md-color-white--transparent};
// Shades of black
--md-color-text: #{$md-color-black};
--md-color-text-values: 255, 255, 255;
--md-color-text--light: #{$md-color-black--light};
--md-color-text--lighter: #{$md-color-black--lighter};
--md-color-text--lightest: #{$md-color-black--lightest};
--md-color-text--transparent: #{$md-color-black--transparent};
}
// ----------------------------------------------------------------------------
// Variables: sizing and spacing
// ----------------------------------------------------------------------------
// Icons
$md-icon-size: $ms-base * 1.5;
$md-icon-padding: $ms-base * 0.5;
$md-icon-margin: $ms-base * 0.25;
// Code blocks
$md-code-background: hsla(0, 0%, 92.5%, 0.5);
$md-code-gutter: #F6F6F6;
$md-code-color: #37474F;
// Keystrokes
$md-keyboard-background: #FCFCFC;
$md-keyboard-color: #555555;

2
src/assets/stylesheets/app-palette.scss
View File

@@ -33,7 +33,7 @@
// ----------------------------------------------------------------------------
@import "utilities/break";
@import "utilities/px2em";
@import "utilities/convert";
@import "config";

3
src/assets/stylesheets/app.scss
View File

@@ -33,11 +33,12 @@
// ----------------------------------------------------------------------------
@import "utilities/break";
@import "utilities/px2em";
@import "utilities/convert";
@import "config";
@import "base/reset";
@import "base/colors";
@import "base/icons";
@import "base/typeset";

56
src/assets/stylesheets/base/_colors.scss Normal file
View File

@@ -0,0 +1,56 @@
////
/// 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: colors
// ----------------------------------------------------------------------------
:root {
// Default color shades
--md-default-fg-color: hsla(0, 0%, 0%, 0.87);
--md-default-fg-color--light: hsla(0, 0%, 0%, 0.54);
--md-default-fg-color--lighter: hsla(0, 0%, 0%, 0.26);
--md-default-fg-color--lightest: hsla(0, 0%, 0%, 0.07);
--md-default-bg-color: hsla(0, 0%, 100%, 1);
--md-default-bg-color--light: hsla(0, 0%, 100%, 0.7);
--md-default-bg-color--lighter: hsla(0, 0%, 100%, 0.3);
--md-default-bg-color--lightest: hsla(0, 0%, 100%, 0.12);
// Primary color shades
--md-primary-fg-color: hsla(#{hex2hsl($clr-indigo-500)}, 1);
--md-primary-fg-color--light: hsla(#{hex2hsl($clr-indigo-300)}, 1);
--md-primary-fg-color--dark: hsla(#{hex2hsl($clr-indigo-700)}, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light);
// Accent color shades
--md-accent-fg-color: hsla(#{hex2hsl($clr-indigo-a200)}, 1);
--md-accent-fg-color--light: hsla(#{hex2hsl($clr-indigo-a200)}, 0.1);
--md-accent-fg-color--dark: hsla(#{hex2hsl($clr-indigo-a700)}, 1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light);
// Code block color shades
--md-code-bg-color: hsla(0, 0%, 92.5%, 0.5);
--md-code-fg-color: hsla(200, 18%, 26%, 1);
}

2
src/assets/stylesheets/base/_icons.scss
View File

@@ -35,7 +35,7 @@
cursor: pointer;
}
// Inherit current color
// SVG defaults
svg {
display: block;
width: px2rem(24px);

83
src/assets/stylesheets/base/_typeset.scss
View File

@@ -33,16 +33,16 @@ body {
// Default fonts
body,
input {
color: var(--md-color-text);
color: var(--md-default-fg-color);
font-feature-settings: "kern", "liga";
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
// Proportionally spaced fonts
pre,
code,
pre,
kbd {
color: var(--md-color-text);
color: var(--md-default-fg-color);
font-feature-settings: "kern";
font-family: "Courier New", Courier, monospace;
}
@@ -73,7 +73,7 @@ kbd {
// 1st level headline
h1 {
margin: 0 0 px2rem(40px);
color: var(--md-color-text--light);
color: var(--md-default-fg-color--light);
font-size: ms(3);
font-weight: 300;
letter-spacing: -0.01em;
@@ -115,7 +115,7 @@ kbd {
h5,
h6 {
margin: px2rem(16px) 0;
color: var(--md-color-text--light);
color: var(--md-default-fg-color--light);
font-size: ms(-1);
font-weight: 700;
letter-spacing: -0.01em;
@@ -129,12 +129,12 @@ kbd {
// Horizontal separators
hr {
margin: 1.5em 0;
border-bottom: px2rem(1px) dotted var(--md-color-text--lighter);
border-bottom: px2rem(1px) dotted var(--md-default-fg-color--lighter);
}
// Links
a {
color: var(--md-color-primary);
color: var(--md-primary-fg-color);
word-break: break-word;
// Also enable color transition on pseudo elements
@@ -146,7 +146,7 @@ kbd {
// Focused or hover links
&:focus,
&:hover {
color: var(--md-color-accent);
color: var(--md-accent-fg-color);
}
// Add URLs for print
@@ -154,7 +154,7 @@ kbd {
// Show link URL
&::after {
color: var(--md-color-text--light);
color: var(--md-default-fg-color--light);
content: " [" attr(href) "]";
}
}
@@ -162,9 +162,10 @@ kbd {
// Code blocks
code,
pre {
background-color: var(--md-code-background);
color: var(--md-code-color);
pre,
kbd {
background-color: var(--md-code-bg-color);
color: var(--md-code-fg-color);
font-size: 85%;
direction: ltr;
@@ -176,22 +177,16 @@ kbd {
// Inline code blocks, correct relative ems for smaller font size
code {
$correct: 1 / 0.85;
$f: 1 / 0.85;
margin: 0 0.25em * $correct;
padding: 0.0625em * $correct 0;
margin: 0 0.25em * $f;
padding: 0.0625em * $f 0;
border-radius: px2rem(2px);
box-shadow:
+0.25em * $correct 0 0 var(--md-code-background),
-0.25em * $correct 0 0 var(--md-code-background);
+0.25em * $f 0 0 var(--md-code-bg-color),
-0.25em * $f 0 0 var(--md-code-bg-color);
word-break: break-word;
box-decoration-break: clone;
// Remove box-shadows for print
@media print {
box-shadow: none;
box-decoration-break: initial;
}
}
// Disable containing block inside headlines
@@ -244,11 +239,11 @@ kbd {
// Scrollbar thumb
&::-webkit-scrollbar-thumb {
background-color: var(--md-color-text--lighter);
background-color: var(--md-default-fg-color--lighter);
// Hovered scrollbar thumb
&:hover {
background-color: var(--md-color-accent);
background-color: var(--md-accent-fg-color);
}
}
}
@@ -271,17 +266,19 @@ kbd {
// Keystrokes
kbd {
$correct: 1 / 0.85;
$f: 1 / 0.85;
padding: 0 0.25em * $correct;
border: px2rem(1px) solid darken($md-keyboard-background, 20%);
border-radius: px2rem(3px);
border-bottom-color: darken($md-keyboard-background, 25%);
background-color: $md-keyboard-background;
color: $md-keyboard-color;
font-size: 85%;
box-shadow: 0 px2rem(1px) 0 darken($md-keyboard-background, 30%);
display: inline-block;
padding: 0 0.5em * $f;
border-radius: px2rem(2px);
font-size: 0.75em;
line-height: 1.5;
box-shadow:
0 px2rem(2px) 0 px2rem(1px) var(--md-default-fg-color--lighter),
0 px2rem(2px) 0 var(--md-default-fg-color--lighter),
inset 0 px2rem(-2px) px2rem(4px) var(--md-default-bg-color);
word-break: break-word;
vertical-align: text-top;
}
// Text highlighting marker
@@ -299,7 +296,7 @@ kbd {
// Abbreviations
abbr {
border-bottom: px2rem(1px) dotted var(--md-color-text--light);
border-bottom: px2rem(1px) dotted var(--md-default-fg-color--light);
text-decoration: none;
cursor: help;
}
@@ -324,14 +321,14 @@ kbd {
// Blockquotes, possibly nested
blockquote {
padding-left: px2rem(12px);
border-left: px2rem(4px) solid var(--md-color-text--lighter);
color: var(--md-color-text--light);
border-left: px2rem(4px) solid var(--md-default-fg-color--lighter);
color: var(--md-default-fg-color--light);
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(12px);
padding-left: initial;
border-right: px2rem(4px) solid var(--md-color-text--lighter);
border-right: px2rem(4px) solid var(--md-default-fg-color--lighter);
border-left: initial;
}
}
@@ -423,7 +420,7 @@ kbd {
max-width: 100%;
border-radius: px2rem(2px);
font-size: ms(-1);
box-shadow: inset 0 0 0 px2rem(1px) var(--md-color-text--lightest);
box-shadow: inset 0 0 0 px2rem(1px) var(--md-default-fg-color--lightest);
overflow: auto;
-webkit-overflow-scrolling: touch;
@@ -449,15 +446,15 @@ kbd {
th {
min-width: px2rem(100px);
padding: px2rem(12px) px2rem(16px);
background-color: var(--md-color-text--light);
color: var(--md-color-background);
background-color: var(--md-default-fg-color--light);
color: var(--md-default-bg-color);
vertical-align: top;
}
// Table cells
td {
padding: px2rem(12px) px2rem(16px);
border-top: px2rem(1px) solid var(--md-color-text--lightest);
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
vertical-align: top;
}
@@ -468,7 +465,7 @@ kbd {
// Add background on hover
&:hover {
background-color: rgba(0, 0, 0, 0.035);
box-shadow: 0 px2rem(1px) 0 var(--md-color-background) inset;
box-shadow: 0 px2rem(1px) 0 var(--md-default-bg-color) inset;
}
// Remove top border on first row

8
src/assets/stylesheets/extensions/_admonition.scss
View File

@@ -36,7 +36,7 @@
font-size: ms(-1);
box-shadow:
inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85),
inset 1px 0 $clr-blue-a200;
inset px2rem(1px) 0 $clr-blue-a200;
overflow: auto;
// Adjust for right-to-left languages
@@ -45,7 +45,7 @@
border-left: none;
box-shadow:
inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85),
inset -1px 0 $clr-blue-a200;
inset px2rem(-1px) 0 $clr-blue-a200;
}
// Adjust spacing on last element
@@ -81,14 +81,14 @@
border-left-color: $tint;
box-shadow:
inset 0 0 0 px2rem(1px) transparentize($tint, 0.85),
inset 1px 0 $tint;
inset px2rem(1px) 0 $tint;
// Adjust for right-to-left languages
[dir="rtl"] & {
border-right-color: $tint;
box-shadow:
inset 0 0 0 px2rem(1px) transparentize($tint, 0.85),
inset -1px 0 $tint;
inset px2rem(-1px) 0 $tint;
}
// Title

10
src/assets/stylesheets/extensions/_codehilite.scss
View File

@@ -245,8 +245,8 @@ $codehilite-whitespace: transparent;
// Disable user selection, so code can be easily copied without
// accidentally also copying the line numbers
.linenos {
color: var(--md-color-text--lighter);
box-shadow: inset 0 0 0 px2rem(1px) $md-code-background;
color: var(--md-default-fg-color--lighter);
box-shadow: inset 0 0 0 px2rem(1px) var(--md-code-bg-color);
user-select: none;
// Reset spacings
@@ -273,9 +273,9 @@ $codehilite-whitespace: transparent;
margin-right: px2rem(12px);
margin-left: px2rem(-12px);
padding-left: px2rem(12px);
border-right: px2rem(1px) solid var(--md-color-text--lightest);
background-color: $md-code-gutter;
color: var(--md-color-text--lighter);
border-right: px2rem(1px) solid var(--md-default-fg-color--lightest);
background-color: #F6F6F6;
color: var(--md-default-fg-color--lighter);
content: attr(data-linenos);
user-select: none;

22
src/assets/stylesheets/extensions/_footnotes.scss
View File

@@ -60,7 +60,7 @@
// Footnotes extension
.footnote {
color: var(--md-color-text--light);
color: var(--md-default-fg-color--light);
font-size: ms(-1);
// Remove additional spacing on footnotes
@@ -74,7 +74,7 @@
// Darken color for targeted footnote
&:target {
color: var(--md-color-text);
color: var(--md-default-fg-color);
}
// Remove spacing on first element
@@ -92,7 +92,7 @@
// Active or targeted back reference
&:hover .footnote-backref:hover,
&:target .footnote-backref {
color: var(--md-color-accent);
color: var(--md-accent-fg-color);
}
}
}
@@ -106,7 +106,7 @@
&::before {
display: inline;
margin: 0 0.2em;
border-left: px2rem(1px) solid var(--md-color-text--lighter);
border-left: px2rem(1px) solid var(--md-default-fg-color--lighter);
font-size: 1.25em;
content: "";
vertical-align: px2rem(-5px);
@@ -118,10 +118,10 @@
display: inline-block;
transform: translateX(px2rem(5px));
transition:
transform 250ms 125ms,
transform 250ms 250ms,
color 250ms,
opacity 125ms 125ms;
color: var(--md-color-black--lighter);
opacity 125ms 250ms;
color: var(--md-default-fg-color--lighter);
// Hack: remove Unicode arrow for icon
font-size: 0;
opacity: 0;
@@ -138,12 +138,16 @@
width: px2rem(16px);
height: px2rem(16px);
background-color: currentColor;
mask-image: url("{{ anchor }}");
mask-image: url("{{ keyboard-return }}");
content: "";
// Adjust for right-to-left languages
[dir="rtl"] & {
transform: scaleX(-1)
// Flip icon vertically
svg {
transform: scaleX(-1)
}
}
}
}

16
src/assets/stylesheets/extensions/_permalinks.scss
View File

@@ -35,12 +35,12 @@
transition:
transform 250ms 250ms,
color 250ms,
opacity 125ms 250ms;
// visibility 0ms 500ms;
opacity 125ms 250ms,
visibility 0ms 500ms;
opacity: 0;
// Hack: If we don't set visibility hidden, the text content of the node
// will include the headerlink character, which is why Google indexes them.
// visibility: hidden;
visibility: hidden;
// Adjust for RTL languages
[dir="rtl"] & {
@@ -50,7 +50,7 @@
// Higher specificity for color due to palettes integration
html body & {
color: var(--md-color-text--lighter);
color: var(--md-default-fg-color--lighter);
}
// Hide for print
@@ -67,17 +67,17 @@
transition:
transform 250ms 250ms,
color 250ms,
opacity 125ms 250ms;
// visibility 0ms;
opacity 125ms 250ms,
visibility 0ms;
opacity: 1;
// visibility: visible;
visibility: visible;
}
// Active or targeted permalink
.headerlink:focus,
.headerlink:hover,
:target .headerlink {
color: var(--md-color-accent);
color: var(--md-accent-fg-color);
}
// Correct anchor offset for link blurring

2
src/assets/stylesheets/extensions/pymdown/_details.scss
View File

@@ -81,7 +81,7 @@
right: px2rem(12px);
width: px2rem(20px);
height: px2rem(20px);
background-color: var(--md-color-black--lighter);
background-color: var(--md-default-fg-color--lighter);
mask-image: url("{{ chevron-down }}");
content: "";

8
src/assets/stylesheets/extensions/pymdown/_tabbed.scss
View File

@@ -32,7 +32,7 @@
display: none;
order: 99;
width: 100%;
background-color: var(--md-color-background);
background-color: var(--md-default-bg-color);
// Actual content
pre {
@@ -47,7 +47,7 @@
position: relative;
flex-wrap: wrap;
margin: 1em 0;
border: px2rem(1px) solid var(--md-color-text--lightest);
border: px2rem(1px) solid var(--md-default-fg-color--lightest);
border-radius: 0.2em;
// Hide radio buttons
@@ -95,7 +95,7 @@
// Hovered tab label
html &:hover {
color: var(--md-color-accent);
color: var(--md-accent-fg-color);
}
}
}
@@ -107,7 +107,7 @@
@include break-to-device(mobile) {
margin: 1em px2rem(-16px);
border: 0;
border-top: px2rem(1px) solid var(--md-color-text--lightest);
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
border-radius: 0;
// Actual container with code, overflowing

2
src/assets/stylesheets/extensions/pymdown/_tasklist.scss
View File

@@ -57,7 +57,7 @@
left: px2em(-24px);
width: px2em(20px);
height: px2em(20px);
background-color: var(--md-color-black--lightest);
background-color: var(--md-default-fg-color--lightest);
mask-image: url("{{ checkbox-blank-circle }}");
content: "";

6
src/assets/stylesheets/layout/_announce.scss
View File

@@ -25,14 +25,14 @@
// ----------------------------------------------------------------------------
// Announcement bar
.md-announcement {
background-color: var(--md-color-text);
.md-announce {
background-color: var(--md-default-fg-color);
// Actual content
&__inner {
min-height: px2rem(48px);
padding: 0 px2rem(16px);
color: var(--md-color-background);
color: var(--md-default-bg-color);
font-size: px2rem(14px);
line-height: px2rem(48px);
}

8
src/assets/stylesheets/layout/_base.scss
View File

@@ -36,7 +36,7 @@ $md-toggle__drawer--checked:
// calculations base on relative ems (rems)
html {
min-height: 100%;
background-color: var(--md-color-background);
background-color: var(--md-default-bg-color);
// Hack: normally, we would set the base font-size to 62.5%, so we can base
// all calculations on 10px, but Chromium and Chrome define a minimal font
// size of 12 if the system language is set to Chinese. For this reason we
@@ -146,7 +146,7 @@ hr {
width 0ms 250ms,
height 0ms 250ms,
opacity 250ms;
background-color: var(--md-color-black--light);
background-color: var(--md-default-fg-color--light);
opacity: 0;
z-index: 3;
@@ -177,8 +177,8 @@ hr {
padding: px2rem(6px) px2rem(10px);
transform: translateY(px2rem(8px));
border-radius: px2rem(2px);
background-color: var(--md-color-text);
color: var(--md-color-background);
background-color: var(--md-default-fg-color);
color: var(--md-default-bg-color);
font-size: ms(-1);
opacity: 0;

6
src/assets/stylesheets/layout/_clipboard.scss
View File

@@ -33,7 +33,7 @@
height: px2rem(24px);
transition: color 250ms;
border-radius: px2rem(2px);
color: var(--md-color-text--lightest);
color: var(--md-default-fg-color--lightest);
cursor: pointer;
z-index: 1;
// Hack: put everything on the GPU to omit flickering
@@ -52,12 +52,12 @@
// Show on container hover
pre:hover & {
color: var(md-color-text--light);
color: var(--md-default-fg-color--light);
}
// Focused or hovered icon
pre &:focus,
pre &:hover {
color: var(--md-color-accent);
color: var(--md-accent-fg-color);
}
}

2
src/assets/stylesheets/layout/_content.scss
View File

@@ -94,7 +94,7 @@
// Override default link color for icons
.md-typeset & {
color: var(--md-color-text--lighter);
color: var(--md-default-fg-color--lighter);
}
// Align text with icon

4
src/assets/stylesheets/layout/_dialog.scss
View File

@@ -41,8 +41,8 @@
opacity 400ms;
border: none;
border-radius: px2rem(2px);
background: var(--md-color-text);
color: var(--md-color-background);
background: var(--md-default-fg-color);
color: var(--md-default-bg-color);
font-size: px2rem(14px);
opacity: 0;
z-index: 2;

16
src/assets/stylesheets/layout/_footer.scss
View File

@@ -26,6 +26,8 @@
// Application footer
.md-footer {
background-color: var(--md-default-fg-color);
color: var(--md-default-bg-color);
// Hide for print
@media print {
@@ -35,8 +37,6 @@
// Navigation within footer
.md-footer-nav {
background-color: var(--md-color-text);
color: var(--md-color-background);
// Set spacing
&__inner {
@@ -123,14 +123,14 @@
left: 0;
margin-top: px2rem(-20px);
padding: 0 px2rem(20px);
color: var(--md-color-background--light);
color: var(--md-default-bg-color--light);
font-size: px2rem(15px);
}
}
// Non-navigational information
.md-footer-meta {
background-color: rgba(var(--md-color-text-values), 1.025);
background-color: var(--md-default-fg-color--lighter);
// Set spacing
&__inner {
@@ -140,12 +140,12 @@
// Use a decent color for non-hovered links and ensure specificity
html &.md-typeset a {
color: var(--md-color-background--light);
color: var(--md-default-bg-color--light);
// Focused or hovered link
&:focus,
&:hover {
color: var(--md-color-background);
color: var(--md-default-bg-color);
}
}
}
@@ -154,7 +154,7 @@
.md-footer-copyright {
margin: 0 px2rem(12px);
padding: px2rem(8px) 0;
color: var(--md-color-background--lighter);
color: var(--md-default-bg-color--lighter);
font-size: ms(-1);
// [tablet portrait +]: Show next to social media links
@@ -170,7 +170,7 @@
// Highlight copyright information
&__highlight {
color: var(--md-color-background--light);
color: var(--md-default-bg-color--light);
}
}

4
src/assets/stylesheets/layout/_header.scss
View File

@@ -34,8 +34,8 @@
transition:
background-color 250ms,
color 250ms;
background-color: var(--md-color-primary);
color: var(--md-color-background);
background-color: var(--md-primary-fg-color);
color: var(--md-primary-bg-color);
box-shadow: none;
z-index: 2;
// Hack: putting the header on the GPU avoids unnecessary repaints

4
src/assets/stylesheets/layout/_hero.scss
View File

@@ -27,8 +27,8 @@
// Hero teaser
.md-hero {
transition: background 250ms;
background-color: var(--md-color-primary);
color: var(--md-color-background);
background-color: var(--md-primary-fg-color);
color: var(--md-primary-bg-color);
font-size: ms(1);
overflow: hidden;

27
src/assets/stylesheets/layout/_nav.scss
View File

@@ -118,12 +118,12 @@
// Blurred link
&[data-md-state="blur"] {
color: var(--md-color-text--light);
color: var(--md-default-fg-color--light);
}
// Active link
.md-nav__item &--active {
color: var(--md-color-primary);
color: var(--md-primary-fg-color);
}
// Reset active color for nested list titles
@@ -134,7 +134,7 @@
// Focused or hovered link
&:focus,
&:hover {
color: var(--md-color-accent);
color: var(--md-accent-fg-color);
}
}
@@ -145,7 +145,7 @@
// [tablet -]: Layered navigation
@include break-to-device(tablet) {
background-color: var(--md-color-background);
background-color: var(--md-default-bg-color);
// Stretch primary navigation to drawer
&--primary,
@@ -175,8 +175,8 @@
position: relative;
height: px2rem(112px);
padding: px2rem(60px) px2rem(16px) px2rem(4px);
background-color: var(--md-color-text--lightest);
color: var(--md-color-text--light);
background-color: var(--md-default-fg-color--lightest);
color: var(--md-default-fg-color--light);
font-weight: 400;
line-height: px2rem(48px);
white-space: nowrap;
@@ -201,8 +201,9 @@
// Main lists
~ .md-nav__list {
background-color: var(--md-color-background);
box-shadow: inset 0 px2rem(1px) 0 var(--md-color-text--lightest);
background-color: var(--md-default-bg-color);
box-shadow:
inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest);
overflow-y: auto;
scroll-snap-type: y mandatory;
@@ -215,8 +216,8 @@
// Site title in main navigation
&[for="__drawer"] {
position: relative;
background-color: var(--md-color-primary);
color: var(--md-color-background);
background-color: var(--md-primary-fg-color);
color: var(--md-primary-bg-color);
// Site logo
.md-nav__button {
@@ -251,7 +252,7 @@
// List item
.md-nav__item {
padding: 0;
border-top: px2rem(1px) solid var(--md-color-text--lightest);
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
// Adjust for right-to-left languages
[dir="rtl"] & {
@@ -421,8 +422,8 @@
&__source {
display: block;
padding: 0 px2rem(4px);
background-color: var(--md-color-primary); // mix(var(--md-color-primary), $md-color-black, 75%); // TODO: fix calculation https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
color: var(--md-color-background);
background-color: var(--md-primary-fg-color--dark);
color: var(--md-primary-bg-color);
}
}

48
src/assets/stylesheets/layout/_search.scss
View File

@@ -63,7 +63,7 @@ $md-toggle__search--checked:
transform 300ms 100ms,
opacity 200ms 200ms;
border-radius: px2rem(20px);
background-color: var(--md-color-background);
background-color: var(--md-default-bg-color);
overflow: hidden;
pointer-events: none;
@@ -112,7 +112,7 @@ $md-toggle__search--checked:
width 0ms 250ms,
height 0ms 250ms,
opacity 250ms;
background-color: var(--md-color-black--light);
background-color: var(--md-default-fg-color--light);
cursor: pointer;
// Adjust for right-to-left languages
@@ -238,7 +238,7 @@ $md-toggle__search--checked:
// Placeholder and icon color in active state
~ .md-search__icon,
&::placeholder {
color: var(--md-color-text--light);
color: var(--md-default-fg-color--light);
}
// Remove the "x" rendered by Internet Explorer
@@ -262,7 +262,7 @@ $md-toggle__search--checked:
background-color 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
color 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
border-radius: px2rem(2px);
background-color: var(--md-color-text--lighter);
background-color: var(--md-default-fg-color--lighter);
color: inherit;
font-size: ms(0);
@@ -273,30 +273,30 @@ $md-toggle__search--checked:
// Icon color
+ .md-search__icon {
color: var(--md-color-background);
color: var(--md-primary-bg-color);
}
// Placeholder color
&::placeholder {
color: var(--md-color-background--light);
color: var(--md-primary-bg-color--light);
}
// Hovered search field
&:hover {
background-color: var(--md-color-background--lightest);
background-color: var(--md-default-bg-color--lightest);
}
// Set light background on active search field
#{$md-toggle__search--checked} & {
border-radius: px2rem(2px) px2rem(2px) 0 0;
background-color: var(--md-color-background);
color: var(--md-color-text);
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color);
text-overflow: clip;
// Placeholder and icon color in active state
+ .md-search__icon,
&::placeholder {
color: var(--md-color-text--light);
color: var(--md-default-fg-color--light);
}
}
}
@@ -310,7 +310,6 @@ $md-toggle__search--checked:
transition:
color 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 250ms;
font-size: $md-icon-size;
cursor: pointer;
z-index: 2;
@@ -435,7 +434,7 @@ $md-toggle__search--checked:
// Wrapper for scrolling on overflow
&__scrollwrap {
height: 100%;
background-color: var(--md-color-background);
background-color: var(--md-default-bg-color);
box-shadow: inset 0 px2rem(1px) 0 var(md-color-text--lightest);
overflow-y: auto;
scroll-snap-type: y mandatory;
@@ -473,11 +472,11 @@ $md-toggle__search--checked:
// Scrollbar thumb
&::-webkit-scrollbar-thumb {
background-color: var(--md-color-text--lighter);
background-color: var(--md-default-fg-color--lighter);
// Hovered scrollbar thumb
&:hover {
background-color: var(--md-color-accent);
background-color: var(--md-accent-fg-color);
}
}
}
@@ -486,14 +485,14 @@ $md-toggle__search--checked:
// Search result
.md-search-result {
color: var(--md-color-text);
color: var(--md-default-fg-color);
word-break: break-word;
// Search metadata
&__meta {
padding: 0 px2rem(16px);
background-color: var(--md-color-text--lightest);
color: var(--md-color-text--light);
background-color: var(--md-default-fg-color--lightest);
color: var(--md-default-fg-color--light);
font-size: ms(-1);
line-height: px2rem(36px);
scroll-snap-align: start;
@@ -514,13 +513,13 @@ $md-toggle__search--checked:
&__list {
margin: 0;
padding: 0;
border-top: px2rem(1px) solid var(--md-color-text--lightest);
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
list-style: none;
}
// List item
&__item {
box-shadow: 0 px2rem(-1px) 0 var(--md-color-text--lightest);
box-shadow: 0 px2rem(-1px) 0 var(--md-default-fg-color--lightest);
}
// Link inside item
@@ -534,7 +533,7 @@ $md-toggle__search--checked:
// Focused or hovered link
&:focus,
&:hover {
background-color: rgba(var(--md-color-accent-values), 0.9);
background-color: var(--md-accent-fg-color--light);
// Slightly transparent icon
.md-search-result__article::before {
@@ -584,12 +583,17 @@ $md-toggle__search--checked:
left: 0;
margin: px2rem(2px);
transition: opacity 250ms;
color: var(--md-color-text--light);
color: var(--md-default-fg-color--light);
// Adjust for right-to-left languages
[dir="rtl"] & {
right: 0;
left: initial;
// Flip icon vertically
svg {
transform: scaleX(-1);
}
}
// [tablet portrait -]: Hide page icon
@@ -613,7 +617,7 @@ $md-toggle__search--checked:
display: -webkit-box;
max-height: px2rem(33px);
margin: 0.5em 0;
color: var(--md-color-text--light);
color: var(--md-default-fg-color--light);
font-size: ms(-1);
line-height: 1.4;
text-overflow: ellipsis;

6
src/assets/stylesheets/layout/_sidebar.scss
View File

@@ -64,7 +64,7 @@ $md-toggle__drawer--checked:
transition:
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 250ms;
background-color: var(--md-color-background);
background-color: var(--md-default-bg-color);
z-index: 3;
// Adjust for right-to-left languages
@@ -158,11 +158,11 @@ $md-toggle__drawer--checked:
// Scrollbar thumb
&::-webkit-scrollbar-thumb {
background-color: var(--md-color-text--lighter);
background-color: var(--md-default-fg-color--lighter);
// Hovered scrollbar thumb
&:hover {
background-color: var(--md-color-accent);
background-color: var(--md-accent-fg-color);
}
}
}

4
src/assets/stylesheets/layout/_tabs.scss
View File

@@ -28,8 +28,8 @@
.md-tabs {
width: 100%;
transition: background 250ms;
background-color: var(--md-color-primary);
color: var(--md-color-background);
background-color: var(--md-primary-fg-color);
color: var(--md-primary-bg-color);
overflow: auto;
// Omit transitions, in case JavaScript is not available

14
src/assets/stylesheets/utilities/_px2em.scss → src/assets/stylesheets/utilities/_convert.scss
View File

@@ -20,12 +20,22 @@
/// DEALINGS
////
// stylelint-disable unit-whitelist
// ----------------------------------------------------------------------------
// Helpers
// ----------------------------------------------------------------------------
///
/// Convert color in HEX to HSL
///
@function hex2hsl($color) {
@return
round(hue($color)),
round(saturation($color)),
round(lightness($color));
}
// ----------------------------------------------------------------------------
///
/// Convert font size in px to em
///

8
src/base.html
View File

@@ -216,10 +216,10 @@
{% endif %}
<!-- Announcement bar -->
{% if self.announcement() %}
<aside class="md-announcement" data-md-component="announcement">
<div class="md-announcement__inner md-grid md-typeset">
{% block announcement %}{% endblock %}
{% if self.announce() %}
<aside class="md-announce" data-md-component="announce">
<div class="md-announce__inner md-grid md-typeset">
{% block announce %}{% endblock %}
</div>
</aside>
{% endif %}