From c26c7b520e76b838e3a3a61b639e861e1b9ee8ee Mon Sep 17 00:00:00 2001
From: pixel <pixel+github@chrissx.de>
Date: Mon, 15 Jul 2024 00:02:12 +0200
Subject: [PATCH] rewind: scalability and design improvements for smol screens

---
 src/components/Rewind.module.css | 45 +++++++++++++++++++++++++-------
 src/components/Rewind.tsx        | 14 +++++-----
 src/pages/rewind.astro           |  2 +-
 3 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/src/components/Rewind.module.css b/src/components/Rewind.module.css
index 017398a..9a4921e 100644
--- a/src/components/Rewind.module.css
+++ b/src/components/Rewind.module.css
@@ -1,6 +1,5 @@
-.row {
-    display: flex;
-    flex-direction: row;
+.main {
+    font-size: min(12pt, 1.5vw);
 }
 
 .column {
@@ -9,21 +8,47 @@
 }
 
 .settings {
-    flex-wrap: wrap;
-    width: 1000px;
+    display: flex;
+    flex-flow: row wrap;
+    width: 63.2em;
     justify-content: space-between;
     padding: 1em 0;
 }
 
+.setting {
+    width: 45%;
+    font-size: 12pt;
+}
+
+.setting input {
+    width: 100%;
+}
+
+@media screen and (width <= 600px) {
+    .settings {
+        flex-direction: column;
+        font-size: 2.5em;
+        width: 25.28em;
+    }
+
+    .setting {
+        width: 100%;
+    }
+
+    .setting input {
+        width: 100%;
+    }
+}
+
 .sexrewind {
-    width: 950px;
-    height: 950px;
+    width: 7.5em;
+    height: 7.5em;
     background-color: #b6fbed;
     color: #a9337e;
-    font-size: 96pt;
+    font-size: 8em;
     font-family: var(--sans-serif);
     font-weight: bold;
-    padding: 25px;
+    padding: 0.2em;
     justify-content: space-between;
 }
 
@@ -45,6 +70,8 @@
 }
 
 .sexstats {
+    display: flex;
+    flex-direction: row;
     justify-content: space-between;
 }
 
diff --git a/src/components/Rewind.tsx b/src/components/Rewind.tsx
index 034b903..80c5c2f 100644
--- a/src/components/Rewind.tsx
+++ b/src/components/Rewind.tsx
@@ -7,12 +7,12 @@ export default function Rewind() {
     const [sexdesc, setSexdesc] = useState("You absolute fucking loser...");
     const [sexmins, setSexmins] = useState("0");
     const [sexpartners, setSexpartners] = useState("0");
-    return <main>
-        <div class={styles.settings + " " + styles.row}>
-            <Input placeholder="You had sex" value={sextimes} setValue={setSextimes} />
-            <Input placeholder="Description" value={sexdesc} setValue={setSexdesc} />
-            <Input placeholder="Minutes had sex" value={sexmins} setValue={setSexmins} />
-            <Input placeholder="Partners" value={sexpartners} setValue={setSexpartners} />
+    return <main class={styles.main}>
+        <div class={styles.settings}>
+            <Input className={styles.setting} placeholder="You had sex" value={sextimes} setValue={setSextimes} />
+            <Input className={styles.setting} placeholder="Description" value={sexdesc} setValue={setSexdesc} />
+            <Input className={styles.setting} placeholder="Minutes had sex" value={sexmins} setValue={setSexmins} />
+            <Input className={styles.setting} placeholder="Partners" value={sexpartners} setValue={setSexpartners} />
         </div>
         <div class={styles.sexrewind + " " + styles.column}>
             <div class={styles.column}>
@@ -21,7 +21,7 @@ export default function Rewind() {
                 <span class={styles.sextext2}>this year</span>
             </div>
             <span class={styles.sexdesc}>{sexdesc}</span>
-            <div class={styles.sexstats + " " + styles.row}>
+            <div class={styles.sexstats}>
                 <div class={styles.column}>
                     <span class={styles.sexminstext}>Minutes had sex</span>
                     <span class={styles.sexminsnum}>{sexmins}</span>
diff --git a/src/pages/rewind.astro b/src/pages/rewind.astro
index 67c2606..990df58 100644
--- a/src/pages/rewind.astro
+++ b/src/pages/rewind.astro
@@ -11,6 +11,6 @@ import Main from "../components/Rewind";
 
 <style>
     :global(div#content) {
-        width: max-content;
+        max-width: max-content;
     }
 </style>