From cce17bcc99be389dce5bfbadfabaacf132c3f8f7 Mon Sep 17 00:00:00 2001 From: Alex Shpak Date: Wed, 26 Sep 2018 00:12:56 +0200 Subject: [PATCH] Remove purecss dependency and replace with flexbox --- assets/_markdown.scss | 5 + assets/_pure-extension.scss | 19 -- assets/_variables.scss | 29 +-- assets/styles.scss | 216 +++++++++--------- layouts/docs/baseof.html | 54 ++--- layouts/partials/docs/header.html | 6 - layouts/partials/docs/html-head.html | 5 +- .../{nav-bundle.html => menu-bundle.html} | 0 .../{nav-filetree.html => menu-filetree.html} | 2 +- layouts/partials/docs/nav-brand.html | 3 - 10 files changed, 145 insertions(+), 194 deletions(-) delete mode 100644 assets/_pure-extension.scss delete mode 100644 layouts/partials/docs/header.html rename layouts/partials/docs/{nav-bundle.html => menu-bundle.html} (100%) rename layouts/partials/docs/{nav-filetree.html => menu-filetree.html} (94%) delete mode 100644 layouts/partials/docs/nav-brand.html 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; + justify-content: space-between; + margin-bottom: $padding-16; +} - label { - line-height: 0; - margin-right: $padding-16; - display: none; +.content { + max-width: $content-max-width; + margin: 0 auto; + + display: flex; + flex-flow: row; + + .menu nav, .page, .markdown { + transition: 0.2s ease-in-out; + transition-property: transform, margin-left, opacity; + will-change: transform, margin-left; } - h3 { - font-weight: 400; - line-height: 1.5rem; - margin: 0; + .menu { + 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; + } a { color: $nav-link-color; } - } -} -.menu { - position: fixed; - width: $nav-menu-width; - top: $header-height; - bottom: 0; - box-sizing: border-box; - padding: $padding-16; - - background: $nav-background; - - overflow-x: hidden; - overflow-y: auto; - - transition: transform 0.3s ease-in-out; - will-change: transform; - - font-size: $font-size-14; - line-height: 2rem; - - a { - display: block; - color: $nav-link-color; - - &.active { - color: $color-link; + .section { + margin-bottom: $padding-16; + > a { font-weight: 700; } + > ul { padding-left: 0; } } } - ul { - list-style: none; - } - - // No padding for first level - > ul { - padding: 0; - } - - // Move content - + div { - margin-left: $nav-menu-width; - margin-top: $header-height; - } - - .root-section { - margin-bottom: $padding-16; - > a { font-weight: 600; } - > 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; + } + + #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; } } - - #nav-control:checked + nav { - @include shadow; - transform: translateX(0); - } } 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 @@ -
- {{ partial "docs/header" . }} -
- - - + +
-
- -
-
+
+ +
+ +
+
+ +
+
{{- .Content -}}
- {{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }} - {{ if and ($showToC) (.Page.TableOfContents) }} -
- {{ partial "docs/toc" . }} -
- {{ end }}
+ {{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }} + {{ if and ($showToC) (.Page.TableOfContents) }} +
+ {{ partial "docs/toc" . }} +
+ {{ end }} +
{{ 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 @@ - -

- {{ .Site.Title }} -

\ 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 @@ {{- template "title" . }} | {{ .Site.Title -}} - - - - + {{ $styles := resources.Get "styles.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }} \ No newline at end of file diff --git a/layouts/partials/docs/nav-bundle.html b/layouts/partials/docs/menu-bundle.html similarity index 100% rename from layouts/partials/docs/nav-bundle.html rename to layouts/partials/docs/menu-bundle.html diff --git a/layouts/partials/docs/nav-filetree.html b/layouts/partials/docs/menu-filetree.html similarity index 94% rename from layouts/partials/docs/nav-filetree.html rename to 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" }}
    {{ range .Section.Sections }} -
  • +
  • {{- 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 @@ -

    - {{ .Site.Title }} -

    \ No newline at end of file