Improve mobile UX
This commit is contained in:
Alex Shpak
@@ -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;
|
||||
}
|
||||
}
|
||||
+31
-10
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+114
-86
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user