110 lines
2.2 KiB
Text
110 lines
2.2 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
|
|
ogImage?: string
|
|
}
|
|
|
|
const { title, description, ogImage } = Astro.props
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<Head title={title} description={description} ogImage={ogImage} />
|
|
|
|
<body>
|
|
<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-faded);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
background-position-y: 0%;
|
|
}
|
|
50% {
|
|
background-position-y: 80%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style is:global>
|
|
main {
|
|
margin: auto;
|
|
max-width: var(--content-width);
|
|
padding: 1em;
|
|
}
|
|
|
|
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(--color-brand-blue-1);
|
|
}
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|