Header: highlights on hover
This commit is contained in:
parent
6d1a2d151e
commit
f2f61d3453
GPG key ID:
8DE0764E1809E9FC
|
|
@ -3,49 +3,131 @@ const today = new Date();
|
|||
---
|
||||
|
||||
<footer>
|
||||
© 2022-{today.getFullYear()} Emiliko Mirror. No rights reserved.
|
||||
<div class="social-links">
|
||||
<a href="https://git.mami2.moe/akemi/noway.moe" target="_blank">
|
||||
<span class="sr-only">Forgejo</span>
|
||||
<svg viewBox="0 0 212 212" aria-hidden="true" width="32" height="32">
|
||||
<g transform="translate(6,6)">
|
||||
<path d="M58 168 v-98 a50 50 0 0 1 50-50 h20" style="fill: none; stroke: #aaa; stroke-width: 25" />
|
||||
<path d="M58 168 v-30 a50 50 0 0 1 50-50 h20" style="fill: none; stroke: #000; stroke-width: 25" />
|
||||
<circle cx="142" cy="20" r="18" style="fill: none; stroke: #aaa; stroke-width: 15" />
|
||||
<circle cx="142" cy="88" r="18" style="fill: none; stroke: #000; stroke-width: 15" />
|
||||
<circle cx="58" cy="180" r="18" style="fill: none; stroke: #000; stroke-width: 15" />
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://codeberg.org/akemi/noway.moe" target="_blank">
|
||||
<span class="sr-only">Codeberg</span>
|
||||
<svg width="32" height="32" aria-hidden="true" viewBox="0 0 24 24" fill="#000">
|
||||
<path
|
||||
d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
© 2022-{today.getFullYear()} Emiliko Mirror. No rights reserved.
|
||||
<div class="social-links">
|
||||
<a href="https://discord.com/users/180472559148597249" target="_blank">
|
||||
<span class="sr-only">Discord</span>
|
||||
<svg class="discord-logo" width="32" height="32" viewBox="0 0 127.14 96.36">
|
||||
<style>
|
||||
svg.discord-logo{fill:#000;}
|
||||
svg.discord-logo:hover{fill:var(--accent-color);}
|
||||
</style>
|
||||
<path
|
||||
d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://anilist.co/user/akemiko" target="_blank">
|
||||
<span class="sr-only">Anilist</span>
|
||||
<svg class="anilist-logo" width="32px" height="32px" viewBox="0 0 32 32">
|
||||
<style>
|
||||
svg.anilist-logo rect{fill:#000; fill-opacity:1; stroke:none;}
|
||||
svg.anilist-logo path {stroke:none; fill-rule:nonzero; fill-opacity:1;}
|
||||
svg.anilist-logo path.light {fill:#fff;}
|
||||
svg.anilist-logo path.dark {fill:#aaa;}
|
||||
svg.anilist-logo:hover path.dark{fill: var(--accent-color);}
|
||||
</style>
|
||||
<g id="surface1">
|
||||
<rect rx="8" x="0" y="0" width="32" height="32" />
|
||||
<path
|
||||
class="dark"
|
||||
d="M 20.121094 20.203125 L 20.121094 8.539062 C 20.121094 7.867188 19.753906 7.5 19.085938 7.5 L 16.808594 7.5 C 16.140625 7.5 15.773438 7.867188 15.773438 8.539062 L 15.773438 14.078125 C 15.773438 14.234375 17.273438 14.957031 17.3125 15.113281 C 18.453125 19.585938 17.558594 23.167969 16.476562 23.335938 C 18.25 23.425781 18.441406 24.277344 17.125 23.695312 C 17.324219 21.308594 18.113281 21.3125 20.375 23.605469 C 20.394531 23.628906 20.839844 24.5625 20.867188 24.5625 L 26.214844 24.5625 C 26.882812 24.5625 27.25 24.195312 27.25 23.523438 L 27.25 21.242188 C 27.25 20.574219 26.882812 20.203125 26.214844 20.203125 Z M 20.121094 20.203125 "/>
|
||||
<path
|
||||
class="light"
|
||||
d="M 10.667969 7.5 L 4.6875 24.5625 L 9.332031 24.5625 L 10.34375 21.609375 L 15.40625 21.609375 L 16.394531 24.5625 L 21.019531 24.5625 L 15.0625 7.5 Z M 11.402344 17.828125 L 12.851562 13.101562 L 14.441406 17.828125 Z M 11.402344 17.828125 "/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://git.mami2.moe/akemi?tab=activity" target="_blank">
|
||||
<span class="sr-only">Forgejo</span>
|
||||
<svg class="forgejo-logo" viewBox="0 0 212 212" aria-hidden="true" width="32" height="32">
|
||||
<style>
|
||||
.cls-1{fill:#000;}
|
||||
svg.forgejo-logo path{stroke-width: 25}
|
||||
svg.forgejo-logo circle{stroke-width: 15}
|
||||
svg.forgejo-logo .light{fill: none; stroke: #aaa;}
|
||||
svg.forgejo-logo .dark{fill: none; stroke: #000;}
|
||||
svg.forgejo-logo:hover .light{stroke: var(--accent-color);}
|
||||
</style>
|
||||
<g transform="translate(6,6)">
|
||||
<path class="light" d="M58 168 v-98 a50 50 0 0 1 50-50 h20" />
|
||||
<path class="dark" d="M58 168 v-30 a50 50 0 0 1 50-50 h20" />
|
||||
<circle class="light" cx="142" cy="20" r="18" />
|
||||
<circle class="dark" cx="142" cy="88" r="18" />
|
||||
<circle class="dark" cx="58" cy="180" r="18" />
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://gitlab.com/aizuko" target="_blank">
|
||||
<span class="sr-only">Codeberg</span>
|
||||
<svg class="gitlab-logo" width="32" height="32" viewBox="80 90 210 210">
|
||||
<style>
|
||||
.cls-1{fill:#000;}
|
||||
svg.gitlab-logo .cls-2{fill:#777;}
|
||||
svg.gitlab-logo .cls-3{fill:#aaa;}
|
||||
svg.gitlab-logo:hover .cls-2{fill:var(--accent-color);}
|
||||
svg.gitlab-logo:hover .cls-3{fill:var(--accent-color);}
|
||||
</style>
|
||||
<g>
|
||||
<path
|
||||
class="cls-1"
|
||||
d="M282.83,170.73l-.27-.69-26.14-68.22a6.81,6.81,0,0,0-2.69-3.24,7,7,0,0,0-8,.43,7,7,0,0,0-2.32,3.52l-17.65,54H154.29l-17.65-54A6.86,6.86,0,0,0,134.32,99a7,7,0,0,0-8-.43,6.87,6.87,0,0,0-2.69,3.24L97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82,19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91,40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z"/>
|
||||
<path
|
||||
class="cls-2"
|
||||
d="M282.83,170.73l-.27-.69a88.3,88.3,0,0,0-35.15,15.8L190,229.25c19.55,14.79,36.57,27.64,36.57,27.64l40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z"/>
|
||||
<path
|
||||
class="cls-3"
|
||||
d="M153.43,256.89l19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91S209.55,244,190,229.25C170.45,244,153.43,256.89,153.43,256.89Z"/>
|
||||
<path
|
||||
class="cls-2"
|
||||
d="M132.58,185.84A88.19,88.19,0,0,0,97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82s17-12.85,36.57-27.64Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://github.com/aizuko" target="_blank">
|
||||
<span class="sr-only">Github</span>
|
||||
<svg class="github-logo" viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
|
||||
<style>
|
||||
svg.github-logo{fill:#000;}
|
||||
svg.github-logo:hover{fill:var(--accent-color);}
|
||||
</style>
|
||||
<path
|
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://codeberg.org/akemi?tab=activity" target="_blank">
|
||||
<span class="sr-only">Codeberg</span>
|
||||
<svg class="codeberg-logo" width="32" height="32" aria-hidden="true" viewBox="0 0 24 24" fill="#000">
|
||||
<style>
|
||||
svg.codeberg-logo{fill:#000;}
|
||||
svg.codeberg-logo:hover{fill:var(--accent-color);}
|
||||
</style>
|
||||
<path
|
||||
d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
padding: 2em 1em 6em 1em;
|
||||
background: linear-gradient(var(--gray-gradient)) no-repeat;
|
||||
color: rgb(var(--gray));
|
||||
text-align: center;
|
||||
}
|
||||
.social-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.social-links a {
|
||||
text-decoration: none;
|
||||
color: rgb(var(--gray));
|
||||
}
|
||||
.social-links a:hover {
|
||||
color: rgb(var(--gray-dark));
|
||||
}
|
||||
footer {
|
||||
padding: 2em 1em 6em 1em;
|
||||
background: linear-gradient(var(--gray-gradient)) no-repeat;
|
||||
color: rgb(var(--gray));
|
||||
text-align: center;
|
||||
}
|
||||
.social-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.social-links a {
|
||||
text-decoration: none;
|
||||
color: rgb(var(--gray));
|
||||
}
|
||||
.social-links a:hover {
|
||||
color: rgb(var(--gray-dark));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,63 +6,41 @@ import { SITE_TITLE } from '../consts';
|
|||
<header style="width: 100%" class="font-sans sticky top-0 md:static bg-white underline-offset-4 z-40">
|
||||
<nav class="hidden select-none mx-auto md:flex justify-between items-center px-6 py-3.5 text-md md:text-lg leading-6">
|
||||
<div class="flex items-center space-x-8">
|
||||
<a href="https://git.mami2.moe/akemi/noway.moe" target="_blank">
|
||||
<span class="sr-only">Forgejo</span>
|
||||
<svg class="forgejo-logo" viewBox="0 0 212 212" aria-hidden="true" width="32" height="32">
|
||||
<style>
|
||||
.cls-1{fill:#000;}
|
||||
svg.forgejo-logo path{stroke-width: 25}
|
||||
svg.forgejo-logo circle{stroke-width: 15}
|
||||
svg.forgejo-logo .light{fill: none; stroke: #aaa;}
|
||||
svg.forgejo-logo .dark{fill: none; stroke: #000;}
|
||||
svg.forgejo-logo:hover .light{stroke: var(--accent-color);}
|
||||
</style>
|
||||
<g transform="translate(6,6)">
|
||||
<path class="light" d="M58 168 v-98 a50 50 0 0 1 50-50 h20" />
|
||||
<path class="dark" d="M58 168 v-30 a50 50 0 0 1 50-50 h20" />
|
||||
<circle class="light" cx="142" cy="20" r="18" />
|
||||
<circle class="dark" cx="142" cy="88" r="18" />
|
||||
<circle class="dark" cx="58" cy="180" r="18" />
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
<HeaderLink href="/">Home</HeaderLink>
|
||||
<HeaderLink href="/blog">Blog</HeaderLink>
|
||||
<HeaderLink href="/about">About</HeaderLink>
|
||||
</div>
|
||||
<div class="fun-quote" style="margin: 0">
|
||||
<span style="font-family: PoetsenOne" class="text-2xl">The QT on Wayland</span>
|
||||
<span style="font-family: PoetsenOne" class="text-2xl">ReLUwU activated</span>
|
||||
</div>
|
||||
<div class="social-links flex space-x-8 items-center">
|
||||
<a href="https://discord.com/users/180472559148597249" target="_blank">
|
||||
<span class="sr-only">Discord</span>
|
||||
<svg width="32" height="32" viewBox="0 0 127.14 96.36">
|
||||
<path
|
||||
d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://anilist.co/user/akemiko" target="_blank">
|
||||
<span class="sr-only">Anilist</span>
|
||||
<svg width="32px" height="32px" viewBox="0 0 32 32">
|
||||
<g id="surface1">
|
||||
<rect rx="8" x="0" y="0" width="32" height="32" style="fill:#000;fill-opacity:1;stroke:none;"/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:#aaa;fill-opacity:1;"
|
||||
d="M 20.121094 20.203125 L 20.121094 8.539062 C 20.121094 7.867188 19.753906 7.5 19.085938 7.5 L 16.808594 7.5 C 16.140625 7.5 15.773438 7.867188 15.773438 8.539062 L 15.773438 14.078125 C 15.773438 14.234375 17.273438 14.957031 17.3125 15.113281 C 18.453125 19.585938 17.558594 23.167969 16.476562 23.335938 C 18.25 23.425781 18.441406 24.277344 17.125 23.695312 C 17.324219 21.308594 18.113281 21.3125 20.375 23.605469 C 20.394531 23.628906 20.839844 24.5625 20.867188 24.5625 L 26.214844 24.5625 C 26.882812 24.5625 27.25 24.195312 27.25 23.523438 L 27.25 21.242188 C 27.25 20.574219 26.882812 20.203125 26.214844 20.203125 Z M 20.121094 20.203125 "/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1;"
|
||||
d="M 10.667969 7.5 L 4.6875 24.5625 L 9.332031 24.5625 L 10.34375 21.609375 L 15.40625 21.609375 L 16.394531 24.5625 L 21.019531 24.5625 L 15.0625 7.5 Z M 11.402344 17.828125 L 12.851562 13.101562 L 14.441406 17.828125 Z M 11.402344 17.828125 "/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://git.mami2.moe/akemi?tab=activity" target="_blank">
|
||||
<span class="sr-only">Forgejo</span>
|
||||
<svg viewBox="0 0 212 212" aria-hidden="true" width="32" height="32">
|
||||
<g transform="translate(6,6)">
|
||||
<path d="M58 168 v-98 a50 50 0 0 1 50-50 h20" style="fill: none; stroke: #aaa; stroke-width: 25" />
|
||||
<path d="M58 168 v-30 a50 50 0 0 1 50-50 h20" style="fill: none; stroke: #000; stroke-width: 25" />
|
||||
<circle cx="142" cy="20" r="18" style="fill: none; stroke: #aaa; stroke-width: 15" />
|
||||
<circle cx="142" cy="88" r="18" style="fill: none; stroke: #000; stroke-width: 15" />
|
||||
<circle cx="58" cy="180" r="18" style="fill: none; stroke: #000; stroke-width: 15" />
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://github.com/aizuko" target="_blank">
|
||||
<span class="sr-only">Github</span>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
|
||||
<path
|
||||
fill="#000"
|
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://codeberg.org/akemi?tab=activity" target="_blank">
|
||||
<span class="sr-only">Codeberg</span>
|
||||
<svg width="32" height="32" aria-hidden="true" viewBox="0 0 24 24" fill="#000">
|
||||
<path
|
||||
d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<HeaderLink href="/about">Discord</HeaderLink>
|
||||
<HeaderLink href="/about">GitHub</HeaderLink>
|
||||
<HeaderLink
|
||||
style="color:white;background-color:black;border-radius:8px;border:2px solid black;padding:2px 8px;text-decoration:none;"
|
||||
href="/">
|
||||
Resume
|
||||
</HeaderLink>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -9,17 +9,17 @@ const { pathname } = Astro.url;
|
|||
const isActive = href === pathname || href === pathname.replace(/\/$/, '');
|
||||
---
|
||||
|
||||
<a href={href} class="hover:underline" {...props}>
|
||||
<a class="header-link" href={href} class="hover:underline" {...props}>
|
||||
<slot />
|
||||
</a>
|
||||
|
||||
<style>
|
||||
a {
|
||||
<style is:inline>
|
||||
a.header-link {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.active {
|
||||
font-weight: bolder;
|
||||
a.header-link:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--accent-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue