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`		`-<divclass="navbar">`
	`1`	`+<divid="navbar" class="navbar">`
`2`	`2`	`<ul>`
`3`	`3`	`<li><ahref="/">Home</a>`
`4`	`4`	`<li><ahref="/about.html">About</a>`
-Original file line number
+Diff line change
 <body>
 -{% include navbar.html %}
 +<divid="wrapper">
 -<divclass="site">
 -<divclass="header">
 -<!-- nothing yet -->
 -</div>
 +{% include navbar.html %}
 -{{content }}
 +<divclass="site">
 +<divclass="header">
 +<!-- nothing yet -->
 +</div>
 -<divclass="footer">
 -<!-- nothing yet -->
 -</div>
 -</div>
 +{{content }}
++
 +<divclass="footer">
 +<!-- nothing yet -->
 +</div>
 +</div>
 +<divid="menuLinkBar"><ahref="#navbar">Menu</a></div>
 +</div>
 </body>
 </html>
-Original file line number
+Diff line change
 padding:2em;
+}
 -@media (max-width:700px){
 -body{
 -flex-direction:column;
 - }
+-
 - .navbar{
 -width:100%;
+-
 -order:2;
 +#menuLinkBar{
 +background-color:#a09a93;
 +text-align: right;
 +padding:0.3em2em;
 +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{
 line-height:22px;
 font-family:"adelle", Georgia,"Times New Roman", serif;
 color:#4e443c;
 -display: flex;
 margin:0;
 padding:0;
 -width:100%;
 -height:100%;
+}
 .windows.chromebody,
 #wrapper{
 -overflow: hidden;
 -*zoom:1;
 +display: flex;
 margin:0 auto;
 -width:940px;
 +max-width:940px;
+}
+-
 header{
 margin-top:20px;
 position: relative;