Merge pull request #266 from picturepan2/0.4.0 v0.4.0

0.4.0

1 files changed, 115 insertions, 84 deletions

diff --git a/docs/src/docs.less b/docs/src/docs.scss
index 432096c..4f4bbb4 100644
--- a/docs/src/docs.less
+++ b/docs/src/docs.scss
@@ -1,11 +1,11 @@
 /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
 /* Spectre version */
 .version::after {
-  content: "0.3.2";
+  content: "0.4.0";
 }
 // Core variables and mixins
-@import '../../src/variables.less';
-@import '../../src/mixins.less';
+@import '../../src/variables';
+@import '../../src/mixins';
 
 /* Spectre New Docs */
 .s-container {
@@ -16,7 +16,7 @@
 }
 
 .s-sidebar {
-  background: @bg-color;
+  background: $bg-color;
   flex: 0 0 auto;
   padding: 1.5rem 0 1.5rem 1.5rem;
   width: 12rem;
@@ -36,14 +36,14 @@
 
     input {
       & ~ .accordion-header {
-        color: darken(@gray-color-dark, 10%);
-        font-size: @font-size-sm;
+        color: lighten($dark-color, 10%);
+        font-size: $font-size-sm;
         font-weight: 600;
         text-transform: uppercase;
       }
       &:checked {
         & ~ .accordion-header {
-          color: darken(@gray-color-dark, 10%);
+          color: lighten($dark-color, 15%);
         }
       }
     }
@@ -54,7 +54,7 @@
         
         & > a {
           background: transparent;
-          color: @gray-color-dark;
+          color: $gray-color-dark;
           display: inline-block;
         }
       }
@@ -64,16 +64,16 @@
 
 .s-content {
   flex: 1 1 auto;
-  max-width: 920px;
-  padding: 0 3rem;
-  width: ~"calc(100vw - 12rem)";
+  max-width: 960px;
+  padding: 0 4rem;
+  width: calc(100vw - 12rem);
 
   & > .container {
     padding-bottom: 1.5rem;
   }
 
   .anchor {
-    color: @primary-color-light;
+    color: $primary-color-light;
     height: 0;
     margin-left: -2em;
     overflow: hidden;
@@ -81,7 +81,7 @@
     position: absolute;
     text-align: center;
     width: 0;
-    z-index: @zindex-1;
+    z-index: $zindex-1;
     &:focus,
     &:hover {
       box-shadow: none;
@@ -102,10 +102,10 @@
     @supports (position: sticky) {
       position: sticky;
       top: 0;
-      z-index: @zindex-2;
+      z-index: $zindex-2;
 
       &::before {
-        background: @light-color;      
+        background: $light-color;      
         bottom: 0;
         content: "";
         display: block;
@@ -113,7 +113,7 @@
         position: absolute;
         right: -10px;
         top: -5px;
-        z-index: -@zindex-0;
+        z-index: -$zindex-0;
       }
     }
 
@@ -134,15 +134,15 @@
   }
 
   .column {
-    padding: @layout-spacing;
+    padding: $layout-spacing;
   }
 
   .docs-block {
-    border-radius: @border-radius;
-    padding: @unit-2;
+    border-radius: $border-radius;
+    padding: $unit-2;
 
     &.bg-gray {
-      background: @bg-color-dark;
+      background: $bg-color-dark;
     }
   }
 
@@ -169,12 +169,12 @@
   }
 
   .docs-color {
-    border-radius: @border-radius;
+    border-radius: $border-radius;
     margin: .25rem 0;
     padding: .5rem;
 
     .color-subtitle {
-      font-size: @font-size-sm;
+      font-size: $font-size-sm;
       opacity: .75;
     }
   }
@@ -192,16 +192,16 @@
   }
 
   .code {
-    color: lighten(@body-font-color, 10%);
+    color: lighten($body-font-color, 10%);
 
     .com {
-      color: @gray-color;
+      color: $gray-color;
     }
     .tag {
-      color: @primary-color;
+      color: $primary-color;
     }
     .atn {
-      color: lighten(@body-font-color, 10%);
+      color: lighten($body-font-color, 10%);
     }
     .atv {
       color: #e06870;
@@ -219,9 +219,9 @@
   .example-tile-icon {
     align-content: space-around;
     align-items: center;
-    background: @primary-color;
-    border-radius: @border-radius;
-    color: @light-color;
+    background: $primary-color;
+    border-radius: $border-radius;
+    color: $light-color;
     display: flex;
     font-size: 1.2rem;
     height: 2rem;
@@ -243,14 +243,15 @@
 }
 
 .s-brand {
-  color: @primary-color;
+  color: $primary-color;
+  left: 0;
   padding: 0 1.5rem;
   position: fixed;
   top: 1.3rem;
 
   .s-logo {
     align-items: center;
-    border-radius: @border-radius;
+    border-radius: $border-radius;
     display: inline-flex;
     height: 2rem;
     padding: .2rem;
@@ -260,53 +261,48 @@
     &:hover {
       text-decoration: none;
     }
-
+  
     img {
       display: inline;
       height: auto;
       width: 1.6rem;
     }
-
+  
     h2 {
       display: inline;
-      font-size: .8rem;  
+      font-size: .8rem;
+      font-weight: 500;
       margin-bottom: 0;
       margin-left: .5rem;
       margin-right: .5rem;
     }
   }
-
-  .float-btn {
-    position: fixed;
-    right: 4.5rem;
-    top: 1.5rem;
-  }
 }
 
 .s-footer {
-  color: @gray-color;
+  color: $gray-color;
   padding: .5rem .5rem 1.5rem .5rem;
 
   a {
-    color: @gray-color-dark;
+    color: $gray-color-dark;
   }
 }
 
 /* Spectre Homepage style */
 .section-hero {
   padding: 1rem .5rem;
-  position: relative;
 
   .s-brand {
     position: absolute;
+    top: .5rem;
 
     h2 {
-      color: @primary-color;
+      color: $primary-color;
     }
   }
 
   .column {
-    padding: @layout-spacing;
+    padding: $layout-spacing;
   }
 }
 
@@ -315,7 +311,7 @@
 
   .card {
     border: 0;
-    color: lighten(@body-font-color, 15%);
+    color: lighten($body-font-color, 15%);
     margin-bottom: 1rem;
   }
 }
@@ -324,41 +320,42 @@
   padding: 4.5rem .5rem;
 
   .column {
-    padding: @layout-spacing;
+    padding: $layout-spacing;
   }
 }
 
 .section-footer {
-  color: @gray-color;
+  color: $gray-color;
   padding: 1.8rem .75rem 1rem .75rem;
   position: relative;
   z-index: 200;
 
   a {
-    color: @gray-color-dark;
+    color: $gray-color-dark;
   }
 }
 
 .grid-hero {
-  margin-top: 6rem;
-  margin-bottom: 2rem;
+  padding-bottom: 2rem;
+  padding-top: 6rem;
+  position: relative;
 
   h1 {
-    color: @body-font-color;
+    color: $body-font-color;
     font-size: 1.6rem;
     margin-bottom: 1.5rem;
   }
 
   h2 {
-    color: lighten(@body-font-color, 5%);
+    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-o;
+      border-bottom: $border-width-lg solid currentColor;
+      padding-bottom: $unit-o;
       text-decoration: none;
     }
   }
@@ -366,25 +363,44 @@
   .card {
     background: none;
     border: 0;
-    color: lighten(@body-font-color, 15%);
+    color: lighten($body-font-color, 15%);
     padding: .5rem;
 
     .card-title {
-      color: @primary-color;
+      color: $primary-color;
       font-size: .9rem;
       margin-bottom: 0;
     }
   }
 }
 
-.menu-btn,
 .docs-nav-clear {
   display: none;
 }
 
-@media screen and (max-width: 880px) {
+.s-navbar {
+  height: 3.5rem;
+  left: 0;
+  padding: .75rem 1.5rem;
+  position: fixed;
+  text-align: center;
+  z-index: $zindex-4;
+
+  .s-logo,
+  .menu-btn {
+    display: none;
+  }
+
+  .float-btn {
+    position: fixed;
+    right: 4rem;
+    top: 1.5rem;
+  }
+}
+
+@media (max-width: 880px) {
   .s-sidebar {
-    background: @bg-color;
+    background: $bg-color;
     bottom: 0;
     overflow-y: auto;
     padding: 3rem 1.5rem;
@@ -404,31 +420,21 @@
       }
     }
 
-    .s-nav {
-      top: 1.5rem;
+    .menu .menu-item > a {
+      padding: .3rem .4rem;
     }
   }
 
-  .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;
+  .s-navbar {
+    backdrop-filter: blur(10px);
+    background: rgba($bg-color, .65);
     right: 0;
-    z-index: @zindex-3;
-
-    .s-logo {
-      h2 {
-        display: none;
-      }
-    }
+    top: 0;
+    z-index: $zindex-2;
 
     .menu-btn {
       display: block;
-      left: .65rem;
+      left: 2.6rem;
       position: fixed;
       top: .95rem;
 
@@ -437,8 +443,17 @@
       }
     }
 
+    .s-logo {
+      align-items: center;
+      border-radius: $border-radius;
+      display: inline-flex;
+      height: 2rem;
+      padding: .2rem;
+      width: auto;
+    }
+
     .float-btn {
-      right: 1rem;
+      right: 2.9rem;
       top: .95rem;
     }
   }
@@ -452,12 +467,12 @@
     top: 0;
     position: fixed;
     width: 100%;
-    z-index: @zindex-3;
+    z-index: $zindex-3;
   }
 
   .s-content {
     min-width: auto;
-    padding: 3.5rem 2.5rem 0 2.5rem;
+    padding: 0 2.5rem;
     width: 100%;
 
     .s-title,
@@ -466,7 +481,7 @@
       position: static;
 
       &::before {
-        display: none;
+        content: none;
       }
     }
   }
@@ -475,6 +490,8 @@
     .s-brand {
       height: 5rem;
       padding: 1.5rem .5rem;
+      text-align: center;
+      width: 100%;
 
       .s-logo {
         height: auto;
@@ -484,11 +501,15 @@
         height: 3.2rem;
         width: 3.2rem;
       }
+
+      h2 {
+        display: none;
+      }
     }
   }
 }
 
-@media screen and (max-width: 600px) {
+@media (max-width: 600px) {
   .grid-hero {
     h2 {
       font-size: .9rem;
@@ -502,11 +523,21 @@
     padding: 3.5rem .5rem 0 .5rem;
 
     .docs-block {
-      padding: @unit-2 @unit-h;
+      padding: $unit-2 $unit-h;
     }
 
     .anchor {
       display: none;
     }
   }
+
+  .s-navbar {
+    .menu-btn {
+      left: .65rem;
+    }
+
+    .float-btn {
+      right: 1rem;
+    }
+  }
 }
\ No newline at end of file