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

Compare commits

base: sidski:ba605b759c19e9f0ceb9e9d683e4b14ae305b573
Branches Tags
sidski:main
..
compare: sidski:ea89858e81ac5045184d79d52f78d8728d157ee0
Branches Tags
sidski:main

2 commits
ba605b759c ... ea89858e81

Author SHA1 Message Date
SindreKjelsrud
ea89858e81
💄 Similar padding for both active & inactive
All checks were successful
Deploy website / build-and-deploy (push) Successful in 6m17s
Details 
Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>
 2025-05-29 19:53:44 +02:00
SindreKjelsrud
10d6d54846
🐛 Fix active-styling of Header not working 
Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>
 2025-05-29 19:53:14 +02:00
2 changed files with 6 additions and 6 deletions
Show stats Expand all files Collapse all files

10
src/components/Header.astro
View file

@ -8,11 +8,11 @@ const { pathname } = Astro.url;
</div> </div>
<nav class="flex flex-wrap gap-2"> <nav class="flex flex-wrap gap-2">
<a class={`headerlink ${pathname === '/' ? 'headerlink-active' : ''}`} href="/">home</a> <a class={`headerlink ${pathname === '/' ? 'headerlink-active' : ''}`} href="/">home</a>
<a class={`headerlink ${pathname === '/blog' ? 'headerlink-active' : ''}`} href="/blog">blog</a> <a class={`headerlink ${pathname === '/blog' || pathname === '/blog/' ? 'headerlink-active' : ''}`} href="/blog">blog</a>
<a class={`headerlink ${pathname === '/logs' ? 'headerlink-active' : ''}`} href="/logs">logs</a> <a class={`headerlink ${pathname === '/logs' || pathname === '/logs' ? 'headerlink-active' : ''}`} href="/logs">logs</a>
<a class={`headerlink ${pathname === '/gallery' ? 'headerlink-active' : ''}`} href="/gallery">gallery</a> <a class={`headerlink ${pathname === '/gallery' || pathname === '/gallery/' ? 'headerlink-active' : ''}`} href="/gallery">gallery</a>
<a class={`headerlink ${pathname === '/guestbook' ? 'headerlink-active' : ''}`} href="/guestbook">guestbook</a> <a class={`headerlink ${pathname === '/guestbook' || pathname === '/guestbook/' ? 'headerlink-active' : ''}`} href="/guestbook">guestbook</a>
<a class={`headerlink ${pathname === '/slashes' ? 'headerlink-active' : ''}`} href="/slashes">more</a> <a class={`headerlink ${pathname === '/slashes' || pathname === '/slashes/' ? 'headerlink-active' : ''}`} href="/slashes">more</a>
</nav> </nav>
</header> </header>

2
src/styles/global.css
View file

@ -44,7 +44,7 @@ hr {
.headerlink-active { .headerlink-active {
border: 2px solid var(--dark-link); border: 2px solid var(--dark-link);
padding: 0.5vh 1vh; padding: 0.5vh 1.5vh;
border-radius: 10px; border-radius: 10px;
font-weight: 600; font-weight: 600;
background-color: var(--dark-link); background-color: var(--dark-link);