Push UI updates

tyk-docs/assets/scss/_docs.scss

@@ -10,8 +10,6 @@
   justify-content: center;
 }
 
-
-
 .badge {
   background: $white;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
@@ -112,7 +110,7 @@
 }
 
 .badge .nav.title {
-  background-color: #8438FA;
+  background-color: #8438fa;
   color: white;
 }
 
@@ -197,7 +195,7 @@
   margin-top: 40px !important;
 }
 
-.grid.big .badge>.read {
+.grid.big .badge > .read {
   display: none;
 }
 
@@ -206,7 +204,7 @@
   max-width: 300px;
   white-space: normal;
   @media (max-width: 555px) {
-  max-width: 100%;
+    max-width: 100%;
   }
 }
 
@@ -274,7 +272,7 @@
 }
 
 .grid.big .badge .bottom .read {
-  color: #258B80;
+  color: #258b80;
   font-size: 14px;
   font-weight: bold;
   margin-bottom: 10px;
@@ -286,12 +284,6 @@
   vertical-align: text-top;
 }
 
-
-
-
-
-
-
 .return-top {
   display: none;
 }
@@ -304,12 +296,6 @@
   top: 0px !important;
 }
 
-
-
-
-
-
-
 /* Edit on GitHub button */
 .button.medium {
   color: white;
@@ -321,12 +307,6 @@
   line-height: 26px;
 }
 
-/* iframe display */
-iframe {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
 /* Table top margin */
 .wysiwyg table {
   margin-top: 20px;
@@ -342,10 +322,10 @@ iframe {
 }
 
 /* Link icon */
-#main-content h2>a>img,
-#main-content h3>a>img,
-#main-content h4>a>img,
-#main-content h5>a>img {
+#main-content h2 > a > img,
+#main-content h3 > a > img,
+#main-content h4 > a > img,
+#main-content h5 > a > img {
   vertical-align: middle;
   border: none !important;
   height: 17px;
@@ -361,7 +341,6 @@ iframe {
   border-color: $white;
 }
 
-
 /* Hero image */
 .hero-sidebyside img {
   margin-right: 20px;
@@ -379,12 +358,6 @@ iframe {
   width: 400px;
 }
 
-
-
-
-
-
-
 /* Suggest an Edit */
 .suggest-edit {
   width: auto;
@@ -521,22 +494,12 @@ iframe {
   margin-bottom: 32px;
 }
 
-
-
-
-
-
-
-
-
-
 /* Documentation : Navigation */
 .docs-navigation {
   padding: 80px 0;
   margin-top: 10px;
   border-top: 1px solid rgba(122, 121, 161, 0.4);
   display: none;
-
 }
 
 .hasSidebar .docs-navigation {
@@ -546,7 +509,8 @@ iframe {
     justify-content: center;
     flex-direction: row;
   }
-  #previousArticle, #nextArticle{
+  #previousArticle,
+  #nextArticle {
     @media (max-width: 1024px) {
       max-width: 160px;
       margin: auto;
@@ -558,11 +522,11 @@ iframe {
   }
 }
 
-.docs-navigation>div {
+.docs-navigation > div {
   display: table-row;
 }
 
-.docs-navigation>div>* {
+.docs-navigation > div > * {
   display: table-cell;
   vertical-align: middle;
 }
@@ -622,15 +586,6 @@ iframe {
   font-family: "Inter", sans-serif;
 }
 
-
-
-
-
-
-
-
-
-
 /* Return to Top buttons */
 
 #return-to-top {
@@ -675,16 +630,6 @@ iframe {
   }
 }
 
-
-
-
-
-
-
-
-
-
-
 /* Documentation : Share - Print*/
 .docs-share-print {
   padding: 10px 0;
@@ -751,7 +696,6 @@ iframe {
   border-radius: 20px;
 }
 
-
 @media only screen and (max-width: 1000px) {
   .hero-sidebyside h1,
   .hero-sidebyside .hero-text {
@@ -806,8 +750,6 @@ iframe {
     margin-right: 0;
   }
 
-
-
   .docs-navigation .button {
     margin-bottom: 5px;
   }
@@ -893,20 +835,20 @@ iframe {
 
 .external-links::after {
   content: "";
-  background:  url("../img/external-link.svg") no-repeat 0 0;
-  width: 16px!important;
-  height: 16px!important;
+  background: url("../img/external-link.svg") no-repeat 0 0;
+  width: 16px !important;
+  height: 16px !important;
   display: inline-block;
   top: 0;
   background-size: 100%;
 }
 
 .external-links-black::after {
   content: "";
-  background:  url("../img/external-white.svg") no-repeat 0 0;
-  width: 16px!important;
-  height: 16px!important;
+  background: url("../img/external-white.svg") no-repeat 0 0;
+  width: 16px !important;
+  height: 16px !important;
   display: inline-block;
   top: 0;
   background-size: 100%;
-}
+}

tyk-docs/assets/scss/_header.scss

@@ -43,7 +43,7 @@
       margin-right: 0;
     }
   }
-  
+
   .header__search {
     flex-grow: 1;
   }
@@ -82,7 +82,6 @@
         display: none;
       }
 
-
       @media (min-width: 1001px) and (max-width: 1250px) {
         label[for="extend-links"] {
           display: flex;
@@ -123,7 +122,6 @@
       display: block;
     }
   }
-
 }
 
 .header__tabs-menu {
@@ -141,7 +139,7 @@
     color: $brand-black;
     font-size: 18px;
     font-weight: bold;
-    font-family: 'Inter', sans-serif;
+    font-family: "Inter", sans-serif;
     white-space: nowrap;
 
     &:not(:first-child) {
@@ -217,7 +215,7 @@
 }
 
 .menu .menu-underline {
-  background: #258B80;
+  background: #258b80;
   height: 2px;
   position: absolute;
   bottom: 0;
@@ -270,14 +268,10 @@
   visibility: visible;
 }
 
-
-
-
 /* ==========================================================================
    Header Media Queries
    ========================================================================== */
 
-
 @include breakpoint(large, down) {
   .burger {
     width: 40px;
@@ -289,7 +283,6 @@
     z-index: 3;
     display: inline-block;
     border-radius: 40px;
-
 
     &:before,
     &:after {
@@ -325,9 +318,6 @@
     }
   }
 
-
-
-
   .header {
     padding: 0;
     height: $header-height-small;
@@ -357,23 +347,28 @@
         width: calc(100% - 80px);
       }
     }
-
   }
-
 }
 
 .home_header {
-  border-bottom: 1px solid #E3CEFF;
+  border-bottom: 1px solid #e3ceff;
+
+  @include breakpoint(large, down) {
+    position: fixed;
+    z-index: 99;
+    width: 100vw;
+    background: $improve-page-background;
+  }
 }
+
 @include breakpoint(large, up) {
   .home_header {
-    padding-left: 50px;
-    padding-right: 20px;
-
+    padding-left: 1rem;
+    padding-right: 1rem;
   }
 }
 
-.header-refresh{
+.header-refresh {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -387,7 +382,6 @@
       margin-right: 70px;
     }
   }
-
 }
 .header__nav_container {
   display: flex;
@@ -397,10 +391,10 @@
 
 .header_link {
   color: var(--text-subdued, #515071);
-  font-feature-settings: 'clig' off, 'liga' off;
+  font-feature-settings: "clig" off, "liga" off;
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: 20px;
   padding: 2px;
-}
+}