Minor fixes

_data/categories.yaml

@@ -1,9 +1,12 @@
 ---
 - name: academics
+  title: Academics
   subcategories:
 - name: cultural
+  title: Cultural
   subcategories:
 - name: columns
+  title: Columns
   subcategories:
     - name: coverstory
       title: Cover Story
@@ -11,20 +14,25 @@
       title: Big Story
     - name: almostfamous
       title: Almost Famous
-    - name: phekingnews
-      title: Pheking News
     - name: guestcomentary
       title: Guest Comentary
+    - name: editorial
+      title: Editorial
 - name: tech
+  title: Tech
   subcategories:
 - name: career
+  title: Career
   subcategories:
 - name: sac
   title: SAC
   subcategories:
-- name: editorial
-  title: Editorial
+- name: phekingnews
+  title: Pheking News
+  subcategories:
 - name: verbatim
+  title: Verbatim
   subcategories:
 - name: sports
+  title: Sports
   subcategories:

_includes/header.html

@@ -3,6 +3,7 @@
   {% assign post = page %}
 {% endif %}
 
+<a  href="{{ post.url }}">
 <div id="header" class="container {% if page.is_post %}post-header{% endif %}">
   <div class="row header-row outer-row">
     {% if post.image != nil %}
@@ -29,6 +30,7 @@
     </div>
   </div>
 </div>
+</a>
 
 <div id="new-articles" class="container content">
   <div class="container-title">New Articles</div>
@@ -37,26 +39,28 @@
       {% for post in site.related_posts limit: 5 %}
 
       {% if forloop.index == 3 %}
-        </div>
-        <div class="row outer-row">
+    </div>
+    <div class="row outer-row">
       {% endif %}
 
       <div class="col-sm-{% if forloop.index < 3 %}6{% else %}4{% endif %} article-col">
-        <div class="article">
-        <div class="center-fill-container img-container tinted">
-          <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill center-both {% if post.image == null %}hidden{% endif %}">
-        </div>
-        <div class="details">
-          <div class="head">
-            <h3 class="title"><a href="{{ post.url }}">{{ post.title }}</a></h3>
-            <div class="tag"><a href="/category/{{ post.category }}/">{{ site.data.categories_name[post.category] }}</a></div>
-            <span class="date">{{ post.date | date: "%b %e, %Y" | upcase }}</span>
+        <a href="{{ post.url }}">
+          <div class="article">
+            <div class="center-fill-container img-container tinted">
+              <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill center-both {% if post.image == null %}hidden{% endif %}">
+            </div>
+            <div class="details">
+              <div class="head">
+                <h3 class="title"><a href="{{ post.url }}">{{ post.title }}</a></h3>
+                <div class="tag"><a href="/category/{{ post.category }}/">{{ site.data.categories_name[post.category] }}</a></div>
+                <span class="date">{{ post.date | date: "%b %e, %Y" | upcase }}</span>
+              </div>
+              {% if forloop.index < 3 %}
+              <div class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify }}{% endif %}</div>
+              {% endif %}
+            </div> <!-- details -->
           </div>
-          {% if forloop.index < 3 %}
-          <div class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify }}{% endif %}</div>
-          {% endif %}
-        </div> <!-- details -->
-        </div>
+        </a>
       </div>
       {% endfor %}
     </div>

_includes/navbar.html

@@ -31,17 +31,17 @@
         {% for cat in site.data.categories %}
           {% if cat.subcategories != nil %}
           <li class = "dropdown">
-            <a class="hover-underline" href="#" class="dropdown-toggle" data-toggle="dropdown">{{ cat.name | uppercase }} <span class="caret"></span></a>
+            <a class="hover-underline" href="#" class="dropdown-toggle" data-toggle="dropdown">{{ cat.title }} <span class="caret"></span></a>
             <ul class="dropdown-menu">
               {% for subcat in cat.subcategories %}
                {% if site.categories[subcat.name] != nil %}
-                <li><a class="hover-underline" href="/category/{{ subcat.name }}/">{{ subcat.title | uppercase }}</a></li>
+                <li><a class="hover-underline" href="/category/{{ subcat.name }}/">{{ subcat.title }}</a></li>
                 {% endif %}
               {% endfor %}
             </ul>
           </li>
           {% elsif  site.categories[cat.name] != nil%}
-          <li><a class="hover-underline" href="/category/{{ cat.name }}/">{{ cat.name | uppercase }}</a></li>
+          <li><a class="hover-underline" href="/category/{{ cat.name }}/">{{ cat.title }}</a></li>
           {% endif %}
         {% endfor %}
       </ul>

css/base.scss

@@ -14,6 +14,7 @@ $navbar-default-border: none;
 $pre-nav-logo-height: 65px;
 $home-header-bg-color: #22221f;
 $home-header-height: 340px;
+$home-header-shadow: 0 0 30px 0px rgba(0,0,0,0.4);
 $new-article-img-height: 150px;
 $new-article-img-width: 225px;
 $new-article-title-color: black;
@@ -171,7 +172,7 @@ nav {
     .nav {
       width: initial;
 
-      > li {
+      &:after {
         width: initial;
       }
     }
@@ -183,22 +184,28 @@ nav {
 }
 
 .nav > li {
-  width: 1/9 * 100%;
   text-align: center;
+  display: inline-block;
+  float: none;
+  margin-bottom: -100%; // Hack to fix the spacing between header and navbar
 
   &:first-of-type a {
     padding-left: 0;
-    text-align: left;
   }
 
   &:last-of-type a {
-    text-align: right;
+    padding-right: 0;
   }
 }
 .navbar-nav {
 	font-size: 16px;
-	text-transform: capitalize;
+  text-align: justify;
   font-weight: bold;
+
+  &:after {
+    width: 100%; /* Ensures justification for single lines */
+    display: inline-block;
+  }
 }
 
 // ================ /NAV ================//
@@ -206,7 +213,6 @@ nav {
 // ============= HOME-HEADER ============= //
 
 #header {
-  margin-top: 25px;
   font-size: 12px;
 
   .header-row {
@@ -216,7 +222,7 @@ nav {
     border-radius: 8px 8px 0 0;
     overflow: hidden;
     color: white;
-    box-shadow: 0 0 35px 6px rgba(0,0,0,0.35);
+    box-shadow: $home-header-shadow;
 
   }
 
@@ -238,6 +244,7 @@ nav {
 
   .cover-link:hover {
     text-decoration: none;
+    color: rgb(174, 170, 170);
   }
   
   .cover-title-label {
@@ -251,10 +258,6 @@ nav {
     margin-top: 0;
     margin-bottom: 20px;
   }
-
-  .title:hover {
-    text-shadow: 1px 1px 10px #777777;
-  }
 }
 
 #header.category-header {
@@ -302,7 +305,7 @@ nav {
     background: #fafafa;
     font-size: 14px;
     padding: 0.35em 2.35em;
-    box-shadow: 0 0 35px 6px rgba(0,0,0,0.35);
+    box-shadow: $home-header-shadow;
     border-radius: 0.4em;
   }
 
@@ -322,7 +325,7 @@ nav {
     position: relative;
     height: 340px;
     margin-top: 10px;
-    box-shadow: 0 0 35px 6px rgba(0,0,0,0.35);
+    box-shadow: $home-header-shadow;
   }
 
   .details {