Centering content on large screens and added menu link on small screens

Lars Selstad · Lars Selstad · commit 6a2125b07866 · 2015-06-10T09:03:07.000+02:00
diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -1,4 +1,4 @@
-<div class="navbar">
+<div id="navbar" class="navbar">
   <ul>
     <li><a href="/">Home</a>
     <li><a href="/about.html">About</a>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -10,19 +10,23 @@
 
     <body>
 
-        {% include navbar.html %}
+       <div id="wrapper">
 
-        <div class="site">
-          <div class="header">
-            <!-- nothing yet -->
-          </div>
+            {% include navbar.html %}
 
-          {{ content }}
+            <div class="site">
+              <div class="header">
+                <!-- nothing yet -->
+              </div>
 
-          <div class="footer">
-            <!-- nothing yet -->
-          </div>
-        </div>
+              {{ content }}
+
+              <div class="footer">
+                <!-- nothing yet -->
+              </div>
+            </div>
 
+            <div id="menuLinkBar"><a href="#navbar">Menu</a></div>
+        </div>
     </body>
 </html>
diff --git a/css/main.css b/css/main.css
@@ -43,16 +43,28 @@ body {
   padding: 2em;
 }
 
-@media (max-width: 700px) {
-  body {
-    flex-direction:column;
-  }
-
-  .navbar {
-    width: 100%;
-  
-    order: 2;
+#menuLinkBar {
+    background-color: #a09a93;
+    text-align: right;
+    padding: 0.3em 2em;
+    order: 1;
+    display: none;
 }
+
+@media (max-width: 700px) {
+    #wrapper {
+        flex-direction: column;
+    }
+    .site {
+        order: 2;
+    }
+    .navbar {
+        width: 100%;
+        order: 3;
+    }
+    #menuLinkBar {
+        display: block;
+    }
 }
 
 ol, ul {
@@ -91,11 +103,8 @@ body {
   line-height: 22px;
   font-family: "adelle", Georgia, "Times New Roman", serif;
   color: #4e443c;
-  display: flex;
   margin: 0;
   padding: 0;
-  width: 100%;
-  height: 100%;
 }
 
 .windows.chrome body,
@@ -1503,13 +1512,11 @@ pre.sh_sourceCode .sh_value {
 
 
 #wrapper {
-  overflow: hidden;
-  *zoom: 1;
+  display: flex;
   margin: 0 auto;
-  width: 940px;
+  max-width: 940px;
 }
 
-
 header {
   margin-top: 20px;
   position: relative;

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="navbar">`
	`1`	`+<div id="navbar" class="navbar">`
`2`	`2`	`<ul>`
`3`	`3`	`<li><a href="/">Home</a>`
`4`	`4`	`<li><a href="/about.html">About</a>`