Improve style
This commit is contained in:
parent
d7f5a39fc8
commit
d10deb6517
GPG key ID:
5B4E8402BCC50607
10 changed files with 104 additions and 22 deletions
src
static
|
|
@ -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))))
|
||||
|
|
|
|||
|
|
@ -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")))))))
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
Binary file not shown.
|
Before 
(image error) Size: 620 KiB |
1
static/img/icon/discussion.svg
Normal file
1
static/img/icon/discussion.svg
Normal file
|
|
@ -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>
|
||||
|
After 
(image error) Size: 722 B |
1
static/img/icon/forgejo.svg
Normal file
1
static/img/icon/forgejo.svg
Normal file
|
|
@ -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>
|
||||
|
After 
(image error) Size: 642 B |
1
static/img/icon/github.svg
Normal file
1
static/img/icon/github.svg
Normal file
|
|
@ -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>
|
||||
|
After 
(image error) Size: 695 B |
1
static/img/icon/key.svg
Normal file
1
static/img/icon/key.svg
Normal file
|
|
@ -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>
|
||||
|
After 
(image error) Size: 640 B |
1
static/img/icon/server.svg
Normal file
1
static/img/icon/server.svg
Normal file
|
|
@ -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>
|
||||
|
After 
(image error) Size: 800 B |
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue