reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 19:51:07 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: optimize title and icon positions

Browse source
This commit is contained in:
radishzzz 2025-02-06 15:24:34 +00:00
parent 113f37a9e0
commit 162e7ada22
6 changed files with 35 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/components/LanguageSwitcher.astro
View file

@ -16,14 +16,15 @@ function getLanguageDisplayName(code: string) {
<button <button
type="button" type="button"
id="language-switcher" id="language-switcher"
class="absolute right-25.6 top-20 z-9 aspect-square w-6.6 c-secondary active:scale-90" class="absolute right-[calc(9.94vw+2.8rem)] top-[calc(7.3vw+2.68rem)] z-9 aspect-square w-6.6 c-secondary active:scale-90"
lg="hidden"
aria-label={`Current Language: ${getLanguageDisplayName(currentLocale)}. Click to switch to next language.`} aria-label={`Current Language: ${getLanguageDisplayName(currentLocale)}. Click to switch to next language.`}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
class="h-full w-full" class="h-full w-full"
aria-hidden="true" aria-hidden="true"
> >
<path d="M19 21 12.3 2h-1L4.7 21l-2.5.2v.8h6.3v-.8L5.7 21l2-5.9h7.5l2 5.9-3.3.2v.8h7.9v-.8zM8 14.3l3.4-10.1 3.5 10.1z" fill="currentColor" /> <path d="M19 21 12.3 2h-1L4.7 21l-2.5.2v.8h6.3v-.8L5.7 21l2-5.9h7.5l2 5.9-3.3.2v.8h7.9v-.8zM8 14.3l3.4-10.1 3.5 10.1z" fill="currentColor" />
</svg> </svg>
@ -37,15 +38,15 @@ document.addEventListener('astro:page-load', () => {
const { pathname, search, hash } = window.location const { pathname, search, hash } = window.location
const segments = pathname.split('/').filter(Boolean) const segments = pathname.split('/').filter(Boolean)
const firstSegment = segments[0] || '' const firstSegment = segments[0] || ''
// Get current language or empty string if invalid // Get current language or empty string if invalid
const currentLang = langs.includes(firstSegment) const currentLang = langs.includes(firstSegment)
? firstSegment ? firstSegment
: '' : ''
const currentIndex = langs.indexOf(currentLang) const currentIndex = langs.indexOf(currentLang)
const nextLang = langs[(currentIndex + 1) % langs.length] const nextLang = langs[(currentIndex + 1) % langs.length]
const newPath = buildNewPath(currentLang, nextLang, segments, pathname) || '/' const newPath = buildNewPath(currentLang, nextLang, segments, pathname) || '/'
window.location.href = `${newPath}${search}${hash}` window.location.href = `${newPath}${search}${hash}`
}) })
@ -54,14 +55,14 @@ document.addEventListener('astro:page-load', () => {
function buildNewPath(currentLang, nextLang, segments, pathname) { function buildNewPath(currentLang, nextLang, segments, pathname) {
if (currentLang) { if (currentLang) {
segments[0] = nextLang || segments[0] segments[0] = nextLang || segments[0]
return nextLang return nextLang
? `/${segments.join('/')}` ? `/${segments.join('/')}`
: `/${segments.slice(1).join('/')}` : `/${segments.slice(1).join('/')}`
} }
return nextLang return nextLang
? `/${nextLang}${pathname}` ? `/${nextLang}${pathname}`
: pathname : pathname
} }
</script> </script>

3
src/components/MainHeader.astro
View file

@ -15,9 +15,8 @@ const marginBottom = {
--- ---
<header> <header>
<h1> <h1 class={`${marginBottom} text-12.8 c-primary font-bold font-title`}>
<a <a
class={`${marginBottom} mt--5 text-12.8 c-primary font-bold font-title`}
href={getLocalizedPath('/')} href={getLocalizedPath('/')}
transition:name="site-title" transition:name="site-title"
data-disable-transition-on-theme data-disable-transition-on-theme

17
src/components/MobileHeader.astro
View file

@ -7,11 +7,12 @@ const currentPath = Astro.url.pathname
const { getLocalizedPath } = getPagePath(currentPath) const { getLocalizedPath } = getPagePath(currentPath)
--- ---
<a <header class="mt-4.7 text-8.6 c-secondary font-bold font-title lg:hidden">
class="mt--1.4 text-8.32 c-secondary font-bold font-title" <a
href={getLocalizedPath('/')} href={getLocalizedPath('/')}
transition:name="site-title" transition:name="site-title"
data-disable-transition-on-theme data-disable-transition-on-theme
> >
{title} {title}
</a> </a>
</header>

3
src/components/ThemeToggle.astro
View file

@ -60,7 +60,8 @@ window.addEventListener('pageshow', (event) => {
<button <button
aria-pressed="false" aria-pressed="false"
aria-label="Theme Toggle Button" aria-label="Theme Toggle Button"
class="absolute right-9.6 top-19.8 z-9 aspect-square w-7 c-secondary active:scale-92" class="absolute right-[calc(9.94vw-1.18rem)] top-[calc(7.3vw+2.6rem)] z-9 aspect-square w-7 c-secondary active:scale-90"
lg="hidden"
> >
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"

12
src/layouts/Layout.astro
View file

@ -34,8 +34,8 @@ const { isHome, isPost } = getPagePath(Astro.url.pathname);
<body data-overlayscrollbars-initialize> <body data-overlayscrollbars-initialize>
<div <div
class="mx-a max-w-492 h-dvh" class="mx-a max-w-492 h-dvh"
p="x-[calc(9.94vw-1.1784rem)] y-[calc(5.42vw+2.4488rem)] lg:(x-36 y-10.4167dvh)" p="x-[calc(9.942vw-1.18rem)] y-[calc(7.3vw+0.52rem)] lg:(x-36 y-[max(10.4vh,7.8rem)])"
lg="grid cols-[1fr_22rem] rows-1 gap-[min(calc(16.8269vw-6.2727rem),18rem)]" lg="grid cols-[1fr_22rem] rows-1 gap-[min(calc(16.83vw-6.27rem),18rem)]"
> >
<div class={!isHome && isPost ? 'hidden lg:block' : ''}> <div class={!isHome && isPost ? 'hidden lg:block' : ''}>
<MainHeader /> <MainHeader />
@ -43,13 +43,7 @@ const { isHome, isPost } = getPagePath(Astro.url.pathname);
<Footer /> <Footer />
</div> </div>
{ {!isHome && isPost && <MobileHeader /> }
!isHome && isPost && (
<div class="lg:hidden">
<MobileHeader />
</div>
)
}
<main class="col-start-1 row-start-1"> <main class="col-start-1 row-start-1">
<slot /> <slot />

4
src/styles/photoswipe.css
View file

@ -4,7 +4,7 @@
.pswp__button--zoom, .pswp__button--zoom,
.pswp__button--close { .pswp__button--close {
--at-apply: 'mt-2 lg:mt-4 active:scale-92'; --at-apply: 'mt-2 lg:mt-4 active:scale-90';
} }
.pswp__button--zoom svg:hover, .pswp__button--zoom svg:hover,
@ -18,4 +18,4 @@
.pswp__button--zoom { .pswp__button--zoom {
--at-apply: 'mr--6 lg:mr-0'; --at-apply: 'mr--6 lg:mr-0';
} }