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

fix: adjust component styles to resolve layout and positioning issues

Browse source
This commit is contained in:
radishzzz 2025-05-25 19:52:29 +01:00
parent 48464370a4
commit 91481626c5
9 changed files with 48 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Button.astro
View file

@ -31,7 +31,7 @@ const nextUrl = useSupportedLangs
class:list={[
'absolute right-7.25vw top-14.6 flex gap-6 min-[823px]:max-[1024px]:right-[calc(50vw-22rem)]',
'[@supports(-webkit-touch-callout:none)]:top-13.6', // fix position issue on ios
'lg:(fixed bottom-47 right-[max(5rem,calc(50vw-35rem))] top-auto w-14rem)',
'lg:(fixed bottom-48 right-[max(5rem,calc(50vw-35rem))] top-auto w-14rem)',
]}
>
<!-- Language Switcher -->

4
src/components/Footer.astro
View file

@ -30,11 +30,11 @@ const links = socialLinks.map((link) => {
return link
})
const footerLinkClass = 'highlight-hover footer-highlight-position-fix py-0.8 transition-colors after:bottom-0.15em hover:c-primary'
const footerLinkClass = 'highlight-hover footer-highlight-position-fix py-0.8 transition-colors after:bottom-0.35em hover:c-primary'
---
<footer
class="mb-4 text-3 leading-1.25em font-navbar lg:(mb-0 text-3.5)"
class="text-3 leading-1.25em font-navbar lg:text-3.5"
lg="uno-desktop-column bottom-20"
>
<p>

2
src/components/Header.astro
View file

@ -23,7 +23,7 @@ const SubtitleTag = isPost ? 'div' : 'h2'
<TitleTag
class:list={[
isPost
? `mb-2.8 mt-3.2 text-5.375 c-secondary lg:(mb-1.8 mt-0 text-9 c-primary)`
? `mb-3.2 mt-2.6 text-5.375 c-secondary lg:(mb-1.8 mt-0 text-9 c-primary)`
: `mb-1.8 w-75% text-8 c-primary lg:(w-full text-9)`,
'font-bold font-title',
]}

4
src/components/Navbar.astro
View file

@ -11,8 +11,8 @@ const isAboutActive = isAbout
function getNavItemClass(isActive: boolean) {
return isActive
? 'highlight-static c-primary font-bold after:bottom-0.5em'
: 'highlight-hover transition-colors transition-font-weight after:bottom-0.5em hover:(c-primary font-bold)'
? 'highlight-static c-primary font-bold after:bottom-0.7em'
: 'highlight-hover transition-colors transition-font-weight after:bottom-0.7em hover:(c-primary font-bold)'
}
const navItems = [

2
src/layouts/Layout.astro
View file

@ -39,7 +39,7 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
<body>
<div
class="mx-auto max-w-205.848 min-h-vh w-full min-h-dvh"
p="x-[min(7.25vw,3.731rem)] y-9"
p="x-[min(7.25vw,3.731rem)] y-10"
lg="mx-[max(5rem,calc(50vw-35rem))] my-20 max-w-[min(calc(75vw-16rem),44rem)] min-h-full p-0"
>
<Header />

6
src/styles/extend.css
View file

@ -129,13 +129,13 @@
}
/* Video */
iframe {
.heti iframe {
--at-apply: 'my-6 aspect-video w-full';
}
:is(h1, h2, h3, h4, h5, h6, iframe) + iframe {
.heti :is(h1, h2, h3, h4, h5, h6, iframe) + iframe {
--at-apply: 'mt-4';
}
iframe:has(+ iframe) {
.heti iframe:has(+ iframe) {
--at-apply: 'mb-4';
}

4
src/styles/global.css
View file

@ -60,9 +60,9 @@ h4:hover .heading-anchor-link svg:hover {
/* Fix Highlight Position Issue on iOS */
@supports (-webkit-touch-callout: none) {
.navbar-highlight-position-fix {
--at-apply: 'after:bottom-0.68em';
--at-apply: 'after:bottom-0.88em';
}
.footer-highlight-position-fix {
--at-apply: 'after:bottom-0.39em';
--at-apply: 'after:bottom-0.59em';
}
}

2
src/styles/markdown.css
View file

@ -12,7 +12,7 @@
/* Customized Post Title */
.heti .post-title {
--at-apply: 'mb-2 text-8.6 font-bold lg:text-9';
--at-apply: 'mb-2 mt-0 text-8.6 font-bold lg:text-9';
}
/* Headings */