Finally make metanohi.name mobile friendly.

site/style.css

@@ -1,132 +1,56 @@
-body {
-  font-family: sans;
-}
-
-* {
-  margin: 0;
-}
-
-#body {
-  width: 850px;
-  margin: 0 auto;
-}
-
-#body header {
-  height: 100px;
-  background-color: rgba(0, 0, 0, 0.8);
-}
-
-#body header img {
-  width: 850px;
-  height: 100px;
-}
-
-#body nav {
-  background-color: #333333;
-  padding: 1px 0 5px 0;
-}
-
-#body nav ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  text-align: center;
-  font-size: 24px;
-}
-
-#body nav ul li {
-  display: inline;
-  margin-left: 25px;
-}
-
-#body nav ul li:first-child {
-  margin-left: 0;
-}
-
-#body nav a:link, #body nav a:visited, #body nav a:hover {
-  color: #51B7FF;
-  text-decoration: none;
-}
-
-#content {
-  padding: 15px;
-  background-color: rgba(0, 0, 0, 0.8);
-  color: #eeeeee;
-}
-
-h1 {
-  margin-top: 1.5em;
-}
-
-h1:first-child {
-  margin-top: 0;
-}
-
-h2 {
-  margin-top: 1.2em;
-}
-
-h3 {
-  margin-top: 1em;
-}
-
-p {
-  margin-top: 0.8em;
-}
-
-.figure {
-  margin-top: 0.8em;
+#metanohi-nav {
+  background-color: #222;
+  font-size: 2em;
   text-align: center;
 }
 
-.caption {
-  margin-top: 0;
-  font-size: 0.8em;
-  font-style: italic;
+#metanohi-nav #metanohi-logo {
+  margin-top: 0.3em;
+  display: inline-block;
+  width: 9em;
+  height: 1.33891086803em;
+  background-image: url(/logo.svg);
+  background-size: 9em 1.33891086803em;
 }
 
-ul, ol, dl {
-  margin-top: 0.8em;
+#metanohi-nav ul {
+  margin: 0;
 }
 
-dt {
-  font-style: italic;
-}
-
-dd {
-  margin-left: 1.5em;
-}
-
-hr {
-  margin-top: 1em;
-}
-
-pre {
-  margin-top: 0.8em;
-  border: 1px solid white;
-  padding: 10px;
-  overflow-x: auto;
-}
-
-code {
-  font-size: 16px;
-  white-space: pre;
-}
-
-a:link, a:visited {
-  color: #5199FF;
-  text-decoration: none;
-}
-
-a:hover {
-  color: #51B7FF;
-  text-decoration: none;
-}
-
-#background div {
-  position: fixed;
-  top: 0;
+.metanohi-color-columns div {
+  float: left;
   width: 10%;
-  height: 100%;
-  z-index: -1;
+  height: 1em;
+}
+
+.container-small {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .container-small {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container-small {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container-small {
+    max-width: 720;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container-small {
+    max-width: 720px;
+  }
 }