feat: init attempt at reactivity for mobile

1 files changed, 47 insertions, 11 deletions

diff --git a/css/default.scss b/css/default.scss
index dfb0a8f..a6854a3 100644
--- a/css/default.scss
+++ b/css/default.scss
@@ -1,5 +1,35 @@
 @import "https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@100..900&display=swap";
 
+@mixin for-phone-only {
+  @media (max-width: 599px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-portrait-up {
+  @media (min-width: 600px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-landscape-up {
+  @media (min-width: 900px) {
+    @content;
+  }
+}
+
+@mixin for-desktop-up {
+  @media (min-width: 1200px) {
+    @content;
+  }
+}
+
+@mixin for-big-desktop-up {
+  @media (min-width: 1800px) {
+    @content;
+  }
+}
+
 $background-color: oklch(22.49% 0.008 297.21);
 $foreground-color: oklch(98.51% 0 0);
 $primary-color: oklch(82.67% 0.096 307.5);
@@ -24,34 +54,41 @@ body {
   background-color: black;
   background-image:
     url("/images/noise.png"),
-    linear-gradient(135deg,
+    linear-gradient(
+      135deg,
       oklch(from $primary-color l c h / $opacity),
-      oklch(from $secondary-color l c h / $opacity) 100%);
+      oklch(from $secondary-color l c h / $opacity) 100%
+    );
+  background-attachment: fixed;
   color: white;
   color: $foreground-color;
-  padding: 4rem 0 0 0;
+  padding: 4rem 1rem 1rem 1rem;
   margin: 0;
-  width: 100vw;
-  height: 100vh;
+
+  @include for-phone-only {
+    padding: 0.25rem;
+    flex-direction: row;
+  }
 }
 
 content {
   display: flex;
+  width: 100%;
   max-width: 60rem;
   flex-direction: row-reverse;
 
-  &>* {
+  & > * {
     background-color: $background-color;
     outline: 0.1rem solid $background-color;
     outline-offset: 0.1rem;
   }
 
-  &>nav {
+  & > nav {
     padding: 1.25rem 0.75rem;
   }
 
-  &>article {
-    width: 100vw;
+  & > article {
+    flex: auto;
     padding: 1.25rem;
     height: fit-content;
   }
@@ -122,7 +159,6 @@ a {
 @mixin std-style {
   display: block;
   margin: 0;
-  padding-bottom: 0.2rem;
 }
 
 p {
@@ -164,4 +200,4 @@ h1 {
       opacity: 0.75;
     }
   }
-}
\ No newline at end of file
+}