fix: small height screen

Grafikart · Aug 3, 2024 · cba0c87 · cba0c87
1 parent 12f612b
commit cba0c87
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/src/continents.json b/src/continents.json
@@ -1,24 +1,24 @@
 [
   {
     "name": "Europe",
-    "gold": 54,
-    "bronze": 53,
-    "silver": 66,
-    "total": 173
+    "gold": 55,
+    "bronze": 54,
+    "silver": 68,
+    "total": 177
   },
   {
     "name": "Asia",
-    "gold": 36,
-    "bronze": 28,
-    "silver": 33,
-    "total": 97
+    "gold": 38,
+    "bronze": 30,
+    "silver": 35,
+    "total": 103
   },
   {
     "name": "America",
-    "gold": 16,
-    "bronze": 27,
-    "silver": 28,
-    "total": 71
+    "gold": 17,
+    "bronze": 28,
+    "silver": 29,
+    "total": 74
   },
   {
     "name": "Oceania",

diff --git a/src/main.css b/src/main.css
@@ -25,7 +25,8 @@ body {
                     rgba(0, 0, 0, .65),
                     rgba(0, 0, 0, .65)
             ),
-            url(./images/poster.avif) center center / cover no-repeat;
+            url(./images/poster.avif) center center / cover no-repeat,
+            linear-gradient(135deg,#9bc8c5, #f6ead2,#a2deaa);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -299,8 +300,14 @@ aside {
     }
 }
 
+@media (max-height: 700px) {
+    :root {
+        --stroke: 1rem;
+    }
+}
+
 /* Screen is too narrow, we need a scrollbar */
-@media (max-height: 550px) {
+@media (max-height: 600px) {
     body {
         overflow-y: scroll;
     }
@@ -316,9 +323,21 @@ aside {
     :root {
         --stroke: min(calc((100vw - 4rem) / 12), 1.2rem);
     }
+    body {
+        overflow-y: auto;
+        overflow-x: hidden;
+        background:
+                linear-gradient(
+                        rgba(0, 0, 0, .65),
+                        rgba(0, 0, 0, .65)
+                ),
+                url(./images/poster-mobile.avif) center center / cover no-repeat,
+                linear-gradient(135deg,#9bc8c5, #f6ead2,#a2deaa);
+    }
     .card {
         gap: 3rem;
         padding: 0;
+        margin-block: 1rem;
         padding-block: 2rem;
         max-height: none;
         height: auto;