kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: align header items more harmonical and add new hover styles for navigation items

Browse Source
This commit is contained in:
Stefan Imhoff
2026-01-29 14:06:24 +01:00
committed by Stefan Imhoff
parent 19ed076182
commit eaa55ad8e1
3 changed files with 5 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/MainNavigation.astro
View File

@@ -11,7 +11,7 @@ import navigation from '../data/navigation.json';
navigation.map(({ title, url }) => ( navigation.map(({ title, url }) => (
<li class="mie-[10px] xs:mie-[15px]"> <li class="mie-[10px] xs:mie-[15px]">
<Link <Link
class="text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 focus:underline focus:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 dark:focus:decoration-shibui-100/20" class="rounded-2 pli-3 pbe-2 pbs-3 hover:bg-shibui-950/10 focus:bg-shibui-950/10 hover:dark:bg-shibui-50/10 focus:dark:bg-shibui-50/10"
data-umami-event={title} data-umami-event={title}
href={url} href={url}
> >

10
src/components/PageHeader.astro
View File

@@ -15,19 +15,15 @@ const { class: className, navigation = true } = Astro.props;
<header <header
class:list={[ class:list={[
'sticky z-50 grid w-full grid-cols-18 grid-rows-[clamp(3rem,_5.55vw,_9rem)] bg-shibui-100 mbe-layout block-start-0 dark:bg-shibui-900 print:hidden', 'sticky z-50 grid w-full grid-cols-[0.25fr,0.25fr,0.5fr,8fr,8fr,0.5fr,0.25fr,0.25fr] grid-rows-[clamp(3rem,_5.55vw,_9rem)] bg-shibui-100 mbe-layout block-start-0 dark:bg-shibui-900 print:hidden',
className, className,
]} ]}
role="banner" role="banner"
> >
<div <div class="navigation col-start-4 col-end-5 flex items-center justify-start md:col-start-2">
class="navigation col-span-5 col-start-2 flex items-center justify-start md:col-span-2 md:col-start-1 md:mis-5 lg:col-span-1 lg:m-0 lg:justify-center"
>
<Logo /> <Logo />
</div> </div>
<div <div class="col-start-5 col-end-6 flex items-center justify-end mie-[-10px] md:col-end-8">
class="col-start-7 col-end-18 flex items-center justify-end md:col-start-3 md:col-end-19 md:mie-5"
>
{navigation && <MainNavigation />} {navigation && <MainNavigation />}
<SearchLink /> <SearchLink />
<ThemeToggle /> <ThemeToggle />

2
src/styles/global.css
View File

@@ -167,7 +167,7 @@
/** Images */ /** Images */
img.image-border { img.image-border {
@apply block h-auto w-full rounded-1 border border-solid border-black/5 bg-black/5 shadow-img dark:border-white/5 dark:bg-white/5 dark:opacity-[0.87]; @apply block h-auto w-full rounded-1 border border-solid border-black/5 bg-black/5 shadow-img dark:border-white/5 dark:bg-white/5;
} }
img.image-no-border { img.image-no-border {