86 lines
1.8 KiB
Plaintext
86 lines
1.8 KiB
Plaintext
---
|
|
import type { MarkdownLayoutProps } from "astro";
|
|
import { Font } from "astro:assets";
|
|
import Layout from "./Layout.astro";
|
|
import Navbar from "~/Navbar.astro";
|
|
import Figure from "~/Figure.astro";
|
|
|
|
import border from "$/border.png";
|
|
import frame from "$/frame.png";
|
|
|
|
type Props = MarkdownLayoutProps<{
|
|
avatar?: string;
|
|
avatarText?: string;
|
|
}>;
|
|
|
|
const { frontmatter } = Astro.props;
|
|
---
|
|
<Layout>
|
|
<Fragment slot="head">
|
|
<Font cssVariable="--wondermail" preload />
|
|
</Fragment>
|
|
|
|
<Navbar />
|
|
|
|
<main>
|
|
{frontmatter.avatar && frontmatter.avatarText && (
|
|
<Figure class="avatar" imagePath={frontmatter.avatar} alt={frontmatter.avatarText} />
|
|
)}
|
|
<article>
|
|
<slot />
|
|
</article>
|
|
</main>
|
|
</Layout>
|
|
|
|
<style define:vars={{ borderImage: `url(${border.src})`, frameImage: `url(${frame.src})` }}>
|
|
:root {
|
|
--about-text: #f8f8f8;
|
|
--about-bg: #202020;
|
|
}
|
|
|
|
main {
|
|
font: 2rem var(--pmd-font);
|
|
letter-spacing: 1px;
|
|
margin: 3rem auto;
|
|
max-width: clamp(50ch, 80ch, 100%);
|
|
}
|
|
|
|
article {
|
|
padding: 1rem 1.5rem;
|
|
color: var(--about-text);
|
|
text-shadow: 2px 2px #000;
|
|
background: var(--about-bg);
|
|
border-image: var(--frameImage) 6 9 / 12px 18px / 10px repeat;
|
|
image-rendering: pixelated;
|
|
|
|
h1, h2, h3 {
|
|
font-family: var(--pmd-font);
|
|
border-bottom: 2px solid var(--about-text);
|
|
}
|
|
|
|
a {
|
|
color: var(--about-text);
|
|
|
|
&:hover {
|
|
background-color: var(--about-text);
|
|
color: var(--about-bg);
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
:global(.avatar) {
|
|
width: fit-content;
|
|
margin: 0 auto 2rem;
|
|
border-image: var(--borderImage) 5 4 / 10px 8px / 8px repeat;
|
|
image-rendering: pixelated;
|
|
|
|
img {
|
|
display: grid;
|
|
place-content: center;
|
|
width: 80px;
|
|
height: auto;
|
|
image-rendering: pixelated;
|
|
}
|
|
}
|
|
</style> |