Add mobile styling
authorDion Moult <dion@thinkmoult.com>
Sun, 13 Oct 2019 05:04:54 +0000 (16:04 +1100)
committerDion Moult <dion@thinkmoult.com>
Sun, 13 Oct 2019 05:04:54 +0000 (16:04 +1100)
www/style.css

index b73c6de6e8291a16186bfae7166b498da6499034..01c330bbf1d24a84fdeff322bfeeff85b03a1fd3 100644 (file)
@@ -164,3 +164,18 @@ footer {
     float: right;
     width: 48%;
 }
+
+@media only screen and (max-width: 600px) {
+    .left-half { float: none; width: auto; }
+    .right-half { float: none; width: auto; }
+    h1 { float: none; height: 50px; line-height: 50px; }
+    nav { float: none; }
+    nav ul li { float: none; height: 40px; border: 0px; border-top: 1px solid #333; display: block; line-height: 40px; }
+    header { overflow: hidden; height: auto; }
+    img { max-width: 100%; }
+    section { margin-left: 10px; margin-right: 10px; }
+    footer { line-height: 30px; margin-top: 20px; padding-top: 20px; font-size: 0.8em; margin-bottom: 20px; }
+    footer img { display: none; }
+    section#blurb { height: auto; overflow: hidden; }
+    section#blurb p { line-height: 30px; }
+}