diff options
| -rw-r--r-- | assets/_markdown.scss | 7 | ||||
| -rw-r--r-- | assets/_pure-extension.scss | 34 | ||||
| -rw-r--r-- | assets/_variables.scss | 41 | ||||
| -rw-r--r-- | assets/styles.scss | 186 | ||||
| -rw-r--r-- | layouts/docs/baseof.html | 56 | ||||
| -rw-r--r-- | layouts/partials/docs/header.html | 6 | ||||
| -rw-r--r-- | layouts/partials/docs/html-head.html | 6 | ||||
| -rw-r--r-- | layouts/partials/docs/nav-filetree.html | 2 | ||||
| -rw-r--r-- | static/svg/close.svg | 1 | ||||
| -rw-r--r-- | static/svg/menu.svg | 1 |
10 files changed, 190 insertions, 150 deletions
diff --git a/assets/_markdown.scss b/assets/_markdown.scss index 709210a..e2ed12d 100644 --- a/assets/_markdown.scss +++ b/assets/_markdown.scss @@ -3,8 +3,11 @@ $block-border-radius: 0.15rem; .markdown { + line-height: 1.5; + h1, h2, h3, h4, h5 { font-weight: 400; + line-height: 1.25; } b, optgroup, strong { @@ -44,4 +47,8 @@ $block-border-radius: 0.15rem; :first-child { margin-top: 0; } :last-child { margin-bottom: 0; } } + + table tr td { + padding: $padding-8; + } }
\ No newline at end of file diff --git a/assets/_pure-extension.scss b/assets/_pure-extension.scss index 853810a..23fc7f8 100644 --- a/assets/_pure-extension.scss +++ b/assets/_pure-extension.scss @@ -8,38 +8,12 @@ html, button, input, select, textarea, .pure-g [class *= "pure-u"] { .pure-g { [class *= "pure-u"] { box-sizing: border-box; + padding: $padding-16; } } -.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: 700; +@media screen and (max-width:64em) { + .pure-hidden-md { + display: none; } } - -.pure-menu-link, .pure-menu-heading { - padding: $padding-4 $padding-16; - text-transform: capitalize; -} - -.pure-menu-link { - &:hover, &.active { - background: none; - } -}
\ No newline at end of file diff --git a/assets/_variables.scss b/assets/_variables.scss index 76d1ea7..b4ed939 100644 --- a/assets/_variables.scss +++ b/assets/_variables.scss @@ -1,4 +1,4 @@ -$padding-1: 1px; //minimal +$padding-1: 1px; $padding-4: .25rem; $padding-8: .5rem; $padding-16: 1rem; @@ -8,10 +8,6 @@ $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; @@ -28,17 +24,42 @@ $black: #000; $color-link: #1177EE; $color-visited-link: #7823c9; - -$body-background: none; +$body-background: white; $body-font-color: $gray-800; $body-font-weight: 300; -$body-line-height: 1.75; $body-min-width: 25rem; -$nav-background: $gray-100; +$nav-background: $body-background; //$gray-100; $nav-link-color: $gray-800; -$nav-menu-width: 18rem; + +$header-height: 3.5rem; +$nav-menu-width: 16rem; $toc-menu-width: 14rem; $content-max-width: 64rem; $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 c36d583..8f88b67 100644 --- a/assets/styles.scss +++ b/assets/styles.scss @@ -15,128 +15,156 @@ html, body { body { color: $body-font-color; background: $body-background; - line-height: $body-line-height; } a { text-decoration: none; color: $color-link; + + &:visited { + color: $color-visited-link; + } } -.book-brand { - padding: 0 $padding-16; - margin-bottom: $padding-8; - font-weight: 400; +ul { + margin: 0; + padding-left: $padding-16; + line-height: $padding-16 * 2; - a { - color: $body-font-color; + li { + + a { + display: block; + } + + img { + height: $padding-16; + } + } +} + +.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; + 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; + } } } -// Navigation styles -.book-nav { - flex-grow: 0; +.menu { + position: fixed; width: $nav-menu-width; + top: $header-height; + bottom: 0; + box-sizing: border-box; + padding: $padding-16; + + background: $nav-background; - nav { - position: fixed; - height: 100%; - width: $nav-menu-width; + overflow-x: hidden; + overflow-y: auto; - overflow-x: hidden; - overflow-y: auto; + transition: transform 0.3s ease-in-out; + will-change: transform; - font-size: $font-size-14; - background: $nav-background; + font-size: $font-size-14; + line-height: 2rem; + + a { + display: block; + color: $nav-link-color; + + &.active { + color: $color-link; + } } ul { list-style: none; - margin: 0; - padding-left: $padding-16; + } - li { - line-height: $padding-16 * 2; - } + // No padding for first level + > ul { + padding: 0; + } - a { - display: block; - color: $nav-link-color; - text-transform: capitalize; - - &[href]:hover { - opacity: 0.5; - } - - &.active { - color: $color-link; - } - } + // Move content + + div { + margin-left: $nav-menu-width; + margin-top: $header-height; } - // class used for sections with bookRootSection: true - .book-nav-section { + .root-section { margin-bottom: $padding-16; > a { font-weight: 600; } > ul { padding-left: 0; } } } -.book-content { +.content { + margin: 0 auto; max-width: $content-max-width; min-width: $content-min-width; - margin: 0 auto; - .book-page { - padding: $padding-16 $size-48; + .page { + overflow: hidden; } - a:visited { - color: $color-visited-link - } -} - -// Table of Contents styles -.book-toc { - flex-grow: 0; - width: $toc-menu-width; - - nav { - position: fixed; - height: 100%; - width: $toc-menu-width; - - overflow-x: hidden; - overflow-y: auto; - + .toc { font-size: $font-size-12; - > ul { - margin: $size-48 0; - padding: 0 $padding-8; - border-left: $padding-1 solid $gray-200; + nav > ul { + border-left: $padding-1 solid $gray-100; + } + + ul { + list-style: none; + padding-left: $padding-8; + line-height: $padding-16 * 1.5; } } +} - ul { - padding-left: $padding-8; - list-style: none; +// Mobile styles +@media screen and (max-width: 50rem) { + .header label { + display: inline-block; } - a { - line-height: 1.25; - padding: $padding-4 0; - display: block; + .menu { + transform: translateX(-$nav-menu-width); - img { - max-height: $font-size-16; + + div { + margin-left: 0; } } -} -// Print styles -@media print { - .book-nav, .book-toc { - display: none; + #nav-control:checked + nav { + @include shadow; + transform: translateX(0); } -}
\ No newline at end of file +} diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html index 3a97228..94f8cd4 100644 --- a/layouts/docs/baseof.html +++ b/layouts/docs/baseof.html @@ -7,39 +7,39 @@ </head> <body> - <div class="pure-g"> - - <div class="pure-u book-nav"> - <nav role="navigation"> - {{ partial "docs/nav-brand" . }} - {{ 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> - </div> - <div class="pure-u book-content"> - <div class="pure-g"> - - <div class="pure-u book-page markdown"> - {{- .Content -}} - </div> - {{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }} - {{ if and ($showToC) (.Page.TableOfContents) }} - <div class="pure-u book-toc"> - {{ partial "docs/toc" . }} - </div> - {{ end }} + <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> + <div> + + <div class="pure-g content"> + <div class="pure-u-1 pure-u-lg-2-3 page markdown"> + {{- .Content -}} + </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> + {{ end }} </div> </div> + {{ partial "docs/inject/body" . }} </body> </html>
\ No newline at end of file diff --git a/layouts/partials/docs/header.html b/layouts/partials/docs/header.html new file mode 100644 index 0000000..aab1fcb --- /dev/null +++ b/layouts/partials/docs/header.html @@ -0,0 +1,6 @@ +<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 e77c218..fe09dd0 100644 --- a/layouts/partials/docs/html-head.html +++ b/layouts/partials/docs/html-head.html @@ -3,8 +3,10 @@ <title>{{- template "title" . }} | {{ .Site.Title -}}</title> <link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,700" rel="stylesheet"> -<link href="/css/pure-min.css" rel="stylesheet"> -<!-- <link href="/css/grids-responsive-min.css" 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"> + {{ $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-filetree.html b/layouts/partials/docs/nav-filetree.html index 6c2f965..3ec4539 100644 --- a/layouts/partials/docs/nav-filetree.html +++ b/layouts/partials/docs/nav-filetree.html @@ -8,7 +8,7 @@ {{ define "book-section" }} <!-- Single section of menu (recursive) --> <ul> {{ range .Section.Sections }} - <li> + <li {{- if .Params.bookrootsection}} class="root-section" {{ end }}> {{- if .Content -}} {{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }} {{- else -}} diff --git a/static/svg/close.svg b/static/svg/close.svg new file mode 100644 index 0000000..dea8678 --- /dev/null +++ b/static/svg/close.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
\ No newline at end of file diff --git a/static/svg/menu.svg b/static/svg/menu.svg new file mode 100644 index 0000000..770b192 --- /dev/null +++ b/static/svg/menu.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
\ No newline at end of file |
