diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/_markdown.scss | 5 | ||||
| -rw-r--r-- | assets/_pure-extension.scss | 19 | ||||
| -rw-r--r-- | assets/_variables.scss | 29 | ||||
| -rw-r--r-- | assets/styles.scss | 210 |
4 files changed, 112 insertions, 151 deletions
diff --git a/assets/_markdown.scss b/assets/_markdown.scss index e2ed12d..8176e57 100644 --- a/assets/_markdown.scss +++ b/assets/_markdown.scss @@ -5,6 +5,10 @@ $block-border-radius: 0.15rem; .markdown { line-height: 1.5; + :first-child { + margin-top: 0; + } + h1, h2, h3, h4, h5 { font-weight: 400; line-height: 1.25; @@ -37,6 +41,7 @@ $block-border-radius: 0.15rem; background: $gray-100; border-radius: $block-border-radius; font-size: $font-size-14; + overflow-x: auto; } blockquote { diff --git a/assets/_pure-extension.scss b/assets/_pure-extension.scss deleted file mode 100644 index 23fc7f8..0000000 --- a/assets/_pure-extension.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import 'variables'; - -html, button, input, select, textarea, .pure-g [class *= "pure-u"] { - font-family: Roboto, sans-serif; - font-weight: $body-font-weight; -} - -.pure-g { - [class *= "pure-u"] { - box-sizing: border-box; - padding: $padding-16; - } -} - -@media screen and (max-width:64em) { - .pure-hidden-md { - display: none; - } -} diff --git a/assets/_variables.scss b/assets/_variables.scss index b4ed939..40630fc 100644 --- a/assets/_variables.scss +++ b/assets/_variables.scss @@ -9,7 +9,7 @@ $font-size-14: .875rem; $font-size-16: 1rem; // Grayscale -$white: #fff; +$white: #ffffff; $gray-100: #f8f9fa; $gray-200: #e9ecef; $gray-300: #dee2e6; @@ -36,30 +36,5 @@ $header-height: 3.5rem; $nav-menu-width: 16rem; $toc-menu-width: 14rem; -$content-max-width: 64rem; +$content-max-width: 80rem; $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 8f88b67..72f880a 100644 --- a/assets/styles.scss +++ b/assets/styles.scss @@ -1,20 +1,26 @@ @import 'variables'; -@import 'pure-extension'; @import 'markdown'; + html { font-size: $font-size-base; } html, body { - width: 100%; - min-height: 100%; min-width: $body-min-width; + overflow: hidden auto; } body { color: $body-font-color; background: $body-background; + font-family: 'Roboto', sans-serif; + font-weight: $body-font-weight; + + box-sizing: border-box; + * { + box-sizing: inherit; + } } a { @@ -26,145 +32,139 @@ a { } } -ul { - margin: 0; - padding-left: $padding-16; - line-height: $padding-16 * 2; +nav { + ul { + margin: 0; + padding-left: $padding-16; + list-style: none; + line-height: $padding-16 * 2; - li { - - a { - display: block; - } + li { + a { + display: block; + } - img { - height: $padding-16; + a:hover { + opacity: .5; + } + + img { + height: $padding-16; + } } } + + &> ul { + // padding start with second level + padding-left: 0; + } } .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; + display: none; 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; - } - } + justify-content: space-between; + margin-bottom: $padding-16; } -.menu { - position: fixed; - width: $nav-menu-width; - top: $header-height; - bottom: 0; - box-sizing: border-box; - padding: $padding-16; - - background: $nav-background; +.content { + max-width: $content-max-width; + margin: 0 auto; - overflow-x: hidden; - overflow-y: auto; + display: flex; + flex-flow: row; - transition: transform 0.3s ease-in-out; - will-change: transform; + .menu nav, .page, .markdown { + transition: 0.2s ease-in-out; + transition-property: transform, margin-left, opacity; + will-change: transform, margin-left; + } - font-size: $font-size-14; - line-height: 2rem; + .menu { + flex: 0 0 $nav-menu-width; - a { - display: block; - color: $nav-link-color; + nav { + position: fixed; + height: 100%; + width: $nav-menu-width; + overflow: hidden auto; - &.active { - color: $color-link; + padding: $padding-16; + font-size: $font-size-14; } - } - - ul { - list-style: none; - } - // No padding for first level - > ul { - padding: 0; - } - - // Move content - + div { - margin-left: $nav-menu-width; - margin-top: $header-height; - } + a { + color: $nav-link-color; + } - .root-section { - margin-bottom: $padding-16; - > a { font-weight: 600; } - > ul { padding-left: 0; } + .section { + margin-bottom: $padding-16; + > a { font-weight: 700; } + > ul { padding-left: 0; } + } } -} - -.content { - margin: 0 auto; - max-width: $content-max-width; - min-width: $content-min-width; .page { - overflow: hidden; + flex: 1 0; + width: 0; + min-width: $body-min-width; + padding: $padding-16; } .toc { - font-size: $font-size-12; + flex: 0 0 $nav-menu-width; - nav > ul { - border-left: $padding-1 solid $gray-100; - } + nav { + padding: $padding-16; + font-size: $font-size-12; + > ul { + border-left: $padding-1 solid $gray-200; + } + } + ul { - list-style: none; - padding-left: $padding-8; line-height: $padding-16 * 1.5; + padding-left: $padding-8; } } } -// Mobile styles -@media screen and (max-width: 50rem) { - .header label { - display: inline-block; +// Responsive styles +$menu-hide-point: $nav-menu-width + $body-min-width; +$toc-hide-point: $menu-hide-point + $nav-menu-width; + +@media screen and (max-width: $toc-hide-point) { + .toc { + // margin-right: -$nav-menu-width; + display: none; } +} +@media screen and (max-width: $menu-hide-point) { .menu { - transform: translateX(-$nav-menu-width); + margin-left: -$nav-menu-width; + } - + div { - margin-left: 0; - } + .header { + display: flex; } - #nav-control:checked + nav { - @include shadow; - transform: translateX(0); + #menu-control:checked + .content { + .menu nav { + transform: translateX($nav-menu-width); + } + + .page { + transform: translateX($nav-menu-width); + } + + .header label { + transform: rotate(90deg); + } + + .markdown { + opacity: .25; + } } } |