fix: mobile styling

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",

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 }),

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"),

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,

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(

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)