Rename HeaderLink component to NavLink

This commit is contained in:
Maciej Pędzich 2023-05-13 06:38:06 +02:00
parent 9376546f3d
commit 59ec87be3c
3 changed files with 19 additions and 29 deletions

View File

@ -1,5 +1,5 @@
---
import HeaderLink from './HeaderLink.astro';
import NavLink from './NavLink.astro';
---
<header>
@ -8,38 +8,17 @@ import HeaderLink from './HeaderLink.astro';
<span>Pędzich</span>
</span>
<nav class="cmr2-text" aria-label="Site navigation">
<HeaderLink href="/">Home</HeaderLink>
<HeaderLink href="/blog">Blog</HeaderLink>
<HeaderLink href="/projects">Projects</HeaderLink>
<HeaderLink href="/resume.pdf">Resume</HeaderLink>
<HeaderLink href="/uses">Setup</HeaderLink>
<HeaderLink href="/links">Links</HeaderLink>
<HeaderLink href="mailto:contact@maciejpedzi.ch">Email me</HeaderLink>
<NavLink href="/">Home</NavLink>
<NavLink href="/blog">Blog</NavLink>
<NavLink href="/projects">Projects</NavLink>
<NavLink href="/resume.pdf">Resume</NavLink>
<NavLink href="/uses">Setup</NavLink>
<NavLink href="/links">Links</NavLink>
<NavLink href="mailto:contact@maciejpedzi.ch">Email me</NavLink>
</nav>
</header>
<style>
@media only screen and (max-width: 625px) {
nav.cmr2-text {
justify-content: left;
}
}
nav.cmr2-text {
line-height: 1.5;
flex-wrap: nowrap;
overflow-x: auto;
}
nav > a {
color: rgba(255, 255, 255, 0.4);
text-decoration: none;
}
header {
margin: 0em 0 2em;
}
h2 {
margin: 0.5em 0;
}

View File

@ -1,6 +1,7 @@
---
import BaseLayout from '../../layouts/BaseLayout.astro';
import PostList from '../../components/PostList.astro';
import NavLink from '../../components/NavLink.astro';
---
<BaseLayout
@ -9,6 +10,12 @@ import PostList from '../../components/PostList.astro';
>
<section>
<h2>My blog</h2>
<nav class="cmr2-text" aria-label="">
<NavLink href="/blog">recent posts</NavLink>
<NavLink href="/blog/categories">categories</NavLink>
<NavLink href="/blog/tags">tags</NavLink>
<NavLink href="/blog/archive">archive</NavLink>
</nav>
<PostList />
</section>
</BaseLayout>
@ -17,4 +24,8 @@ import PostList from '../../components/PostList.astro';
section {
text-align: center;
}
section > h2 {
margin-bottom: 0.5em;
}
</style>