From 78bd5938a392318601bfca4c2e6783727dd33d37 Mon Sep 17 00:00:00 2001 From: Alex Shpak Date: Fri, 28 Sep 2018 01:12:07 +0200 Subject: Improve sass styles --- README.md | 16 +++--- assets/_markdown.scss | 2 +- assets/_variables.scss | 4 +- assets/styles.scss | 73 +++++++++++++++------------ layouts/docs/baseof.html | 23 +++++---- layouts/partials/docs/inject/menu-after.html | 0 layouts/partials/docs/inject/menu-before.html | 0 layouts/partials/docs/inject/nav-after.html | 0 layouts/partials/docs/inject/nav-before.html | 0 layouts/partials/docs/menu-filetree.html | 2 +- layouts/partials/docs/mobile-header.html | 4 ++ 11 files changed, 70 insertions(+), 54 deletions(-) create mode 100644 layouts/partials/docs/inject/menu-after.html create mode 100644 layouts/partials/docs/inject/menu-before.html delete mode 100644 layouts/partials/docs/inject/nav-after.html delete mode 100644 layouts/partials/docs/inject/nav-before.html create mode 100644 layouts/partials/docs/mobile-header.html diff --git a/README.md b/README.md index 5828986..bebbc05 100644 --- a/README.md +++ b/README.md @@ -90,8 +90,8 @@ type: docs # Set page weight to re-arrange items in file-tree menu (if BookMenuBundle not set) weight: 10 -# (Optional) Set to mark page as top level section in file-tree menu (if BookMenuBundle not set) -bookRootSection: true +# (Optional) Set to mark page as flat section in file-tree menu (if BookMenuBundle not set) +bookFlatSection: true # (Optional) Set to hide table of contents, overrides global value bookShowToC: false @@ -101,12 +101,12 @@ bookShowToC: false ### Partials There are few empty partials you can override in `layouts/partials/` -| Partial | Placement | -| -- | -- | -| `layouts/partials/docs/inject/head.html` | Before closing `` tag | -| `layouts/partials/docs/inject/body.html` | Before closing `` tag | -| `layouts/partials/docs/inject/nav-before.html` | At the beginning of `

` menu block | -| `layouts/partials/docs/inject/nav-after.html` | At the end of `

` menu block | +| Partial | Placement | +| -- | -- | +| `layouts/partials/docs/inject/head.html` | Before closing `` tag | +| `layouts/partials/docs/inject/body.html` | Before closing `` tag | +| `layouts/partials/docs/inject/menu-before.html` | At the beginning of `

` menu block | +| `layouts/partials/docs/inject/menu-after.html` | At the end of `

` menu block | ## Contributing diff --git a/assets/_markdown.scss b/assets/_markdown.scss index 8176e57..78505d2 100644 --- a/assets/_markdown.scss +++ b/assets/_markdown.scss @@ -3,7 +3,7 @@ $block-border-radius: 0.15rem; .markdown { - line-height: 1.5; + line-height: 1.7; :first-child { margin-top: 0; diff --git a/assets/_variables.scss b/assets/_variables.scss index 40630fc..89f1751 100644 --- a/assets/_variables.scss +++ b/assets/_variables.scss @@ -21,8 +21,8 @@ $gray-800: #343a40; $gray-900: #212529; $black: #000; -$color-link: #1177EE; -$color-visited-link: #7823c9; +$color-link: #4092f1; +$color-visited-link: #8440f1; $body-background: white; $body-font-color: $gray-800; diff --git a/assets/styles.scss b/assets/styles.scss index 72f880a..2588a21 100644 --- a/assets/styles.scss +++ b/assets/styles.scss @@ -23,6 +23,10 @@ body { } } +h1, h2, h3, h4, h5 { + font-weight: 400; +} + a { text-decoration: none; color: $color-link; @@ -32,12 +36,12 @@ a { } } -nav { +aside { ul { margin: 0; padding-left: $padding-16; list-style: none; - line-height: $padding-16 * 2; + line-height: 2em; li { a { @@ -54,20 +58,20 @@ nav { } } - &> ul { - // padding start with second level + // start padding on second level + nav > ul { padding-left: 0; } } -.header { - display: none; - align-items: center; - justify-content: space-between; - margin-bottom: $padding-16; +aside.fixed nav { + position: fixed; + top: 0; + bottom: 0; + overflow: hidden auto; } -.content { +.container { max-width: $content-max-width; margin: 0 auto; @@ -84,11 +88,7 @@ nav { flex: 0 0 $nav-menu-width; nav { - position: fixed; - height: 100%; width: $nav-menu-width; - overflow: hidden auto; - padding: $padding-16; font-size: $font-size-14; } @@ -97,13 +97,31 @@ nav { color: $nav-link-color; } - .section { + a.active { + color: $color-link; + } + + .brand { + margin-top: 0; + margin-bottom: $padding-16; + } + + .flat { margin-bottom: $padding-16; > a { font-weight: 700; } > ul { padding-left: 0; } } } + .header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: $padding-16; + + display: none; + } + .page { flex: 1 0; width: 0; @@ -112,21 +130,17 @@ nav { } .toc { - flex: 0 0 $nav-menu-width; + flex: 0 0 $toc-menu-width; nav { + width: $toc-menu-width; padding: $padding-16; font-size: $font-size-12; - > ul { - border-left: $padding-1 solid $gray-200; + ul ul { + padding-left: $padding-8; } } - - ul { - line-height: $padding-16 * 1.5; - padding-left: $padding-8; - } } } @@ -136,7 +150,6 @@ $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; } } @@ -146,20 +159,16 @@ $toc-hide-point: $menu-hide-point + $nav-menu-width; margin-left: -$nav-menu-width; } - .header { + .container .header { display: flex; } - #menu-control:checked + .content { - .menu nav { + #menu-control:checked + .container { + .menu nav, .page { transform: translateX($nav-menu-width); } - .page { - transform: translateX($nav-menu-width); - } - - .header label { + .header label img { transform: rotate(90deg); } diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html index 7eb4326..9beb261 100644 --- a/layouts/docs/baseof.html +++ b/layouts/docs/baseof.html @@ -8,11 +8,14 @@ -

- +

{{- .Content -}} -

{{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }} {{ if and ($showToC) (.Page.TableOfContents) }} -

+ {{ end }}

diff --git a/layouts/partials/docs/inject/menu-after.html b/layouts/partials/docs/inject/menu-after.html new file mode 100644 index 0000000..e69de29 diff --git a/layouts/partials/docs/inject/menu-before.html b/layouts/partials/docs/inject/menu-before.html new file mode 100644 index 0000000..e69de29 diff --git a/layouts/partials/docs/inject/nav-after.html b/layouts/partials/docs/inject/nav-after.html deleted file mode 100644 index e69de29..0000000 diff --git a/layouts/partials/docs/inject/nav-before.html b/layouts/partials/docs/inject/nav-before.html deleted file mode 100644 index e69de29..0000000 diff --git a/layouts/partials/docs/menu-filetree.html b/layouts/partials/docs/menu-filetree.html index 490c350..5c1f11b 100644 --- a/layouts/partials/docs/menu-filetree.html +++ b/layouts/partials/docs/menu-filetree.html @@ -8,7 +8,7 @@ {{ define "book-section" }}

+
{{- if .Content -}} {{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }} {{- else -}} diff --git a/layouts/partials/docs/mobile-header.html b/layouts/partials/docs/mobile-header.html new file mode 100644 index 0000000..3c8866e --- /dev/null +++ b/layouts/partials/docs/mobile-header.html @@ -0,0 +1,4 @@ + + + +{{- template "title" . }} \ No newline at end of file -- cgit v1.2.3