Mobile device optimisation

blog/static/css/style.css

@@ -224,14 +224,48 @@ img {
 
 /* ---------- Responsive Adjustments ---------- */
 @media (max-width: 600px) {
-  body {
-    padding: 5rem 1rem 5rem;
-  }
 
-  .topbar-content {
-    flex-direction: column;
-    gap: 0.5rem;
-  }
+    .topbar {
+      width: 90%;
+      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 ---------- */