Clean up bobastyle, flexbox will be improved soon

assets/css/bobastyle.css

@@ -1,15 +1,3 @@
-@media screen and (max-width: 700px) {
-  .page {
-    flex-direction: column;
-  }
-}
-@media screen and (max-width: 400px) {
-  #main a {
-    float: none;
-    width: 100%;
-  }
-}
-
 body {
   background-color: black;
   font-family: sans-serif;
@@ -35,11 +23,11 @@ blockquote {
   font-size: 40px;
 }
 
-#main {
+#navbar {
   overflow: hidden;
   background-color: #222;
 }
-#main a {
+#navbar a {
   float: left;
   display: block;
   color: lightgray;
@@ -47,7 +35,7 @@ blockquote {
   padding: 14px 20px;
   text-decoration: none;
 }
-#main a:hover {
+#navbar a:hover {
   background-color: #444;
   color: white;
 }
@@ -56,18 +44,14 @@ blockquote {
   box-sizing: border-box;
 }
 .page {
-  flex: 1;
   display: flex;
-  flex-wrap: wrap;
 }
 .side {
-  width: 20%;
   background-color: #111;
   color: lightgray;
   padding: 20px;
 }
-.main {
+.content {
-  width: 80%;
   background-color: black;
   color: lightgray;
   padding: 20px;
@@ -77,3 +61,16 @@ blockquote {
   text-align: center;
   background: #ddd;
 }
+
+@media screen and (max-width: 700px) {
+  .page {
+    flex-direction: column;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  #navbar a {
+    float: none;
+    width: 100%;
+  }
+}

layouts/_default/baseof.html

@@ -15,7 +15,7 @@
             </div>
             {{ end }}
 
-            <div class="main">
+            <div class="content">
             {{- block "main" . }}
             {{ .Content }}
             {{- end }}

layouts/partials/navbar.html

@@ -1,4 +1,4 @@
-<nav id="main">
+<nav id="navbar">
     <a href="{{ "/" | relURL }}">Home</a>
     {{ range .Site.Menus.main }}
     <a href="{{ .URL }}">{{ .Name }}</a>