astro/public/styles/css/classes.css

@@ -101,4 +101,30 @@ button {
 hr {
     width: 32%;
     color: var(--gray);
-}
+}
+
+.ntfyForm {
+    display: flex; 
+    justify-content: space-between;
+}
+
+
+/* Mobile */
+@media (max-width: 768px) {
+    h1 {
+        font-size: 32px;
+    
+        background-image: var(--accent-gradient);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-size: 400%;
+        background-position: 0%;
+    }
+
+    .ntfyForm {
+        display: list-item; 
+        margin-top: -8%;
+        margin-bottom: 8%;
+    }
+    
+}

astro/public/styles/css/main.css

@@ -15,4 +15,36 @@
 
     color: var(--text);
     background-color: var(--background);
+}
+
+@media (min-width: 992px) {
+    :root {
+        font-size: 20px;
+        font-family: departure-mono, system-ui;
+        
+        padding: 1rem;
+        width: 1000px;
+        max-width: calc(100% - 2rem);
+        line-height: 1.4;
+        margin: auto;
+    
+        color: var(--text);
+        background-color: var(--background);
+    }
+}
+
+@media (max-width: 768px) {
+    :root {
+        font-size: 14px;
+        font-family: departure-mono, system-ui;
+        
+        padding: 1rem;
+        width: 1000px;
+        max-width: calc(100% - 2rem);
+        line-height: 1.4;
+        margin: auto;
+    
+        color: var(--text);
+        background-color: var(--background);
+    }
 }

astro/src/components/Head.astro

@@ -9,6 +9,7 @@ const { title } = Astro.props;
 ---
 
 <link rel="stylesheet" href="/styles/css/main.css" />
+<meta name="viewport" content="width=device-width, initial-scale=1">
 
 <link
     rel="alternate"

astro/src/components/main-page/silly-widgets.astro

@@ -20,7 +20,7 @@
       </small>
       <br>
       <br>
-      <div style="display: flex; justify-content: space-between;">
+      <div class="ntfyForm">
       <br style="margin-bottom: 10px;">
       <textarea id="ntfy-input" placeholder="Hi nelle! (｡>﹏<｡)" rows=2></textarea>
       <button