Add course website link

Author: brentyi

_includes/header.html

@@ -1,7 +1,6 @@
 <header class="site-header">
 
-  <div class="wrap title-wrap">
-    <a class="site-title" href="{{ site.courseurl }}">{{ site.title }}</a>
-  </div>
+  <a class="site-title" href="{{ site.url }}">{{ site.title }}</a>
+  <a class="site-link" href="{{ site.courseurl }}">Course Website ➚</a>
 
 </header>

css/main.css

@@ -123,29 +123,56 @@ a:visited { color: #205caa; }
 
 /* Site header */
 
-.title-wrap {
-  text-align: center;
-}
-
 .site-header {
   border-bottom: 1px solid #e8e8e8;
   min-height: 56px;
   background-color: #8C1515;
+  padding: 10px 10px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: center;
 }
 
 .site-title,
 .site-title:hover,
 .site-title:visited {
-  display: block;
+  flex: 3 3 800px;
+  margin: 0 auto;
+  text-align: center;
   font-size: 26px;
+  line-height: 1.2em;
   letter-spacing: -1px;
-  line-height: 56px;
-  position: relative;
-  z-index: 1;
   color: #FFF;
   font-weight: 100;
 }
 
+.site-header::before,
+.site-link:link,
+.site-link:hover,
+.site-link:visited {
+  flex: 1 1 0px;
+  text-align: center;
+  white-space: nowrap;
+  margin: 10px;
+  font-size: 18px;
+  line-height: 2em;
+  padding: 0 10px;
+  color: #fff;
+  border: 2px solid #fff;
+  font-weight: 50;
+}
+
+.site-header::before {
+  /* Pseudo-element for centering */
+  /* Should maintain ~the same width as .site-link */
+  content: "flexbox-dummy";
+  visibility: hidden;
+  height: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 .site-nav {
   float: right;
   line-height: 56px;

index.html

@@ -53,7 +53,7 @@
     <div class="materials-item">
       <a href="assignments2018/assignment3/">
         Assignment #3: Image Captioning with Vanilla RNNs, Image Captioning
-	with LSTMs, Network Visualization, Style Transfer, Generative Adversarial Networks
+        with LSTMs, Network Visualization, Style Transfer, Generative Adversarial Networks
       </a>
     </div>
     -->
@@ -135,7 +135,7 @@
       </a>
     </div> -->
 
-	 <!-- hardcoding items here to force a specific order -->
+    <!-- hardcoding items here to force a specific order -->
     <div class="module-header">Module 1: Neural Networks</div>
 
     <div class="materials-item">