ahurac/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Ajout : header

Browse source
This commit is contained in:
Ahurac 2024-01-31 14:55:37 +01:00
parent 665e33ef23
commit f9f5f798a7
2 changed files with 82 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/components/Header.astro Normal file
View file

@ -0,0 +1,44 @@
---
import NavButton from '../components/NavButton.astro'
---
<nav>
<div class="left">
<span>Ahurac</span>
<div class="navButtons">
<NavButton link="/">Home</NavButton>
<NavButton link="mailto:hchauvin@mailbox.org">Contact (mail)</NavButton>
</div>
</div>
</nav>
<style>
nav {
height: 120px;
width: 100%;
display: flex;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
backdrop-filter: blur(6px);
margin-bottom: 10px;
}
span {
font-size: 60px;
margin: 0;
font-weight: bold;
text-transform: uppercase;
}
.left {
display: flex;
align-items: center;
}
.navButtons {
display: flex;
align-items: center;
height: 30px;
}
</style>

38
src/components/NavButton.astro Normal file
View file

@ -0,0 +1,38 @@
---
const { link } = Astro.props;
---
<a href={link}>
<slot />
</a>
<style>
a {
text-decoration: none;
margin-left: 20px;
color: inherit;
width: auto;
height: 100%;
display: flex;
align-items: center;
position: relative;
}
a::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: white;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
a:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
</style>