Make both headers look similar

2 files changed, 25 insertions, 6 deletions

diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index be7369f0..c868c896 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -48,6 +48,7 @@ $body-color: rgba(0, 0, 0, .85);
 $body-background-color: rgb(249, 249, 249);
 $main-background-color: rgb(255, 255, 255);
 $search-border: rgba(0, 0, 0, .25);
+$search-border-dark: rgba(0, 0, 0, .50);
 $h-border-bottom: rgba(125, 134, 140, .2);
 $h1-border-bottom: $code-color;
 $main-box-shadow: rgba(0, 0, 0, .1);
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index f975e773..ef4227b9 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -409,7 +409,6 @@ li {
   display: flex;
   justify-content: space-between;
   white-space: nowrap;
-  padding-left: 40px;
 
   .logo-container {
     margin-right: 24px;
@@ -482,6 +481,7 @@ li {
     background-repeat: no-repeat;
     background-size: 14px;
     background-position: 9px 12px;
+    outline: 0;
 
     @media(max-width:$medium-width) {
       width: 210px;
@@ -492,6 +492,15 @@ li {
     }
   }
 
+  input:focus {
+    border: 1px solid $search-border-dark;
+  }
+
+  input:visited {
+    outline: 0;
+    border: 0;
+  }
+
   .nav-container {
     margin: auto 0;
 
@@ -499,6 +508,9 @@ li {
       display: none;
       width: 100%;
       box-sizing: border-box;
+      outline: 0;
+      margin-top: 12px;
+      margin-left: 10px;
 
       @media all and (max-width: $mobile-width) {
         display: block;
@@ -506,6 +518,10 @@ li {
 
     }
 
+    .docsearch-mobile:focus {
+      border: 1px solid $search-border-dark;
+    }
+
   }
 
   .nav-toggle {
@@ -524,6 +540,7 @@ li {
     text-decoration: none;
     color: $black;
     padding: 10px;
+    font-size: 16px;
   }
 
   // Override bootstrap
@@ -545,7 +562,7 @@ li {
   }
 
   .landing-header {
-    padding: 140px 20px;
+    padding: 120px 20px;
     padding-bottom: 220px;
     color: $white;
     background: $landing-background;
@@ -665,13 +682,13 @@ li {
     z-index: 1000;
     position: fixed;
     width: 100%;
-    padding: 6px 60px;
+    padding: 4px 24px;
     text-align: left;
     display: flex;
     justify-content: space-between;
     align-items: center;
     white-space: nowrap;
-    font-size: 1.1em;
+    // font-size: 1.1em;
     transition: .2s cubic-bezier(0, 0, 0, 1);
 
     a:hover {
@@ -680,6 +697,7 @@ li {
 
     p {
       margin: 0;
+      font-size: 16px;
     }
 
     .logo {
@@ -692,8 +710,8 @@ li {
     }
 
     .nav-item {
-      padding: 12px 20px;
-      margin-right: 6px;
+      padding: 10px 18px;
+      margin-right: 4px;
       text-align: center;
 
       @media all and (max-width: $mobile-width) {