mirror of
https://github.com/kogakure/website-astro-stefanimhoff.de.git
synced 2026-02-03 20:15:27 +00:00
feat(astro): finish header and footer styling
This commit is contained in:
Stefan Imhoff
@@ -10,7 +10,6 @@ crossorigin
|
||||
cssnano
|
||||
evenodd
|
||||
favicons
|
||||
halfcolumn
|
||||
linejoin
|
||||
lucida
|
||||
menlo
|
||||
|
||||
@@ -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
12
src/components/Headline.svelte
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
>
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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
10
src/components/PageTitle.svelte
Normal 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
15
src/components/RSSLink.astro
Normal 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>
|
||||
@@ -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
12
src/components/Subheadline.svelte
Normal 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
40
src/components/Subnavigation.astro
Normal 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
12
src/components/Subsubheadline.svelte
Normal 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>
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -10,9 +10,5 @@
|
||||
{
|
||||
"title": "Journal",
|
||||
"url": "/journal/"
|
||||
},
|
||||
{
|
||||
"title": "Projects",
|
||||
"url": "/projects/"
|
||||
}
|
||||
]
|
||||
|
||||
42
src/data/subnavigation.json
Normal file
42
src/data/subnavigation.json
Normal 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/"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -40,7 +40,7 @@ module.exports = {
|
||||
18: 'repeat(18, minmax(0, 1fr))', // --grid-fullsize
|
||||
},
|
||||
gridTemplateRows: ({ theme }) => ({
|
||||
layout: `clamp(3rem, ${theme('spacing.layout')}, 9rem)`,
|
||||
layout: `clamp(3rem, ${theme('spacing.column')}, 9rem)`,
|
||||
}),
|
||||
columns: {
|
||||
13: '13',
|
||||
@@ -107,7 +107,6 @@ module.exports = {
|
||||
19: 'clamp(7.43rem, 15.9vw, 8.916rem)', // --space-19
|
||||
20: 'clamp(8.916rem, 19.08vw, 10.699rem)', // --space-20
|
||||
column: '5.55vw', // --space-55 TODO: new name, e.g. spacing-grid
|
||||
halfcolumn: '2.775vw',
|
||||
layout: 'clamp(1.5rem, 5.55vw, 4.5rem)',
|
||||
icon: '24px',
|
||||
'icon-small': '20px',
|
||||
|
||||
Reference in New Issue
Block a user