diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/_utils.scss | 38 | ||||
| -rw-r--r-- | assets/_variables.scss | 25 | ||||
| -rw-r--r-- | assets/book.scss | 203 |
3 files changed, 152 insertions, 114 deletions
diff --git a/assets/_utils.scss b/assets/_utils.scss new file mode 100644 index 0000000..37ce94f --- /dev/null +++ b/assets/_utils.scss @@ -0,0 +1,38 @@ +.flex { + display: flex; +} + +.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; +} + +@mixin fixed { + position: fixed; + top: 0; + bottom: 0; + overflow: hidden auto; +} + +.hide { + display: none; +} diff --git a/assets/_variables.scss b/assets/_variables.scss index ced71e2..1890e35 100644 --- a/assets/_variables.scss +++ b/assets/_variables.scss @@ -1,15 +1,15 @@ $padding-1: 1px; -$padding-4: .25rem; -$padding-8: .5rem; +$padding-4: 0.25rem; +$padding-8: 0.5rem; $padding-16: 1rem; $font-size-base: 16px; -$font-size-12: .75rem; -$font-size-14: .875rem; +$font-size-12: 0.75rem; +$font-size-14: 0.875rem; $font-size-16: 1rem; // Grayscale -$white: #ffffff; +$white: #ffffff; $gray-100: #f8f9fa; $gray-200: #e9ecef; $gray-300: #dee2e6; @@ -19,7 +19,7 @@ $gray-600: #868e96; $gray-700: #495057; $gray-800: #343a40; $gray-900: #212529; -$black: #000; +$black: #000; $color-link: #004ed0; $color-visited-link: #8440f1; @@ -29,12 +29,15 @@ $body-font-color: $gray-800; $body-font-weight: 400; $body-min-width: 25rem; -$nav-background: $body-background; //$gray-100; +$nav-background: $body-background; $nav-link-color: $gray-800; $header-height: 3.5rem; -$nav-menu-width: 18rem; -$toc-menu-width: 14rem; +$menu-width: 18rem; +$toc-width: 14rem; -$content-max-width: 80rem; -$content-min-width: $body-min-width; +$container-min-width: $body-min-width; +$container-max-width: 80rem; + +$sm-breakpoint: $menu-width + $body-min-width; +$md-breakpoint: $sm-breakpoint + $toc-width;
\ No newline at end of file diff --git a/assets/book.scss b/assets/book.scss index 56fdc9d..d98131f 100644 --- a/assets/book.scss +++ b/assets/book.scss @@ -1,13 +1,14 @@ -@import 'variables'; -@import 'markdown'; - +@import "variables"; +@import "markdown"; +@import "utils"; html { font-size: $font-size-base; - letter-spacing: .33px; + letter-spacing: 0.33px; } -html, body { +html, +body { min-width: $body-min-width; overflow: hidden auto; } @@ -16,7 +17,7 @@ body { color: $body-font-color; background: $body-background; - font-family: 'Oxygen', sans-serif; + font-family: "Oxygen", sans-serif; font-weight: $body-font-weight; text-rendering: optimizeLegibility; @@ -29,7 +30,11 @@ body { } } -h1, h2, h3, h4, h5 { +h1, +h2, +h3, +h4, +h5 { font-weight: 400; } @@ -46,148 +51,140 @@ img { vertical-align: middle; } -aside { +ul { + padding: 0; + margin: 0; + list-style: none; + + li { + margin: 1em 0; + } + + a { + display: block; + } + ul { - margin: 0; padding-left: $padding-16; - list-style: none; - line-height: 1.5em; - - li { - margin: .75em 0; - - a { display: block; } - a:hover { opacity: .5; } - - img { - height: $padding-16; - } - } } +} - // start padding on second level - nav > ul { - padding-left: 0; - } +.container { + min-width: $container-min-width; + max-width: $container-max-width; + margin: 0 auto; } -aside.fixed nav { - position: fixed; - top: 0; - bottom: 0; - overflow: hidden auto; +.book-brand { + margin-top: 0; } -header { - display: flex; - align-items:center; - justify-content: space-between; - margin-bottom: $padding-16; +.book-menu { + flex: 0 0 $menu-width; + font-size: $font-size-14; - display: none; -} + nav { + width: $menu-width; + padding: $padding-16; -main { - max-width: $content-max-width; - margin: 0 auto; + @include fixed; + } - display: flex; - flex-flow: row; + a { + color: $nav-link-color; + } - aside nav, .content, .markdown { - transition: .2s ease-in-out; - transition-property: transform, margin-left, opacity; - will-change: transform, margin-left; + a.active { + color: $color-link; } +} - .menu { - flex: 0 0 $nav-menu-width; +.book-page { + min-width: $body-min-width; + padding: $padding-16; +} - .brand { - margin-top: 0; - } +.book-header { + margin-bottom: $padding-16; + display: none; +} - nav { - width: $nav-menu-width; - padding: $padding-16; - font-size: $font-size-14; - } +.book-toc { + flex: 0 0 $toc-width; + font-size: $font-size-12; - a { color: $nav-link-color; } - a.active { color: $color-link; } + nav { + width: $toc-width; + padding: $padding-16; - .flat-section { - margin-bottom: $padding-16; - > a { font-weight: 700; } - > ul { padding-left: 0; } - } + @include fixed; } - .content { - flex: 1 0; - width: 0; - min-width: $body-min-width; - padding: $padding-16; + nav > ul > li { + margin: 0; } +} - .toc { - flex: 0 0 $toc-menu-width; +.book-posts { + min-width: $body-min-width; + max-width: $sm-breakpoint; + padding: $padding-16; +} - nav { - width: $toc-menu-width; - padding: $padding-16; - font-size: $font-size-12; +ul.pagination { + display: flex; + justify-content: center; - ul ul { - padding-left: $padding-8; - } - } + .page-item a { + padding: $padding-16; } } // Responsive styles -$menu-hide-point: $nav-menu-width + $body-min-width; -$toc-hide-point: $menu-hide-point + $nav-menu-width; +aside nav, +.book-page, +.markdown { + transition: 0.2s ease-in-out; + transition-property: transform, margin-left, opacity; + will-change: transform, margin-left; +} -@media screen and (max-width: $toc-hide-point) { - .toc { +@media screen and (max-width: $md-breakpoint) { + .book-toc { display: none; } } -@media screen and (max-width: $menu-hide-point) { - .menu { - margin-left: -$nav-menu-width; +@media screen and (max-width: $sm-breakpoint) { + .book-menu { + margin-left: -$menu-width; } - main header { + .book-header { display: flex; } #menu-control:checked + main { - .menu nav, .content { - transform: translateX($nav-menu-width); + .book-menu nav, + .book-page { + transform: translateX($menu-width); } - - header label img { + + .book-header label img { transform: rotate(90deg); } .markdown { - opacity: .25; + opacity: 0.25; } } } // Extra space for big screens -@media screen and (min-width: $toc-hide-point) { - main { - .content { - padding: $padding-16 * 2 $padding-16; - } - - .menu nav, .toc nav { - padding: $padding-16 * 2; - } - } -}
\ No newline at end of file +@media screen and (min-width: $container-max-width) { + .book-page, + .book-menu nav, + .book-toc nav { + padding: $padding-16 * 2 $padding-16; + } +} |