Merge pull request #249 from picturepan2/0.2.15 v0.2.15

0.2.15

1 files changed, 345 insertions, 170 deletions

diff --git a/docs/src/docs.less b/docs/src/docs.less
index 1a33d3f..b16bf3d 100644
--- a/docs/src/docs.less
+++ b/docs/src/docs.less
@@ -1,189 +1,177 @@
 /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
 /* Spectre version */
 .version::after {
-  content: "0.2.14";
+  content: "0.2.15";
 }
 // Core variables and mixins
 @import '../../src/variables.less';
 @import '../../src/mixins.less';
 
-/* Spectre docs style */
-.bg-gray {
-  background: @bg-color;
-  color: lighten(@body-font-color, 10%);
-  padding: 1rem;
-}
-
-.bg-dark {
-  background: @body-font-color;
-  color: @light-color;
-  padding: 1rem;
-}
-
-.bg-primary {
-  background: @primary-color;
-  color: @light-color;
-  padding: 1rem;
-}
-
-.section-header {
-  padding: 1rem .5rem;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 200;
-}
-
-.section-hero {
-  position: relative;
-  z-index: 300;
+/* Spectre New Docs */
+.s-container {
+  & > .columns {
+    flex-flow: nowrap;
+    min-height: 100vh;
+  }
 }
 
-.grid-header {
-  .navbar {
-    height: 4rem;
-  }
+.s-sidebar {
+  background: @bg-color;
+  flex: 0 0 auto;
+  padding: 1.5rem 0 1.5rem 1.5rem;
+  width: 12rem;
 
-  .navbar-section {
-    padding: 0;
+  .s-nav {
+    bottom: 1.5rem;
+    overflow-y: auto; 
+    position: fixed;
+    top: 5rem;
+    width: 10.5rem;
   }
 
-  .navbar-brand {
-    color: @body-font-color;
-  }
+  .accordion {
+    .accordion-item {
+      margin-bottom: .75rem;
+    }
 
-  .btn-link {
-    color: lighten(@body-font-color, 10%);
-    padding-left: .6rem;
-    padding-right: .6rem;
+    input {
+      & ~ .accordion-header {
+        color: darken(@gray-color-dark, 10%);
+        font-size: @font-size-sm;
+        font-weight: 600;
+        text-transform: uppercase;
+      }
+      &:checked {
+        & ~ .accordion-header {
+          color: darken(@gray-color-dark, 10%);
+        }
+      }
+    }
 
-    &:focus,
-    &:hover,
-    &:active {
-      color: @body-font-color;
-      opacity: .75;
+    .menu {
+      .menu-item {
+        padding-left: 1rem;
+        
+        & > a {
+          background: transparent;
+          color: @gray-color-dark;
+          display: inline-block;
+        }
+      }
     }
   }
 }
 
-.grid-hero {
-  margin-top: 10rem;
-  margin-bottom: 4rem;
+.s-content {
+  flex: 1 1 auto;
+  max-width: 920px;
+  padding: 0 3rem;
+  width: ~"calc(100vw - 12rem)";
 
-  h1 {
-    color: @body-font-color;
-    font-size: 3.2rem;
-    font-weight: 400;
+  & > .container {
+    padding-bottom: 1.5rem;
   }
 
-  h2 {
-    color: lighten(@body-font-color, 5%);
-    font-size: 1.8rem;
-    font-weight: 400;
-    line-height: 3rem;
-    margin-bottom: 3rem;
-
-    u {
-      border-bottom: .2rem solid currentColor;
-      padding-bottom: .1rem;
+  .anchor {
+    color: @primary-color-light;
+    height: 0;
+    margin-left: -2em;
+    overflow: hidden;
+    padding: 0 1em;
+    position: absolute;
+    text-align: center;
+    width: 0;
+    z-index: @zindex-1;
+    &:focus,
+    &:hover {
+      box-shadow: none;
+      height: auto;
       text-decoration: none;
+      width: 2em;
     }
   }
+  
+  .s-title,
+  .s-subtitle {
+    line-height: 1.6rem;
+    margin-bottom: 0;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+    position: static;
 
-  .card {
-    background: none;
-    border: 0;
-    color: lighten(@body-font-color, 10%);
-    padding: 1rem;
+    @supports (position: sticky) {
+      position: sticky;
+      top: 0;
+      z-index: @zindex-2;
 
-    .card-title {
-      color: @primary-color;
-      font-size: 1.8rem;
-      margin-bottom: 0;
+      &::before {
+        background: @light-color;      
+        bottom: 0;
+        content: "";
+        display: block;
+        left: -10px;
+        position: absolute;
+        right: -10px;
+        top: -5px;
+        z-index: -@zindex-0;
+      }
     }
-  }
-}
 
-.grid-footer {
-  color: @gray-color;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
+    &:hover {
+      .anchor {
+        height: auto;
+        width: 1em;
+      }
+    }
 
-  a {
-    color: @gray-color-dark;
+    & + .docs-note {
+      margin-top: .4rem;
+    }
   }
-}
-
-.docs-content {
-  padding-top: 0;
 
-  .container {
-    padding: 1rem;
+  .docs-note {
+    margin: 1.5rem 0;
   }
 
-  header {
-    padding-top: 6rem;
+  .column {
+    padding: @layout-spacing;
   }
 
-  .anchor {
-    height: 0;
-    margin-left: -1em;
-    position: absolute;
-    overflow: hidden;
-    width: 0;
-    &:focus,
-    &:hover {
-      height: auto;
-      text-decoration: none;
-      width: auto;
-    }
-  }
+  .docs-block {
+    border-radius: @border-radius;
+    padding: .5rem;
 
-  .notes {
-    margin: 4rem 0;
+    &.bg-gray {
+      background: @bg-color-dark;
+    }
   }
 
-  .docs-block {
-    border-radius: .2rem;
-    padding: 1rem .5rem;
+  .docs-shape {
+    height: 4.8rem;
+    line-height: 1.2rem;
+    padding: 1.8rem 0;
+    width: 4.8rem;
   }
 
   .docs-dot {
     border-radius: 50%;
     display: inline-block;
-    height: 1rem;
+    height: .5rem;
     padding: 0;
-    width: 1rem;
+    width: .5rem;
   }
 
   .docs-table {
     th,
     td {
-      padding: 1.5rem .5rem;
-    }
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-
-    &:hover {
-      .anchor {
-        height: auto;
-        width: auto;
-      }
+      padding: .75rem .25rem;
     }
   }
 
   .docs-color {
     border-radius: @border-radius;
-    margin: .5rem 0;
-    padding: 1rem;
+    margin: .25rem 0;
+    padding: .5rem;
 
     .color-subtitle {
       font-size: @font-size-sm;
@@ -195,10 +183,14 @@
     height: 75vh;
 
     .tile {
-      margin: 1.5rem 0;
+      margin: .75rem 0;
     }
   }
 
+  .parallax {
+    margin: 2rem auto;
+  }
+
   .code {
     color: lighten(@body-font-color, 10%);
 
@@ -217,7 +209,7 @@
   }
 
   .empty .icon {
-    font-size: 4rem;
+    font-size: 2rem;
   }
 
   .form-autocomplete .menu {
@@ -228,12 +220,12 @@
     align-content: space-around;
     align-items: center;
     background: @primary-color;
-    border-radius: .2rem;
+    border-radius: @border-radius;
     color: @light-color;
     display: flex;
-    font-size: 2.4rem;
-    height: 4rem;
-    width: 4rem;
+    font-size: 1.2rem;
+    height: 2rem;
+    width: 2rem;
 
     .icon {
       margin: auto;
@@ -241,66 +233,173 @@
   }
 
   .comparison-slider {
+    height: auto;
+    padding-bottom: 56.2222%;
+
     .filter-grayscale {
       filter: grayscale(75%);
     }
   }
 }
 
-@media screen and (min-width: 601px) {
-  .section-header {
-    .navbar-section {
-      padding: 0 .5rem;
+.s-brand {
+  color: @primary-color;
+  padding: 0 1.5rem;
+  position: fixed;
+  top: 1.3rem;
+
+  .s-logo {
+    align-items: center;
+    border-radius: @border-radius;
+    display: inline-flex;
+    height: 2rem;
+    padding: .2rem;
+    width: auto;
+    
+    &:focus,
+    &:hover {
+      text-decoration: none;
     }
-  }
 
-  .docs-sidebar {
-    padding: 7rem 1rem 5rem 1rem;
+    img {
+      display: inline;
+      height: auto;
+      width: 1.6rem;
+    }
 
-      .docs-nav {
-        position: relative;
+    h2 {
+      display: inline;
+      font-size: .8rem;  
+      margin-bottom: 0;
+      margin-left: .5rem;
+      margin-right: .5rem;
     }
+  }
 
-    @supports (position: sticky) {
-      .docs-nav {
-        position: sticky;
-        top: 8rem;
+  .float-btn {
+    position: fixed;
+    right: 4.5rem;
+    top: 1.5rem;
+  }
+}
 
-        // A position: sticky; bug casues box-shadow generates width to the elements
-        .nav-item a:focus {
-          box-shadow: none;
-        }
-      }
-    }
+.s-footer {
+  color: @gray-color;
+  padding: .5rem .5rem 1.5rem .5rem;
+
+  a {
+    color: @gray-color-dark;
   }
 }
 
-.docs-nav-clear {
-  display: none;
+/* Spectre Homepage style */
+.section-header {
+  backdrop-filter: blur(.5rem); // Safari only feature
+  background: fade(@bg-color, 90%);  
+  padding: 1rem .5rem;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: @zindex-2;
+
+  .s-brand {
+    padding: 0;
+    position: static;
+  }
 }
 
-// Spectre.css Docs Mobile experience
-@media screen and (max-width: 600px) {
-  .grid-hero {
-    h2 {
-      font-size: 1.8rem;
+.section-hero {
+  padding: 1.5rem .5rem;
+  position: relative;
+
+  .column {
+    padding: @layout-spacing;
+  }
+}
+
+.section-updates {
+  padding: 4.5rem .5rem 3.5rem .5rem;
+
+  .card {
+    border: 0;
+    color: lighten(@body-font-color, 15%);
+    margin-bottom: 1rem;
+  }
+}
+
+.section-features {
+  padding: 4.5rem .5rem;
+
+  .column {
+    padding: @layout-spacing;
+  }
+}
+
+.section-footer {
+  color: @gray-color;
+  padding: 1.8rem .75rem 1rem .75rem;
+  position: relative;
+  z-index: 200;
+
+  a {
+    color: @gray-color-dark;
+  }
+}
+
+.grid-hero {
+  margin-top: 5rem;
+  margin-bottom: 2rem;
+
+  h1 {
+    color: @body-font-color;
+    font-size: 1.6rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h2 {
+    color: lighten(@body-font-color, 5%);
+    font-size: .9rem;
+    font-weight: 400;
+    line-height: 1.5rem;
+    margin-bottom: 1.5rem;
+
+    u {
+      border-bottom: @border-width-lg solid currentColor;
+      padding-bottom: @unit-0;
+      text-decoration: none;
     }
-    .card {
-      padding: 0;
+  }
+
+  .card {
+    background: none;
+    border: 0;
+    color: lighten(@body-font-color, 15%);
+    padding: .5rem;
+
+    .card-title {
+      color: @primary-color;
+      font-size: .9rem;
+      margin-bottom: 0;
     }
   }
+}
 
-  .docs-sidebar {
-    background: @bg-color-light;
+.menu-btn,
+.docs-nav-clear {
+  display: none;
+}
+
+@media screen and (max-width: 880px) {
+  .s-sidebar {
+    background: @bg-color;
     height: 100%;
     overflow-y: auto;
-    padding: 6rem 3rem;
+    padding: 3rem 1.5rem;
     position: fixed;
     left: 0;
     top: 0;
     transform: translateX(-100%);
     transition: transform .2s ease;
-    width: 24rem;
     z-index: 400;
 
     &:target {
@@ -311,6 +410,44 @@
         display: block;
       }
     }
+
+    .s-nav {
+      top: 1.5rem;
+    }
+  }
+
+  .s-brand {
+    backdrop-filter: blur(10px); // Safari only feature
+    background: fade(@bg-color, 80%);
+    height: 3.5rem;
+    left: 0;
+    padding: .75rem .5rem;
+    text-align: center;
+    top: 0;
+    right: 0;
+    z-index: @zindex-3;
+
+    .s-logo {
+      h2 {
+        display: none;
+      }
+    }
+
+    .menu-btn {
+      display: block;
+      left: 1rem;
+      position: fixed;
+      top: .95rem;
+
+      .btn {
+        font-size: 1rem;
+      }
+    }
+
+    .float-btn {
+      right: 1rem;
+      top: .95rem;
+    }
   }
 
   .docs-nav-clear {
@@ -322,6 +459,44 @@
     top: 0;
     position: fixed;
     width: 100%;
-    z-index: 300;
+    z-index: @zindex-3;
+  }
+
+  .s-content {
+    min-width: auto;
+    padding: 3.5rem 2.5rem 0 2.5rem;
+    width: 100%;
+
+    .s-title,
+    .s-subtitle {
+      position: static;
+
+      &::before {
+        display: none;
+      }
+    }
   }
 }
+
+@media screen and (max-width: 600px) {
+  .grid-hero {
+    h2 {
+      font-size: .9rem;
+    }
+    .card {
+      padding: 0;
+    }
+  }
+
+  .s-content {
+    padding: 3.5rem .5rem 0 .5rem;
+
+    .docs-block {
+      padding: .5rem .1rem;
+    }
+
+    .anchor {
+      display: none;
+    }
+  }
+}
\ No newline at end of file