From 628a4df0df81347c74a88e4c110066c9dc6017d1 Mon Sep 17 00:00:00 2001 From: Alex Shpak Date: Tue, 11 Sep 2018 16:51:27 +0200 Subject: Refactor partials, layout and sass files --- assets/_markdown.scss | 39 ++++++++++++++++++++++++++++ assets/_pure-extension.scss | 55 +++++++++++++++++++++++++++++++++++++++ assets/_variables.scss | 36 ++++++++++++++++++++++++++ assets/markdown.scss | 39 ---------------------------- assets/pure-extension.scss | 55 --------------------------------------- assets/styles.scss | 63 ++++++++++++++++++++++++++++++++++----------- assets/variables.scss | 36 -------------------------- 7 files changed, 178 insertions(+), 145 deletions(-) create mode 100644 assets/_markdown.scss create mode 100644 assets/_pure-extension.scss create mode 100644 assets/_variables.scss delete mode 100644 assets/markdown.scss delete mode 100644 assets/pure-extension.scss delete mode 100644 assets/variables.scss (limited to 'assets') 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..e540ef2 --- /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: $color-link; + } +} \ No newline at end of file diff --git a/assets/_variables.scss b/assets/_variables.scss new file mode 100644 index 0000000..125a29f --- /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: #1177EE; +$color-visited-link: #7823c9; + +$body-line-height: 1.75; +$body-min-width: 25rem; +$content-max-width: 64rem; +$content-min-width: $body-min-width; +$nav-menu-width: 18rem; +$toc-menu-width: 14rem; \ No newline at end of file diff --git a/assets/markdown.scss b/assets/markdown.scss deleted file mode 100644 index d2a33ff..0000000 --- a/assets/markdown.scss +++ /dev/null @@ -1,39 +0,0 @@ -@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 deleted file mode 100644 index b4c1ab5..0000000 --- a/assets/pure-extension.scss +++ /dev/null @@ -1,55 +0,0 @@ -@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 index ff9dd17..e21beab 100644 --- a/assets/styles.scss +++ b/assets/styles.scss @@ -17,28 +17,20 @@ body { line-height: $body-line-height; } -.book-content { - max-width: $content-max-width; - margin: 0 auto; -} - -.book-page { - padding: 0 $size-48; +a { + text-decoration: none; + color: $color-link; } .book-brand { padding: 0 $padding-16; font-weight: 300; - - a { - color: $gray-800; - text-decoration: none; - } } +// Navigation styles .book-nav { - width: $nav-menu-width; flex-grow: 0; + width: $nav-menu-width; nav { position: fixed; @@ -50,14 +42,54 @@ body { font-size: $font-size-14; background: $gray-100; + } + + ul { + list-style: none; padding-left: $padding-16; } + + a { + display: block; + color: $gray-800; + padding: $padding-4 $padding-16; + text-transform: capitalize; + + &[href]:hover { + color: $gray-600; + } + + &.active { + color: $color-link; + } + } + + // class used for sections with bookTopSection: true + .book-nav-section { + margin-bottom: $padding-16; + > a { font-weight: 600; } + > ul { padding-left: 0; } + } +} + +.book-content { + max-width: $content-max-width; + min-width: $content-min-width; + margin: 0 auto; + + .book-page { + padding: $padding-16 $size-48; + } + + a:visited { + color: $color-visited-link + } } +// Table of Contents styles .book-toc { flex-grow: 0; width: $toc-menu-width; - font-size: $font-size-12; nav { position: fixed; @@ -67,6 +99,8 @@ body { overflow-x: hidden; overflow-y: auto; + font-size: $font-size-12; + > ul { margin: $size-48 0; padding: 0 $padding-16; @@ -80,7 +114,6 @@ body { } a { - text-decoration: none; line-height: 1.25; padding: $padding-4 0; display: block; diff --git a/assets/variables.scss b/assets/variables.scss deleted file mode 100644 index 4d4413e..0000000 --- a/assets/variables.scss +++ /dev/null @@ -1,36 +0,0 @@ -$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 -- cgit v1.2.3