Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/alex-shpak/hugo-book.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAlex Shpak <alex-shpak@users.noreply.github.com>2020-09-14 01:02:55 +0300
committerAlex Shpak <alex-shpak@users.noreply.github.com>2020-09-14 01:02:55 +0300
commit4e34988b5db9f4e78e1d27458e867be9a8f2db84 (patch)
treed0de0934017cd76493106c7af346f2373dda5518
parent6beca7928c20364462859f5af57da6182582d14c (diff)
#151, move SCSS vars to CSS vars, implement dark and light modes by browser preference
-rw-r--r--README.md7
-rw-r--r--assets/_defaults.scss58
-rw-r--r--assets/_main.scss20
-rw-r--r--assets/_markdown.scss21
-rw-r--r--assets/_shortcodes.scss16
-rw-r--r--assets/book.scss1
-rw-r--r--assets/plugins/_dark.scss10
-rw-r--r--assets/plugins/_scrollbars.scss6
-rw-r--r--assets/themes/_auto.scss9
-rw-r--r--assets/themes/_dark.scss3
-rw-r--r--assets/themes/_light.scss3
-rw-r--r--exampleSite/config.toml4
-rw-r--r--exampleSite/config.yaml4
-rw-r--r--exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.content2
-rw-r--r--exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json2
15 files changed, 100 insertions, 66 deletions
diff --git a/README.md b/README.md
index 7b92567..769635e 100644
--- a/README.md
+++ b/README.md
@@ -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
diff --git a/assets/_defaults.scss b/assets/_defaults.scss
index 94e7357..4c86697 100644
--- a/assets/_defaults.scss
+++ b/assets/_defaults.scss
@@ -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;
+}
diff --git a/assets/_main.scss b/assets/_main.scss
index b8a0e5d..5cf81d0 100644
--- a/assets/_main.scss
+++ b/assets/_main.scss
@@ -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 {
diff --git a/assets/_markdown.scss b/assets/_markdown.scss
index 009473d..e71de43 100644
--- a/assets/_markdown.scss
+++ b/assets/_markdown.scss
@@ -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 {
diff --git a/assets/_shortcodes.scss b/assets/_shortcodes.scss
index 7802078..714de2a 100644
--- a/assets/_shortcodes.scss
+++ b/assets/_shortcodes.scss
@@ -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;
diff --git a/assets/book.scss b/assets/book.scss
index 68f6318..f3b833b 100644
--- a/assets/book.scss
+++ b/assets/book.scss
@@ -1,5 +1,6 @@
@import "defaults";
@import "variables";
+@import "themes/{{ default "auto" .Site.Params.BookTheme }}";
@import "normalize";
@import "utils";
diff --git a/assets/plugins/_dark.scss b/assets/plugins/_dark.scss
deleted file mode 100644
index 5796a89..0000000
--- a/assets/plugins/_dark.scss
+++ /dev/null
@@ -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);
diff --git a/assets/plugins/_scrollbars.scss b/assets/plugins/_scrollbars.scss
index fb46543..0062582 100644
--- a/assets/plugins/_scrollbars.scss
+++ b/assets/plugins/_scrollbars.scss
@@ -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);
}
diff --git a/assets/themes/_auto.scss b/assets/themes/_auto.scss
new file mode 100644
index 0000000..31d7f9a
--- /dev/null
+++ b/assets/themes/_auto.scss
@@ -0,0 +1,9 @@
+:root {
+ @include theme-light;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ @include theme-dark;
+ }
+}
diff --git a/assets/themes/_dark.scss b/assets/themes/_dark.scss
new file mode 100644
index 0000000..e00e38e
--- /dev/null
+++ b/assets/themes/_dark.scss
@@ -0,0 +1,3 @@
+:root {
+ @include theme-dark;
+}
diff --git a/assets/themes/_light.scss b/assets/themes/_light.scss
new file mode 100644
index 0000000..8c0e346
--- /dev/null
+++ b/assets/themes/_light.scss
@@ -0,0 +1,3 @@
+:root {
+ @include theme-light;
+}
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 424d320..2db8e57 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -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.
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 2a4bc33..0367f8e 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -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.
diff --git a/exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.content b/exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.content
index 99d483a..78e6266 100644
--- a/exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.content
+++ b/exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.content
@@ -1 +1 @@
-@charset "UTF-8";/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.flex{display:flex}.flex-auto{flex:1 1 auto}.flex-even{flex:1 1}.flex-wrap{flex-wrap:wrap}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.align-center{align-items:center}.mx-auto{margin:0 auto}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.hidden{display:none}input.toggle{height:0;width:0;overflow:hidden;opacity:0;position:absolute}.clearfix::after{content:"";display:table;clear:both}html{font-size:16px;scroll-behavior:smooth;touch-action:manipulation}body{min-width:20rem;color:#000;background:#fff;letter-spacing:.33px;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}body *{box-sizing:inherit}h1,h2,h3,h4,h5{font-weight:400}a{text-decoration:none;color:#05b}img{vertical-align:baseline}:focus{outline-style:auto;outline-color:currentColor;outline-color:-webkit-focus-ring-color}aside nav ul{padding:0;margin:0;list-style:none}aside nav ul li{margin:1em 0;position:relative}aside nav ul a{display:block}aside nav ul a:hover{opacity:.5}aside nav ul ul{padding-inline-start:1rem}ul.pagination{display:flex;justify-content:center;list-style-type:none}ul.pagination .page-item a{padding:1rem}.container{max-width:80rem;margin:0 auto}.book-icon{filter:none}.book-brand{margin-top:0}.book-brand img{height:1.5em;width:auto;vertical-align:middle;margin-inline-end:.5rem}.book-menu{flex:0 0 16rem;font-size:.875rem}.book-menu nav{width:16rem;padding:1rem;background:#fff;position:fixed;top:0;bottom:0;overflow-x:hidden;overflow-y:auto}.book-menu a{color:inherit;word-wrap:break-word}.book-menu a.active{color:#05b}.book-menu a.collapsed{display:flex;justify-content:space-between}.book-menu a.collapsed::after{content:"▸"}.book-section-flat{margin-bottom:2rem}.book-section-flat:not(:first-child){margin-top:2rem}.book-section-flat>a,.book-section-flat>span{font-weight:bolder}.book-section-flat>ul{padding-inline-start:0}.book-page{min-width:20rem;flex-grow:1;padding:1rem}.book-post{margin-bottom:3rem}.book-header{display:none;margin-bottom:1rem}.book-header label{line-height:0}.book-search{position:relative;margin:1rem 0;border-bottom:1px solid transparent}.book-search input{width:100%;padding:.5rem;border:0;border-radius:.25rem;background:#f8f9fa;color:#000}.book-search input:required+.book-search-spinner{display:block}.book-search .book-search-spinner{position:absolute;top:0;margin:.5rem;margin-inline-start:calc(100% - 1.5rem);width:1rem;height:1rem;border:1px solid transparent;border-top-color:#000;border-radius:50%;animation:spin 1s ease infinite}@keyframes spin{100%{transform:rotate(360deg)}}.book-search small{opacity:.5}.book-toc{flex:0 0 16rem;font-size:.75rem}.book-toc nav{width:16rem;padding:1rem;position:fixed;top:0;bottom:0;overflow-x:hidden;overflow-y:auto}.book-toc img{height:1em}.book-toc nav>ul>li:first-child{margin-top:0}.book-footer{padding-top:1rem;font-size:.875rem}.book-footer img{height:1em;margin-inline-end:.5rem}.book-comments{margin-top:1rem}.book-languages{position:relative;overflow:visible;padding:1rem;margin:-1rem}.book-languages ul{margin:0;padding:0;list-style:none}.book-languages ul li{white-space:nowrap;cursor:pointer}.book-languages:hover .book-languages-list,.book-languages:focus .book-languages-list,.book-languages:focus-within .book-languages-list{display:block}.book-languages .book-languages-list{display:none;position:absolute;bottom:100%;left:0;padding:.5rem 0;background:#fff;box-shadow:0 0 .25rem rgba(0,0,0,.1)}.book-languages .book-languages-list li img{opacity:.25}.book-languages .book-languages-list li.active img,.book-languages .book-languages-list li:hover img{opacity:initial}.book-languages .book-languages-list a{color:inherit;padding:.5rem 1rem}.book-home{padding:1rem}aside nav,.book-page,.book-header aside,.markdown{transition:.2s ease-in-out;transition-property:transform,margin,opacity,visibility;will-change:transform,margin,opacity}@media screen and (max-width:56rem){#menu-control,#toc-control{display:inline}.book-menu{visibility:hidden;margin-inline-start:-16rem;font-size:16px;z-index:1}.book-toc{display:none}.book-header{display:block}#menu-control:focus~main label[for=menu-control]{outline-style:auto;outline-color:currentColor;outline-color:-webkit-focus-ring-color}#menu-control:checked~main .book-menu{visibility:initial}#menu-control:checked~main .book-menu nav{transform:translateX(16rem);box-shadow:0 0 .5rem rgba(0,0,0,.1)}#menu-control:checked~main .book-page{opacity:.25}#menu-control:checked~main .book-menu-overlay{display:block;position:absolute;top:0;bottom:0;left:0;right:0}#toc-control:focus~main label[for=toc-control]{outline-style:auto;outline-color:currentColor;outline-color:-webkit-focus-ring-color}#toc-control:checked~main .book-header aside{display:block}body[dir=rtl] #menu-control:checked+main .book-menu nav{transform:translateX(-16rem)}}@media screen and (min-width:80rem){.book-page,.book-menu nav,.book-toc nav{padding:2rem 1rem}}@font-face{font-family:roboto;font-style:italic;font-weight:300;font-display:swap;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(fonts/roboto-v19-latin-300italic.woff2)format("woff2"),url(fonts/roboto-v19-latin-300italic.woff)format("woff")}@font-face{font-family:roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url(fonts/roboto-v19-latin-regular.woff2)format("woff2"),url(fonts/roboto-v19-latin-regular.woff)format("woff")}@font-face{font-family:roboto;font-style:normal;font-weight:700;font-display:swap;src:local("Roboto Bold"),local("Roboto-Bold"),url(fonts/roboto-v19-latin-700.woff2)format("woff2"),url(fonts/roboto-v19-latin-700.woff)format("woff")}@font-face{font-family:roboto mono;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto Mono"),local("RobotoMono-Regular"),url(fonts/roboto-mono-v6-latin-regular.woff2)format("woff2"),url(fonts/roboto-mono-v6-latin-regular.woff)format("woff")}body{font-family:roboto,sans-serif}code{font-family:roboto mono,monospace}@media print{.book-menu,.book-footer,.book-toc{display:none}.book-header,.book-header aside{display:block}main{display:block!important}}.markdown{line-height:1.6}.markdown>:first-child{margin-top:0}.markdown h1,.markdown h2,.markdown h3,.markdown h4,.markdown h5,.markdown h6{font-weight:400;line-height:1;margin-top:1.5em;margin-bottom:1rem}.markdown h1 a.anchor,.markdown h2 a.anchor,.markdown h3 a.anchor,.markdown h4 a.anchor,.markdown h5 a.anchor,.markdown h6 a.anchor{opacity:0;font-size:.75em;vertical-align:middle;text-decoration:none}.markdown h1:hover a.anchor,.markdown h1 a.anchor:focus,.markdown h2:hover a.anchor,.markdown h2 a.anchor:focus,.markdown h3:hover a.anchor,.markdown h3 a.anchor:focus,.markdown h4:hover a.anchor,.markdown h4 a.anchor:focus,.markdown h5:hover a.anchor,.markdown h5 a.anchor:focus,.markdown h6:hover a.anchor,.markdown h6 a.anchor:focus{opacity:initial}.markdown h4,.markdown h5,.markdown h6{font-weight:bolder}.markdown h5{font-size:.875em}.markdown h6{font-size:.75em}.markdown b,.markdown optgroup,.markdown strong{font-weight:bolder}.markdown a{text-decoration:none}.markdown a:hover{text-decoration:underline}.markdown a:visited{color:#8440f1}.markdown img{max-width:100%}.markdown code{padding:0 .25rem;background:#e9ecef;border-radius:.25rem;font-size:.875em}.markdown pre{padding:1rem;background:#f8f9fa;border-radius:.25rem;overflow-x:auto}.markdown pre code{padding:0;background:0 0}.markdown blockquote{margin:1rem 0;padding:.5rem 1rem .5rem .75rem;border-inline-start:.25rem solid #e9ecef;border-radius:.25rem}.markdown blockquote :first-child{margin-top:0}.markdown blockquote :last-child{margin-bottom:0}.markdown table{overflow:auto;display:block;border-spacing:0;border-collapse:collapse;margin-top:1rem;margin-bottom:1rem}.markdown table tr th,.markdown table tr td{padding:.5rem 1rem;border:1px solid #e9ecef}.markdown table tr:nth-child(2n){background:#f8f9fa}.markdown hr{height:1px;border:none;background:#e9ecef}.markdown ul,.markdown ol{padding-inline-start:2rem}.markdown dl dt{font-weight:bolder;margin-top:1rem}.markdown dl dd{margin-inline-start:1rem;margin-bottom:1rem}.markdown .highlight table tr td:nth-child(1) pre{margin:0;padding-inline-end:0}.markdown .highlight table tr td:nth-child(2) pre{margin:0;padding-inline-start:0}.markdown details{padding:1rem;border:1px solid #e9ecef;border-radius:.25rem}.markdown details summary{line-height:1;padding:1rem;margin:-1rem;cursor:pointer}.markdown details[open] summary{margin-bottom:0}.markdown figure{margin:1rem 0}.markdown figure figcaption p{margin-top:0}.markdown-inner>:first-child{margin-top:0}.markdown-inner>:last-child{margin-bottom:0}.markdown .book-expand{margin-top:1rem;margin-bottom:1rem;border:1px solid #e9ecef;border-radius:.25rem;overflow:hidden}.markdown .book-expand .book-expand-head{background:#f8f9fa;padding:.5rem 1rem;cursor:pointer}.markdown .book-expand .book-expand-content{display:none;padding:1rem}.markdown .book-expand input[type=checkbox]:checked+.book-expand-content{display:block}.markdown .book-tabs{margin-top:1rem;margin-bottom:1rem;border:1px solid #e9ecef;border-radius:.25rem;overflow:hidden;display:flex;flex-wrap:wrap}.markdown .book-tabs label{display:inline-block;padding:.5rem 1rem;border-bottom:1px transparent;cursor:pointer}.markdown .book-tabs .book-tabs-content{order:999;width:100%;border-top:1px solid #f8f9fa;padding:1rem;display:none}.markdown .book-tabs input[type=radio]:checked+label{border-bottom:1px solid #05b}.markdown .book-tabs input[type=radio]:checked+label+.book-tabs-content{display:block}.markdown .book-tabs input[type=radio]:focus+label{outline-style:auto;outline-color:currentColor;outline-color:-webkit-focus-ring-color}.markdown .book-columns{margin-left:-1rem;margin-right:-1rem}.markdown .book-columns>div{margin:1rem 0;min-width:10rem;padding:0 1rem}.markdown a.book-btn{display:inline-block;font-size:.875rem;color:#05b;line-height:2rem;padding:0 1rem;border:1px solid #05b;border-radius:.25rem;cursor:pointer}.markdown a.book-btn:hover{text-decoration:none}.markdown .book-hint.info{border-color:#6bf;background-color:rgba(102,187,255,.1)}.markdown .book-hint.warning{border-color:#fd6;background-color:rgba(255,221,102,.1)}.markdown .book-hint.danger{border-color:#f66;background-color:rgba(255,102,102,.1)} \ No newline at end of file
+@charset "UTF-8";:root{--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}/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.flex{display:flex}.flex-auto{flex:1 1 auto}.flex-even{flex:1 1}.flex-wrap{flex-wrap:wrap}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.align-center{align-items:center}.mx-auto{margin:0 auto}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.hidden{display:none}input.toggle{height:0;width:0;overflow:hidden;opacity:0;position:absolute}.clearfix::after{content:"";display:table;clear:both}html{font-size:16px;scroll-behavior:smooth;touch-action:manipulation}body{min-width:20rem;color:var(--body-font-color);background:var(--body-background);letter-spacing:.33px;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}body *{box-sizing:inherit}h1,h2,h3,h4,h5{font-weight:400}a{text-decoration:none;color:var(--color-link)}img{vertical-align:baseline}:focus{outline-style:auto;outline-color:currentColor;outline-color:-webkit-focus-ring-color}aside nav ul{padding:0;margin:0;list-style:none}aside nav ul li{margin:1em 0;position:relative}aside nav ul a{display:block}aside nav ul a:hover{opacity:.5}aside nav ul ul{padding-inline-start:1rem}ul.pagination{display:flex;justify-content:center;list-style-type:none}ul.pagination .page-item a{padding:1rem}.container{max-width:80rem;margin:0 auto}.book-icon{filter:var(--icon-filter)}.book-brand{margin-top:0}.book-brand img{height:1.5em;width:auto;vertical-align:middle;margin-inline-end:.5rem}.book-menu{flex:0 0 16rem;font-size:.875rem}.book-menu nav{width:16rem;padding:1rem;background:var(--body-background);position:fixed;top:0;bottom:0;overflow-x:hidden;overflow-y:auto}.book-menu a{color:inherit;word-wrap:break-word}.book-menu a.active{color:var(--color-link)}.book-menu a.collapsed{display:flex;justify-content:space-between}.book-menu a.collapsed::after{content:"▸"}.book-section-flat{margin-bottom:2rem}.book-section-flat:not(:first-child){margin-top:2rem}.book-section-flat>a,.book-section-flat>span{font-weight:bolder}.book-section-flat>ul{padding-inline-start:0}.book-page{min-width:20rem;flex-grow:1;padding:1rem}.book-post{margin-bottom:3rem}.book-header{display:none;margin-bottom:1rem}.book-header label{line-height:0}.book-search{position:relative;margin:1rem 0;border-bottom:1px solid transparent}.book-search input{width:100%;padding:.5rem;border:0;border-radius:.25rem;background:var(--gray-100);color:var(--body-font-color)}.book-search input:required+.book-search-spinner{display:block}.book-search .book-search-spinner{position:absolute;top:0;margin:.5rem;margin-inline-start:calc(100% - 1.5rem);width:1rem;height:1rem;border:1px solid transparent;border-top-color:var(--body-font-color);border-radius:50%;animation:spin 1s ease infinite}@keyframes spin{100%{transform:rotate(360deg)}}.book-search small{opacity:.5}.book-toc{flex:0 0 16rem;font-size:.75rem}.book-toc nav{width:16rem;padding:1rem;position:fixed;top:0;bottom:0;overflow-x:hidden;overflow-y:auto}.book-toc img{height:1em}.book-toc nav>ul>li:first-child{margin-top:0}.book-footer{padding-top:1rem;font-size:.875rem}.book-footer img{height:1em;margin-inline-end:.5rem}.book-comments{margin-top:1rem}.book-languages{position:relative;overflow:visible;padding:1rem;margin:-1rem}.book-languages ul{margin:0;padding:0;list-style:none}.book-languages ul li{white-space:nowrap;cursor:pointer}.book-languages:hover .book-languages-list,.book-languages:focus .book-languages-list,.book-languages:focus-within .book-languages-list{display:block}.book-languages .book-languages-list{display:none;position:absolute;bottom:100%;left:0;padding:.5rem 0;background:var(--body-background);box-shadow:0 0 .25rem rgba(0,0,0,.1)}.book-languages .book-languages-list li img{opacity:.25}.book-languages .book-languages-list li.active img,.book-languages .book-languages-list li:hover img{opacity:initial}.book-languages .book-languages-list a{color:inherit;padding:.5rem 1rem}.book-home{padding:1rem}aside nav,.book-page,.book-header aside,.markdown{transition:.2s ease-in-out;transition-property:transform,margin,opacity,visibility;will-change:transform,margin,opacity}@media screen and (max-width:56rem){#menu-control,#toc-control{display:inline}.book-menu{visibility:hidden;margin-inline-start:-16rem;font-size:16px;z-index:1}.book-toc{display:none}.book-header{display:block}#menu-control:focus~main label[for=menu-control]{outline-style:auto;outline-color:currentColor;outline-color:-webkit-focus-ring-color}#menu-control:checked~main .book-menu{visibility:initial}#menu-control:checked~main .book-menu nav{transform:translateX(16rem);box-shadow:0 0 .5rem rgba(0,0,0,.1)}#menu-control:checked~main .book-page{opacity:.25}#menu-control:checked~main .book-menu-overlay{display:block;position:absolute;top:0;bottom:0;left:0;right:0}#toc-control:focus~main label[for=toc-control]{outline-style:auto;outline-color:currentColor;outline-color:-webkit-focus-ring-color}#toc-control:checked~main .book-header aside{display:block}body[dir=rtl] #menu-control:checked+main .book-menu nav{transform:translateX(-16rem)}}@media screen and (min-width:80rem){.book-page,.book-menu nav,.book-toc nav{padding:2rem 1rem}}@font-face{font-family:roboto;font-style:italic;font-weight:300;font-display:swap;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(fonts/roboto-v19-latin-300italic.woff2)format("woff2"),url(fonts/roboto-v19-latin-300italic.woff)format("woff")}@font-face{font-family:roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url(fonts/roboto-v19-latin-regular.woff2)format("woff2"),url(fonts/roboto-v19-latin-regular.woff)format("woff")}@font-face{font-family:roboto;font-style:normal;font-weight:700;font-display:swap;src:local("Roboto Bold"),local("Roboto-Bold"),url(fonts/roboto-v19-latin-700.woff2)format("woff2"),url(fonts/roboto-v19-latin-700.woff)format("woff")}@font-face{font-family:roboto mono;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto Mono"),local("RobotoMono-Regular"),url(fonts/roboto-mono-v6-latin-regular.woff2)format("woff2"),url(fonts/roboto-mono-v6-latin-regular.woff)format("woff")}body{font-family:roboto,sans-serif}code{font-family:roboto mono,monospace}@media print{.book-menu,.book-footer,.book-toc{display:none}.book-header,.book-header aside{display:block}main{display:block!important}}.markdown{line-height:1.6}.markdown>:first-child{margin-top:0}.markdown h1,.markdown h2,.markdown h3,.markdown h4,.markdown h5,.markdown h6{font-weight:400;line-height:1;margin-top:1.5em;margin-bottom:1rem}.markdown h1 a.anchor,.markdown h2 a.anchor,.markdown h3 a.anchor,.markdown h4 a.anchor,.markdown h5 a.anchor,.markdown h6 a.anchor{opacity:0;font-size:.75em;vertical-align:middle;text-decoration:none}.markdown h1:hover a.anchor,.markdown h1 a.anchor:focus,.markdown h2:hover a.anchor,.markdown h2 a.anchor:focus,.markdown h3:hover a.anchor,.markdown h3 a.anchor:focus,.markdown h4:hover a.anchor,.markdown h4 a.anchor:focus,.markdown h5:hover a.anchor,.markdown h5 a.anchor:focus,.markdown h6:hover a.anchor,.markdown h6 a.anchor:focus{opacity:initial}.markdown h4,.markdown h5,.markdown h6{font-weight:bolder}.markdown h5{font-size:.875em}.markdown h6{font-size:.75em}.markdown b,.markdown optgroup,.markdown strong{font-weight:bolder}.markdown a{text-decoration:none}.markdown a:hover{text-decoration:underline}.markdown a:visited{color:var(--color-visited-link)}.markdown img{max-width:100%}.markdown code{padding:0 .25rem;background:var(--gray-200);border-radius:.25rem;font-size:.875em}.markdown pre{padding:1rem;background:var(--gray-100);border-radius:.25rem;overflow-x:auto}.markdown pre code{padding:0;background:0 0}.markdown blockquote{margin:1rem 0;padding:.5rem 1rem .5rem .75rem;border-inline-start:.25rem solid var(--gray-200);border-radius:.25rem}.markdown blockquote :first-child{margin-top:0}.markdown blockquote :last-child{margin-bottom:0}.markdown table{overflow:auto;display:block;border-spacing:0;border-collapse:collapse;margin-top:1rem;margin-bottom:1rem}.markdown table tr th,.markdown table tr td{padding:.5rem 1rem;border:1px solid var(--gray-200)}.markdown table tr:nth-child(2n){background:var(--gray-100)}.markdown hr{height:1px;border:none;background:var(--gray-200)}.markdown ul,.markdown ol{padding-inline-start:2rem}.markdown dl dt{font-weight:bolder;margin-top:1rem}.markdown dl dd{margin-inline-start:1rem;margin-bottom:1rem}.markdown .highlight table tr td:nth-child(1) pre{margin:0;padding-inline-end:0}.markdown .highlight table tr td:nth-child(2) pre{margin:0;padding-inline-start:0}.markdown details{padding:1rem;border:1px solid var(--gray-200);border-radius:.25rem}.markdown details summary{line-height:1;padding:1rem;margin:-1rem;cursor:pointer}.markdown details[open] summary{margin-bottom:0}.markdown figure{margin:1rem 0}.markdown figure figcaption p{margin-top:0}.markdown-inner>:first-child{margin-top:0}.markdown-inner>:last-child{margin-bottom:0}.markdown .book-expand{margin-top:1rem;margin-bottom:1rem;border:1px solid var(--gray-200);border-radius:.25rem;overflow:hidden}.markdown .book-expand .book-expand-head{background:var(--gray-100);padding:.5rem 1rem;cursor:pointer}.markdown .book-expand .book-expand-content{display:none;padding:1rem}.markdown .book-expand input[type=checkbox]:checked+.book-expand-content{display:block}.markdown .book-tabs{margin-top:1rem;margin-bottom:1rem;border:1px solid var(--gray-200);border-radius:.25rem;overflow:hidden;display:flex;flex-wrap:wrap}.markdown .book-tabs label{display:inline-block;padding:.5rem 1rem;border-bottom:1px transparent;cursor:pointer}.markdown .book-tabs .book-tabs-content{order:999;width:100%;border-top:1px solid var(--gray-100);padding:1rem;display:none}.markdown .book-tabs input[type=radio]:checked+label{border-bottom:1px solid var(--color-link)}.markdown .book-tabs input[type=radio]:checked+label+.book-tabs-content{display:block}.markdown .book-tabs input[type=radio]:focus+label{outline-style:auto;outline-color:currentColor;outline-color:-webkit-focus-ring-color}.markdown .book-columns{margin-left:-1rem;margin-right:-1rem}.markdown .book-columns>div{margin:1rem 0;min-width:10rem;padding:0 1rem}.markdown a.book-btn{display:inline-block;font-size:.875rem;color:var(--color-link);line-height:2rem;padding:0 1rem;border:1px solid var(--color-link);border-radius:.25rem;cursor:pointer}.markdown a.book-btn:hover{text-decoration:none}.markdown .book-hint.info{border-color:#6bf;background-color:rgba(102,187,255,.1)}.markdown .book-hint.warning{border-color:#fd6;background-color:rgba(255,221,102,.1)}.markdown .book-hint.danger{border-color:#f66;background-color:rgba(255,102,102,.1)} \ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json b/exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json
index fe66a39..e998ce2 100644
--- a/exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json
+++ b/exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json
@@ -1 +1 @@
-{"Target":"book.min.6cd8553a6854f4812343f0f0c8baca31271e686434f381fbe3c7226f66639176.css","MediaType":"text/css","Data":{"Integrity":"sha256-bNhVOmhU9IEjQ/DwyLrKMSceaGQ084H748cib2ZjkXY="}} \ No newline at end of file
+{"Target":"book.min.4194921b4c7ff04cd7c5b17f3ac51f141158e219fa9deb989de5e50f624ca88f.css","MediaType":"text/css","Data":{"Integrity":"sha256-QZSSG0x/8EzXxbF/OsUfFBFY4hn6neuYneXlD2JMqI8="}} \ No newline at end of file