hugo-book
Code Issues

#151, move SCSS vars to CSS vars, implement dark and light modes by browser preference

Browse Source
This commit is contained in:
Alex Shpak
2020-09-14 00:02:55 +02:00
parent 6beca7928c
commit 4e34988b5d
15 changed files with 100 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/_defaults.scss
+37 -21
View File
@@ -11,24 +11,6 @@ $font-size-16: 1rem !default;
$border-radius: $padding-4 !default;
// Grayscale
$white: #ffffff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
$color-link: #05b !default;
$color-visited-link: #8440f1 !default;
$body-background: white !default;
$body-font-color: $black !default;
$body-font-weight: normal !default;
$body-min-width: 20rem !default;
@@ -40,11 +22,45 @@ $toc-width: 16rem !default;
$mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;
// Hint colors
$hint-colors: (
info: #6bf,
warning: #fd6,
danger: #f66
danger: #f66,
) !default;
$icon-filter: none !default;
// Themes
@mixin theme-light {
--gray-100: #f8f9fa;
--gray-200: #e9ecef;
--gray-500: #adb5bd;
--color-link: #0055bb;
--color-visited-link: #8440f1;
--body-background: white;
--body-font-color: black;
--icon-filter: none;
--hint-color-info: #6bf;
--hint-color-warning: #fd6;
--hint-color-danger: #f66;
}
@mixin theme-dark {
--gray-100: rgba(255, 255, 255, 0.1);
--gray-200: rgba(255, 255, 255, 0.2);
--gray-500: rgba(255, 255, 255, 0.5);
--color-link: #84b2ff;
--color-visited-link: #b88dff;
--body-background: #343a40;
--body-font-color: #e9ecef;
--icon-filter: brightness(0) invert(1);
--hint-color-info: #6bf;
--hint-color-warning: #fd6;
--hint-color-danger: #f66;
}
assets/_main.scss
+10 -10
View File
@@ -6,8 +6,8 @@ html {
body {
min-width: $body-min-width;
color: $body-font-color;
background: $body-background;
color: var(--body-font-color);
background: var(--body-background);
letter-spacing: 0.33px;
font-weight: $body-font-weight;
@@ -31,7 +31,7 @@ h5 {
a {
text-decoration: none;
color: $color-link;
color: var(--color-link);
}
img {
@@ -81,7 +81,7 @@ ul.pagination {
}
.book-icon {
filter: $icon-filter;
filter: var(--icon-filter);
}
.book-brand {
@@ -102,7 +102,7 @@ ul.pagination {
nav {
width: $menu-width;
padding: $padding-16;
background: $body-background;
background: var(--body-background);
@include fixed;
}
@@ -113,7 +113,7 @@ ul.pagination {
}
a.active {
color: $color-link;
color: var(--color-link);
}
a.collapsed {
@@ -174,8 +174,8 @@ ul.pagination {
border: 0;
border-radius: $border-radius;
background: $gray-100;
color: $body-font-color;
background: var(--gray-100);
color: var(--body-font-color);
&:required + .book-search-spinner {
display: block;
@@ -192,7 +192,7 @@ ul.pagination {
height: $padding-16;
border: $padding-1 solid transparent;
border-top-color: $body-font-color;
border-top-color: var(--body-font-color);
border-radius: 50%;
@include spin(1s);
@@ -271,7 +271,7 @@ ul.pagination {
left: 0;
padding: $padding-8 0;
background: $body-background;
background: var(--body-background);
box-shadow: 0 0 $padding-4 rgba(0, 0, 0, 0.1);
li img {
assets/_markdown.scss
+11 -10
View File
@@ -21,12 +21,13 @@
a.anchor {
opacity: 0;
font-size: .75em;
font-size: 0.75em;
vertical-align: middle;
text-decoration: none;
}
&:hover a.anchor, a.anchor:focus {
&:hover a.anchor,
a.anchor:focus {
opacity: initial;
}
}
@@ -58,7 +59,7 @@
text-decoration: underline;
}
&:visited {
color: $color-visited-link;
color: var(--color-visited-link);
}
}
@@ -68,14 +69,14 @@
code {
padding: 0 $padding-4;
background: $gray-200;
background: var(--gray-200);
border-radius: $border-radius;
font-size: 0.875em;
}
pre {
padding: $padding-16;
background: $gray-100;
background: var(--gray-100);
border-radius: $border-radius;
overflow-x: auto;
@@ -89,7 +90,7 @@
margin: $padding-16 0;
padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
border-inline-start: $padding-4 solid $gray-200;
border-inline-start: $padding-4 solid var(--gray-200);
border-radius: $border-radius;
:first-child {
@@ -111,18 +112,18 @@
tr th,
tr td {
padding: $padding-8 $padding-16;
border: $padding-1 solid $gray-200;
border: $padding-1 solid var(--gray-200);
}
tr:nth-child(2n) {
background: $gray-100;
background: var(--gray-100);
}
}
hr {
height: $padding-1;
border: none;
background: $gray-200;
background: var(--gray-200);
}
ul,
@@ -156,7 +157,7 @@
details {
padding: $padding-16;
border: $padding-1 solid $gray-200;
border: $padding-1 solid var(--gray-200);
border-radius: $border-radius;
summary {
assets/_shortcodes.scss
+8 -8
View File
@@ -4,13 +4,13 @@
margin-top: $padding-16;
margin-bottom: $padding-16;
border: $padding-1 solid $gray-200;
border: $padding-1 solid var(--gray-200);
border-radius: $border-radius;
overflow: hidden;
.book-expand-head {
background: $gray-100;
background: var(--gray-100);
padding: $padding-8 $padding-16;
cursor: pointer;
}
@@ -30,7 +30,7 @@
margin-top: $padding-16;
margin-bottom: $padding-16;
border: $padding-1 solid $gray-200;
border: $padding-1 solid var(--gray-200);
border-radius: $border-radius;
overflow: hidden;
@@ -48,19 +48,19 @@
.book-tabs-content {
order: 999; //Move content blocks to the end
width: 100%;
border-top: $padding-1 solid $gray-100;
border-top: $padding-1 solid var(--gray-100);
padding: $padding-16;
display: none;
}
input[type="radio"]:checked + label {
border-bottom: $padding-1 solid $color-link;
border-bottom: $padding-1 solid var(--color-link);
}
input[type="radio"]:checked + label + .book-tabs-content {
display: block;
}
input[type="radio"]:focus + label {
@include outline
@include outline;
}
}
@@ -80,10 +80,10 @@
a.book-btn {
display: inline-block;
font-size: $font-size-14;
color: $color-link;
color: var(--color-link);
line-height: $padding-16 * 2;
padding: 0 $padding-16;
border: $padding-1 solid $color-link;
border: $padding-1 solid var(--color-link);
border-radius: $border-radius;
cursor: pointer;
assets/book.scss
+1
View File
@@ -1,5 +1,6 @@
@import "defaults";
@import "variables";
@import "themes/{{ default "auto" .Site.Params.BookTheme }}";
@import "normalize";
@import "utils";
assets/plugins/_dark.scss
-10
View File
@@ -1,10 +0,0 @@
$gray-100: rgba(255, 255, 255, 0.1);
$gray-200: rgba(255, 255, 255, 0.2);
$body-background: #343a40;
$body-font-color: #e9ecef;
$color-link: #84b2ff;
$color-visited-link: #b88dff;
$icon-filter: brightness(0) invert(1);
assets/plugins/_scrollbars.scss
+3 -3
View File
@@ -12,15 +12,15 @@
}
:hover::-webkit-scrollbar-thumb {
background: $gray-500;
background: var(--gray-500);
}
// MS
body {
-ms-overflow-style: -ms-autohiding-scrollbar
-ms-overflow-style: -ms-autohiding-scrollbar;
}
// Future
.book-menu nav {
scrollbar-color: transparent $gray-500;
scrollbar-color: transparent var(--gray-500);
}
assets/themes/_auto.scss
+9
View File
@@ -0,0 +1,9 @@
:root {
@include theme-light;
}
@media (prefers-color-scheme: dark) {
:root {
@include theme-dark;
}
}
assets/themes/_dark.scss
+3
View File
@@ -0,0 +1,3 @@
:root {
@include theme-dark;
}
assets/themes/_light.scss
+3
View File
@@ -0,0 +1,3 @@
:root {
@include theme-light;
}