Fixes #19 responsiveness

luttje · Sep 29, 2024 · 16a87b3 · 16a87b3
1 parent e0013e1
commit 16a87b3
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 45 deletions.
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -20,3 +20,8 @@ $big-padding: 4em;
 $huge-padding: 8em;
 
 $small-modifier: 0.5;
+
+// Device breakpoints
+$small: 480px;
+$medium: 768px;
+$large: 1024px;
diff --git a/src/scss/demo.scss b/src/scss/demo.scss
@@ -6,6 +6,14 @@
 .options {
   display: flex;
   justify-content: space-around;
+
+  @media only screen and (max-width: $medium) {
+    flex-direction: column;
+
+    &>div {
+      margin: $padding * $small-modifier;
+    }
+  }
 }
 
 .opponent {
@@ -21,40 +29,32 @@
   img {
     width: 64px;
   }
-}
-
-.progress-bar-container {
-  margin-bottom: $padding;
-}
-
-@media only screen and (max-width: 760px) {
-  .framed {
-    padding: $padding * $small-modifier;
-    margin: $padding * $small-modifier 0 0 0;
-  }
 
-  .stats {
+  @media only screen and (max-width: $medium) {
     padding: $padding * $small-modifier;
-
-    h2 {
-      margin-left: -$padding * $small-modifier;
-      margin-top: -$padding * $small-modifier;
-      padding: $padding * $small-modifier $padding * $small-modifier $padding * $small-modifier 0;
-    }
   }
+}
 
-  .opponent {
-    padding: $padding * $small-modifier;
-  }
+.progress-bar-container {
+  margin-bottom: $padding;
 }
 
 section.framed {
   margin: $medium-padding 0;
   padding-bottom: $big-padding;
 }
 
+.framed {
+  @media only screen and (max-width: $medium) {
+    padding: $padding * $small-modifier;
+    margin: $padding * $small-modifier 0 0 0;
+  }
+}
+
 #githubHint {
   background-color: $dimmed;
+  display: grid;
+  place-content: center;
   position: fixed;
   top: 0;
   right: 0;
@@ -64,15 +64,34 @@ section.framed {
   transition: opacity 0.3s;
 
   .github {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
     max-width: 512px;
-    padding: 2em;
+    padding: $medium-padding;
 
     .stats {
       margin-right: $big-padding;
+
+      @media only screen and (max-width: $medium) {
+        padding: $padding * $small-modifier;
+
+        h2 {
+          margin-left: -$padding * $small-modifier;
+          margin-top: -$padding * $small-modifier;
+          padding: $padding * $small-modifier $padding * $small-modifier $padding * $small-modifier 0;
+        }
+      }
+    }
+
+    @media screen and (max-width: $medium) {
+      max-width: 100%;
+      padding: $padding;
+      max-width: 100%;
+      top: initial;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: $padding;
+      transform: translate(0, 0);
+      width: initial;
     }
   }
 
@@ -138,22 +157,3 @@ section.framed {
     transform: translate(0, 0);
   }
 }
-
-@media only screen and (max-width: 760px) {
-  .options {
-    flex-direction: column;
-
-    &>div {
-      margin: $padding;
-    }
-  }
-
-  .github {
-    max-width: 100%;
-    top: initial;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform: translate(0, 0);
-  }
-}
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -13,11 +13,16 @@ body {
 
   min-width: $min-width;
   padding: $big-padding;
+  margin: 0;
 
   background: $neutral;
   color: $contrast;
 
   image-rendering: pixelated;
+
+  @media screen and (max-width: $medium) {
+    padding: $medium-padding;
+  }
 }
 
 h1,

diff --git a/src/scss/progress-bars.scss b/src/scss/progress-bars.scss
@@ -2,8 +2,18 @@
   display: flex;
   align-items: center;
 
+  @media screen and (max-width: $medium) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   label {
     margin-right: $padding;
+
+    @media screen and (max-width: $medium) {
+      margin-bottom: $padding * $small-modifier;
+      margin-right: 0;
+    }
   }
 
   .progress-bar,