Implement a responsive layout

2 files changed, 35 insertions, 15 deletions

diff --git a/css/jakob.css b/css/jakob.css
index 353587a..ceb6337 100644
--- a/css/jakob.css
+++ b/css/jakob.css
@@ -82,43 +82,61 @@ footer {
 
 /* Navigation */
 
-.nav {
+nav {
     font-family: "Cantarell", sans;
     padding-top: 1rem;
     padding-bottom: 1rem;
-    margin-bottom: 3rem;
     border-bottom: 1px solid #eee;
 }
 
-.nav ul {
+nav ul {
     list-style-type: none;
-    display: inline-block;
     margin: 0;
     padding: 0;
 }
 
-.nav li {
-    display: inline;
-    padding: 1rem;
+nav a {
+    display: inline-block;
+    color: #000;
 }
 
-.nav li:first-child {
-    padding-left: 0;
+nav a:hover {
+    color: #000;
 }
 
-.nav a {
-    display: inline-block;
+nav a:visited {
     color: #000;
 }
 
-.nav a:hover {
-    color: #000;
+@media (min-width: 800px) {
+    nav {
+        margin-bottom: 3rem;
+    }
+
+    nav ul {
+        display: inline-block;
+    }
+
+    nav li {
+        display: inline;
+        padding: 1rem;
+    }
+
+    nav li:first-child {
+        padding-left: 0;
+    }
 }
 
-.nav a:visited {
-    color: #000;
+@media (max-width: 800px) {
+    nav ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
 }
 
+/* Container */
+
 @media (min-width: 1140px) {
     .container {
         margin-left: 14rem;
diff --git a/haunt.scm b/haunt.scm
index 821229a..b9da3b4 100644
--- a/haunt.scm
+++ b/haunt.scm
@@ -86,6 +86,8 @@
              (html
               (head
                (meta (@ (charset "utf-8")))
+               (meta (@ (name "viewport")
+                        (content "width=device-width, initial-scale=1.0")))
                (title ,(string-append title " — " (site-title site)))
                ,(stylesheet "fonts")
                ,(stylesheet "highlight")