Add mobile friendly-ness (excluding clock)

Author: foxeddev

app/globals.css

@@ -9,6 +9,8 @@
 
   --sans: "Rubik", Arial, Helvetica, sans-serif;
   --mono: "Space Mono", "Courier New", monospace;
+
+  --max-w-mobile: 900px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -72,6 +74,12 @@ h1 {
   font-weight: 800;
 }
 
+@media screen and (max-width: 900px) {
+  h1 {
+    font-size: 96;
+  }
+}
+
 h3 {
   font-size: 24px;
   font-weight: 500;

components/Card.module.css

@@ -7,6 +7,11 @@
   background-color: var(--bg);
 }
 
+@media screen and (max-width: 900px) {
+  .card {
+    gap: 16px;
+  }
+}
 .card svg:nth-child(1) {
   fill: var(--accent);
   width: 48px;

styles/sections.css

@@ -13,8 +13,21 @@ section {
   text-align: center;
 }
 
+@media screen and (max-width: 900px) {
+  section {
+    padding: 16px;
+  }
+}
+
 section.grid {
   display: grid;
   gap: 16px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@media screen and (max-width: 900px) {
+  section.grid {
+    display: flex;
+    flex-direction: column;
+  }
 }