adoralaura/hugo-book-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

#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
Show stats Download patch file Download diff file Expand all files Collapse all files

7
README.md
View file

@ -139,6 +139,10 @@ enableGitInfo = true
disableKinds = ['taxonomy', 'taxonomyTerm']
[params]
# (Optional, default light) Sets color theme: light, dark or auto.
# Theme 'auto' switches between dark and light modes based on browser/os preferences
BookTheme = 'light'
# (Optional, default true) Controls table of contents visibility on right side of pages.
# Start and end levels can be controlled with markup.tableOfContents setting.
# You can also specify this parameter per page in front matter.
@ -252,11 +256,10 @@ There are a few features implemented as plugable `scss` styles. Usually these ar
| Plugin | Description |
| --------------------------------- | ----------------------------------------------------------- |
| `assets/plugins/_dark.scss` | Switches site to dark mode |
| `assets/plugins/_numbered.scss` | Makes headings in markdown numbered, e.g. `1.1`, `1.2` |
| `assets/plugins/_scrollbars.scss` | Overrides scrollbar styles to look similar across platforms |
To enable plugins, add `@import "plugins/{name}";` to `assets/_custom.scss` in your website root. One exception is `_dark.scss` which contains variables only and should be added to `assets/_variables.scss`.
To enable plugins, add `@import "plugins/{name}";` to `assets/_custom.scss` in your website root.
### Hugo Internal Templates

58
assets/_defaults.scss
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;
}

20
assets/_main.scss
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 {

21
assets/_markdown.scss
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 {

16
assets/_shortcodes.scss
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;

1
assets/book.scss
View file

@ -1,5 +1,6 @@
@import "defaults";
@import "variables";
@import "themes/{{ default "auto" .Site.Params.BookTheme }}";
@import "normalize";
@import "utils";

10
assets/plugins/_dark.scss
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);

6
assets/plugins/_scrollbars.scss
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);
}

9
assets/themes/_auto.scss Normal file
View file

@ -0,0 +1,9 @@
:root {
@include theme-light;
}
@media (prefers-color-scheme: dark) {
:root {
@include theme-dark;
}
}

3
assets/themes/_dark.scss Normal file
View file

@ -0,0 +1,3 @@
:root {
@include theme-dark;
}

3
assets/themes/_light.scss Normal file
View file

@ -0,0 +1,3 @@
:root {
@include theme-light;
}

4
exampleSite/config.toml
View file

@ -49,6 +49,10 @@ enableGitInfo = true
weight = 20
[params]
# (Optional, default light) Sets color theme: light, dark or auto.
# Theme 'auto' switches between dark and light modes based on browser/os preferences
BookTheme = 'light'
# (Optional, default true) Controls table of contents visibility on right side of pages.
# Start and end levels can be controlled with markup.tableOfContents setting.
# You can also specify this parameter per page in front matter.

4
exampleSite/config.yaml
View file

@ -45,6 +45,10 @@ menu:
weight: 20
params:
# (Optional, default light) Sets color theme: light, dark or auto.
# Theme 'auto' switches between dark and light modes based on browser/os preferences
BookTheme: "light"
# (Optional, default true) Controls table of contents visibility on right side of pages.
# Start and end levels can be controlled with markup.tableOfContents setting.
# You can also specify this parameter per page in front matter.

2
exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.content
View file

File diff suppressed because one or more lines are too long

2
exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json
View file

@ -1 +1 @@
{"Target":"book.min.6cd8553a6854f4812343f0f0c8baca31271e686434f381fbe3c7226f66639176.css","MediaType":"text/css","Data":{"Integrity":"sha256-bNhVOmhU9IEjQ/DwyLrKMSceaGQ084H748cib2ZjkXY="}}
{"Target":"book.min.4194921b4c7ff04cd7c5b17f3ac51f141158e219fa9deb989de5e50f624ca88f.css","MediaType":"text/css","Data":{"Integrity":"sha256-QZSSG0x/8EzXxbF/OsUfFBFY4hn6neuYneXlD2JMqI8="}}