diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/_custom.scss | 3 | ||||
| -rw-r--r-- | assets/_defaults.scss | 50 | ||||
| -rw-r--r-- | assets/_main.scss | 288 | ||||
| -rw-r--r-- | assets/_shortcodes.scss | 2 | ||||
| -rw-r--r-- | assets/_variables.scss | 51 | ||||
| -rw-r--r-- | assets/book.scss | 302 | ||||
| -rw-r--r-- | assets/plugins/_dark.scss | 9 | ||||
| -rw-r--r-- | assets/plugins/_numbered.scss | 23 |
8 files changed, 379 insertions, 349 deletions
diff --git a/assets/_custom.scss b/assets/_custom.scss index 181c87c..75c4833 100644 --- a/assets/_custom.scss +++ b/assets/_custom.scss @@ -1,2 +1 @@ -/* To be overridden by theme user */ -// @import "variables"; +/* To be overridden by theme user, scss variables are also accessible here */ diff --git a/assets/_defaults.scss b/assets/_defaults.scss new file mode 100644 index 0000000..b11c9a9 --- /dev/null +++ b/assets/_defaults.scss @@ -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; diff --git a/assets/_main.scss b/assets/_main.scss new file mode 100644 index 0000000..7fb47c4 --- /dev/null +++ b/assets/_main.scss @@ -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; + } +} diff --git a/assets/_shortcodes.scss b/assets/_shortcodes.scss index bc0916c..451f8b8 100644 --- a/assets/_shortcodes.scss +++ b/assets/_shortcodes.scss @@ -1,5 +1,3 @@ -@import "variables"; - .markdown-inner { // Util class to remove extra margin in nested markdown content > :first-child { diff --git a/assets/_variables.scss b/assets/_variables.scss index 6eb8e4c..5cbcc8c 100644 --- a/assets/_variables.scss +++ b/assets/_variables.scss @@ -1,50 +1 @@ -// 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 -); +/* To be overridden by theme user, e.g. set SASS vars*/ diff --git a/assets/book.scss b/assets/book.scss index 2a7379f..529c908 100644 --- a/assets/book.scss +++ b/assets/book.scss @@ -1,301 +1,13 @@ -@import "normalize"; +@import "defaults"; @import "variables"; + +@import "normalize"; @import "utils"; +@import "main"; +@import "fonts"; + @import "markdown"; @import "shortcodes"; -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-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 +// Custom defined styles @import "custom"; diff --git a/assets/plugins/_dark.scss b/assets/plugins/_dark.scss new file mode 100644 index 0000000..c4df68b --- /dev/null +++ b/assets/plugins/_dark.scss @@ -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; diff --git a/assets/plugins/_numbered.scss b/assets/plugins/_numbered.scss new file mode 100644 index 0000000..a1e89d8 --- /dev/null +++ b/assets/plugins/_numbered.scss @@ -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; + } +} |