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

feat: improve mobile header and layout responsiveness

Browse source 
- Add sticky positioning to mobile header
- Implement back navigation for mobile header
- Adjust layout to use min-height instead of fixed height
- Remove global scroll-smooth class for more flexible scrolling
- Update dependencies to latest versions
This commit is contained in:
radishzzz 2025-02-14 07:04:52 +00:00
parent 4aec3ae6cf
commit 7498f93ef9
6 changed files with 99 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/MobileHeader.astro
View file

@ -7,14 +7,28 @@ const currentPath = Astro.url.pathname
const { getLocalizedPath } = getPagePath(currentPath)
---
<header class="mt-4.7 text-8.6 c-secondary font-bold font-title lg:hidden">
<header class="sticky top-8 z-9 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"
data-disable-transition-on-theme
>
<a href={getLocalizedPath('/')}>
<a
href={getLocalizedPath('/')}
onclick="return _handleBack(event)"
>
{title}
</a>
</div>
</header>
<script is:inline>
function _handleBack(e) {
if (window.history.length > 2) {
e.preventDefault()
window.history.back()
return false
}
return true
}
</script>

4
src/layouts/Layout.astro
View file

@ -27,13 +27,13 @@ const { isHome, isPost } = getPagePath(Astro.url.pathname);
<html
lang={Astro.currentLocale || 'en-US'}
class:list={[fontStyle]}
class:list={[fontStyle, isPost && 'scroll-smooth ']}
data-overlayscrollbars-initialize
>
<Head {postTitle} {postDescription} {postImage} />
<body data-overlayscrollbars-initialize>
<div
class="mx-a max-w-492 h-dvh"
class="mx-a max-w-492 min-h-dvh"
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)]"
>

2
src/styles/global.css
View file

@ -5,7 +5,7 @@
}
html {
--at-apply: 'bg-background c-secondary text-62.5% antialiased scroll-smooth scrollbar-hidden';
--at-apply: 'bg-background c-secondary text-62.5% antialiased scrollbar-hidden';
}
html::-webkit-scrollbar {