feat: more mobile friendly pages

src/styles/components.scss

@@ -360,7 +360,7 @@
                 padding: 2rem 1rem;
 
                 @media screen and (max-width: $screen-desktop-min) {
-                    padding: 1rem 2rem 1rem 0;
+                    padding: 1rem 1rem 1rem 0;
                 }
 
                 display: grid;
@@ -605,6 +605,10 @@
         & > .card {
             max-width: 25rem;
         }
+
+        @media screen and (max-width: $screen-desktop-min) {
+            grid-template-columns: 1fr;
+        }
     }
 
     .show-more {

src/styles/controls.scss

@@ -55,14 +55,14 @@
         }
 
         &.flat {
-            background: #0002;
+            background: transparent;
             color: #222;
 
             border: none;
             box-shadow: none;
 
             &:hover {
-                background: #0004;
+                background: #0002;
             }
         }
     }

src/styles/main.scss

@@ -164,13 +164,27 @@ body {
                 display: none;
             }
         }
+
+        @media screen and (max-width: $screen-desktop-min) {
+            height: 5rem;
+            padding: 0 0.5rem;
+
+            .logo {
+                padding-left: 0;
+
+                img {
+                    height: 3rem;
+                }
+            }
+        }
     }
 
     main {
         width: 100%;
 
         @media screen and (max-width: $screen-desktop-min) {
-            padding: 0.5rem;
+            padding: 3rem 1rem;
+            gap: 3rem;
         }
     }
 
@@ -190,6 +204,11 @@ body {
 
         font-family: 'Source Sans Pro', sans-serif;
         font-size: 20px;
+
+        @media screen and (max-width: $screen-desktop-min) {
+            min-height: 5rem;
+            font-size: 18px;
+        }
     }
 }
 

src/styles/typography.scss

@@ -34,6 +34,9 @@
     @include geometric-headings;
 
     .text {
+        // text-align: justify;
+        // hyphens: auto;
+
         &.center {
             text-align: center;
         }
@@ -80,6 +83,11 @@
             code {
                 padding: 0;
             }
+
+            @media screen and (max-width: $screen-desktop-min) {
+                width: calc(100vw - 2rem);
+                max-width: none;
+            }
         }
 
         p {