diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/markdown.scss | 39 | ||||
| -rw-r--r-- | assets/pure-extension.scss | 55 | ||||
| -rw-r--r-- | assets/styles.scss | 97 | ||||
| -rw-r--r-- | assets/variables.scss | 36 |
4 files changed, 227 insertions, 0 deletions
diff --git a/assets/markdown.scss b/assets/markdown.scss new file mode 100644 index 0000000..d2a33ff --- /dev/null +++ b/assets/markdown.scss @@ -0,0 +1,39 @@ +@import 'variables'; + +$block-border-radius: 0.15rem; + +.markdown { + a { + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + code { + font-family: 'Roboto Mono', monospace; + } + + p code { + padding: $padding-1 $padding-4; + background: $gray-100; + border-radius: $block-border-radius; + } + + pre { + padding: $padding-16; + background: $gray-100; + border-radius: $block-border-radius; + font-size: $font-size-14; + } + + blockquote { + border-left: $padding-1*2 solid $gray-300; + margin: 0; + padding: $padding-1 $padding-16; + + :first-child { margin-top: 0; } + :last-child { margin-bottom: 0; } + } +}
\ No newline at end of file diff --git a/assets/pure-extension.scss b/assets/pure-extension.scss new file mode 100644 index 0000000..b4c1ab5 --- /dev/null +++ b/assets/pure-extension.scss @@ -0,0 +1,55 @@ +@import 'variables'; + +html, button, input, select, textarea, .pure-g [class *= "pure-u"] { + font-family: "Open Sans", "Roboto", sans-serif; + font-weight: 300; + +} + +.pure-g { + [class *= "pure-u"] { + box-sizing: border-box; + } +} + +.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: 600; + } +} + +.pure-menu-link, .pure-menu-heading { + color: $gray-800; + padding: $padding-4 $padding-16; + text-transform: capitalize; +} + +.pure-menu-link { + &:hover, &.active { + background: none; + } + + &:hover { + color: $gray-600; + } + + &.active { + color: #1F37E6; + } +}
\ No newline at end of file diff --git a/assets/styles.scss b/assets/styles.scss new file mode 100644 index 0000000..ff9dd17 --- /dev/null +++ b/assets/styles.scss @@ -0,0 +1,97 @@ +@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; +} + +body { + color: $gray-800; + line-height: $body-line-height; +} + +.book-content { + max-width: $content-max-width; + margin: 0 auto; +} + +.book-page { + padding: 0 $size-48; +} + +.book-brand { + padding: 0 $padding-16; + font-weight: 300; + + a { + color: $gray-800; + text-decoration: none; + } +} + +.book-nav { + width: $nav-menu-width; + flex-grow: 0; + + nav { + position: fixed; + height: 100%; + width: $nav-menu-width; + + overflow-x: hidden; + overflow-y: auto; + + font-size: $font-size-14; + background: $gray-100; + padding-left: $padding-16; + } +} + +.book-toc { + flex-grow: 0; + width: $toc-menu-width; + font-size: $font-size-12; + + nav { + position: fixed; + height: 100%; + width: $toc-menu-width; + + overflow-x: hidden; + overflow-y: auto; + + > ul { + margin: $size-48 0; + padding: 0 $padding-16; + border-left: $padding-1 solid $gray-200; + } + } + + ul { + padding-left: $padding-4; + list-style: none; + } + + a { + text-decoration: none; + line-height: 1.25; + padding: $padding-4 0; + display: block; + + img { + max-height: $font-size-16; + } + } +} + +// Print styles +@media print { + +}
\ No newline at end of file diff --git a/assets/variables.scss b/assets/variables.scss new file mode 100644 index 0000000..4d4413e --- /dev/null +++ b/assets/variables.scss @@ -0,0 +1,36 @@ +$padding-1: 1px; //minimal +$padding-4: .25rem; +$padding-8: .5rem; +$padding-16: 1rem; + +$font-size-base: 16px; +$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; +$gray-200: #e9ecef; +$gray-300: #dee2e6; +$gray-400: #ced4da; +$gray-500: #adb5bd; +$gray-600: #868e96; +$gray-700: #495057; +$gray-800: #343a40; +$gray-900: #212529; +$black: #000; + +// $color-link: +// $color-visited-link: + + +$body-line-height: 1.75; +$body-min-width: 25rem; +$content-max-width: 64rem; +$nav-menu-width: 18rem; +$toc-menu-width: 14rem;
\ No newline at end of file |