From 50288f40c2837877bdeb32a1bc63bed360774b02 Mon Sep 17 00:00:00 2001
From: overflowerror <mail@overflowerror.com>
Date: Sun, 3 Dec 2023 14:53:29 +0100
Subject: [PATCH] feat: Add decent mobile layout

---
 html/static/css/main.css | 75 ++++++++++++++++++++++++++++++----------
 1 file changed, 56 insertions(+), 19 deletions(-)

diff --git a/html/static/css/main.css b/html/static/css/main.css
index 09e3926..4e122c7 100644
--- a/html/static/css/main.css
+++ b/html/static/css/main.css
@@ -15,59 +15,96 @@
     font-family: "Poppins", sans-serif;
 }
 
+:root {
+    --ref-unit: 1vw;
+}
+
+@media (max-aspect-ratio: 1/1) {
+    :root {
+        --ref-unit: 1.5vh;
+    }
+}
+
 html {
     background: lightgray;
 }
 
 .page-header {
     position: fixed;
-    left: 30vw;
-    width: 50vw;
-    top: 5vw;
+    left: calc(30 * var(--ref-unit));
+    width: calc(50 * var(--ref-unit));
+    top: calc(5 * var(--ref-unit));
+}
+
+@media (max-aspect-ratio: 1/1) {
+    .page-header {
+        left: 0;
+        width: 100%;
+        text-align: center;
+    }
 }
 
 .page-header h1 {
     font-weight: normal;
-    font-size: 5vw;
+    font-size: calc(5 * var(--ref-unit));
     margin: 0;
 }
 
 .page-header h2 {
     font-weight: normal;
-    font-size: 3vw;
-    margin: -1vw 0 0 3vw;
+    font-size: calc(3 * var(--ref-unit));
+    margin: calc(-1 * var(--ref-unit)) 0 0 calc(3 * var(--ref-unit));
 }
 
 .bottle {
     position: fixed;
-    width: 50vw;
+    width: calc(50 * var(--ref-unit));
     left: 0;
-    top: calc((100vh - 50vw) / 2 + 5vw);
+    top: calc((100vh - 50 * var(--ref-unit)) / 2 + 5 * var(--ref-unit));
+}
+
+@media (max-aspect-ratio: 1/1) {
+    .bottle {
+        filter: contrast(50%) blur(2vw);
+    }
+}
+
+@media (max-aspect-ratio: 3/4) {
+    .bottle {
+        width: 110vw;
+    }
 }
 
 .center-panel {
     position: fixed;
-    width: 40vw;
-    height: 30vw;
-    top: 25vw;
-    left: 40vw;
+    width: calc(40 * var(--ref-unit));
+    height: calc(30 * var(--ref-unit));
+    top: calc(25 * var(--ref-unit));
+    left: calc(40 * var(--ref-unit));
+}
+
+@media (max-aspect-ratio: 1/1) {
+    .center-panel {
+        width: 80vw;
+        left: 10vw;
+    }
 }
 
 .center-panel input {
-    font-size: 3vw;
+    font-size: calc(3 * var(--ref-unit));
     width: 100%;
-    margin-top: 1vw;
+    margin-top: calc(1 * var(--ref-unit));
 }
 
 .result {
-    font-size: 2vw;
+    font-size: calc(3 * var(--ref-unit));
 }
 
 .error {
     border: 1px solid red;
     color: red;
-    padding: 0.2vw;
-    font-size: 1.3vw;
+    padding: calc(0.2 * var(--ref-unit));
+    font-size: calc(1.3 * var(--ref-unit));
 }
 
 .invisible {
@@ -76,7 +113,7 @@ html {
 
 .copy, .copy:visited {
     color: black;
-    padding-left: 1vw;
+    padding-left: calc(1 * var(--ref-unit));
 }
 
 .copy:hover {
@@ -85,4 +122,4 @@ html {
 
 .copy:active {
     color: lightpink;
-}
\ No newline at end of file
+}