CSS Sizing

_includes/header.html

 <!-- The page title -->
-<nav>
+<nav class="top-nav">
   <div class="container">
     <div class="nav-wrapper">
       <a class="page-title">
         {% if page.title == "Home" %}{{ site.title }}{% else %}{{ page.title }}{% endif %}
       </a>
-      <a href="#" data-activates="kwarc-nav" class="button-collapse top-nav full hide-on-large-only">
-        <i class="material-icons">menu</i>
-      </a>
     </div>
   </div>
 </nav>
 
+<div class="container">
+  <a href="#" data-activates="kwarc-nav" class="button-collapse top-nav full hide-on-large-only">
+    <i class="material-icons">menu</i>
+  </a>
+</div>
+
 <!-- The menu -->
 <ul id="kwarc-nav" class="side-nav fixed">
   <li>

public/css/main.css

+/* general sizing */
 
+header, main, .page-footer {
+  padding-left: 300px;
+}
+
+@media only screen and (max-width : 992px) {
+  header, main, .page-footer {
+    padding-left: 0;
+  }
+}
+
+#body {
+  font-size: 1.25rem;
+  font-weight: 300;
+}
+
+.header {
+  color: #ee6e73;
+  font-weight: 300
+}
+
+.caption {
+  font-size: 1.25rem;
+  font-weight: 300;
+  margin-bottom: 30px
+}
+
+code, pre {
+  position: relative;
+  font-size: 1.1rem
+}
+
+h1, h2, h3, h4, h5, h6 {
+  -webkit-font-smoothing: antialiased
+}
+
+
+/* background color */
 .page-footer, nav {
   background-color: #5B78FD;
 }
 
-footer {
+/** sizing for navigation */
+nav.top-nav {
+  height: 122px;
+  box-shadow: none
+}
+
+div.nav-wrapper {
+  overflow: hidden;
+}
+
+nav .nav-wrapper a.page-title {
+  line-height: 122px;
+  font-size: 48px;
+  height: 122px;
+  white-space: nowrap;
+}
+
+@media only screen and (max-width: 992px) {
+  nav .nav-wrapper {
+    text-align: center
+  }
+  nav .nav-wrapper a.page-title {
+    font-size: 36px;
+    height: 36px;
+  }
+}
+
+a.button-collapse.top-nav {
+  position: absolute;
+  text-align: center;
+  height: 48px;
+  width: 48px;
+  left: 7.5%;
+  top: 0;
+  float: none;
+  margin-left: 1.5rem;
   color: #fff;
+  font-size: 36px;
+  z-index: 2
 }
 
-footer a, footer a:hover {
-    color: #000;
+a.button-collapse.top-nav.full {
+  line-height: 122px
 }
 
-header, main, .page-footer {
-  padding-left: 300px;
+a.button-collapse.top-nav i {
+  font-size: 32px
 }
 
-@media only screen and (max-width : 992px) {
-  header, main, .page-footer {
-    padding-left: 0;
+@media only screen and (max-width: 600px) {
+  a.button-collapse.top-nav {
+    left: 5%
   }
 }
 
-#body {
-  font-size: 1.25rem;
-  font-weight: 300;
-}
\ No newline at end of file
+
+/* footer size */
+
+footer {
+  color: #fff;
+  font-size: .9rem;
+}
+
+footer a, footer a:hover {
+    color: #000;
+}