From 9d930f20de8fbcf63f710b1d99d92ea7700c4da6 Mon Sep 17 00:00:00 2001
From: limepotato <limepot@protonmail.ch>
Date: Sat, 31 Aug 2024 20:47:58 -0600
Subject: [PATCH] make things look a bit better on mobile

---
 astro/public/styles/css/classes.css           | 28 +++++++++++++++-
 astro/public/styles/css/main.css              | 32 +++++++++++++++++++
 astro/src/components/Head.astro               |  1 +
 .../components/main-page/silly-widgets.astro  |  2 +-
 4 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/astro/public/styles/css/classes.css b/astro/public/styles/css/classes.css
index cad97db..367b94f 100644
--- a/astro/public/styles/css/classes.css
+++ b/astro/public/styles/css/classes.css
@@ -101,4 +101,30 @@ button {
 hr {
     width: 32%;
     color: var(--gray);
-}
\ No newline at end of file
+}
+
+.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%;
+    }
+    
+}
diff --git a/astro/public/styles/css/main.css b/astro/public/styles/css/main.css
index e115ff5..eb42ff6 100644
--- a/astro/public/styles/css/main.css
+++ b/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);
+    }
 }
\ No newline at end of file
diff --git a/astro/src/components/Head.astro b/astro/src/components/Head.astro
index dd01a32..27565de 100755
--- a/astro/src/components/Head.astro
+++ b/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"
diff --git a/astro/src/components/main-page/silly-widgets.astro b/astro/src/components/main-page/silly-widgets.astro
index b989a40..c1573d2 100644
--- a/astro/src/components/main-page/silly-widgets.astro
+++ b/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