From eb25b75f7e82ea529d62078de71f9835638c1973 Mon Sep 17 00:00:00 2001
From: Tibo De Peuter <tibo@depeuter.dev>
Date: Wed, 28 May 2025 15:06:56 +0200
Subject: [PATCH] chore: Cleanup

---
 index.html |  7 +++----
 style.css  | 42 ++++++++++++++++++++++++++++--------------
 2 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index fca305a..ca1d27f 100644
--- a/index.html
+++ b/index.html
@@ -65,10 +65,9 @@
     <p>
         <a href="./key.asc" about="link to public PGP key">
             08A9 C1C8 CF91 59C9 172A BA12 9B11 F524 3089 DB5B
-        </a> (<a href="https://keys.openpgp.org/vks/v1/by-fingerprint/08A9C1C8CF9159C9172ABA129B11F5243089DB5B"
-                 about="alternative link to public PGP key">
-        alternative link
-    </a>)
+        </a>
+        (<a href="https://keys.openpgp.org/vks/v1/by-fingerprint/08A9C1C8CF9159C9172ABA129B11F5243089DB5B"
+            about="alternative link to public PGP key">alternative&nbsp;link</a>)
     </p>
     <p>
         Made with <span class="heart">&hearts;</span>.
diff --git a/style.css b/style.css
index cf079f5..034cf6b 100644
--- a/style.css
+++ b/style.css
@@ -4,6 +4,10 @@
 
     --primary-color: #03FCBAFF;
     --primary-color-rgb: rgb(3, 252, 186);
+
+    min-width: 200px;
+    width: 100%;
+    height: 100%;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -19,16 +23,19 @@ body {
     margin: 0;
     padding: 0;
 
-    overflow: hidden; /* Make it a single-page, disable scroll bar */
+    min-height: 100vh;
+
+    display: flex;
+    flex-direction: column; /* To show elements below each other */
+    align-items: center;
 }
 
 .wrapper { /* Wrapper to center the content */
+    flex: 1;
     display: flex;
     flex-direction: column; /* To show elements below each other */
-
-    height: 100vh;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
 }
 
 .quote {
@@ -36,17 +43,13 @@ body {
 }
 
 footer {
+    max-width: 80%;
+    bottom: 2vh;
+    padding-bottom: 5%;
+
     opacity: 0.6;
     font-size: small;
 
-    position: absolute;
-    bottom: 2vh;
-
-    display: flex;
-    flex-direction: column;
-
-    width: 100%;
-    align-items: center;
     text-align: center;
 }
 
@@ -107,6 +110,17 @@ footer a:hover::before {
 }
 
 footer > button-collection {
-    max-width: 80%;
-    min-width: 100px;
+    max-width: 100%;
+}
+
+@media (max-width: 600px) {
+    footer {
+        max-width: 100%;
+    }
+}
+
+@media (min-height: 100vh) {
+    .footer {
+        position: static;
+    }
 }