make rewind scalable and nice on smol screens

chrissxMedia · Jan 28, 2024 · 9529903 · 9529903
1 parent b557617
commit 9529903
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/components/Rewind.module.css b/src/components/Rewind.module.css
@@ -1,3 +1,7 @@
+.main {
+    font-size: min(12pt, 1.5vw);
+}
+
 .row {
     display: flex;
     flex-direction: row;
@@ -10,20 +14,20 @@
 
 .settings {
     flex-wrap: wrap;
-    width: 1000px;
+    width: 63.2em;
     justify-content: space-between;
     padding: 1em 0;
 }
 
 .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;
 }
 

diff --git a/src/components/Rewind.tsx b/src/components/Rewind.tsx
@@ -7,7 +7,7 @@ export default function Rewind() {
     const [sexdesc, setSexdesc] = useState("You absolute fucking loser...");
     const [sexmins, setSexmins] = useState("0");
     const [sexpartners, setSexpartners] = useState("0");
-    return <main>
+    return <main class={styles.main}>
         <div class={styles.settings + " " + styles.row}>
             <Input placeholder="You had sex" value={sextimes} setValue={setSextimes} />
             <Input placeholder="Description" value={sexdesc} setValue={setSexdesc} />