Style Hakyll website to better accommodate smaller screens. (jaspervd…

…j#1054) * Style website Hakyll to better accommodate smaller screens. * Get top, right, bottom, left order correct. Add a little more space between the navigation and main content.
chungyc · Nov 24, 2024 · 16d2971 · 16d2971
1 parent 61b6e1a
commit 16d2971
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 2 deletions.
diff --git a/web/css/default.css b/web/css/default.css
@@ -32,7 +32,7 @@ div#header a {
 
 div#main {
     margin: 0px auto 0px auto;
-    width: 860px;
+    max-width: 860px;
 }
 
 div#sidebar {
@@ -60,7 +60,7 @@ div#sidebar img {
 }
 
 div#content {
-    width: 670px;
+    max-width: 670px;
     float: right;
 }
 
@@ -107,6 +107,7 @@ img {
     border: none;
     display: block;
     margin: 6px auto 30px auto;
+    max-width: 100%;
 }
 
 ul {
@@ -131,3 +132,46 @@ pre code {
 p.caption {
     display: none;
 }
+
+@media all and (max-width: 900px) {
+    body {
+        padding: 0 1em 0 1em;
+    }
+
+    div#header {
+        margin: 24px 0px 24px 0px;
+    }
+
+    div#main {
+        max-width: 100%
+    }
+
+    div#sidebar {
+        margin-right: 0;
+        width: 100%;
+        float: none;
+        margin-bottom: 1em;
+        font-size: 75%;
+        opacity: 50%;
+    }
+
+    div#sidebar h1 {
+        float: none;
+    }
+
+    div#sidebar a {
+        display: inline;
+        float: none;
+        margin-bottom: initial;
+        padding-right: 2em;
+    }
+
+    div#sidebar img {
+        display: none;
+    }
+
+    div#content {
+        max-width: 100%;
+        float: none;
+    }
+}
diff --git a/web/templates/default.html b/web/templates/default.html
@@ -13,6 +13,7 @@
         <!-- Metadata. -->
         <meta name="keywords" content="hakyll,static site generator,static,site,generator,haskell,blog"/>
         <meta name="description" content="Hakyll - A Static Site Generator in Haskell."/>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
     </head>
     <body>
         <!-- Fork me on Github -->