diff options
| -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 | ||||
| -rw-r--r-- | layouts/docs/baseof.html | 54 | ||||
| -rw-r--r-- | layouts/partials/docs/header.html | 6 | ||||
| -rw-r--r-- | layouts/partials/docs/html-head.html | 5 | ||||
| -rw-r--r-- | layouts/partials/docs/menu-bundle.html (renamed from layouts/partials/docs/nav-bundle.html) | 0 | ||||
| -rw-r--r-- | layouts/partials/docs/menu-filetree.html (renamed from layouts/partials/docs/nav-filetree.html) | 2 | ||||
| -rw-r--r-- | layouts/partials/docs/nav-brand.html | 3 |
10 files changed, 142 insertions, 191 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; + } } } diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html index 94f8cd4..7eb4326 100644 --- a/layouts/docs/baseof.html +++ b/layouts/docs/baseof.html @@ -7,37 +7,39 @@ </head> <body> - <div class="header"> - {{ partial "docs/header" . }} - </div> - - <input type="checkbox" style="display: none" id="nav-control" /> - <nav role="navigation" class="menu"> - {{ partial "docs/inject/nav-before" . }} - - {{ if .Site.Params.BookMenuBundle }} - {{ partial "docs/nav-bundle" . }} - {{ else }} - {{ partial "docs/nav-filetree" . }} - {{ end }} - - {{ partial "docs/inject/nav-after" . }} - </nav> + <input type="checkbox" style="display: none" id="menu-control" /> + <div class="content"> - <div> - - <div class="pure-g content"> - <div class="pure-u-1 pure-u-lg-2-3 page markdown"> - {{- .Content -}} + <div class="menu"> + <nav role="navigation"> + {{ partial "docs/inject/nav-before" . }} + + {{ if .Site.Params.BookMenuBundle }} + {{ partial "docs/menu-bundle" . }} + {{ else }} + {{ partial "docs/menu-filetree" . }} + {{ end }} + + {{ partial "docs/inject/nav-after" . }} + </nav> + </div> + + <div class="page"> + <div class="header"> + <label for="menu-control"><img src="/svg/menu.svg" /></label> </div> - {{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }} - {{ if and ($showToC) (.Page.TableOfContents) }} - <div class="pure-u-1 pure-u-lg-1-3 pure-hidden-md toc"> - {{ partial "docs/toc" . }} + <div class="markdown"> + {{- .Content -}} </div> - {{ end }} </div> + {{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }} + {{ if and ($showToC) (.Page.TableOfContents) }} + <div class="toc"> + {{ partial "docs/toc" . }} + </div> + {{ end }} + </div> {{ partial "docs/inject/body" . }} diff --git a/layouts/partials/docs/header.html b/layouts/partials/docs/header.html deleted file mode 100644 index aab1fcb..0000000 --- a/layouts/partials/docs/header.html +++ /dev/null @@ -1,6 +0,0 @@ -<label for="nav-control"> - <img src="/svg/menu.svg" /> -</label> -<h3> - <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> -</h3>
\ No newline at end of file diff --git a/layouts/partials/docs/html-head.html b/layouts/partials/docs/html-head.html index fe09dd0..1da298c 100644 --- a/layouts/partials/docs/html-head.html +++ b/layouts/partials/docs/html-head.html @@ -3,10 +3,7 @@ <title>{{- template "title" . }} | {{ .Site.Title -}}</title> <link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,700" rel="stylesheet"> -<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/base-min.css"> -<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-min.css"> -<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> - +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"> {{ $styles := resources.Get "styles.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }} <link rel="stylesheet" href="{{ $styles.Permalink }}">
\ No newline at end of file diff --git a/layouts/partials/docs/nav-bundle.html b/layouts/partials/docs/menu-bundle.html index bdabefd..bdabefd 100644 --- a/layouts/partials/docs/nav-bundle.html +++ b/layouts/partials/docs/menu-bundle.html diff --git a/layouts/partials/docs/nav-filetree.html b/layouts/partials/docs/menu-filetree.html index 3ec4539..490c350 100644 --- a/layouts/partials/docs/nav-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="root-section" {{ end }}> + <li {{- if .Params.bookrootsection}} class="section" {{ end }}> {{- if .Content -}} {{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }} {{- else -}} diff --git a/layouts/partials/docs/nav-brand.html b/layouts/partials/docs/nav-brand.html deleted file mode 100644 index 5a2c9cb..0000000 --- a/layouts/partials/docs/nav-brand.html +++ /dev/null @@ -1,3 +0,0 @@ -<h2 class="book-brand"> - <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> -</h2>
\ No newline at end of file |