kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 12:05:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add new logo, new theme switcher and realign navigation items

Browse Source
This commit is contained in:
Stefan Imhoff
2026-01-28 15:22:24 +01:00
committed by Stefan Imhoff
parent 2269a23f3c
commit 7ca011742c
22 changed files with 112 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Logo.astro Normal file
View File

@@ -0,0 +1,11 @@
---
import { Hanko } from './icons';
import Link from './Link.astro';
---
<Link aria-label="To Homepage" class="group inline-flex cursor-pointer border-0 text-[0]" href="/">
<Hanko
aria-hidden="true"
className="icon h-[clamp(40px,_3vw,_55px)] w-[clamp(40px,_3vw,_55px)] transition-all duration-500 ease-in-out group-hover:scale-125 group-hover:fill-accent group-hover:drop-shadow-[0_0_0.5rem_#921705] group-focus:scale-125 group-focus:fill-accent group-focus:drop-shadow-[0_0_0.5rem_#921705] group-active:scale-100"
/>
</Link>

42
src/components/MainNavigation.astro
View File

@@ -2,28 +2,24 @@
import Link from './Link.astro';
import navigation from '../data/navigation.json';
import SearchLink from './SearchLink.astro';
---
<nav
class="navigation col-span-12 col-start-4 flex items-center self-center md:col-span-14 md:col-start-3"
role="navigation"
aria-label="Main"
>
<ul class="flex flex-wrap">
{
navigation.map(({ title, url }) => (
<li class="mie-[10px] xs:mie-[15px]">
<Link
class="text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 focus:underline focus:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 dark:focus:decoration-shibui-100/20"
data-umami-event={title}
href={url}
>
{title}
</Link>
</li>
))
}
</ul>
<SearchLink />
</nav>
<ul class="flex">
<nav class="navigation hidden md:flex" role="navigation" aria-label="Main">
<ul class="flex flex-wrap">
{
navigation.map(({ title, url }) => (
<li class="mie-[10px] xs:mie-[15px]">
<Link
class="text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 focus:underline focus:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 dark:focus:decoration-shibui-100/20"
data-umami-event={title}
href={url}
>
{title}
</Link>
</li>
))
}
</ul>
</nav>
</ul>

17
src/components/PageHeader.astro
View File

@@ -1,6 +1,9 @@
---
import MainNavigation from '../components/MainNavigation.astro';
import ThemeToggle from '../components/ThemeToggle.astro';
import Logo from '../components/Logo.astro';
import SearchLink from './SearchLink.astro';
export interface Props {
class?: string;
@@ -17,6 +20,16 @@ const { class: className, navigation = true } = Astro.props;
]}
role="banner"
>
{navigation && <MainNavigation />}
<ThemeToggle />
<div
class="navigation col-span-5 col-start-2 flex items-center justify-start md:col-span-2 md:col-start-1 md:mis-5 lg:col-span-1 lg:m-0 lg:justify-center"
>
<Logo />
</div>
<div
class="col-start-7 col-end-18 flex items-center justify-end md:col-start-3 md:col-end-19 md:mie-5"
>
{navigation && <MainNavigation />}
<SearchLink />
<ThemeToggle />
</div>
</header>

2
src/components/SearchLink.astro
View File

@@ -5,7 +5,7 @@ import Link from './Link.astro';
<Link
aria-label="Search the website (/)"
class="col-span-2 col-start-1 h-clickarea w-clickarea scale-75 items-center justify-center self-center justify-self-center transition-transform duration-500 ease-in-out hover:scale-90 focus:scale-90 md:col-span-1 print:hidden"
class="h-clickarea w-clickarea scale-75 transition-transform duration-500 ease-in-out hover:scale-90 focus:scale-90 md:col-span-1 print:hidden"
href="#search"
id="search-link"
title="Search the website (/)"

1
src/components/ThemeProvider.astro
View File

@@ -19,6 +19,7 @@
const isDark = document.documentElement.classList.contains('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class'],

49
src/components/ThemeToggle.astro
View File

@@ -1,44 +1,47 @@
---
import { Circle } from './icons';
import { Moon, Sun } from './icons';
---
<theme-toggle
class="col-span-2 col-start-17 flex h-clickarea w-clickarea items-center justify-center self-center justify-self-center md:col-span-1 md:col-start-18 print:hidden"
>
<theme-toggle class="flex h-clickarea w-clickarea print:hidden">
<button
aria-label="Switch color theme"
class="group flex h-clickarea w-clickarea cursor-pointer items-center justify-center self-center border-0 text-[0]"
data-umami-event="Switch color theme"
>
<Circle
aria-hidden="true"
className="icon h-icon w-icon transition-transform duration-500 ease-in-out group-hover:scale-125 group-focus:scale-125"
/>
<div class="h-icon-small w-icon-small">
<Sun
id="theme-sun"
aria-hidden="true"
className="icon h-icon-small w-icon-small transition-transform duration-500 ease-in-out group-hover:scale-125 group-focus:scale-125 dark:hidden"
/>
<Moon
id="theme-moon"
aria-hidden="true"
className="icon hidden h-icon-small w-icon-small transition-transform duration-500 ease-in-out group-hover:scale-125 group-focus:scale-125 dark:block"
/>
</div>
</button>
</theme-toggle>
<script>
function initializeThemeToggle() {
// Remove no-js class after transitions
document.documentElement.classList.remove('no-js');
// Only define the custom element if it hasn't been defined yet
if (!customElements.get('theme-toggle')) {
class ThemeToggle extends HTMLElement {
constructor() {
super();
const button = this.querySelector('button')!;
const setTheme = (dark: boolean) => {
document.documentElement.classList[dark ? 'add' : 'remove']('dark');
button.setAttribute('aria-pressed', String(dark));
};
button.addEventListener('click', () => {
setTheme(!this.isDark());
const newDark = !this.isDark();
document.documentElement.classList[newDark ? 'add' : 'remove']('dark');
button.setAttribute('aria-pressed', String(newDark));
if (typeof localStorage !== 'undefined') {
localStorage.setItem('theme', newDark ? 'dark' : 'light');
}
button.blur();
});
setTheme(this.isDark());
button.setAttribute('aria-pressed', String(this.isDark()));
}
isDark() {
@@ -50,16 +53,6 @@ import { Circle } from './icons';
}
}
// Run on initial load
initializeThemeToggle();
// Re-run on view transitions
document.addEventListener('astro:after-swap', initializeThemeToggle);
</script>
<style>
/* Turn off toggle if JavaScript is disabled */
:global(.no-js) theme-toggle {
display: none;
}
</style>

16
src/components/icons/Circle.tsx
View File

@@ -1,16 +0,0 @@
import type { SVGProps } from 'react';
const Circle = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
fillRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit={2}
clipRule="evenodd"
viewBox="0 0 24 24"
{...props}
>
<circle cx={12} cy={12} r={5} />
</svg>
);
export default Circle;

7
src/components/icons/Copyright.tsx Normal file
View File

@@ -0,0 +1,7 @@
import type { SVGProps } from 'react';
const Copyright = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M16.288 9.428A4.999 4.999 0 0 0 7 12a4.999 4.999 0 0 0 9.288 2.572l-1.715-1.028A3 3 0 1 1 12 9c1.093 0 2.05.584 2.573 1.457zM22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10 10-4.48 10-10M4 12c0-4.42 3.58-8 8-8s8 3.58 8 8-3.58 8-8 8-8-3.58-8-8" />
</svg>
);
export default Copyright;

3
src/components/icons/Hanko.tsx Normal file
View File

@@ -0,0 +1,3 @@
import type { SVGProps } from "react";
const Hanko = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit={2} clipRule="evenodd" viewBox="0 0 24 24" {...props}><path fill="none" d="M0 0h24v24H0z" /><path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12S0 18.623 0 12 5.377 0 12 0m.945 23.127a11 11 0 0 0 2.005-.355c-.259-.935-.513-2.338-.578-3.826-.587.519-1.396.677-2.255.705a7.6 7.6 0 0 1-.898 1.744q.15.191.326.39c.51.573.986.988 1.224 1.195.042.037.109.092.176.147m1.94-18.383c-.105-1.446.007-2.792.15-3.493l-.194-.052c-.314.605-.832 1.12-1.474 1.56.234.562.762 1.203 1.224 1.696.092.098.194.197.293.289m3.85-1.65a11.2 11.2 0 0 0-2.516-1.435c-.196 1.032-.286 3.548.371 5.469.385 1.126 1.038 2.059 2.189 2.185l-.056-6.161q0-.03.011-.058m-2.598 19.28a11.2 11.2 0 0 0 2.746-1.583l-.071-7.857c-1.559.13-2.404 1.136-2.825 2.443-.731 2.268-.294 5.368.15 6.997m3.99-2.718a11.2 11.2 0 0 0 2.265-3.563c-.02-.148-.047-.333-.061-.425-.085-.54-.193-1.414-.862-2.033-.323-.298-.775-.527-1.405-.639zM21.92 6.871a11.2 11.2 0 0 0-1.938-2.677l.048 5.08c.524-.07.922-.229 1.213-.487.396-.352.605-.864.673-1.512.033-.255.004-.404.004-.404M9.607 13.399c-.031.665-.225 1.533-1.283 2.279-.49.346-.957.535-.896 1.29.047.58.19.947.444 1.16.257.216.59.278.94.29-.031-.997.088-1.895.114-2.087a.625.625 0 0 1 1.24.166c-.026.187-.152 1.12-.095 2.103.034.593.127 1.21.383 1.657l.002.003c.817-1.415.843-2.63.743-3.8a.625.625 0 0 1 1.246-.107c.056.662.077 1.336-.022 2.043.655-.044 1.235-.234 1.474-.974.352-1.087-.712-1.647-.821-1.713-.509-.307-.835-.58-1.07-.9-.261-.357-.41-.78-.534-1.425-.362.021-.926.03-1.865.015m3.075-.318c.073.441.151.741.333.989.152.207.376.37.706.568.095.057.556.333.943.82a7 7 0 0 1 .207-.681c-.427-.644-.941-1.494-1.469-2.243a2.6 2.6 0 0 1-.72.547m10.36.599a11.2 11.2 0 0 0-.32-4.81q-.247.494-.649.852c-.474.42-1.13.708-2.032.807l.011 1.2c1.047.143 1.762.523 2.265.988.317.293.55.624.724.963m-8.945-2.316c.483.644.983 1.433 1.42 2.114.695-1.021 1.747-1.709 3.283-1.799l-.01-1.108c-1.756-.104-2.813-1.374-3.382-3.038a9 9 0 0 1-.302-1.125l-.167-.073c-.198-.066-.722-.451-1.26-1.025-.517-.552-1.061-1.27-1.384-1.933-.513.252-1.062.475-1.608.68l.022.073c.082.277.196.61.375.828.264.321.718.611 1.147.782a.625.625 0 0 1-.462 1.162c-.622-.248-1.267-.684-1.65-1.15-.279-.339-.477-.854-.605-1.275a46 46 0 0 0-1.036.373 1.7 1.7 0 0 0-.51.301c-.212.186-.124.472-.02.737.163.412.466.803.71 1 .15.12.23.296.233.476.968-.073 1.967-.12 2.815-.008.935.123 1.7.448 2.158 1.028.462.584.663 1.457.301 2.761a3 3 0 0 1-.068.219c.002.003.005.007 0 0m0 0c-.003-.003-.005-.007 0 0m-7.264-6.79q.122-.195.312-.364c.26-.227.567-.406.89-.529 1.187-.45 2.797-.913 4.075-1.616.577-.317 1.088-.678 1.424-1.127A11 11 0 0 0 12 .833C5.837.833.834 5.837.834 12c0 2.029.542 3.932 1.49 5.573.528-6.468.582-10.617.71-11.081a3.7 3.7 0 0 1 .459-1.025c.235-.35.567-.661.991-.804.312-.105.337-.085 2.35-.089m-3.4 14.585a11.15 11.15 0 0 0 7.663 3.971 10.5 10.5 0 0 1-1.727-2.253c-.2-.347-.336-.77-.425-1.218-.693-.02-1.37-.148-1.876-.574-.45-.378-.803-.989-.886-2.017-.05-.616.061-1.044.28-1.387h-.667c.03.227.048.471.037.693-.021.406-.151.75-.356.96-.41.418-.971.556-1.546.522a3 3 0 0 1-.372-.044l-.072.86c-.009.098-.04.364-.053.487M7.2 14.946q.191-.141.403-.29c.578-.407.727-.883.759-1.284l-.712-.02a.625.625 0 0 1 .038-1.25c3.605.11 3.85.06 4.178-.035a1.44 1.44 0 0 0 .757-.533c-.195-.215-.385-.385-.57-.48-.296-.151-.786-.21-1.347-.252-.984-.072-2.16-.045-3.065-.067a.625.625 0 0 1 .03-1.25c.922.022 2.122-.003 3.126.07.764.056 1.424.18 1.826.387q.221.114.457.312c.068-.482.006-.837-.198-1.095-.279-.352-.771-.488-1.34-.563-.963-.127-2.135-.023-3.206.066a.625.625 0 0 1-.6-.922l-.065-.061H6.12c.02.145.034.297.04.444.01.305-.027.594-.113.813-.154.395-.482.645-.854.775a2.8 2.8 0 0 1-.937.128 4 4 0 0 1-.196-.011l-.033.7h2.637a.625.625 0 0 1 0 1.25h-.79c.03.227.048.472.037.694-.021.405-.151.75-.356.959-.41.419-.971.556-1.546.523a3 3 0 0 1-.17-.015l-.032.492h2.778c.308 0 .563.223.616.515M6.82 6.43a3 3 0 0 1-.187-.605c-.72-.002-1.13-.009-1.387-.009-.212 0-.264-.001-.364.033-.158.053-.265.186-.353.316a2 2 0 0 0-.147.265zM4.16 7.68q-.02.376-.044.897c.054.007.112.011.185.014.037.001.208.009.389-.033a1 1 0 0 0 .124-.04c.024-.01.058-.01.068-.037.05-.127.032-.311.015-.49a4 4 0 0 0-.041-.311zm-.44 8.002-.064.88.117.021c.272.045.576.085.782-.097.007-.048.033-.235.028-.354a4 4 0 0 0-.05-.45zm.243-3.902-.05.91c.255.04.53.062.72-.107.008-.048.034-.234.029-.354a4 4 0 0 0-.05-.45z" /></svg>;
export default Hanko;

16
src/components/icons/Logo.tsx
View File

@@ -1,16 +0,0 @@
import type { SVGProps } from 'react';
const Logo = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit={2}
clipRule="evenodd"
viewBox="0 0 24 24"
{...props}
>
<path fill="none" d="M0 0h24v24H0z" />
<path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12S0 18.623 0 12 5.377 0 12 0m.945 23.127a11 11 0 0 0 2.005-.355c-.259-.935-.513-2.338-.578-3.826-.587.519-1.396.677-2.255.705a7.6 7.6 0 0 1-.898 1.744q.15.191.326.39c.51.573.986.988 1.224 1.195.042.037.109.092.176.147m1.94-18.383c-.105-1.446.007-2.792.15-3.493l-.194-.052c-.314.605-.832 1.12-1.474 1.56.234.562.762 1.203 1.224 1.696.092.098.194.197.293.289m3.85-1.65a11.2 11.2 0 0 0-2.516-1.435c-.196 1.032-.286 3.548.371 5.469.385 1.126 1.038 2.059 2.189 2.185l-.056-6.161q0-.03.011-.058m-2.598 19.28a11.2 11.2 0 0 0 2.746-1.583l-.071-7.857c-1.559.13-2.404 1.136-2.825 2.443-.731 2.268-.294 5.368.15 6.997m3.99-2.718a11.2 11.2 0 0 0 2.265-3.563c-.02-.148-.047-.333-.061-.425-.085-.54-.193-1.414-.862-2.033-.323-.298-.775-.527-1.405-.639zM21.92 6.871a11.2 11.2 0 0 0-1.938-2.677l.048 5.08c.524-.07.922-.229 1.213-.487.396-.352.605-.864.673-1.512.033-.255.004-.404.004-.404M9.607 13.399c-.031.665-.225 1.533-1.283 2.279-.49.346-.957.535-.896 1.29.047.58.19.947.444 1.16.257.216.59.278.94.29-.031-.997.088-1.895.114-2.087a.625.625 0 0 1 1.24.166c-.026.187-.152 1.12-.095 2.103.034.593.127 1.21.383 1.657l.002.003c.817-1.415.843-2.63.743-3.8a.625.625 0 0 1 1.246-.107c.056.662.077 1.336-.022 2.043.655-.044 1.235-.234 1.474-.974.352-1.087-.712-1.647-.821-1.713-.509-.307-.835-.58-1.07-.9-.261-.357-.41-.78-.534-1.425-.362.021-.926.03-1.865.015m3.075-.318c.073.441.151.741.333.989.152.207.376.37.706.568.095.057.556.333.943.82a7 7 0 0 1 .207-.681c-.427-.644-.941-1.494-1.469-2.243a2.6 2.6 0 0 1-.72.547m10.36.599a11.2 11.2 0 0 0-.32-4.81q-.247.494-.649.852c-.474.42-1.13.708-2.032.807l.011 1.2c1.047.143 1.762.523 2.265.988.317.293.55.624.724.963m-8.945-2.316c.483.644.983 1.433 1.42 2.114.695-1.021 1.747-1.709 3.283-1.799l-.01-1.108c-1.756-.104-2.813-1.374-3.382-3.038a9 9 0 0 1-.302-1.125l-.167-.073c-.198-.066-.722-.451-1.26-1.025-.517-.552-1.061-1.27-1.384-1.933-.513.252-1.062.475-1.608.68l.022.073c.082.277.196.61.375.828.264.321.718.611 1.147.782a.625.625 0 0 1-.462 1.162c-.622-.248-1.267-.684-1.65-1.15-.279-.339-.477-.854-.605-1.275a46 46 0 0 0-1.036.373 1.7 1.7 0 0 0-.51.301c-.212.186-.124.472-.02.737.163.412.466.803.71 1 .15.12.23.296.233.476.968-.073 1.967-.12 2.815-.008.935.123 1.7.448 2.158 1.028.462.584.663 1.457.301 2.761a3 3 0 0 1-.068.219c.002.003.005.007 0 0m0 0c-.003-.003-.005-.007 0 0m-7.264-6.79q.122-.195.312-.364c.26-.227.567-.406.89-.529 1.187-.45 2.797-.913 4.075-1.616.577-.317 1.088-.678 1.424-1.127A11 11 0 0 0 12 .833C5.837.833.834 5.837.834 12c0 2.029.542 3.932 1.49 5.573.528-6.468.582-10.617.71-11.081a3.7 3.7 0 0 1 .459-1.025c.235-.35.567-.661.991-.804.312-.105.337-.085 2.35-.089m-3.4 14.585a11.15 11.15 0 0 0 7.663 3.971 10.5 10.5 0 0 1-1.727-2.253c-.2-.347-.336-.77-.425-1.218-.693-.02-1.37-.148-1.876-.574-.45-.378-.803-.989-.886-2.017-.05-.616.061-1.044.28-1.387h-.667c.03.227.048.471.037.693-.021.406-.151.75-.356.96-.41.418-.971.556-1.546.522a3 3 0 0 1-.372-.044l-.072.86c-.009.098-.04.364-.053.487M7.2 14.946q.191-.141.403-.29c.578-.407.727-.883.759-1.284l-.712-.02a.625.625 0 0 1 .038-1.25c3.605.11 3.85.06 4.178-.035a1.44 1.44 0 0 0 .757-.533c-.195-.215-.385-.385-.57-.48-.296-.151-.786-.21-1.347-.252-.984-.072-2.16-.045-3.065-.067a.625.625 0 0 1 .03-1.25c.922.022 2.122-.003 3.126.07.764.056 1.424.18 1.826.387q.221.114.457.312c.068-.482.006-.837-.198-1.095-.279-.352-.771-.488-1.34-.563-.963-.127-2.135-.023-3.206.066a.625.625 0 0 1-.6-.922l-.065-.061H6.12c.02.145.034.297.04.444.01.305-.027.594-.113.813-.154.395-.482.645-.854.775a2.8 2.8 0 0 1-.937.128 4 4 0 0 1-.196-.011l-.033.7h2.637a.625.625 0 0 1 0 1.25h-.79c.03.227.048.472.037.694-.021.405-.151.75-.356.959-.41.419-.971.556-1.546.523a3 3 0 0 1-.17-.015l-.032.492h2.778c.308 0 .563.223.616.515M6.82 6.43a3 3 0 0 1-.187-.605c-.72-.002-1.13-.009-1.387-.009-.212 0-.264-.001-.364.033-.158.053-.265.186-.353.316a2 2 0 0 0-.147.265zM4.16 7.68q-.02.376-.044.897c.054.007.112.011.185.014.037.001.208.009.389-.033a1 1 0 0 0 .124-.04c.024-.01.058-.01.068-.037.05-.127.032-.311.015-.49a4 4 0 0 0-.041-.311zm-.44 8.002-.064.88.117.021c.272.045.576.085.782-.097.007-.048.033-.235.028-.354a4 4 0 0 0-.05-.45zm.243-3.902-.05.91c.255.04.53.062.72-.107.008-.048.034-.234.029-.354a4 4 0 0 0-.05-.45z" />
</svg>
);
export default Logo;

7
src/components/icons/Menu.tsx Normal file
View File

@@ -0,0 +1,7 @@
import type { SVGProps } from 'react';
const Menu = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M3 4h18v2H3zm0 7h18v2H3zm0 7h18v2H3z" />
</svg>
);
export default Menu;

7
src/components/icons/Moon.tsx Normal file
View File

@@ -0,0 +1,7 @@
import type { SVGProps } from 'react';
const Moon = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.98 6.98 0 0 0 10 7m-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 8 8 0 0 0 4 12" />
</svg>
);
export default Moon;

7
src/components/icons/Sun.tsx Normal file
View File

@@ -0,0 +1,7 @@
import type { SVGProps } from 'react';
const Sun = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12m0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8M11 1h2v3h-2zm0 19h2v3h-2zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414zm2.121-14.85 1.414 1.415-2.121 2.121-1.414-1.414zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414zM23 11v2h-3v-2zM4 11v2H1v-2z" />
</svg>
);
export default Sun;

7
src/components/icons/index.ts
View File

@@ -3,15 +3,18 @@ export { default as ArrowLeftS } from './ArrowLeftS.tsx';
export { default as ArrowRight } from './ArrowRight.tsx';
export { default as ArrowRightS } from './ArrowRightS.tsx';
export { default as ArrowUp } from './ArrowUp.tsx';
export { default as Circle } from './Circle.tsx';
export { default as Close } from './Close.tsx';
export { default as Copyright } from './Copyright.tsx';
export { default as Download } from './Download.tsx';
export { default as Github } from './Github.tsx';
export { default as Hanko } from './Hanko.tsx';
export { default as Instagram } from './Instagram.tsx';
export { default as Logo } from './Logo.tsx';
export { default as Mail } from './Mail.tsx';
export { default as MailSend } from './MailSend.tsx';
export { default as Menu } from './Menu.tsx';
export { default as Moon } from './Moon.tsx';
export { default as Rss } from './Rss.tsx';
export { default as Search } from './Search.tsx';
export { default as Sun } from './Sun.tsx';
export { default as Twitter } from './Twitter.tsx';
export { default as TwitterX } from './TwitterX.tsx';

4
src/data/navigation.json
View File

@@ -1,8 +1,4 @@
[
{
"title": "Home",
"url": "/"
},
{
"title": "About",
"url": "/about/"

1
src/icons/circle.svg
View File

@@ -1 +0,0 @@
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><circle cx="12" cy="12" r="5"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 204 B

1
src/icons/copyright.svg Executable file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.2877 9.42773C15.413 7.97351 13.8195 7 12 7 9.23999 7 7 9.23999 7 12 7 14.76 9.23999 17 12 17 13.8195 17 15.413 16.0265 16.2877 14.5723L14.5729 13.5442C14.0483 14.4166 13.0927 15 12 15 10.3425 15 9 13.6575 9 12 9 10.3425 10.3425 9 12 9 13.093 9 14.0491 9.58386 14.5735 10.4568L16.2877 9.42773ZM22 12C22 6.47998 17.52 2 12 2 6.47998 2 2 6.47998 2 12 2 17.52 6.47998 22 12 22 17.52 22 22 17.52 22 12ZM4 12C4 7.57996 7.57996 4 12 4 16.42 4 20 7.57996 20 12 20 16.42 16.42 20 12 20 7.57996 20 4 16.42 4 12Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 609 B

0
src/icons/logo.svg → src/icons/hanko.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

1
src/icons/menu.svg Executable file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 152 B

1
src/icons/moon.svg Executable file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27098 10 5.04157 10 7ZM4 12C4 16.4183 7.58172 20 12 20C15.0583 20 17.7158 18.2839 19.062 15.7621C18.3945 15.9187 17.7035 16 17 16C12.0294 16 8 11.9706 8 7C8 6.29648 8.08133 5.60547 8.2379 4.938C5.71611 6.28423 4 8.9417 4 12Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 553 B

1
src/icons/sun.svg Executable file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 719 B

4
src/styles/global.css
View File

@@ -204,6 +204,10 @@
@apply underline !decoration-accent decoration-4;
}
.navigation .is-active svg {
@apply fill-accent;
}
.image-shadow {
@apply relative transition-transform duration-500 ease-in-out;