chore: update dependence

- Increase z-index for language switcher, theme toggle, and view transitions
- Remove sticky positioning from mobile header
- Ensure proper layering of UI elements on mobile devices
This commit is contained in:
radishzzz 2025-02-15 01:15:09 +00:00
parent 7498f93ef9
commit 923d473593
5 changed files with 122 additions and 122 deletions

View file

@ -16,7 +16,7 @@ function getLanguageDisplayName(code: string) {
<button
type="button"
id="language-switcher"
class="absolute right-[calc(9.94vw+2.8rem)] top-[calc(7.3vw+2.68rem)] z-9 aspect-square w-6.6 c-secondary [@supports(-webkit-touch-callout:none)]:top-[calc(7.3vw+2.28rem)] active:scale-90"
class="absolute right-[calc(9.94vw+2.8rem)] top-[calc(7.3vw+2.68rem)] z-99 aspect-square w-6.6 c-secondary [@supports(-webkit-touch-callout:none)]:top-[calc(7.3vw+2.28rem)] active:scale-90"
lg="hidden"
aria-label={`Current Language: ${getLanguageDisplayName(currentLocale)}. Click to switch to next language.`}
>

View file

@ -7,7 +7,7 @@ const currentPath = Astro.url.pathname
const { getLocalizedPath } = getPagePath(currentPath)
---
<header class="sticky top-8 z-9 mt-4.7 text-8.6 c-secondary font-bold font-title lg:hidden">
<header class="mt-4.7 text-8.6 c-secondary font-bold font-title lg:hidden">
<div
class="box-content inline-block pr-2"
transition:name="site-title"

View file

@ -60,7 +60,7 @@ window.addEventListener('pageshow', (event) => {
<button
aria-pressed="false"
aria-label="Theme Toggle Button"
class="absolute right-[calc(9.94vw-1.18rem)] top-[calc(7.3vw+2.6rem)] z-9 aspect-square w-7 c-secondary [@supports(-webkit-touch-callout:none)]:top-[calc(7.3vw+2.2rem)] active:scale-90"
class="absolute right-[calc(9.94vw-1.18rem)] top-[calc(7.3vw+2.6rem)] z-99 aspect-square w-7 c-secondary [@supports(-webkit-touch-callout:none)]:top-[calc(7.3vw+2.2rem)] active:scale-90"
lg="hidden"
>
<svg

View file

@ -63,12 +63,12 @@ html:not(.dark) {
::view-transition-new(theme-transition) {
animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
clip-path: inset(0 0 0 0);
z-index: 2;
z-index: 99;
}
::view-transition-old(theme-transition) {
animation: none;
z-index: 1;
z-index: 98;
}
html[data-theme-transition] [data-disable-transition-on-theme] {