Site bar, qe logo in header

Author: DrDrij

Diff for: _layouts/default.html

@@ -94,12 +94,35 @@
           </div>
 
           <ul class="options">
+            <li>
+              <a href="https://quantecon.org/"
+                ><span class="sr-only">Visit QuantEcon</span></a
+              >
+            </li>
             <li><a href="/about">About these lectures</a></li>
-            <li><a href="https://quantecon.org/">Visit QuantEcon</a></li>
           </ul>
         </div>
       </header>
 
+      <nav>
+        <div class="container">
+          <ul class="site-bar">
+            <li>
+              <a class="active" href="https://python.quantecon.org/">Home</a>
+            </li>
+            <li>
+              <a href="https://python-programming.quantecon.org/"
+                >Programming</a
+              >
+            </li>
+            <li><a href="https://python-intro.quantecon.org/">Intro</a></li>
+            <li>
+              <a href="https://python-advanced.quantecon.org/">Advanced</a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+
       <main class="main">
         {{ content }}
       </main>

Diff for: assets/img/qe-squares.png

@@ -220,6 +220,18 @@ a:visited {
     a {
       color: #fff;
     }
+    &:first-child {
+      a {
+        background-image: url(/assets/img/qe-squares.png);
+        background-repeat: no-repeat;
+        display: block;
+        background-size: contain;
+        width: 80px;
+        height: 62px;
+        position: relative;
+        top: -5px;
+      }
+    }
   }
   @media (max-width: 1024px) {
     margin: 1rem 0 0 0;
@@ -368,3 +380,32 @@ a:visited {
     width: 1.25em;
   }
 }
+
+.site-bar {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  li {
+    display: block;
+    width: 25%;
+    line-height: 1;
+    margin: 0;
+    a {
+      display: block;
+      padding: 0.3rem 1rem;
+      text-align: center;
+      font-size: 1rem;
+      //border: 1px solid #ddd;
+      //border-width: 0 1px 1px 0;
+      &:hover,
+      &.active {
+        background-color: #0072bc;
+        color: #fff;
+        text-decoration: none;
+      }
+    }
+  }
+}