Fix Docs bugs

trilbymedia · Aug 15, 2017 · 0150eb6 · 0150eb6
1 parent c9e625c
commit 0150eb6
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 52 deletions.
diff --git a/docs/css/docs.css b/docs/css/docs.css
@@ -256,23 +256,15 @@
   color: #727e96;
 }
 /* Spectre Homepage style */
-.section-header {
-  -webkit-backdrop-filter: blur(.5rem);
-  backdrop-filter: blur(.5rem);
-  background: rgba(248, 249, 250, .9);
+.section-hero {
   padding: 1rem .5rem;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 200;
+  position: relative;
 }
-.section-header .s-brand {
-  padding: 0;
-  position: static;
+.section-hero .s-brand {
+  position: absolute;
 }
-.section-hero {
-  padding: 1.5rem .5rem;
-  position: relative;
+.section-hero .s-brand h2 {
+  color: #5764c6;
 }
 .section-hero .column {
   padding: .4rem;
@@ -302,7 +294,7 @@
 }
 .grid-hero {
   margin-bottom: 2rem;
-  margin-top: 5rem;
+  margin-top: 6rem;
 }
 .grid-hero h1 {
   color: #454d5d;
@@ -419,6 +411,17 @@
   .s-content .s-subtitle::before {
     display: none;
   }
+  .section-hero .s-brand {
+    height: 5rem;
+    padding: 1.5rem .5rem;
+  }
+  .section-hero .s-brand .s-logo {
+    height: auto;
+  }
+  .section-hero .s-brand img {
+    height: 3.2rem;
+    width: 3.2rem;
+  }
 }
 @media screen and (max-width: 600px) {
   .grid-hero h2 {

diff --git a/docs/index.html b/docs/index.html
@@ -12,19 +12,14 @@
   <link rel="stylesheet" href="css/docs.css" />
 </head>
 <body>
-  <div class="section section-header">
-    <div class="grid-header container grid-lg">
+  <div class="section section-hero bg-gray">
+    <div id="overview" class="grid-hero container grid-lg text-center">
       <div class="s-brand">
         <div class="s-logo">
           <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
           <h2>Spectre.css</h2>
         </div>
       </div>
-    </div>
-  </div>
-
-  <div class="section section-hero bg-gray">
-    <div id="overview" class="grid-hero container grid-lg text-center">
       <h1>Spectre.css</h1>
       <h2>A <u>lightweight</u>, <u>responsive</u> and <u>modern</u> CSS framework</h2>
       <div class="columns">

diff --git a/docs/src/docs.less b/docs/src/docs.less
@@ -293,24 +293,17 @@
 }
 
 /* Spectre Homepage style */
-.section-header {
-  backdrop-filter: blur(.5rem); // Safari only feature
-  background: fade(@bg-color, 90%);  
+.section-hero {
   padding: 1rem .5rem;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: @zindex-2;
+  position: relative;
 
   .s-brand {
-    padding: 0;
-    position: static;
-  }
-}
+    position: absolute;
 
-.section-hero {
-  padding: 1.5rem .5rem;
-  position: relative;
+    h2 {
+      color: @primary-color;
+    }
+  }
 
   .column {
     padding: @layout-spacing;
@@ -347,7 +340,7 @@
 }
 
 .grid-hero {
-  margin-top: 5rem;
+  margin-top: 6rem;
   margin-bottom: 2rem;
 
   h1 {
@@ -476,6 +469,22 @@
       }
     }
   }
+
+  .section-hero {
+    .s-brand {
+      height: 5rem;
+      padding: 1.5rem .5rem;
+
+      .s-logo {
+        height: auto;
+      }
+
+      img {
+        height: 3.2rem;
+        width: 3.2rem;
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 600px) {

diff --git a/docs/utilities.html b/docs/utilities.html
@@ -261,7 +261,7 @@ <h4 class="s-subtitle">Text colors</h4>
             <p><span class="text-primary">primary color</span></p>
             <p><span class="text-secondary">secondary color</span></p>
             <p><span class="text-gray">gray color</span></p>
-            <p><span class="text-light bg-dark p-5 rounded">light color</span></p>
+            <p><span class="text-light bg-dark p-1 rounded">light color</span></p>
             <p><span class="text-success">success color</span></p>
             <p><span class="text-warning">warning color</span></p>
             <p><span class="text-error">error color</span></p>
@@ -278,13 +278,13 @@ <h4 class="s-subtitle">Text colors</h4>
 </code></pre>
 
           <div class="docs-note">
-            <p><a class="text-primary p-5" href="#colors">primary link</a></p>
-            <p><a class="text-secondary p-5" href="#colors">secondary link</a></p>
-            <p><a class="text-gray p-5" href="#colors">gray link</a></p>
-            <p><a class="text-light bg-dark p-5 rounded" href="#colors">light link</a></p>
-            <p><a class="text-success p-5" href="#colors">success link</a></p>
-            <p><a class="text-warning p-5" href="#colors">warning link</a></p>
-            <p><a class="text-error p-5" href="#colors">error link</a></p>
+            <p><a class="text-primary p-1" href="#colors">primary link</a></p>
+            <p><a class="text-secondary p-1" href="#colors">secondary link</a></p>
+            <p><a class="text-gray p-1" href="#colors">gray link</a></p>
+            <p><a class="text-light bg-dark p-1 rounded" href="#colors">light link</a></p>
+            <p><a class="text-success p-1" href="#colors">success link</a></p>
+            <p><a class="text-warning p-1" href="#colors">warning link</a></p>
+            <p><a class="text-error p-1" href="#colors">error link</a></p>
           </div>
 
 <!-- colors example -->
@@ -299,13 +299,13 @@ <h4 class="s-subtitle">Text colors</h4>
 
           <h4 class="s-subtitle">Background colors</h4>
           <div class="docs-note">
-            <p><span class="bg-primary text-light p-5 rounded">primary bg</span></p>
-            <p><span class="bg-secondary text-primary p-5 rounded">secondary bg</span></p>
-            <p><span class="bg-dark text-light p-5 rounded">dark bg</span></p>
-            <p><span class="bg-gray p-5 rounded">gray bg</span></p>
-            <p><span class="bg-success text-light p-5 rounded">success bg</span></p>
-            <p><span class="bg-warning text-light p-5 rounded">warning bg</span></p>
-            <p><span class="bg-error text-light p-5 rounded">error bg</span></p>
+            <p><span class="bg-primary text-light p-1 rounded">primary bg</span></p>
+            <p><span class="bg-secondary text-primary p-1 rounded">secondary bg</span></p>
+            <p><span class="bg-dark text-light p-1 rounded">dark bg</span></p>
+            <p><span class="bg-gray p-1 rounded">gray bg</span></p>
+            <p><span class="bg-success text-light p-1 rounded">success bg</span></p>
+            <p><span class="bg-warning text-light p-1 rounded">warning bg</span></p>
+            <p><span class="bg-error text-light p-1 rounded">error bg</span></p>
           </div>
 
 <!-- colors example -->