Remove purecss dependency and replace with flexbox
This commit is contained in:
Alex Shpak
parent
b6d7a1050f
commit
cce17bcc99
10 changed files with 145 additions and 194 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
a:hover {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
img {
|
||||
height: $padding-16;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $padding-16;
|
||||
}
|
||||
|
||||
background: $body-background;
|
||||
@include shadow;
|
||||
.content {
|
||||
max-width: $content-max-width;
|
||||
margin: 0 auto;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: row;
|
||||
|
||||
label {
|
||||
line-height: 0;
|
||||
margin-right: $padding-16;
|
||||
display: none;
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,37 +7,39 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
{{ partial "docs/header" . }}
|
||||
</div>
|
||||
<input type="checkbox" style="display: none" id="menu-control" />
|
||||
<div class="content">
|
||||
|
||||
<input type="checkbox" style="display: none" id="nav-control" />
|
||||
<nav role="navigation" class="menu">
|
||||
{{ partial "docs/inject/nav-before" . }}
|
||||
<div class="menu">
|
||||
<nav role="navigation">
|
||||
{{ partial "docs/inject/nav-before" . }}
|
||||
|
||||
{{ if .Site.Params.BookMenuBundle }}
|
||||
{{ partial "docs/nav-bundle" . }}
|
||||
{{ else }}
|
||||
{{ partial "docs/nav-filetree" . }}
|
||||
{{ end }}
|
||||
{{ if .Site.Params.BookMenuBundle }}
|
||||
{{ partial "docs/menu-bundle" . }}
|
||||
{{ else }}
|
||||
{{ partial "docs/menu-filetree" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ partial "docs/inject/nav-after" . }}
|
||||
</nav>
|
||||
{{ partial "docs/inject/nav-after" . }}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<div class="pure-g content">
|
||||
<div class="pure-u-1 pure-u-lg-2-3 page markdown">
|
||||
<div class="page">
|
||||
<div class="header">
|
||||
<label for="menu-control"><img src="/svg/menu.svg" /></label>
|
||||
</div>
|
||||
<div class="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>
|
||||
|
||||
{{ $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" . }}
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
<label for="nav-control">
|
||||
<img src="/svg/menu.svg" />
|
||||
</label>
|
||||
<h3>
|
||||
<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
|
||||
</h3>
|
||||
|
|
@ -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 }}">
|
||||
|
|
@ -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 -}}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<h2 class="book-brand">
|
||||
<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
|
||||
</h2>
|
||||
Loading…
Reference in a new issue