diff options
| author | Alex Shpak <alex-shpak@users.noreply.github.com> | 2018-09-28 01:12:07 +0200 |
|---|---|---|
| committer | Alex Shpak <alex-shpak@users.noreply.github.com> | 2018-09-28 01:12:07 +0200 |
| commit | 78bd5938a392318601bfca4c2e6783727dd33d37 (patch) | |
| tree | ca3e2132a039034f3104d919851e44b57029e6a0 | |
| parent | cce17bcc99be389dce5bfbadfabaacf132c3f8f7 (diff) | |
Improve sass styles
| -rw-r--r-- | README.md | 16 | ||||
| -rw-r--r-- | assets/_markdown.scss | 2 | ||||
| -rw-r--r-- | assets/_variables.scss | 4 | ||||
| -rw-r--r-- | assets/styles.scss | 73 | ||||
| -rw-r--r-- | layouts/docs/baseof.html | 23 | ||||
| -rw-r--r-- | layouts/partials/docs/inject/menu-after.html (renamed from layouts/partials/docs/inject/nav-after.html) | 0 | ||||
| -rw-r--r-- | layouts/partials/docs/inject/menu-before.html (renamed from layouts/partials/docs/inject/nav-before.html) | 0 | ||||
| -rw-r--r-- | layouts/partials/docs/menu-filetree.html | 2 | ||||
| -rw-r--r-- | layouts/partials/docs/mobile-header.html | 4 |
9 files changed, 70 insertions, 54 deletions
@@ -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 `<head>` tag | -| `layouts/partials/docs/inject/body.html` | Before closing `<body>` tag | -| `layouts/partials/docs/inject/nav-before.html` | At the beginning of `<nav>` menu block | -| `layouts/partials/docs/inject/nav-after.html` | At the end of `<nav>` menu block | +| Partial | Placement | +| -- | -- | +| `layouts/partials/docs/inject/head.html` | Before closing `<head>` tag | +| `layouts/partials/docs/inject/body.html` | Before closing `<body>` tag | +| `layouts/partials/docs/inject/menu-before.html` | At the beginning of `<nav>` menu block | +| `layouts/partials/docs/inject/menu-after.html` | At the end of `<nav>` 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 @@ <body> <input type="checkbox" style="display: none" id="menu-control" /> - <div class="content"> + <div class="container"> - <div class="menu"> + <aside class="menu fixed"> <nav role="navigation"> - {{ partial "docs/inject/nav-before" . }} + <h2 class="brand"> + <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> + </h2> + {{ partial "docs/inject/menu-before" . }} {{ if .Site.Params.BookMenuBundle }} {{ partial "docs/menu-bundle" . }} @@ -20,24 +23,24 @@ {{ partial "docs/menu-filetree" . }} {{ end }} - {{ partial "docs/inject/nav-after" . }} + {{ partial "docs/inject/menu-after" . }} </nav> - </div> + </aside> <div class="page"> <div class="header"> - <label for="menu-control"><img src="/svg/menu.svg" /></label> + {{ partial "docs/mobile-header" . }} </div> - <div class="markdown"> + <article class="markdown"> {{- .Content -}} - </div> + </article> </div> {{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }} {{ if and ($showToC) (.Page.TableOfContents) }} - <div class="toc"> + <aside class="toc fixed"> {{ partial "docs/toc" . }} - </div> + </aside> {{ end }} </div> diff --git a/layouts/partials/docs/inject/nav-after.html b/layouts/partials/docs/inject/menu-after.html index e69de29..e69de29 100644 --- a/layouts/partials/docs/inject/nav-after.html +++ b/layouts/partials/docs/inject/menu-after.html diff --git a/layouts/partials/docs/inject/nav-before.html b/layouts/partials/docs/inject/menu-before.html index e69de29..e69de29 100644 --- a/layouts/partials/docs/inject/nav-before.html +++ b/layouts/partials/docs/inject/menu-before.html 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" }} <!-- Single section of menu (recursive) --> <ul> {{ range .Section.Sections }} - <li {{- if .Params.bookrootsection}} class="section" {{ end }}> + <li {{- if .Params.bookflatsection}} class="flat" {{ end }}> {{- 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 @@ +<label for="menu-control"> + <img src="/svg/menu.svg" /> +</label> +<strong>{{- template "title" . }}</strong>
\ No newline at end of file |