diff --git a/src/components/header.lisp b/src/components/header.lisp
index 88beb70..6f4573c 100644
--- a/src/components/header.lisp
+++ b/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))))
diff --git a/src/components/layout.lisp b/src/components/layout.lisp
index 08f8f1f..ae75116 100644
--- a/src/components/layout.lisp
+++ b/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")))))))
diff --git a/src/routes/index.lisp b/src/routes/index.lisp
index 9492f04..6966243 100644
--- a/src/routes/index.lisp
+++ b/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))
diff --git a/static/img/bg.webp b/static/img/bg.webp
deleted file mode 100644
index 21c6b0e..0000000
Binary files a/static/img/bg.webp and /dev/null differ
diff --git a/static/img/icon/discussion.svg b/static/img/icon/discussion.svg
new file mode 100644
index 0000000..5cd7f62
--- /dev/null
+++ b/static/img/icon/discussion.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1M1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.75.75 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25m13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275a.75.75 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"/></svg>
\ No newline at end of file
diff --git a/static/img/icon/forgejo.svg b/static/img/icon/forgejo.svg
new file mode 100644
index 0000000..e4703a1
--- /dev/null
+++ b/static/img/icon/forgejo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M16.777 0a2.9 2.9 0 1 1-2.529 4.322H12.91a4.266 4.266 0 0 0-4.265 4.195v2.118a7.08 7.08 0 0 1 4.147-1.42l.118-.002h1.338a2.9 2.9 0 0 1 5.43 1.422a2.9 2.9 0 0 1-5.43 1.422H12.91a4.266 4.266 0 0 0-4.265 4.195v2.319A2.9 2.9 0 0 1 7.222 24A2.9 2.9 0 0 1 5.8 18.57V8.589a7.11 7.11 0 0 1 6.991-7.108l.118-.001h1.338A2.9 2.9 0 0 1 16.778 0M7.223 19.905a1.194 1.194 0 1 0 0 2.389a1.194 1.194 0 0 0 0-2.389m9.554-10.464a1.194 1.194 0 1 0 0 2.389a1.194 1.194 0 0 0 0-2.39m0-7.735a1.194 1.194 0 1 0 0 2.389a1.194 1.194 0 0 0 0-2.389"/></svg>
\ No newline at end of file
diff --git a/static/img/icon/github.svg b/static/img/icon/github.svg
new file mode 100644
index 0000000..c3c6961
--- /dev/null
+++ b/static/img/icon/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M8 0c4.42 0 8 3.58 8 8a8.01 8.01 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38c0-.27.01-1.13.01-2.2c0-.75-.25-1.23-.54-1.48c1.78-.2 3.65-.88 3.65-3.95c0-.88-.31-1.59-.82-2.15c.08-.2.36-1.02-.08-2.12c0 0-.67-.22-2.2.82c-.64-.18-1.32-.27-2-.27s-1.36.09-2 .27c-1.53-1.03-2.2-.82-2.2-.82c-.44 1.1-.16 1.92-.08 2.12c-.51.56-.82 1.28-.82 2.15c0 3.06 1.86 3.75 3.64 3.95c-.23.2-.44.55-.51 1.07c-.46.21-1.61.55-2.33-.66c-.15-.24-.6-.83-1.23-.82c-.67.01-.27.38.01.53c.34.19.73.9.82 1.13c.16.45.68 1.31 2.69.94c0 .67.01 1.3.01 1.49c0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8"/></svg>
\ No newline at end of file
diff --git a/static/img/icon/key.svg b/static/img/icon/key.svg
new file mode 100644
index 0000000..0a258b2
--- /dev/null
+++ b/static/img/icon/key.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.75.75 0 0 1-.53.22H7v.75a.75.75 0 0 1-.22.53l-.5.5a.75.75 0 0 1-.53.22H5v.75a.75.75 0 0 1-.22.53l-.5.5a.75.75 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0m-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5M11 6a1 1 0 1 1 0-2a1 1 0 0 1 0 2"/></svg>
\ No newline at end of file
diff --git a/static/img/icon/server.svg b/static/img/icon/server.svg
new file mode 100644
index 0000000..9b119c7
--- /dev/null
+++ b/static/img/icon/server.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v4c0 .372-.116.717-.314 1c.198.283.314.628.314 1v4a1.75 1.75 0 0 1-1.75 1.75H1.75A1.75 1.75 0 0 1 0 12.75v-4c0-.358.109-.707.314-1a1.74 1.74 0 0 1-.314-1v-4C0 1.784.784 1 1.75 1M1.5 2.75v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25m.25 5.75a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25ZM7 4.75A.75.75 0 0 1 7.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 7 4.75M7.75 10h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5M3 4.75A.75.75 0 0 1 3.75 4h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 4.75M3.75 10h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5"/></svg>
\ No newline at end of file
diff --git a/static/style/global.css b/static/style/global.css
index ee63e75..b2b52c5 100644
--- a/static/style/global.css
+++ b/static/style/global.css
@@ -10,3 +10,16 @@
font-family: "Zen Maru Gothic", sans-serif;
}
}
+
+@supports (font-variation-settings: medium) {
+ :root {
+ font-family: "Zen Maru Gothic", sans-serif;
+ }
+}
+
+
+@supports (font-variation-settings: bold) {
+ :root {
+ font-family: "Zen Maru Gothic", sans-serif;
+ }
+}