From 65980308887655a48a9be716538c83f9d1a7ad47 Mon Sep 17 00:00:00 2001
From: Errilaz <errilaz@errilaz.org>
Date: Wed, 13 May 2026 02:51:45 +0200
Subject: [PATCH] fix: mobile styling

---
 src/ui/Layout/Head.ts       |  3 +--
 src/ui/Layout/Layout.ts     |  2 +-
 src/ui/Layout/Taskbar.ts    |  2 +-
 src/ui/Layout/Theme.ts      | 12 +++++++++---
 src/ui/Layout/Window.ts     |  1 -
 src/ui/Projects/Projects.ts |  1 +
 6 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/ui/Layout/Head.ts b/src/ui/Layout/Head.ts
index 6dc6bfd..0ee2ab7 100644
--- a/src/ui/Layout/Head.ts
+++ b/src/ui/Layout/Head.ts
@@ -5,8 +5,7 @@ export default function Head(props: { title: string }, ...contents: Content[]) {
     meta({ charset: "UTF-8" }),
     meta({
       name: "viewport",
-      content: "width=device-width",
-      "initial-scale": "1.0",
+      content: "width=device-width, initial-scale=1.0",
     }),
     link({
       rel: "shortcut icon",
diff --git a/src/ui/Layout/Layout.ts b/src/ui/Layout/Layout.ts
index 45d9a22..dbe55e9 100644
--- a/src/ui/Layout/Layout.ts
+++ b/src/ui/Layout/Layout.ts
@@ -30,7 +30,7 @@ export default function Layout(
         div(
           display.flex,
           flexDirection.column,
-          height("100vh"),
+          height("100dvh"),
           nav(
             height.maxContent,
             Taskbar({ url: props.url }),
diff --git a/src/ui/Layout/Taskbar.ts b/src/ui/Layout/Taskbar.ts
index 9a9a315..767e9f4 100644
--- a/src/ui/Layout/Taskbar.ts
+++ b/src/ui/Layout/Taskbar.ts
@@ -9,7 +9,7 @@ import techIcon from "public/icons/tech.png?url"
 const vr = hr(height("20px"), margin("0px 2px"))
 
 export default function Taskbar({ url }: { url: string }) {
-  return div.window(
+  return div.taskbar.window(
     textWrapMode.nowrap,
     overflowX.hidden,
     margin("10px"),
diff --git a/src/ui/Layout/Theme.ts b/src/ui/Layout/Theme.ts
index 433776d..67e86af 100644
--- a/src/ui/Layout/Theme.ts
+++ b/src/ui/Layout/Theme.ts
@@ -3,6 +3,14 @@ import Reset from "./Reset"
 export default function Theme() {
   return [
     Reset(),
+    $media(
+      "(max-width: 468px)",
+      rule(
+        ".taskbar .button",
+        minWidth("unset"),
+        rule("img", display.none),
+      ),
+    ),
     rule("a.button", [
       textDecoration("none"),
       cursor("default"),
@@ -11,9 +19,7 @@ export default function Theme() {
     ]),
     rule("h1", fontSize("20px")),
     rule("h2", fontSize("16px")),
-    rule("ul",
-      paddingInlineStart("30px"),
-    ),
+    rule("ul", paddingInlineStart("30px")),
     rule(
       ".markdown",
       textAlign.justify,
diff --git a/src/ui/Layout/Window.ts b/src/ui/Layout/Window.ts
index 4cfb256..64c7e7c 100644
--- a/src/ui/Layout/Window.ts
+++ b/src/ui/Layout/Window.ts
@@ -12,7 +12,6 @@ export default function Window(
     marginRight("10px"),
     width(props.width ?? DEFAULT_WIDTH),
     maxWidth(props.width ?? DEFAULT_WIDTH),
-    minHeight("200px"),
     display.flex,
     flexDirection.column,
     div.titleBar(
diff --git a/src/ui/Projects/Projects.ts b/src/ui/Projects/Projects.ts
index b48a4d0..8f950e4 100644
--- a/src/ui/Projects/Projects.ts
+++ b/src/ui/Projects/Projects.ts
@@ -8,6 +8,7 @@ export default function Projects() {
     { title, url: "/projects" },
     Window(
       { title },
+      backgroundColor.black,
       display.flex,
       iframe({ src: "https://sigitex.com" },
         flex(1)