Improve mobile UX
This commit is contained in:
Alex Shpak
parent
8678e82154
commit
b6d7a1050f
10 changed files with 197 additions and 157 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
.book-brand {
|
||||
padding: 0 $padding-16;
|
||||
margin-bottom: $padding-8;
|
||||
font-weight: 400;
|
||||
|
||||
a {
|
||||
color: $body-font-color;
|
||||
&:visited {
|
||||
color: $color-visited-link;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation styles
|
||||
.book-nav {
|
||||
flex-grow: 0;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-left: $padding-16;
|
||||
line-height: $padding-16 * 2;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: fixed;
|
||||
width: $nav-menu-width;
|
||||
top: $header-height;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
padding: $padding-16;
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: $nav-menu-width;
|
||||
background: $nav-background;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
font-size: $font-size-14;
|
||||
background: $nav-background;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: $padding-16;
|
||||
|
||||
li {
|
||||
line-height: $padding-16 * 2;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: $nav-link-color;
|
||||
text-transform: capitalize;
|
||||
|
||||
&[href]:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// class used for sections with bookRootSection: true
|
||||
.book-nav-section {
|
||||
// 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; }
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding-left: $padding-8;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
line-height: 1.25;
|
||||
padding: $padding-4 0;
|
||||
display: block;
|
||||
|
||||
img {
|
||||
max-height: $font-size-16;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: $padding-8;
|
||||
line-height: $padding-16 * 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Print styles
|
||||
@media print {
|
||||
.book-nav, .book-toc {
|
||||
display: none;
|
||||
// Mobile styles
|
||||
@media screen and (max-width: 50rem) {
|
||||
.header label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
transform: translateX(-$nav-menu-width);
|
||||
|
||||
+ div {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-control:checked + nav {
|
||||
@include shadow;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
6
layouts/partials/docs/header.html
Normal file
6
layouts/partials/docs/header.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<label for="nav-control">
|
||||
<img src="/svg/menu.svg" />
|
||||
</label>
|
||||
<h3>
|
||||
<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
|
||||
</h3>
|
||||
|
|
@ -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 }}">
|
||||
|
|
@ -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 -}}
|
||||
|
|
|
|||
1
static/svg/close.svg
Normal file
1
static/svg/close.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 239 B |
1
static/svg/menu.svg
Normal file
1
static/svg/menu.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 185 B |
Loading…
Reference in a new issue