From b9c3ad42970c206cb4976c3a6929b36a49235162 Mon Sep 17 00:00:00 2001
From: collin <github@collinduncan.com>
Date: Mon, 30 Jun 2025 12:37:33 +0200
Subject: [PATCH] Adding some responsive sizing to website

---
 client/index.html |  6 +++---
 client/style.css  | 55 ++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/client/index.html b/client/index.html
index 1750750..c5c04fa 100644
--- a/client/index.html
+++ b/client/index.html
@@ -8,7 +8,7 @@
         <div class="contents fontM">
             <div>
                 <h2 class="textLeft fontL colorLightGreen">When?</h2>
-                <p>Saturday 16th of May 2026.</p>
+                <p>Saturday 16th of May 2026</p>
                 
                 <br/>
 
@@ -31,8 +31,8 @@
                     </p>
                 </a>
                 <br/>
-                <iframe width="425" height="350" src="https://www.openstreetmap.org/export/embed.html?bbox=4.991877973079682%2C52.436195297048144%2C4.994031786918641%2C52.43801523045145&amp;layer=mapnik&amp;marker=52.43710609072568%2C4.992956221103668" style="border: 1px solid black"></iframe><br/>
-                <a href="https://www.openstreetmap.org/node/2869212621"><h5 class="fontS">View</h5></a>
+                <iframe class="map" src="https://www.openstreetmap.org/export/embed.html?bbox=4.991877973079682%2C52.436195297048144%2C4.994031786918641%2C52.43801523045145&amp;layer=mapnik&amp;marker=52.43710609072568%2C4.992956221103668" style="border: 1px solid black"></iframe><br/>
+                <a href="https://www.openstreetmap.org/node/2869212621"><h5 class="fontS">Open Map</h5></a>
             </div>
         </div>
         <div class="rsvpButton textCenter backgroundLightGreen hidden">
diff --git a/client/style.css b/client/style.css
index 9919255..3cbd9ff 100644
--- a/client/style.css
+++ b/client/style.css
@@ -2,14 +2,12 @@
 * {
     padding: 0;
     margin: 0;
+    color: black;
 }
 
 a {
-    text-decoration: underline;
-}
-
-a:visited {
     color: inherit;
+    text-decoration: underline;
 }
 
 ul {
@@ -26,6 +24,7 @@ body {
     min-height: 100%;
     width: auto;
     display: block;
+    box-sizing: border-box;
 }
 
 /* #region reusable */
@@ -69,7 +68,7 @@ body {
     background-color: #8cad87;
 }
 
-.fontXL { 
+.fontXL {
     font-size: 10vmin;
 }
 
@@ -88,6 +87,7 @@ body {
 .fontXS {
     font-size: 1vmin;
 }
+
 /* #endregion */
 
 .title {
@@ -102,6 +102,50 @@ body {
     height: auto;
     padding: 50px;
 }
+
+@media (max-width: 539px) {
+    .contents {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+}
+
+@media (min-width: 540px) and (max-width: 999px) {
+    .contents {
+        padding-left: 100px;
+        padding-right: 100px;
+    }
+}
+
+@media (min-width: 1000px) {
+    .contents {
+        padding-left: 25%;
+        padding-right: 25%;
+    }
+}
+
+.map {
+    width: 100%;
+}
+
+@media (max-width: 539px) {
+    .map {
+        height: 200px;
+    }
+}
+
+@media (min-width: 540px) and (max-width: 999px) {
+    .map {
+        height: 400px;
+    }
+}
+
+@media (min-width: 1000px) {
+    .map {
+        height: 600px;
+    }
+}
+
 /* #endregion
 
 /* #region rsvp */
@@ -116,4 +160,5 @@ body {
     mix-blend-mode: color-dodge;
     cursor: pointer;
 }
+
 /* #endregion */
\ No newline at end of file