Fix Docs bugs

author: Yan Zhu <picturepan2@hotmail.com> 2017-08-15 13:21:48 +0300
committer: Yan Zhu <picturepan2@hotmail.com> 2017-08-15 13:21:48 +0300
commit: 0150eb62f0e33a0c0ef9e75d9f55e71d79d5ba03 (patch)
tree: e1d9921457a80efe1739cb5e4e2163a1f92dd0f4 /docs
parent: c9e625c9dd8f1628c58b10bb165961eae068002f (diff)
4 files changed, 59 insertions, 52 deletions
diff --git a/docs/css/docs.css b/docs/css/docs.css
index 02a6090..4a05927 100644
--- 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
index 20489da..2629b7b 100644
--- 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
index b16bf3d..25acc40 100644
--- 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
index 5077792..1f1b9d7 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -261,7 +261,7 @@
             <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 @@
 </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">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 -->
author	Yan Zhu <picturepan2@hotmail.com>	2017-08-15 13:21:48 +0300
committer	Yan Zhu <picturepan2@hotmail.com>	2017-08-15 13:21:48 +0300
commit	0150eb62f0e33a0c0ef9e75d9f55e71d79d5ba03 (patch)
tree	e1d9921457a80efe1739cb5e4e2163a1f92dd0f4 /docs
parent	c9e625c9dd8f1628c58b10bb165961eae068002f (diff)