sidski/kjelsrud.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 styling Header

Browse source
This commit is contained in:
SindreKjelsrud 2023-08-22 16:01:37 +02:00
parent 034626b1f7
commit fbe080f605
2 changed files with 9 additions and 7 deletions

8
src/components/Header.astro
View file

@ -3,14 +3,16 @@ import HeaderLink from './HeaderLink.astro';
import { SITE_TITLE } from '../consts'; import { SITE_TITLE } from '../consts';
--- ---
<header class="flex justify-center gap-24 mb-12"> <header class="flex justify-center gap-64">
<div>
<a class="font-bold" href="/"> <a class="font-bold" href="/">
{SITE_TITLE} {SITE_TITLE}
</a> </a>
</div>
<nav> <nav>
<HeaderLink href="/about">about</HeaderLink> <HeaderLink href="/about">about</HeaderLink>
<HeaderLink href="/projects">projects</HeaderLink> <HeaderLink href="#">projects</HeaderLink>
<HeaderLink href="/resume">resume</HeaderLink> <HeaderLink href="#">resume</HeaderLink>
<HeaderLink href="/blog">blog</HeaderLink> <HeaderLink href="/blog">blog</HeaderLink>
</nav> </nav>
</header> </header>

2
src/components/HeaderLink.astro
View file

@ -19,6 +19,6 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, '');
} }
a.active { a.active {
font-weight: bolder; font-weight: bolder;
text-decoration: underline; border-bottom: 2px solid;
} }
</style> </style>