ADD: New docs mobile experience

2 files changed, 91 insertions, 14 deletions

diff --git a/docs/css/docs.less b/docs/css/docs.less
index e49207a..2101f12 100644
--- a/docs/css/docs.less
+++ b/docs/css/docs.less
@@ -64,7 +64,6 @@
   .icon {
     font-size: 1.3333em;
     line-height: .8em;
-    margin-right: .2rem;
     vertical-align: -20%;
   }
 }
@@ -94,14 +93,10 @@
   }
 }
 
-.notes {
-  margin: 4rem 0;
-  color: #666;
-}
-
 .empty .icon {
   font-size: 4rem;
 }
+
 .code {
   color: #666;
 
@@ -117,15 +112,9 @@
   .atv {
     color: #e06870;
   }
-
 }
 
 .docs-content {
-  pre {
-    margin-bottom: 2rem;
-    margin-top: 2rem;
-  }
-
   .container {
     padding: 2rem 1rem;
   }
@@ -134,6 +123,16 @@
     padding-top: 2rem;
   }
 
+  pre {
+    margin-bottom: 2rem;
+    margin-top: 2rem;
+  }
+
+  .notes {
+    margin: 4rem 0;
+    color: #666;
+  }
+
   h3,
   h4,
   h5 {
@@ -154,7 +153,7 @@
   width: 4rem;
 }
 
-@media screen and (min-width: 480px) {
+@media screen and (min-width: 481px) {
   .docs-sidebar {
     padding: 6rem 0;
 
@@ -175,3 +174,81 @@
     }
   }
 }
+
+.docs-nav-clear {
+  display: none;
+}
+.show-xs {
+  display: none !important;
+}
+
+
+// Spectre.css Docs Mobile experience
+
+@media screen and (max-width: 480px) {
+  .show-xs {
+    display: block !important;
+  }
+
+  .grid-hero {
+    h2 {
+      font-size: 1.8rem;
+    }
+    .card {
+      padding: 0;
+    }
+  }
+
+  .section-header {
+    padding: 0 .5rem;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 299;
+
+    .btn-link {
+      padding-left: .6rem;
+      padding-right: .6rem;
+    }
+  }
+
+  .docs-sidebar {
+    background: #fff;
+    height: 100%;
+    overflow-y: auto;
+    padding-left: 3rem;
+    position: fixed;
+    right: 0;
+    top: 0;
+    transform: translateX(100%);
+    transition: transform .216s ease;
+    width: 24rem;
+    z-index: 999;
+
+    &:target {
+      transform: translateX(0);
+
+      & + .docs-nav-clear {
+        display: block;
+      }
+    }
+  }
+
+  .docs-content {
+    header {
+      padding-top: 6rem;
+    }
+  }
+
+  .docs-nav-clear {
+    background: rgba(0,0,0,.15);
+    display: none;
+    height: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    position: fixed;
+    width: 100%;
+    z-index: 499;
+  }
+}
diff --git a/docs/css/docs.min.css b/docs/css/docs.min.css
index e9e0f66..c7370e7 100644
--- a/docs/css/docs.min.css
+++ b/docs/css/docs.min.css
@@ -1 +1 @@
-/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.1"}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:5rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.bg-grey{background-color:#f6f6f6;border-radius:.2rem;padding:1rem .5rem}.bg-dark{background:#2d3354;color:#fff;padding:1rem .5rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem .5rem}.navbar-brand .icon{font-size:1.3333em;line-height:.8em;margin-right:.2rem;vertical-align:-20%}.grid-header .btn{color:#666}.grid-header .btn:active,.grid-header .btn:focus,.grid-header .btn:hover{color:#444;opacity:.75}.grid-header .navbar-brand{color:#444}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.notes{color:#666;margin:4rem 0}.empty .icon{font-size:4rem}.code{color:#666}.code .com{color:#adadad}.code .tag{color:#4452c0}.code .atn{color:#666}.code .atv{color:#e06870}.docs-content pre{margin-bottom:2rem;margin-top:2rem}.docs-content .container{padding:2rem 1rem}.docs-content header{padding-top:2rem}.docs-content h3,.docs-content h4,.docs-content h5{margin-bottom:2rem;margin-top:2rem}.example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:480px){.docs-sidebar{padding:6rem 0}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:6rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}
\ No newline at end of file
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.1"}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:5rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.bg-grey{background-color:#f6f6f6;border-radius:.2rem;padding:1rem .5rem}.bg-dark{background:#2d3354;color:#fff;padding:1rem .5rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem .5rem}.navbar-brand .icon{font-size:1.3333em;line-height:.8em;vertical-align:-20%}.grid-header .btn{color:#666}.grid-header .btn:active,.grid-header .btn:focus,.grid-header .btn:hover{color:#444;opacity:.75}.grid-header .navbar-brand{color:#444}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.empty .icon{font-size:4rem}.code{color:#666}.code .com{color:#adadad}.code .tag{color:#4452c0}.code .atn{color:#666}.code .atv{color:#e06870}.docs-content .container{padding:2rem 1rem}.docs-content header{padding-top:2rem}.docs-content pre{margin-bottom:2rem;margin-top:2rem}.docs-content .notes{color:#666;margin:4rem 0}.docs-content h3,.docs-content h4,.docs-content h5{margin-bottom:2rem;margin-top:2rem}.example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:481px){.docs-sidebar{padding:6rem 0}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:6rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}.show-xs{display:none!important}@media screen and (max-width:480px){.show-xs{display:block!important}.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.section-header{padding:0 .5rem;position:fixed;top:0;width:100%;z-index:299}.section-header .btn-link{padding-left:.6rem;padding-right:.6rem}.docs-sidebar{background:#fff;height:100%;overflow-y:auto;padding-left:3rem;position:fixed;right:0;top:0;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);transition:transform .216s ease,-webkit-transform .216s ease;transition:transform .216s ease;transition:-webkit-transform .216s ease;width:24rem;z-index:999}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-content header{padding-top:6rem}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:499}}
\ No newline at end of file