114 lines
1.8 KiB
Plaintext
114 lines
1.8 KiB
Plaintext
---
|
|
import { SITE_TITLE } from '../consts';
|
|
import HeaderLink from './HeaderLink.astro';
|
|
---
|
|
|
|
<header>
|
|
<nav>
|
|
<div class="nav-container nav-container-md">
|
|
<div class="nav-container nav-item nav-item-10">
|
|
<h4>
|
|
<HeaderLink
|
|
href="/"
|
|
class="LinkText"
|
|
>
|
|
Home
|
|
</Link>
|
|
</h4>
|
|
{/* <h4 class="divider">/</h4>
|
|
<h4>
|
|
<Link
|
|
to="/about"
|
|
class="LinkText"
|
|
>
|
|
Games
|
|
</Link>
|
|
</h4>
|
|
<h4 class="divider">/</h4>
|
|
<h4>
|
|
<Link
|
|
to="/about"
|
|
class="LinkText"
|
|
>
|
|
Gallery
|
|
</Link>
|
|
</h4> */}
|
|
<h4>
|
|
<HeaderLink
|
|
href="/about"
|
|
class="LinkText"
|
|
>
|
|
About
|
|
</Link>
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<style>
|
|
.HeaderBlock {
|
|
padding-top: 15%;
|
|
margin-bottom: 4%;
|
|
}
|
|
|
|
.LinkText {
|
|
color: #eeeeee;
|
|
text-decoration: none;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.LinkText:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.nav-container {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.nav-container .nav-item-10 {
|
|
flex-grow: 0;
|
|
max-width: 83.333333%;
|
|
flex-basis: 83.333333%;
|
|
}
|
|
|
|
.nav-container .nav-item-10 .divider {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.nav-container .nav-item {
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@media only screen and (min-width: 48em) {
|
|
.HeaderBlock {
|
|
padding-top: 4em;
|
|
}
|
|
}
|
|
|
|
|
|
@media (min-width: 960px) {
|
|
.nav-container-md {
|
|
flex-grow: 1;
|
|
max-width: 100%;
|
|
flex-basis: 0;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
.LinkText {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.divider {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
</style>
|