From 2f63fc0ebb6171d30b5f3926728b0966175444e0 Mon Sep 17 00:00:00 2001
From: Pim van Pelt <pim@ipng.ch>
Date: Mon, 2 Sep 2024 10:49:45 +0200
Subject: [PATCH] Fix page-footer issue, by creating defaults for mq-mini or
 smaller

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

diff --git a/themes/hugo-theme-ipng/assets/styles.scss b/themes/hugo-theme-ipng/assets/styles.scss
index d1815b5..700a79c 100644
--- a/themes/hugo-theme-ipng/assets/styles.scss
+++ b/themes/hugo-theme-ipng/assets/styles.scss
@@ -63,7 +63,7 @@ body {
     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-mini} { font-size: $base-font-size * 0.8; }
+    /* $mq-mini or smaller */ 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; }
@@ -78,8 +78,8 @@ main {
     padding: 1em 1em;
     padding-bottom: 5em;
 
-    @media #{$mq-mini} { margin: 0 2%; }
-    @media #{$mq-small} { margin: 0 2%; }
+    /* $mq-mini or smaller */ margin: 0 2%;
+    @media #{$mq-small} { margin: 0 5%; }
     @media #{$mq-medium} { margin: 0 17%; }
     @media #{$mq-large} { margin: 0 21%; }
     @media #{$mq-xlarge} { margin: 0 24%; }
@@ -341,7 +341,7 @@ nav li:hover {
     display: flex;
     flex-flow: row wrap;
 
-    @media #{$mq-mini} { margin: 0; width: 100%; font-size: $base-font-size * 0.8; }
+    /* $mq-mini or smaller: */ margin: 0; width: 100%; font-size: $base-font-size * 0.8;
     @media #{$mq-small} { margin: 0 5%; width: 90%; 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; }
@@ -367,7 +367,7 @@ nav li:hover {
     color: $text-light;
     background-color: #f7f7f7;
 
-    @media #{$mq-mini} { margin: 0; width: 100%; font-size: $base-font-size * 0.8; }
+    /* $mq-mini or smaller: */ margin: 0; width: 100%; font-size: $base-font-size * 0.8;
     @media #{$mq-small} { margin: 0 5%; width: 90%; 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; }