From 4aa6f0bf10ecfa4a7ad7df931c34a62ddf7767f8 Mon Sep 17 00:00:00 2001
From: Pim van Pelt <pim@ipng.ch>
Date: Mon, 5 Aug 2024 20:54:04 +0200
Subject: [PATCH] Accommodate 100% width for 'mini' screens -- like iPhone

---
 themes/hugo-theme-ipng/assets/styles.scss | 33 ++++++++++++++---------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/themes/hugo-theme-ipng/assets/styles.scss b/themes/hugo-theme-ipng/assets/styles.scss
index eada825..3c0eb1b 100644
--- a/themes/hugo-theme-ipng/assets/styles.scss
+++ b/themes/hugo-theme-ipng/assets/styles.scss
@@ -58,11 +58,15 @@ body {
     margin: 0;
     min-height: 100vh;
     overflow-y: scroll;
-    font-size: $base-font-size * 1.0;
     line-height: $base-line-height * 1.0;
     font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
-    @media #{$mq-medium} { line-height: $base-line-height*1.0; }
+    @media #{$mq-mini} { font-size: $base-font-size * 0.8; }
+    @media #{$mq-small} { font-size: $base-font-size * 0.9; }
+    @media #{$mq-medium} { font-size: $base-font-size * 1.0; }
+    @media #{$mq-large} { font-size: $base-font-size * 1.0; }
+    @media #{$mq-xlarge} { font-size: $base-font-size * 1.1; }
+    @media #{$mq-xxlarge} { font-size: $base-font-size * 1.1; }
 }
 
 /*largest screens*/
@@ -71,6 +75,7 @@ main {
     margin: 0;
     padding: 1em 1em;
 
+    @media #{$mq-mini} { margin: 0 2%; }
     @media #{$mq-small} { margin: 0 15%; }
     @media #{$mq-medium} { margin: 0 17%; }
     @media #{$mq-large} { margin: 0 21%; }
@@ -325,11 +330,12 @@ nav li:hover {
     display: flex;
     flex-flow: row wrap;
 
-    @media #{$mq-small} { margin: 0 15%; }
-    @media #{$mq-medium} { margin: 0 17%; }
-    @media #{$mq-large} { margin: 0 21%; }
-    @media #{$mq-xlarge} { margin: 0 24%; }
-    @media #{$mq-xxlarge} { margin: 0 27%; }
+    @media #{$mq-mini} { margin: 0; width: 100%; font-size: $base-font-size * 0.8; }
+    @media #{$mq-small} { margin: 0 15%; width: 70%; font-size: $base-font-size * 0.9; }
+    @media #{$mq-medium} { margin: 0 17%; width: 66%; font-size: $base-font-size * 1.0; }
+    @media #{$mq-large} { margin: 0 21%; width: 58%; font-size: $base-font-size * 1.0; }
+    @media #{$mq-xlarge} { margin: 0 24%; width: 52%; font-size: $base-font-size * 1.1; }
+    @media #{$mq-xxlarge} { margin: 0 27%; width: 48%; font-size: $base-font-size * 1.1; }
 
     a:hover {
         color: $ipng-lightorange;
@@ -350,17 +356,18 @@ nav li:hover {
     color: $text-light;
     background-color: #f7f7f7;
 
-    @media #{$mq-small} { margin: 0 15%; width: 70%; }
-    @media #{$mq-medium} { margin: 0 17%; width: 66%; }
-    @media #{$mq-large} { margin: 0 21%; width: 58%; }
-    @media #{$mq-xlarge} { margin: 0 24%; width: 52%; }
-    @media #{$mq-xxlarge} { margin: 0 27%; width: 48%; }
+    @media #{$mq-mini} { margin: 0; width: 100%; font-size: $base-font-size * 0.8; }
+    @media #{$mq-small} { margin: 0 15%; width: 70%; font-size: $base-font-size * 0.9; }
+    @media #{$mq-medium} { margin: 0 17%; width: 66%; font-size: $base-font-size * 1.0; }
+    @media #{$mq-large} { margin: 0 21%; width: 58%; font-size: $base-font-size * 1.0; }
+    @media #{$mq-xlarge} { margin: 0 24%; width: 52%; font-size: $base-font-size * 1.1; }
+    @media #{$mq-xxlarge} { margin: 0 27%; width: 48%; font-size: $base-font-size * 1.1; }
 }
 
 .myname {
     margin: 0 auto 0 0;
     padding-left: .5em;
-    font-size: 1em;
+    font-size: $base-font-size * 1.2;
     color: $ipng-orange;
 }