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(astro): finish header and footer styling

Browse Source
This commit is contained in:
Stefan Imhoff
2023-02-25 20:29:17 +01:00
parent cda2f1adf8
commit f7d2471bb9
18 changed files with 170 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Backlink.astro
View File

@@ -11,12 +11,12 @@ const { backLink } = Astro.props;
{
backLink && (
<a
class="back-link col-span-1 col-start-1 self-center justify-self-center transition-transform duration-500 ease-in-out hover:-translate-x-1 focus:-translate-x-1 print:hidden"
class="col-span-2 col-start-1 h-clickarea w-clickarea items-center justify-center self-center justify-self-center transition-transform duration-500 ease-in-out hover:-translate-x-1 focus:-translate-x-1 print:hidden md:col-span-1"
href={backLink}
>
<button
aria-label="Back to overview"
class="back-link-button h-clickarea w-clickarea flex cursor-pointer items-center justify-center border-none text-[0]"
class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center border-none text-[0]"
type="button"
>
<Sprite name="ri:arrow-left-line" class="h-icon w-icon" />

12
src/components/Headline.svelte Normal file
View File

@@ -0,0 +1,12 @@
<script lang="ts">
export let as = 'h2';
</script>
<svelte:element
this={as}
class={`text-5 font-black tracking-tight mbe-10 mbs-16 first-of-type:mbs-0 dark:font-extrabold ${
$$props.class || ''
}`}
>
<slot />
</svelte:element>

10
src/components/Legal.astro
View File

@@ -3,11 +3,11 @@ import LegalDate from './LegalDate.svelte';
import { site } from '../data/site';
---
<div class="legal flex flex-1 shrink-0 items-center">
<span class="legal-copyright relative text-[14px] mie-[0.25em] block-start-[1px]">©</span>
<span class="legal-year shrink-0">
<div class="flex flex-1 shrink-0 items-center">
<span class="relative text-[14px] mie-[0.25em] block-start-[1px]">©</span>
<span class="shrink-0">
<LegalDate client:idle />
</span>
<span class="legal-bullet mli-[0.25em]">•</span>
<strong class="legal-author shrink-0 uppercase tracking-wider">{site.author}</strong>
<span class="mli-[0.25em]">•</span>
<strong class="shrink-0 uppercase tracking-wider">{site.author}</strong>
</div>

14
src/components/MainNavigation.astro
View File

@@ -4,18 +4,14 @@ import navigation from '../data/navigation.json';
const currentPath = new URL(Astro.request.url).pathname;
---
<nav
class="navigation col-span-16 col-start-2 self-center md:col-span-14 md:col-start-3"
role="navigation"
>
<ul class="navigation-list flex flex-wrap">
<nav class="col-span-12 col-start-4 self-center md:col-span-14 md:col-start-3" role="navigation">
<ul class="flex flex-wrap">
{
navigation.map(({ title, url }) => (
<li class="navigation-list-item mie-[10px] xs:mie-[15px]">
<li class="mie-[10px] xs:mie-[15px]">
<a
class={`navigation-item-link text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 ${
currentPath === url &&
'active underline !decoration-accent decoration-4'
class={`text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 ${
currentPath === url && 'underline !decoration-accent decoration-4'
}`}
href={url}
>

11
src/components/PageFooter.astro
View File

@@ -1,14 +1,19 @@
---
import RSSLink from './RSSLink.astro';
import Subnavigation from './Subnavigation.astro';
import Legal from './Legal.astro';
import SocialLinks from './SocialLinks.astro';
import UpLink from './UpLink.astro';
---
<footer
class="page-footer bg-shibui-200 mbs-layout pli-halfcolumn pbe-[calc(2.775vw/2)] pbs-halfcolumn border-bs-2 border-bs-shibui-250 dark:bg-shibui-950 dark:border-bs-shibui-850 print:hidden"
class="bg-shibui-200 mbs-layout pis-9 pie-6 pbe-5 pbs-10 border-bs-2 border-bs-shibui-250 dark:bg-shibui-950 dark:border-bs-shibui-850 print:hidden"
>
<div class="meta">Meta Footer</div>
<div class="small flex flex-wrap gap-4 text-[12px]">
<div class="flex flex-col gap-4 mbe-10 sm:flex-row sm:mbe-0">
<RSSLink />
<Subnavigation />
</div>
<div class="flex flex-col flex-wrap text-[12px] sm:flex-row sm:gap-4">
<Legal />
<SocialLinks />
<UpLink />

5
src/components/PageHeader.astro
View File

@@ -10,10 +10,7 @@ export interface Props {
const { backLink } = Astro.props;
---
<header
class="page-header grid grid-cols-18 grid-rows-layout mbe-layout print:hidden"
role="banner"
>
<header class="grid grid-cols-18 grid-rows-layout mbe-layout print:hidden" role="banner">
<Backlink backLink={backLink} />
<MainNavigation />
<ThemeToggle />

10
src/components/PageTitle.svelte Normal file
View File

@@ -0,0 +1,10 @@
<script lang="ts">
export let as = 'h1';
</script>
<svelte:element
this={as}
class={`text-7 font-black tracking-tight mbe-13 dark:font-extrabold ${$$props.class || ''}`}
>
<slot />
</svelte:element>

15
src/components/RSSLink.astro Normal file
View File

@@ -0,0 +1,15 @@
---
import { Sprite } from 'astro-icon';
import Subsubheadline from './Subsubheadline.svelte';
---
<div class="grow mbe-5 sm:mbe-0">
<Subsubheadline>Stay up to date.</Subsubheadline>
<p>
<a href="/rss.xml" rel="nofollow noopener noreferrer external" target="_blank">
<Sprite name="ri:rss-fill" class="h-icon w-icon inline" />
Subscribe via RSS
</a>
</p>
</div>

2
src/components/SocialLinks.astro
View File

@@ -3,7 +3,7 @@ import { Sprite } from 'astro-icon';
import data from '../data/social-links.json';
---
<div class="flex flex-1 justify-center">
<div class="flex flex-1 sm:justify-center">
{
data.map(({ text, url, icon, props = {} }) => (
<a

12
src/components/Subheadline.svelte Normal file
View File

@@ -0,0 +1,12 @@
<script lang="ts">
export let as = 'h3';
</script>
<svelte:element
this={as}
class={`text-4 font-black tracking-tight mbe-8 mbs-14 first-of-type:mbs-0 dark:font-extrabold ${
$$props.class || ''
}`}
>
<slot />
</svelte:element>

40
src/components/Subnavigation.astro Normal file
View File

@@ -0,0 +1,40 @@
---
import data from '../data/subnavigation.json';
const currentPath = new URL(Astro.request.url).pathname;
---
<div class="glow flex gap-12">
<ul>
{
data.main.map(({ title, url }) => (
<li>
<a
href={url}
class={`text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 ${
currentPath === url && 'underline !decoration-accent decoration-4'
}`}
>
{title}
</a>
</li>
))
}
</ul>
<ul class="mie-12 md:mie-16">
{
data.misc.map(({ title, url }) => (
<li>
<a
href={url}
class={`text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 ${
currentPath === url && 'underline !decoration-accent decoration-4'
}`}
>
{title}
</a>
</li>
))
}
</ul>
</div>

12
src/components/Subsubheadline.svelte Normal file
View File

@@ -0,0 +1,12 @@
<script lang="ts">
export let as = 'h4';
</script>
<svelte:element
this={as}
class={`text-3 font-black tracking-tight mbe-8 mbs-14 first-of-type:mbs-0 dark:font-extrabold ${
$$props.class || ''
}`}
>
<slot />
</svelte:element>

4
src/components/ThemeToggle.astro
View File

@@ -3,11 +3,11 @@ import { Sprite } from 'astro-icon';
---
<theme-toggle
class="col-start-18 flex h-clickarea w-clickarea items-center self-center justify-center justify-self-center print:hidden"
class="col-start-17 md:col-start-18 md:col-span-1 col-span-2 flex h-clickarea w-clickarea items-center self-center justify-center justify-self-center print:hidden"
>
<button
aria-label="Switch color theme"
class="theme-toggle h-clickarea w-clickarea group flex cursor-pointer items-center justify-center self-center border-0 text-[0]"
class="group flex h-clickarea w-clickarea cursor-pointer items-center justify-center self-center border-0 text-[0]"
>
<Sprite
name="circle"

4
src/components/UpLink.astro
View File

@@ -5,12 +5,12 @@ import { Sprite } from 'astro-icon';
<div class="flex flex-1 justify-end">
<a
id="up-link"
class="up-link transition-transform duration-500 ease-in-out hover:-translate-y-1 focus:-translate-y-1"
class="transition-transform duration-500 ease-in-out hover:-translate-y-1 focus:-translate-y-1"
href="#top"
>
<button
aria-label="Back to top"
class="up-link-button flex h-clickarea w-clickarea cursor-pointer items-center justify-center"
class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center"
>
<Sprite name="ri:arrow-up-line" class="h-icon-small w-icon-small" />
</button>

4
src/data/navigation.json
View File

@@ -10,9 +10,5 @@
{
"title": "Journal",
"url": "/journal/"
},
{
"title": "Projects",
"url": "/projects/"
}
]

42
src/data/subnavigation.json Normal file
View File

@@ -0,0 +1,42 @@
{
"main": [
{
"title": "About",
"url": "/about/"
},
{
"title": "Journal",
"url": "/journal/"
},
{
"title": "Projects",
"url": "/projects/"
},
{
"title": "Sketchnotes",
"url": "/sketchnotes/"
},
{
"title": "Haiku",
"url": "/haiku/"
}
],
"misc": [
{
"title": "Colophon",
"url": "/colophon/"
},
{
"title": "Tools",
"url": "/tools/"
},
{
"title": "Now",
"url": "/now/"
},
{
"title": "Imprint",
"url": "/imprint/"
}
]
}