Mobile device optimisation

blog/layouts/baseof.html

@@ -5,7 +5,7 @@
     <link rel="preconnect" href="https://rsms.me/">
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
     <link rel="stylesheet" href="/css/style.css">
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
     <title> {{ .Site.Params.browserTitle }} :: {{ .Title }} </title>
 </head>
 

blog/static/css/style.css

@@ -224,14 +224,48 @@ img {
 
 /* ---------- Responsive Adjustments ---------- */
 @media (max-width: 600px) {
-  body {
-    padding: 5rem 1rem 5rem;
-  }
 
-  .topbar-content {
+    .topbar {
-    flex-direction: column;
+      width: 90%;
-    gap: 0.5rem;
+      padding: 0.75rem 1.5rem;
-  }
+    }
+
+    .topbar-content {
+       display: flex;
+       justify-content: space-between;
+       align-items: center;
+       flex-direction: row;
+       gap: 0.1rem;
+     }
+
+     .site-title {
+       font-size: 14pt;
+     }
+
+     .nav-links a {
+       font-size: 12pt;
+       margin-left: 0.5rem;
+     }
+
+     .bottombar {
+       padding: 0.75rem 0rem;
+       text-align: center;
+     }
+
+     .bottombar-content {
+       margin: 0 auto;
+       padding: 0;
+       width: 100%;
+     }
+
+     body {
+       padding: 0.5rem;
+     }
+
+     main {
+       padding-left: 0;
+       margin-top: 1rem;
+     }
 }
 
 /* ---------- Codeblock Styling ---------- */