rewind: scalability and design improvements for smol screens

chrissxMedia · Jul 14, 2024 · c26c7b5 · c26c7b5
1 parent b066ef7
commit c26c7b5
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 17 deletions.
diff --git 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
@@ -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
@@ -11,6 +11,6 @@ import Main from "../components/Rewind";
 
 <style>
  :global(div#content) {
- width: max-content;
+ max-width: max-content;
  }
 </style>