Improve style

src/components/header.lisp

@@ -11,18 +11,67 @@
     ("/work" "work")
     ("/blog" "blog")))
 
-(defcomp ~header ()
+(defcomp ~pc-header ()
   (hsx
-   (header :class "flex justify-between py-2 md:py-4 border-b-1 sticky top-0 bg-white"
-     (h1 :class "text-2xl md:text-3xl font-bold"
-       (a :href "/"
-         "skyizwhite"))
-     (nav :class "flex items-end"
-       (ul :preload "mouseover" :class "flex gap-4 text-xl"
+   (nav :class "hidden md:flex items-end"
+     (ul :preload "mouseover" :class "flex gap-4 text-xl font-medium"
+       (loop
+         :for (href label) :in *nav-menu* :collect
+            (if (search href (request-uri jingle:*request*))
+                (hsx (li :class "text-pink-500"
+                       label))
+                (hsx (li (a :href href :class "hover:text-pink-500"
+                           label)))))))))
+
+(defcomp ~sp-header ()
+  (hsx
+   (div :class "block md:hidden" :x-data "{ open: false }"
+     (button
+       :class "z-20 size-8 flex flex-col justify-center cursor-pointer relative"
+       :type "button"
+       :@click "open = !open"
+       (div :class "grid justify-items-center gap-1.5"
+         (span
+           :class "h-1 w-8 rounded-full bg-black transition"
+           :|:class| "open && 'rotate-45 translate-y-2.5'")
+         (span
+           :class "h-1 w-8 rounded-full bg-black transition"
+           :|:class| "open && 'scale-x-0'")
+         (span 
+           :class "h-1 w-8 rounded-full bg-black"
+           :|:class| "open && '-rotate-45 -translate-y-2.5'")))
+     (nav
+       :class (<>
+                "fixed flex flex-col items-center justify-center "
+                "z-10 top-0 right-0 w-full h-full gap-16 bg-gray-200")
+       :x-show "open"
+       :|x-transition:enter| "transition ease-out duration-400"
+       :|x-transition:enter-start| "translate-x-full"
+       :|x-transition:enter-end| "translate-x-0"
+       :|x-transition:leave| "transition ease-in duration-400"
+       :|x-transition:leave-start| "translate-x-0"
+       :|x-transition:leave-end| "translate-x-full"
+       (h2 :class "text-5xl font-bold"
+         "Menu")
+       (ul 
+         :preload "mousedown"
+         :class "flex flex-col h-fit gap-8 text-3xl font-medium"
          (loop
            :for (href label) :in *nav-menu* :collect
               (if (search href (request-uri jingle:*request*))
                   (hsx (li :class "text-pink-500"
                          label))
-                  (hsx (li (a :href href :class "hover:text-pink-500"
+                  (hsx (li (a 
+                             :href href
+                             :class "hover:text-pink-500"
+                             :@click "open = false"
                              label))))))))))
+
+(defcomp ~header ()
+  (hsx
+   (header :class "flex justify-between py-2 md:py-4 border-b-1 top-0 bg-white"
+     (h1 :class "z-20 text-2xl md:text-3xl font-bold"
+       (a :href "/"
+         "skyizwhite"))
+     (~pc-header)
+     (~sp-header))))

src/components/layout.lisp

@@ -26,7 +26,7 @@
        (link :rel "manifest" :href "/img/site.webmanifest")
        (link :rel "stylesheet" :href (bust-cache "/style/dist.css"))
        (link :rel "preconnect" :href "https://fonts.googleapis.com")
-       (link :rel "stylesheet" :href "https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap")
+       (link :rel "stylesheet" :href "https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap")
        (script :src "https://cdn.jsdelivr.net/npm/htmx.org@2.0.4/dist/htmx.min.js")
        (script :src "https://cdn.jsdelivr.net/npm/htmx-ext-preload@2.1.1/dist/preload.min.js")
        (script :src "https://cdn.jsdelivr.net/npm/htmx-ext-head-support@2.0.4/dist/head-support.min.js")
@@ -39,7 +39,8 @@
                 "flex flex-col h-[100svh] w-full max-w-[700px] "
                 "px-2 mx-auto")
        (~header)
-       (main :class "flex-1 px-2 py-6 md:px-4 md:py-8"
-         children)
-       (footer :class "flex p-2 justify-center text-sm border-t-1"
-         (p "© 2025 Akira Tempaku"))))))
+       (div :class "flex flex-col flex-1 overflow-y-scroll"
+         (main :class "flex-1 px-2 py-6 md:px-4 md:py-8"
+           children)
+         (footer :class "flex p-2 justify-center text-sm border-t-1"
+           (p "© 2025 Akira Tempaku")))))))

src/routes/index.lisp

@@ -6,11 +6,21 @@
 (in-package #:website/routes/index)
 
 (defparameter *links*
-  '(("Keyoxide"       "https://keyoxide.org/f39d5b2c951d16732a5cd3528f0c1a22f26d7e62")
-    ("GitHub"         "https://github.com/skyizwhite")
-    ("Forgejo"        "https://code.skyizwhite.dev/paku")
-    ("Fediverse"      "https://himagine.club/@skyizwhite")
-    ("Service Status" "https://status.skyizwhite.dev")))
+  '(("Keyoxide"
+     "https://keyoxide.org/f39d5b2c951d16732a5cd3528f0c1a22f26d7e62"
+     "/img/icon/key.svg")
+    ("GitHub"
+     "https://github.com/skyizwhite"
+     "/img/icon/github.svg")
+    ("Forgejo"
+     "https://code.skyizwhite.dev/paku"
+     "/img/icon/forgejo.svg")
+    ("Fediverse"
+     "https://himagine.club/@skyizwhite"
+     "/img/icon/discussion.svg")
+    ("Service Status"
+     "https://status.skyizwhite.dev"
+     "/img/icon/server.svg")))
 
 (defcomp ~page ()
   (hsx
@@ -21,11 +31,15 @@
          "Akira Tempaku")
        (p :class "text-xl"
          "Web developer"))
-     (div :class "flex flex-col items-center"
+     (div :class "flex flex-col gap-2 items-left"
        (loop
-         :for (name url) :in *links*
-         :collect (hsx (a :href url :target "_blank" :class "text-lg hover:text-pink-500"
-                         name)))))))
+         :for (name url icon) :in *links*
+         :collect (hsx (a 
+                         :href url 
+                         :target "_blank" 
+                         :class "flex items-center gap-2 text-lg hover:text-pink-500"
+                         (img :src icon :alt name :class "size-4 mt-1")
+                         (span name))))))))
 
 (defun handle-get (params)
   (declare (ignore params))