From 9dbb6f7b2e82cfd91279ba0cb6381cb51e61ce25 Mon Sep 17 00:00:00 2001
From: pantonshire <tom@tomandtally.co.uk>
Date: Thu, 15 Jun 2023 14:26:14 +0100
Subject: [PATCH] responsive design

---
 src/app/globals.css     | 114 ++++++----------------------------------
 src/app/page.module.css |  24 +++++++--
 2 files changed, 38 insertions(+), 100 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 03abcc5..802067d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,83 +3,9 @@
   --main_2: #db52c9;
   --light_1: #a598e0;
   --text_light: #727272;
+  --gray_bg: #e3dcf7;
 }
 
-/* :root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-} */
-
-/* @media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-} */
-
 * {
   box-sizing: border-box;
   padding: 0;
@@ -92,27 +18,6 @@ body {
   overflow-x: hidden;
 }
 
-/* body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-} */
-
-/* a {
-  color: inherit;
-  text-decoration: none;
-} */
-
-/* @media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-} */
-
 a {
   color: var(--main_1);
 }
@@ -120,7 +25,6 @@ a {
 table {
   overflow: auto;
   border-collapse: collapse;
-  /* border: 1px solid var(--light_1); */
 }
 
 th,
@@ -128,3 +32,19 @@ td {
   padding: 0.25rem 1rem;
   text-align: left;
 }
+
+tbody tr:nth-child(even) {
+  background-color: var(--gray_bg);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --light_1: #7c759b;
+    --text_light: #999999;
+    --gray_bg: #302d3f;
+  }
+
+  html {
+    color-scheme: dark;
+  }
+}
diff --git a/src/app/page.module.css b/src/app/page.module.css
index 3f5295c..2b01766 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -1,5 +1,5 @@
 .main {
-  padding: 1rem 2rem;
+  padding: 1rem 1rem;
 }
 
 .title_section {
@@ -9,7 +9,8 @@
 }
 
 .title {
-  font-size: 3em;
+  font-size: 2em;
+  text-align: center;
   font-variant: small-caps;
   font-weight: 900;
   color: transparent;
@@ -42,7 +43,7 @@
 
 .info_box {
   margin-top: 1rem;
-  padding: 0 3rem;
+  padding: 0 1rem;
   color: var(--text_light);
   font-size: 0.8rem;
 }
@@ -64,3 +65,20 @@
 #output_table th {
   white-space: nowrap;
 }
+
+@media screen and (min-width: 40rem) {
+  .main {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .title {
+    font-size: 3em;
+    text-align: left;
+  }
+
+  .info_box {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+}