diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/_markdown.scss | 7 | ||||
| -rw-r--r-- | assets/_pure-extension.scss | 34 | ||||
| -rw-r--r-- | assets/_variables.scss | 41 | ||||
| -rw-r--r-- | assets/styles.scss | 186 |
4 files changed, 149 insertions, 119 deletions
diff --git a/assets/_markdown.scss b/assets/_markdown.scss index 709210a..e2ed12d 100644 --- a/assets/_markdown.scss +++ b/assets/_markdown.scss @@ -3,8 +3,11 @@ $block-border-radius: 0.15rem; .markdown { + line-height: 1.5; + h1, h2, h3, h4, h5 { font-weight: 400; + line-height: 1.25; } b, optgroup, strong { @@ -44,4 +47,8 @@ $block-border-radius: 0.15rem; :first-child { margin-top: 0; } :last-child { margin-bottom: 0; } } + + table tr td { + padding: $padding-8; + } }
\ No newline at end of file diff --git a/assets/_pure-extension.scss b/assets/_pure-extension.scss index 853810a..23fc7f8 100644 --- a/assets/_pure-extension.scss +++ b/assets/_pure-extension.scss @@ -8,38 +8,12 @@ html, button, input, select, textarea, .pure-g [class *= "pure-u"] { .pure-g { [class *= "pure-u"] { box-sizing: border-box; + padding: $padding-16; } } -.pure-u { - flex-grow: 1; - width: 0; -} - -.pure-menu-list ul ul { - // left padding for nested sections - padding-left: $padding-16; -} - -.pure-menu-root { - // vertical space between root sections - > li { - padding-bottom: $padding-16; - } - - // font weight only for root sections - > li > .section { - font-weight: 700; +@media screen and (max-width:64em) { + .pure-hidden-md { + display: none; } } - -.pure-menu-link, .pure-menu-heading { - padding: $padding-4 $padding-16; - text-transform: capitalize; -} - -.pure-menu-link { - &:hover, &.active { - background: none; - } -}
\ No newline at end of file diff --git a/assets/_variables.scss b/assets/_variables.scss index 76d1ea7..b4ed939 100644 --- a/assets/_variables.scss +++ b/assets/_variables.scss @@ -1,4 +1,4 @@ -$padding-1: 1px; //minimal +$padding-1: 1px; $padding-4: .25rem; $padding-8: .5rem; $padding-16: 1rem; @@ -8,10 +8,6 @@ $font-size-12: .75rem; $font-size-14: .875rem; $font-size-16: 1rem; -$size-48: 3rem; -// $size-56: 3.5rem; -// $size-72: 4.5rem; - // Grayscale $white: #fff; $gray-100: #f8f9fa; @@ -28,17 +24,42 @@ $black: #000; $color-link: #1177EE; $color-visited-link: #7823c9; - -$body-background: none; +$body-background: white; $body-font-color: $gray-800; $body-font-weight: 300; -$body-line-height: 1.75; $body-min-width: 25rem; -$nav-background: $gray-100; +$nav-background: $body-background; //$gray-100; $nav-link-color: $gray-800; -$nav-menu-width: 18rem; + +$header-height: 3.5rem; +$nav-menu-width: 16rem; $toc-menu-width: 14rem; $content-max-width: 64rem; $content-min-width: $body-min-width; + + +// Mixins +@mixin shadow { + box-shadow: 0 0 $padding-8 rgba(0,0,0,0.1); +} + +@mixin ul { + ul { + list-style: none; + padding-left: $padding-16; + + li { + line-height: $padding-16; + + a { + display: block; + } + + img { + height: $padding-16; + } + } + } +}
\ No newline at end of file diff --git a/assets/styles.scss b/assets/styles.scss index c36d583..8f88b67 100644 --- a/assets/styles.scss +++ b/assets/styles.scss @@ -15,128 +15,156 @@ html, body { body { color: $body-font-color; background: $body-background; - line-height: $body-line-height; } a { text-decoration: none; color: $color-link; + + &:visited { + color: $color-visited-link; + } } -.book-brand { - padding: 0 $padding-16; - margin-bottom: $padding-8; - font-weight: 400; +ul { + margin: 0; + padding-left: $padding-16; + line-height: $padding-16 * 2; - a { - color: $body-font-color; + li { + + a { + display: block; + } + + img { + height: $padding-16; + } + } +} + +.header { + position: fixed; + width: 100%; + height: $header-height; + padding: $padding-16; + top: 0; + box-sizing: border-box; + z-index: 1; + + background: $body-background; + @include shadow; + + display: flex; + align-items: center; + + label { + line-height: 0; + margin-right: $padding-16; + display: none; + } + + h3 { + font-weight: 400; + line-height: 1.5rem; + margin: 0; + + a { + color: $nav-link-color; + } } } -// Navigation styles -.book-nav { - flex-grow: 0; +.menu { + position: fixed; width: $nav-menu-width; + top: $header-height; + bottom: 0; + box-sizing: border-box; + padding: $padding-16; + + background: $nav-background; - nav { - position: fixed; - height: 100%; - width: $nav-menu-width; + overflow-x: hidden; + overflow-y: auto; - overflow-x: hidden; - overflow-y: auto; + transition: transform 0.3s ease-in-out; + will-change: transform; - font-size: $font-size-14; - background: $nav-background; + font-size: $font-size-14; + line-height: 2rem; + + a { + display: block; + color: $nav-link-color; + + &.active { + color: $color-link; + } } ul { list-style: none; - margin: 0; - padding-left: $padding-16; + } - li { - line-height: $padding-16 * 2; - } + // No padding for first level + > ul { + padding: 0; + } - a { - display: block; - color: $nav-link-color; - text-transform: capitalize; - - &[href]:hover { - opacity: 0.5; - } - - &.active { - color: $color-link; - } - } + // Move content + + div { + margin-left: $nav-menu-width; + margin-top: $header-height; } - // class used for sections with bookRootSection: true - .book-nav-section { + .root-section { margin-bottom: $padding-16; > a { font-weight: 600; } > ul { padding-left: 0; } } } -.book-content { +.content { + margin: 0 auto; max-width: $content-max-width; min-width: $content-min-width; - margin: 0 auto; - .book-page { - padding: $padding-16 $size-48; + .page { + overflow: hidden; } - a:visited { - color: $color-visited-link - } -} - -// Table of Contents styles -.book-toc { - flex-grow: 0; - width: $toc-menu-width; - - nav { - position: fixed; - height: 100%; - width: $toc-menu-width; - - overflow-x: hidden; - overflow-y: auto; - + .toc { font-size: $font-size-12; - > ul { - margin: $size-48 0; - padding: 0 $padding-8; - border-left: $padding-1 solid $gray-200; + nav > ul { + border-left: $padding-1 solid $gray-100; + } + + ul { + list-style: none; + padding-left: $padding-8; + line-height: $padding-16 * 1.5; } } +} - ul { - padding-left: $padding-8; - list-style: none; +// Mobile styles +@media screen and (max-width: 50rem) { + .header label { + display: inline-block; } - a { - line-height: 1.25; - padding: $padding-4 0; - display: block; + .menu { + transform: translateX(-$nav-menu-width); - img { - max-height: $font-size-16; + + div { + margin-left: 0; } } -} -// Print styles -@media print { - .book-nav, .book-toc { - display: none; + #nav-control:checked + nav { + @include shadow; + transform: translateX(0); } -}
\ No newline at end of file +} |