136 lines
2.9 KiB
Text
136 lines
2.9 KiB
Text
---
|
|
import './variables.css'
|
|
import './reset.css'
|
|
import './common.css'
|
|
import Head from '../components/Head.astro'
|
|
import Nav from '../components/Nav.astro'
|
|
import { links } from '../constants/links'
|
|
export interface Props {
|
|
title?: string
|
|
description?: string
|
|
}
|
|
|
|
const { title, description } = Astro.props
|
|
import { getImage } from 'astro:assets'
|
|
|
|
// fetch mastodon account
|
|
const response = await fetch(
|
|
'https://social.ayco.io/api/v1/accounts/lookup?acct=ayo'
|
|
)
|
|
const data = await response.json()
|
|
const { avatar } = data
|
|
const ogImage = await getImage({
|
|
src: avatar,
|
|
width: 400,
|
|
height: 400,
|
|
format: 'png',
|
|
})
|
|
const ogFileType = 'image/png'
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<Head
|
|
title={title}
|
|
description={description}
|
|
ogImage={ogImage.src}
|
|
ogFileType={ogFileType}
|
|
/>
|
|
|
|
<body class="h-card">
|
|
<Nav links={links} />
|
|
<slot />
|
|
<style>
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
html,
|
|
body,
|
|
* {
|
|
font-family: system-ui, sans-serif;
|
|
font-size: var(--font-size-base);
|
|
color: var(--text-color-dark);
|
|
background-color: var(--text-color-light);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
html,
|
|
body,
|
|
* {
|
|
background: var(--bg-darker);
|
|
color: var(--text-color-light);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
background-position-y: 0%;
|
|
}
|
|
50% {
|
|
background-position-y: 80%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style is:global>
|
|
main,
|
|
footer {
|
|
margin: auto;
|
|
max-width: var(--content-width);
|
|
padding: 1em 1em 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
code {
|
|
font-family:
|
|
Menlo,
|
|
Monaco,
|
|
Lucida Console,
|
|
Liberation Mono,
|
|
DejaVu Sans Mono,
|
|
Bitstream Vera Sans Mono,
|
|
Courier New,
|
|
monospace;
|
|
}
|
|
|
|
p,
|
|
img,
|
|
table,
|
|
ul {
|
|
margin: 1em 0;
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
.text-gradient {
|
|
font-weight: 900;
|
|
background-image: var(--ayo-gradient);
|
|
animation: pulse 4s ease-in-out infinite;
|
|
background-size: 500% 500%;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-size: 100% 200%;
|
|
background-position-y: 100%;
|
|
border-radius: 0.4rem;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
a {
|
|
color: var(--text-color-light);
|
|
}
|
|
}
|
|
</style>
|
|
<!-- Anonymous RUM for web perf by Cloudflare Web Analytics -->
|
|
<script
|
|
defer
|
|
src="https://static.cloudflareinsights.com/beacon.min.js"
|
|
data-cf-beacon='{"token": "a39ad600e67a4db8960c639d2552435c"}'></script>
|
|
<!-- End Cloudflare Web Analytics -->
|
|
</body>
|
|
</html>
|