Introduce SCSS plugins: dark mode and numbered headings
This commit is contained in:
Alex Shpak
parent
1cd5040d84
commit
007bc10c07
18 changed files with 428 additions and 409 deletions
58
README.md
58
README.md
|
|
@ -127,43 +127,43 @@ enableGitInfo = true
|
||||||
disableKinds = ['taxonomy', 'taxonomyTerm']
|
disableKinds = ['taxonomy', 'taxonomyTerm']
|
||||||
|
|
||||||
[params]
|
[params]
|
||||||
# (Optional, default 6) Set how many table of contents levels to be showed on page.
|
# (Optional, default 6) Set how many table of contents levels to be showed on page.
|
||||||
# Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
|
# Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
|
||||||
# You can also specify this parameter per page in front matter
|
# You can also specify this parameter per page in front matter
|
||||||
BookToC = 3
|
BookToC = 3
|
||||||
|
|
||||||
# (Optional, default none) Set the path to a logo for the book. If the logo is
|
# (Optional, default none) Set the path to a logo for the book. If the logo is
|
||||||
# /static/logo.png then the path would be 'logo.png'
|
# /static/logo.png then the path would be 'logo.png'
|
||||||
BookLogo = 'logo.png'
|
BookLogo = 'logo.png'
|
||||||
|
|
||||||
# (Optional, default none) Set leaf bundle to render as side menu
|
# (Optional, default none) Set leaf bundle to render as side menu
|
||||||
# When not specified file structure and weights will be used
|
# When not specified file structure and weights will be used
|
||||||
BookMenuBundle = '/menu'
|
BookMenuBundle = '/menu'
|
||||||
|
|
||||||
# (Optional, default docs) Specify section of content to render as menu
|
# (Optional, default docs) Specify section of content to render as menu
|
||||||
# You can also set value to "*" to render all sections to menu
|
# You can also set value to "*" to render all sections to menu
|
||||||
BookSection = 'docs'
|
BookSection = 'docs'
|
||||||
|
|
||||||
# (Optional) This value is duplicate of $link-color for making active link highlight in menu bundle mode
|
# (Optional) This value is duplicate of $link-color for making active link highlight in menu bundle mode
|
||||||
# BookMenuBundleActiveLinkColor = '\#05b'
|
# BookMenuBundleActiveLinkColor = '\#05b'
|
||||||
|
|
||||||
# Set source repository location.
|
# Set source repository location.
|
||||||
# Used for 'Last Modified' and 'Edit this page' links.
|
# Used for 'Last Modified' and 'Edit this page' links.
|
||||||
BookRepo = 'https://github.com/alex-shpak/hugo-book'
|
BookRepo = 'https://github.com/alex-shpak/hugo-book'
|
||||||
|
|
||||||
# Enable 'Edit this page' links for 'doc' page type.
|
# Enable 'Edit this page' links for 'doc' page type.
|
||||||
# Disabled by default. Uncomment to enable. Requires 'BookRepo' param.
|
# Disabled by default. Uncomment to enable. Requires 'BookRepo' param.
|
||||||
# Path must point to 'content' directory of repo.
|
# Path must point to 'content' directory of repo.
|
||||||
BookEditPath = 'edit/master/exampleSite/content'
|
BookEditPath = 'edit/master/exampleSite/content'
|
||||||
|
|
||||||
# (Optional, default January 2, 2006) Configure the date format used on the pages
|
# (Optional, default January 2, 2006) Configure the date format used on the pages
|
||||||
# - In git information
|
# - In git information
|
||||||
# - In blog posts
|
# - In blog posts
|
||||||
BookDateFormat = 'Jan 2, 2006'
|
BookDateFormat = 'Jan 2, 2006'
|
||||||
|
|
||||||
# (Optional, default true) Enables search function with lunr.js,
|
# (Optional, default true) Enables search function with lunr.js,
|
||||||
# Index is built on fly, therefore it might slowdown your website.
|
# Index is built on fly, therefore it might slowdown your website.
|
||||||
BookSearch = true
|
BookSearch = true
|
||||||
```
|
```
|
||||||
|
|
||||||
### Page Configuration
|
### Page Configuration
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1 @@
|
||||||
/* To be overridden by theme user */
|
/* To be overridden by theme user, scss variables are also accessible here */
|
||||||
// @import "variables";
|
|
||||||
|
|
|
||||||
50
assets/_defaults.scss
Normal file
50
assets/_defaults.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
// Used in layout
|
||||||
|
$padding-1: 1px !default;
|
||||||
|
$padding-4: 0.25rem !default;
|
||||||
|
$padding-8: 0.5rem !default;
|
||||||
|
$padding-16: 1rem !default;
|
||||||
|
|
||||||
|
$font-size-base: 16px !default;
|
||||||
|
$font-size-12: 0.75rem !default;
|
||||||
|
$font-size-14: 0.875rem !default;
|
||||||
|
$font-size-16: 1rem !default;
|
||||||
|
|
||||||
|
$border-radius: 0.15rem !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;
|
||||||
|
$color-dark-link: $gray-800 !default;
|
||||||
|
|
||||||
|
$body-background: white !default;
|
||||||
|
$body-font-color: $gray-800 !default;
|
||||||
|
$body-font-weight: normal !default;
|
||||||
|
|
||||||
|
$body-min-width: 20rem !default;
|
||||||
|
$container-max-width: 80rem !default;
|
||||||
|
|
||||||
|
$header-height: 3.5rem !default;
|
||||||
|
$menu-width: 16rem !default;
|
||||||
|
$toc-width: 16rem !default;
|
||||||
|
|
||||||
|
$md-breakpoint: $menu-width + $body-min-width * 1.25 + $toc-width !default;
|
||||||
|
$sm-breakpoint: $menu-width + $body-min-width !default;
|
||||||
|
|
||||||
|
// Panel colors
|
||||||
|
$hint-colors: (
|
||||||
|
info: #6bf,
|
||||||
|
warning: #fd6,
|
||||||
|
danger: #f66
|
||||||
|
) !default;
|
||||||
288
assets/_main.scss
Normal file
288
assets/_main.scss
Normal file
|
|
@ -0,0 +1,288 @@
|
||||||
|
html {
|
||||||
|
font-size: $font-size-base;
|
||||||
|
letter-spacing: 0.33px;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
min-width: $body-min-width;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: $body-font-color;
|
||||||
|
background: $body-background;
|
||||||
|
|
||||||
|
font-weight: $body-font-weight;
|
||||||
|
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
* {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5 {
|
||||||
|
font-weight: $body-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $color-link;
|
||||||
|
|
||||||
|
&:visited {
|
||||||
|
color: $color-visited-link;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside nav ul {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: $padding-16;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.pagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
.page-item a {
|
||||||
|
padding: $padding-16;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: $container-max-width;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-brand {
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 1.5em;
|
||||||
|
width: auto;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: $padding-8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-menu {
|
||||||
|
flex: 0 0 $menu-width;
|
||||||
|
font-size: $font-size-14;
|
||||||
|
|
||||||
|
nav {
|
||||||
|
width: $menu-width;
|
||||||
|
padding: $padding-16;
|
||||||
|
|
||||||
|
@include fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include dark-links;
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-section-flat {
|
||||||
|
margin-bottom: $padding-16 * 2;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: $padding-16 * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
> a,
|
||||||
|
> span {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-page {
|
||||||
|
min-width: $body-min-width;
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: $padding-16;
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-header {
|
||||||
|
margin-bottom: $padding-16;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-search {
|
||||||
|
position: relative;
|
||||||
|
margin: $padding-16 0;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
padding: $padding-8;
|
||||||
|
|
||||||
|
border: 0;
|
||||||
|
border-radius: $padding-4;
|
||||||
|
|
||||||
|
background: $gray-100;
|
||||||
|
|
||||||
|
&:required + .book-search-spinner {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-search-spinner {
|
||||||
|
position: absolute;
|
||||||
|
margin: $padding-8;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
width: $padding-16;
|
||||||
|
height: $padding-16;
|
||||||
|
|
||||||
|
border: $padding-1 solid transparent;
|
||||||
|
border-top-color: $body-font-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
@include spin(1s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-toc {
|
||||||
|
flex: 0 0 $toc-width;
|
||||||
|
font-size: $font-size-12;
|
||||||
|
|
||||||
|
nav {
|
||||||
|
width: $toc-width;
|
||||||
|
padding: $padding-16;
|
||||||
|
|
||||||
|
@include fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav > ul > li:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Classes to hide nested levels of ToC (can be replaced by @for, but it's more clear like this)
|
||||||
|
&.level-1 ul ul,
|
||||||
|
&.level-2 ul ul ul,
|
||||||
|
&.level-3 ul ul ul ul,
|
||||||
|
&.level-4 ul ul ul ul ul,
|
||||||
|
&.level-5 ul ul ul ul ul ul,
|
||||||
|
&.level-6 ul ul ul ul ul ul ul {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-footer {
|
||||||
|
display: flex;
|
||||||
|
padding-top: $padding-16;
|
||||||
|
font-size: $font-size-14;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-posts {
|
||||||
|
min-width: $body-min-width;
|
||||||
|
max-width: $body-min-width * 2;
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: $padding-16;
|
||||||
|
|
||||||
|
article {
|
||||||
|
padding-bottom: $padding-16;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-home {
|
||||||
|
padding: $padding-16;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive styles
|
||||||
|
aside nav,
|
||||||
|
.book-page,
|
||||||
|
.book-posts,
|
||||||
|
.markdown {
|
||||||
|
transition: 0.2s ease-in-out;
|
||||||
|
transition-property: transform, margin-left, opacity;
|
||||||
|
will-change: transform, margin-left;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $md-breakpoint) {
|
||||||
|
.book-toc {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $sm-breakpoint) {
|
||||||
|
.book-menu {
|
||||||
|
margin-left: -$menu-width;
|
||||||
|
font-size: $font-size-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-header {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu-control:checked + main {
|
||||||
|
.book-menu nav,
|
||||||
|
.book-page,
|
||||||
|
.book-posts {
|
||||||
|
transform: translateX($menu-width);
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-header label {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown {
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Extra space for big screens
|
||||||
|
@media screen and (min-width: $container-max-width) {
|
||||||
|
.book-page,
|
||||||
|
.book-posts,
|
||||||
|
.book-menu nav,
|
||||||
|
.book-toc nav {
|
||||||
|
padding: $padding-16 * 2 $padding-16;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
@import "variables";
|
|
||||||
|
|
||||||
.markdown-inner {
|
.markdown-inner {
|
||||||
// Util class to remove extra margin in nested markdown content
|
// Util class to remove extra margin in nested markdown content
|
||||||
> :first-child {
|
> :first-child {
|
||||||
|
|
|
||||||
|
|
@ -1,50 +1 @@
|
||||||
// Used in layout
|
/* To be overridden by theme user, e.g. set SASS vars*/
|
||||||
$padding-1: 1px !default;
|
|
||||||
$padding-4: 0.25rem !default;
|
|
||||||
$padding-8: 0.5rem !default;
|
|
||||||
$padding-16: 1rem !default;
|
|
||||||
|
|
||||||
$font-size-base: 16px !default;
|
|
||||||
$font-size-12: 0.75rem !default;
|
|
||||||
$font-size-14: 0.875rem !default;
|
|
||||||
$font-size-16: 1rem !default;
|
|
||||||
|
|
||||||
$border-radius: 0.15rem !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;
|
|
||||||
$color-dark-link: $gray-800 !default;
|
|
||||||
|
|
||||||
$body-background: white !default;
|
|
||||||
$body-font-color: $gray-800 !default;
|
|
||||||
$body-font-weight: normal !default;
|
|
||||||
|
|
||||||
$body-min-width: 20rem !default;
|
|
||||||
$container-max-width: 80rem !default;
|
|
||||||
|
|
||||||
$header-height: 3.5rem !default;
|
|
||||||
$menu-width: 16rem !default;
|
|
||||||
$toc-width: 16rem !default;
|
|
||||||
|
|
||||||
$md-breakpoint: $menu-width + $body-min-width * 1.25 + $toc-width !default;
|
|
||||||
$sm-breakpoint: $menu-width + $body-min-width !default;
|
|
||||||
|
|
||||||
// Panel colors
|
|
||||||
$hint-colors: (
|
|
||||||
info: #6bf,
|
|
||||||
warning: #fd6,
|
|
||||||
danger: #f66
|
|
||||||
);
|
|
||||||
|
|
|
||||||
302
assets/book.scss
302
assets/book.scss
|
|
@ -1,301 +1,13 @@
|
||||||
@import "normalize";
|
@import "defaults";
|
||||||
@import "variables";
|
@import "variables";
|
||||||
|
|
||||||
|
@import "normalize";
|
||||||
@import "utils";
|
@import "utils";
|
||||||
|
@import "main";
|
||||||
|
@import "fonts";
|
||||||
|
|
||||||
@import "markdown";
|
@import "markdown";
|
||||||
@import "shortcodes";
|
@import "shortcodes";
|
||||||
|
|
||||||
html {
|
// Custom defined styles
|
||||||
font-size: $font-size-base;
|
|
||||||
letter-spacing: 0.33px;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
min-width: $body-min-width;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: $body-font-color;
|
|
||||||
background: $body-background;
|
|
||||||
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-weight: $body-font-weight;
|
|
||||||
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
* {
|
|
||||||
box-sizing: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5 {
|
|
||||||
font-weight: $body-font-weight;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: $color-link;
|
|
||||||
|
|
||||||
&:visited {
|
|
||||||
color: $color-visited-link;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
aside nav ul {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
padding-left: $padding-16;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.pagination {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
list-style-type: none;
|
|
||||||
|
|
||||||
.page-item a {
|
|
||||||
padding: $padding-16;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: $container-max-width;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-brand {
|
|
||||||
margin-top: 0;
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 1.5em;
|
|
||||||
width: auto;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-right: $padding-8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-menu {
|
|
||||||
flex: 0 0 $menu-width;
|
|
||||||
font-size: $font-size-14;
|
|
||||||
|
|
||||||
nav {
|
|
||||||
width: $menu-width;
|
|
||||||
padding: $padding-16;
|
|
||||||
|
|
||||||
@include fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include dark-links;
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-section-flat {
|
|
||||||
margin-bottom: $padding-16 * 2;
|
|
||||||
|
|
||||||
&:not(:first-child) {
|
|
||||||
margin-top: $padding-16 * 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
> a,
|
|
||||||
> span {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
> ul {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-page {
|
|
||||||
min-width: $body-min-width;
|
|
||||||
flex-grow: 1;
|
|
||||||
padding: $padding-16;
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-header {
|
|
||||||
margin-bottom: $padding-16;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-search {
|
|
||||||
position: relative;
|
|
||||||
margin: $padding-16 0;
|
|
||||||
border-bottom: 1px solid transparent;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
width: 100%;
|
|
||||||
padding: $padding-8;
|
|
||||||
|
|
||||||
border: 0;
|
|
||||||
border-radius: $padding-4;
|
|
||||||
|
|
||||||
background: $gray-100;
|
|
||||||
|
|
||||||
&:required + .book-search-spinner {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-search-spinner {
|
|
||||||
position: absolute;
|
|
||||||
margin: $padding-8;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
width: $padding-16;
|
|
||||||
height: $padding-16;
|
|
||||||
|
|
||||||
border: $padding-1 solid transparent;
|
|
||||||
border-top-color: $body-font-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
@include spin(1s);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-toc {
|
|
||||||
flex: 0 0 $toc-width;
|
|
||||||
font-size: $font-size-12;
|
|
||||||
|
|
||||||
nav {
|
|
||||||
width: $toc-width;
|
|
||||||
padding: $padding-16;
|
|
||||||
|
|
||||||
@include fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav > ul > li:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Classes to hide nested levels of ToC (can be replaced by @for, but it's more clear like this)
|
|
||||||
&.level-1 ul ul,
|
|
||||||
&.level-2 ul ul ul,
|
|
||||||
&.level-3 ul ul ul ul,
|
|
||||||
&.level-4 ul ul ul ul ul,
|
|
||||||
&.level-5 ul ul ul ul ul ul,
|
|
||||||
&.level-6 ul ul ul ul ul ul ul {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-footer {
|
|
||||||
display: flex;
|
|
||||||
padding-top: $padding-16;
|
|
||||||
font-size: $font-size-14;
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-posts {
|
|
||||||
min-width: $body-min-width;
|
|
||||||
max-width: $body-min-width * 2;
|
|
||||||
flex-grow: 1;
|
|
||||||
padding: $padding-16;
|
|
||||||
|
|
||||||
article {
|
|
||||||
padding-bottom: $padding-16;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-home {
|
|
||||||
padding: $padding-16;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive styles
|
|
||||||
aside nav,
|
|
||||||
.book-page,
|
|
||||||
.book-posts,
|
|
||||||
.markdown {
|
|
||||||
transition: 0.2s ease-in-out;
|
|
||||||
transition-property: transform, margin-left, opacity;
|
|
||||||
will-change: transform, margin-left;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $md-breakpoint) {
|
|
||||||
.book-toc {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $sm-breakpoint) {
|
|
||||||
.book-menu {
|
|
||||||
margin-left: -$menu-width;
|
|
||||||
font-size: $font-size-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-header {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menu-control:checked + main {
|
|
||||||
.book-menu nav,
|
|
||||||
.book-page,
|
|
||||||
.book-posts {
|
|
||||||
transform: translateX($menu-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-header label {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown {
|
|
||||||
opacity: 0.25;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Extra space for big screens
|
|
||||||
@media screen and (min-width: $container-max-width) {
|
|
||||||
.book-page,
|
|
||||||
.book-posts,
|
|
||||||
.book-menu nav,
|
|
||||||
.book-toc nav {
|
|
||||||
padding: $padding-16 * 2 $padding-16;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add fonts
|
|
||||||
@import "fonts";
|
|
||||||
|
|
||||||
// Add custom defined styles
|
|
||||||
@import "custom";
|
@import "custom";
|
||||||
|
|
|
||||||
9
assets/plugins/_dark.scss
Normal file
9
assets/plugins/_dark.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
$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;
|
||||||
|
$color-dark-link: $body-font-color;
|
||||||
23
assets/plugins/_numbered.scss
Normal file
23
assets/plugins/_numbered.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
.book-page {
|
||||||
|
.markdown {
|
||||||
|
@for $h from 1 through 6 {
|
||||||
|
> h#{$h} {
|
||||||
|
counter-increment: h#{$h};
|
||||||
|
counter-reset: h#{$h + 1};
|
||||||
|
|
||||||
|
$content: "";
|
||||||
|
@for $n from 1 through $h {
|
||||||
|
$content: $content + 'counter(h#{$n})"."';
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: unquote($content) " ";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
+ .book-toc nav ul {
|
||||||
|
list-style: decimal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,2 +1,3 @@
|
||||||
@import "variables";
|
|
||||||
// You can add custom styles here.
|
// You can add custom styles here.
|
||||||
|
|
||||||
|
// @import "plugins/numbered";
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,3 @@
|
||||||
// You can override SASS variables here. Below example of simple dark theme.
|
/* You can override SASS variables here. Below example of simple dark theme. */
|
||||||
|
|
||||||
/*
|
// @import "plugins/dark";
|
||||||
$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;
|
|
||||||
$color-dark-link: $body-font-color;
|
|
||||||
*/
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
||||||
{"Target":"book.min.e2750c58bf0545d36d2426996f9d6108a275d000f33e7552d83ea28bdcd34ab7.css","MediaType":"text/css","Data":{"Integrity":"sha256-4nUMWL8FRdNtJCaZb51hCKJ10ADzPnVS2D6ii9zTSrc="}}
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
||||||
|
{"Target":"book.min.4e5c3d92718456dab80c87ced0c4c63d3984fb3a742f718957ca25c01c6dcdb6.css","MediaType":"text/css","Data":{"Integrity":"sha256-Tlw9knGEVtq4DIfO0MTGPTmE+zp0L3GJV8olwBxtzbY="}}
|
||||||
|
|
@ -3,9 +3,10 @@
|
||||||
{{- template "_internal/opengraph.html" . -}}
|
{{- template "_internal/opengraph.html" . -}}
|
||||||
|
|
||||||
<title>{{ partial "docs/title" . }} | {{ .Site.Title -}}</title>
|
<title>{{ partial "docs/title" . }} | {{ .Site.Title -}}</title>
|
||||||
|
<link rel="icon" href="{{ "favicon.png" | relURL }}" type="image/x-icon">
|
||||||
|
|
||||||
<!-- Theme stylesheet, you can customize scss by creating `assets/custom.scss` in your website -->
|
<!-- Theme stylesheet, you can customize scss by creating `assets/custom.scss` in your website -->
|
||||||
{{- $styles := resources.Get "book.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
|
{{- $styles := resources.Get "book.scss" | resources.ExecuteAsTemplate "book.scss" . | resources.ToCSS | resources.Minify | resources.Fingerprint }}
|
||||||
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}">
|
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}">
|
||||||
|
|
||||||
{{ if default true .Site.Params.BookSearch }}
|
{{ if default true .Site.Params.BookSearch }}
|
||||||
|
|
@ -13,8 +14,7 @@
|
||||||
<script defer src="{{ $searchJS.RelPermalink }}" integrity="{{ $searchJS.Data.Integrity }}"></script>
|
<script defer src="{{ $searchJS.RelPermalink }}" integrity="{{ $searchJS.Data.Integrity }}"></script>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<!-- Favicon -->
|
{{- template "_internal/google_analytics_async.html" . -}}
|
||||||
<link rel="icon" href="{{ "favicon.png" | relURL }}" type="image/x-icon">
|
|
||||||
|
|
||||||
<!-- RSS -->
|
<!-- RSS -->
|
||||||
{{ with .OutputFormats.Get "rss" -}}
|
{{ with .OutputFormats.Get "rss" -}}
|
||||||
|
|
@ -25,5 +25,3 @@
|
||||||
Made with Book Theme
|
Made with Book Theme
|
||||||
https://github.com/alex-shpak/hugo-book
|
https://github.com/alex-shpak/hugo-book
|
||||||
{{ "-->" | safeHTML }}
|
{{ "-->" | safeHTML }}
|
||||||
|
|
||||||
{{ template "_internal/google_analytics_async.html" . }}
|
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
nav ul a[href{{ $attrEq }}"{{ $attrVal }}"] {
|
nav ul a[href{{ $attrEq }}"{{ $attrVal }}"] {
|
||||||
color: {{ default "#004ed0" .Site.Params.BookMenuBundleActiveLinkColor }};
|
color: {{ default "#004ed0" .Site.Params.BookMenuBundleActiveLinkColor }};
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue