Make more responsive

Author: rosslh

client/css/styles.scss

@@ -65,8 +65,8 @@ html.fractal-root {
 }
 
 .leaflet-control-zoom {
-  margin-top: var(--space-12) !important;
-  margin-left: var(--space-12) !important;
+  margin-top: calc(env(safe-area-inset-top) + var(--space-12)) !important;
+  margin-left: calc(env(safe-area-inset-left) + var(--space-12)) !important;
 }
 
 .overlay {
@@ -88,8 +88,8 @@ html.fractal-root {
 
 #navigation {
   min-width: unset;
-  bottom: 0;
-  left: 0;
+  bottom: env(safe-area-inset-bottom);
+  left: env(safe-area-inset-left);
   display: flex;
   align-items: center;
   gap: var(--space-12);
@@ -122,8 +122,8 @@ html.fractal-root {
   max-height: calc(100% - 52px);
   min-width: 256px;
   overflow-y: auto;
-  top: 0;
-  right: 0;
+  top: env(safe-area-inset-top);
+  right: env(safe-area-inset-right);
   display: flex;
   padding-top: 0;
   flex-direction: column;
@@ -281,8 +281,8 @@ button.underline-button {
 
 #attribution {
   position: absolute;
-  bottom: var(--space-8);
-  right: var(--space-8);
+  bottom: calc(env(safe-area-inset-bottom) + var(--space-8));
+  right: calc(env(safe-area-inset-right) + var(--space-8));
   z-index: var(--z-index-modal);
   display: inline-block;
 
@@ -388,8 +388,12 @@ input {
     }
   }
 
-  .nav-heading {
-    font-size: var(--font-size-md);
+  #navigation {
+    padding-bottom: var(--space-8);
+
+    .nav-heading {
+      font-size: var(--font-size-md);
+    }
   }
 
   .secondary {
@@ -479,7 +483,9 @@ input {
     nav {
       border-right: 1px solid var(--gray-500);
       background: color-mix(in sRGB, var(--gray-950) 25%, transparent);
-      padding: var(--space-16) var(--space-24);
+      padding-top: calc(env(safe-area-inset-top) + var(--space-16));
+      padding-left: var(--space-24);
+      padding-top: calc(env(safe-area-inset-bottom) + var(--space-16));
 
       ul {
         list-style: none;
@@ -561,3 +567,13 @@ input {
     }
   }
 }
+
+@media (min-width: 801px) {
+  .blog-post-root {
+    .blog-post {
+      nav {
+        height: 100vh;
+      }
+    }
+  }
+}

client/html/blog-template.html

@@ -56,7 +56,10 @@
     <link rel="manifest" href="site.webmanifest" />
 
     <meta name="author" content="Ross Hill" />
-    <meta name="viewport" content="width=device-width,minimum-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width,minimum-scale=1,viewport-fit=cover"
+    />
 
     <link rel="stylesheet" href="/main.css" />
 

client/html/index.html

@@ -62,7 +62,10 @@
     <link rel="manifest" href="site.webmanifest" />
 
     <meta name="author" content="Ross Hill" />
-    <meta name="viewport" content="width=device-width,minimum-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width,minimum-scale=1,viewport-fit=cover"
+    />
 
     <script async defer src="https://buttons.github.io/buttons.js"></script>
   </head>

client/js/index.ts

@@ -1,6 +1,9 @@
 import "./static";
 import MandelbrotMap from "./MandelbrotMap";
 
+const mapHtmlId = "leaflet";
+const smallScreenWidthPx = 800;
+
 window.addEventListener("load", () => {
   if ("serviceWorker" in navigator) {
     navigator.serviceWorker
@@ -10,9 +13,11 @@ window.addEventListener("load", () => {
       });
   }
 
-  if (document.getElementById("leaflet")) {
+  if (document.getElementById(mapHtmlId)) {
+    const initialZoom = window.innerWidth <= smallScreenWidthPx ? 2 : 3;
+
     new MandelbrotMap({
-      htmlId: "leaflet",
+      htmlId: mapHtmlId,
       initialConfig: {
         iterations: 200,
         exponent: 2,
@@ -27,7 +32,7 @@ window.addEventListener("load", () => {
 
         re: -0.5,
         im: 0,
-        zoom: 3,
+        zoom: initialZoom,
       },
     });
   }