update navbar & logo

BuildOnViction · Feb 13, 2019 · 70c65f8 · 70c65f8
1 parent f2fe417
commit 70c65f8
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -52,6 +52,7 @@
           <li><a href="https://tomochain.com/blog/">Blog</a></li>
           <li><a href="https://gitter.im/tomochain/tomochain">Gitter</a></li>
           <li><a href="https://github.com/tomochain">Github</a></li>
+          <li><a href="https://stackoverflow.com/questions/tagged/tomochain">Support</a></li>
         </ul>
       </nav>
     </div>
@@ -62,6 +63,13 @@
       </span>
     </a>
     <div class="toc-wrapper">
+      <ul class="toc-navbar">
+        <li><a href="https://tomochain.com">TomoChain</a></li>
+        <li><a href="https://tomochain.com/blog/">Blog</a></li>
+        <li><a href="https://gitter.im/tomochain/tomochain">Gitter</a></li>
+        <li><a href="https://github.com/tomochain">Github</a></li>
+        <li><a href="https://stackoverflow.com/questions/tagged/tomochain">Support</a></li>
+      </ul>
 
         <div class="lang-selector">
 

diff --git a/pub/css/screen.css b/pub/css/screen.css
@@ -461,6 +461,8 @@ html, body {
   border-right: 1px solid rgba(221, 221, 221, 0.5);
   font-size: 13px;
   font-weight: 500; }
+  .toc-wrapper .toc-navbar {
+    display: none; }
   .toc-wrapper .lang-selector {
     display: none; }
     .toc-wrapper .lang-selector a {
@@ -772,6 +774,15 @@ html, body {
     left: -231px; }
     .toc-wrapper.open {
       left: 0; }
+    .toc-wrapper .toc-navbar {
+      display: block;
+      background: #1c203b;
+      padding: 15px; }
+      .toc-wrapper .toc-navbar li a {
+        color: #fff;
+        text-decoration: none;
+        text-transform: uppercase;
+        font-weight: 600; }
   .page-wrapper {
     margin-left: 0; }
   #nav-button {
@@ -830,9 +841,9 @@ nav {
   nav .logo-container {
     width: 100%; }
   nav .logo {
-    height: 50px;
-    width: 200px;
-    margin: 10px auto;
+    height: 40px;
+    width: 150px;
+    margin: 15px auto;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: contain;
@@ -868,7 +879,7 @@ nav {
 @media (min-width: 48em) {
   nav .logo {
     display: inline-block;
-    margin: 10px 0 0 15px; } }
+    margin: 15px 0 0 15px; } }
 
 .caret {
   margin-top: 4px;

diff --git a/source/layouts/layout.ejs b/source/layouts/layout.ejs
@@ -58,6 +58,13 @@ under the License.
       </span>
     </a>
     <div class="toc-wrapper">
+      <ul class="toc-navbar">
+        <li><a href="https://tomochain.com">TomoChain</a></li>
+        <li><a href="https://tomochain.com/blog/">Blog</a></li>
+        <li><a href="https://gitter.im/tomochain/tomochain">Gitter</a></li>
+        <li><a href="https://github.com/tomochain">Github</a></li>
+        <li><a href="https://stackoverflow.com/questions/tagged/tomochain">Support</a></li>
+      </ul>
       <% if (language_tabs.length>0) {%>
         <div class="lang-selector">
           <% for (var lang in language_tabs) { %>

diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
@@ -63,6 +63,10 @@ html, body {
   font-weight: 500;
   // font-weight: bold;
 
+  .toc-navbar {
+    display: none;
+  }
+
   // language selector for mobile devices
   .lang-selector {
     display: none;
@@ -572,8 +576,22 @@ html, body {
     &.open {
       left: 0;
     }
+
+    .toc-navbar {
+      display: block;
+      background: #1c203b;
+      padding: $nav-padding;
+
+      li a {
+        color: #fff;
+        text-decoration: none;
+        text-transform: uppercase;
+        font-weight: 600;
+      }
+    }
   }
 
+
   .page-wrapper {
     margin-left: 0;
   }
@@ -655,9 +673,9 @@ nav {
     width: 100%;
   }
   .logo {
-    height: 50px;
-    width: 200px;
-    margin: 10px auto;
+    height: 40px;
+    width: 150px;
+    margin: 15px auto;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: contain;
@@ -703,7 +721,7 @@ nav {
 @media (min-width: 48em) {
   nav .logo {
     display: inline-block;
-    margin: 10px 0 0 15px;
+    margin: 15px 0 0 15px;
   }
 }