chore: optimize title and icon positions

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

View file

@ -16,7 +16,8 @@ function getLanguageDisplayName(code: string) {
<button
type="button"
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.`}
>
<svg

View file

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

View file

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

View file

@ -60,7 +60,8 @@ window.addEventListener('pageshow', (event) => {
<button
aria-pressed="false"
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
viewBox="0 0 24 24"

View file

@ -34,8 +34,8 @@ const { isHome, isPost } = getPagePath(Astro.url.pathname);
<body data-overlayscrollbars-initialize>
<div
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)"
lg="grid cols-[1fr_22rem] rows-1 gap-[min(calc(16.8269vw-6.2727rem),18rem)]"
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.83vw-6.27rem),18rem)]"
>
<div class={!isHome && isPost ? 'hidden lg:block' : ''}>
<MainHeader />
@ -43,13 +43,7 @@ const { isHome, isPost } = getPagePath(Astro.url.pathname);
<Footer />
</div>
{
!isHome && isPost && (
<div class="lg:hidden">
<MobileHeader />
</div>
)
}
{!isHome && isPost && <MobileHeader /> }
<main class="col-start-1 row-start-1">
<slot />

View file

@ -4,7 +4,7 @@
.pswp__button--zoom,
.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,