From cce17bcc99be389dce5bfbadfabaacf132c3f8f7 Mon Sep 17 00:00:00 2001 From: Alex Shpak Date: Wed, 26 Sep 2018 00:12:56 +0200 Subject: Remove purecss dependency and replace with flexbox --- assets/_markdown.scss | 5 + assets/_pure-extension.scss | 19 --- assets/_variables.scss | 29 +---- assets/styles.scss | 210 +++++++++++++++---------------- layouts/docs/baseof.html | 54 ++++---- layouts/partials/docs/header.html | 6 - layouts/partials/docs/html-head.html | 5 +- layouts/partials/docs/menu-bundle.html | 3 + layouts/partials/docs/menu-filetree.html | 47 +++++++ layouts/partials/docs/nav-brand.html | 3 - layouts/partials/docs/nav-bundle.html | 3 - layouts/partials/docs/nav-filetree.html | 47 ------- 12 files changed, 191 insertions(+), 240 deletions(-) delete mode 100644 assets/_pure-extension.scss delete mode 100644 layouts/partials/docs/header.html create mode 100644 layouts/partials/docs/menu-bundle.html create mode 100644 layouts/partials/docs/menu-filetree.html delete mode 100644 layouts/partials/docs/nav-brand.html delete mode 100644 layouts/partials/docs/nav-bundle.html delete mode 100644 layouts/partials/docs/nav-filetree.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; - - 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 @@ -
- {{ partial "docs/header" . }} -
- - - + +
-
- -
-
- {{- .Content -}} +
+ +
+ +
+
+
- {{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }} - {{ if and ($showToC) (.Page.TableOfContents) }} -
- {{ partial "docs/toc" . }} +
+ {{- .Content -}}
- {{ 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/menu-bundle.html b/layouts/partials/docs/menu-bundle.html new file mode 100644 index 0000000..bdabefd --- /dev/null +++ b/layouts/partials/docs/menu-bundle.html @@ -0,0 +1,3 @@ +{{ with .Site.GetPage .Site.Params.BookMenuBundle }} + {{- .Content -}} +{{ end }} \ No newline at end of file diff --git a/layouts/partials/docs/menu-filetree.html b/layouts/partials/docs/menu-filetree.html new file mode 100644 index 0000000..490c350 --- /dev/null +++ b/layouts/partials/docs/menu-filetree.html @@ -0,0 +1,47 @@ + +{{ template "book-get-root-section" . }} + +{{- range .Scratch.Get "BookSections" -}} + {{ template "book-section" (dict "Section" . "CurrentPage" $.Permalink) }} +{{- end -}} + +{{ define "book-section" }} +
    + {{ range .Section.Sections }} +
  • + {{- if .Content -}} + {{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }} + {{- else -}} + {{- template "title" . -}} + {{- end -}} + + {{ template "book-section" (dict "Section" . "CurrentPage" $.CurrentPage) }} +
    • + {{ end }} + + {{ range .Section.Pages }} +
  • + {{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }} +
    • + {{ end }} +
+{{ end }} + +{{ define "book-page-link" }} +{{- with .Page -}} + + {{- template "title" . -}} + +{{- end -}} +{{ end }} + +{{ define "book-get-root-section" }} + + {{ $bookSection := default "docs" .Site.Params.BookSection }} + {{ if eq $bookSection "*" }} + {{ .Scratch.Set "BookSections" .Site.Sections }} + {{ else }} + {{ $bookSections := where .Site.Sections "Section" $bookSection }} + {{ .Scratch.Set "BookSections" $bookSections }} + {{ end }} +{{ end }} \ No newline at end of file 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 diff --git a/layouts/partials/docs/nav-bundle.html b/layouts/partials/docs/nav-bundle.html deleted file mode 100644 index bdabefd..0000000 --- a/layouts/partials/docs/nav-bundle.html +++ /dev/null @@ -1,3 +0,0 @@ -{{ with .Site.GetPage .Site.Params.BookMenuBundle }} - {{- .Content -}} -{{ end }} \ No newline at end of file diff --git a/layouts/partials/docs/nav-filetree.html b/layouts/partials/docs/nav-filetree.html deleted file mode 100644 index 3ec4539..0000000 --- a/layouts/partials/docs/nav-filetree.html +++ /dev/null @@ -1,47 +0,0 @@ - -{{ template "book-get-root-section" . }} - -{{- range .Scratch.Get "BookSections" -}} - {{ template "book-section" (dict "Section" . "CurrentPage" $.Permalink) }} -{{- end -}} - -{{ define "book-section" }} -
    - {{ range .Section.Sections }} -
  • - {{- if .Content -}} - {{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }} - {{- else -}} - {{- template "title" . -}} - {{- end -}} - - {{ template "book-section" (dict "Section" . "CurrentPage" $.CurrentPage) }} -
    • - {{ end }} - - {{ range .Section.Pages }} -
  • - {{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }} -
    • - {{ end }} -
-{{ end }} - -{{ define "book-page-link" }} -{{- with .Page -}} - - {{- template "title" . -}} - -{{- end -}} -{{ end }} - -{{ define "book-get-root-section" }} - - {{ $bookSection := default "docs" .Site.Params.BookSection }} - {{ if eq $bookSection "*" }} - {{ .Scratch.Set "BookSections" .Site.Sections }} - {{ else }} - {{ $bookSections := where .Site.Sections "Section" $bookSection }} - {{ .Scratch.Set "BookSections" $bookSections }} - {{ end }} -{{ end }} \ No newline at end of file -- cgit v1.2.3