mirror of
https://github.com/Motschen/midnightdust-eu.git
synced 2025-12-15 18:15:10 +01:00
90 lines
2.3 KiB
Plaintext
90 lines
2.3 KiB
Plaintext
---
|
|
import Navigation from '../components/Navigation.astro'
|
|
import { SkipLinks } from 'accessible-astro-components'
|
|
import { Icon } from 'astro-icon/components'
|
|
---
|
|
|
|
<header class="sticky top-0 z-50 backdrop-blur-md">
|
|
<SkipLinks />
|
|
<Navigation>
|
|
<li class="menu-item">
|
|
<a href="/">Home</a>
|
|
</li>
|
|
<li class="menu-item">
|
|
<a href="/blog/">Blog</a>
|
|
</li>
|
|
<li class="menu-item has-dropdown">
|
|
<button aria-haspopup="true" aria-expanded="false">Mods</button>
|
|
<ul class="dropdown-menu">
|
|
<li class="submenu-item">
|
|
<a href="/midnightlib/">MidnightLib</a>
|
|
</li>
|
|
<li class="submenu-item">
|
|
<a href="/midnightcontrols/">MidnightControls</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="menu-item has-dropdown">
|
|
<button aria-haspopup="true" aria-expanded="false">Wiki</button>
|
|
<ul class="dropdown-menu">
|
|
<li class="submenu-item">
|
|
<a href="/wiki/betterleaves/">Better Leaves</a>
|
|
</li>
|
|
<li class="submenu-item">
|
|
<a href="/wiki/midnightlib/">MidnightLib</a>
|
|
</li>
|
|
<li class="submenu-item">
|
|
<a href="/wiki/midnightcontrols/">MidnightControls</a>
|
|
</li>
|
|
<li class="submenu-item">
|
|
<a href="/wiki/picturesign/">PictureSign</a>
|
|
</li>
|
|
<li class="submenu-item">
|
|
<a href="/wiki/puzzle/">Puzzle</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="menu-item type-icon">
|
|
<a href="http://discord.midnightdust.eu/" title="Join my Discord server">
|
|
<Icon name="simple-icons:discord" />
|
|
</a>
|
|
</li>
|
|
<li class="menu-item type-icon">
|
|
<a href="https://github.com/Motschen" title="View my GitHub profile">
|
|
<Icon name="simple-icons:github" />
|
|
</a>
|
|
</li>
|
|
</Navigation>
|
|
</header>
|
|
|
|
<style lang="scss" is:global>
|
|
@use '../assets/scss/base/outline' as *;
|
|
|
|
header {
|
|
background-color: rgb(255, 255, 255, 0.75);
|
|
|
|
.type-icon a {
|
|
display: block;
|
|
|
|
[data-icon] {
|
|
height: auto;
|
|
margin-top: -2px;
|
|
width: 28px;
|
|
|
|
path {
|
|
fill: var(--action-color);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
[data-icon] path {
|
|
fill: var(--action-color-state);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
header:is(.darkmode *) {
|
|
background-color: rgba(24, 24, 37, 0.75);
|
|
}
|
|
</style>
|