CSS: add support for mobile

xjunko · Jan 30, 2025 · 8ad74d9 · 8ad74d9
1 parent 6eedf65
commit 8ad74d9
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 2 deletions.
diff --git a/public/css/blog.css b/public/css/blog.css
@@ -83,7 +83,7 @@
 }
 
 .blog-return {
-    width: 120px;
+    width: fit-content;
     border-right: 1px solid black;
 }
 

diff --git a/public/css/style.css b/public/css/style.css
@@ -392,4 +392,95 @@ img[src*="#center"] {
     /* IE and Edge */
     scrollbar-width: none;
     /* Firefox */
+}
+
+
+/* ===== Mobile Styles ===== */
+@media (max-width: 768px) {
+    body {
+        width: 100%;
+        margin: 10px auto;
+        padding: 0 10px;
+    }
+
+    #kafu-home {
+        display: none;
+    }
+
+    .website-grid {
+        padding-top: 16px;
+        display: block;
+    }
+
+    .website-grid #content,
+    .website-grid #sidebar {
+        width: 100%;
+    }
+
+    .website-grid #sidebar {
+        margin-top: 16px;
+    }
+
+    .website-grid.website-blog {
+        display: block;
+    }
+
+    .window-header {
+        height: 100px;
+    }
+
+    .window-header #domain {
+        font-size: 2rem;
+    }
+
+    .window-header #char {
+        height: 100px;
+    }
+
+    .window-button a {
+        font-size: 16px;
+        padding: 6px 12px;
+    }
+
+    .window-content h2 {
+        font-size: 24px;
+    }
+
+    .window-content p,
+    .window-content a {
+        font-size: 14px;
+    }
+
+    .window-content.post-latest a:first-child {
+        font-size: 15px;
+    }
+
+    .window-content.post-latest a {
+        font-size: 15px;
+    }
+
+    .window-content.blog div h2 {
+        font-size: 18px;
+    }
+
+    #sidebar .window {
+        max-width: 100%;
+    }
+
+    .grid {
+        grid-template-columns: 1fr;
+        justify-items: center;
+    }
+
+    .grid .window {
+        height: auto;
+    }
+
+    .grid-justify {
+        flex-direction: column;
+    }
+
+    .caption {
+        font-size: 16px;
+    }
 }
diff --git a/templates/route/home.md b/templates/route/home.md
@@ -14,7 +14,7 @@
             feel free to look around, there might some cool stuff you might like!
         </p>
     </div>
-    <div>
+    <div id="kafu-home">
         <img src="static/imgs/kafu-peace.webp" height="100px"
             style="transform: scaleX(-1);scale: 1.5;position:relative;bottom: -5px;left:20px;pointer-events: none">
     </div>