131 lines
2.9 KiB
Text
131 lines
2.9 KiB
Text
---
|
|
import "./reset.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;
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<Head title={title} description={description} />
|
|
|
|
<body>
|
|
<Nav links={links} />
|
|
<slot />
|
|
<style>
|
|
:root {
|
|
--content-width: 700px;
|
|
--font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem);
|
|
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
|
|
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
|
|
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
|
|
|
|
--color-border: hsl(17, 24%, 90%);
|
|
--color-link: var(--color-brand-blue-3);
|
|
|
|
--color-brand-blue-1: #3054bf;
|
|
--color-brand-blue-2: #203880;
|
|
--color-brand-blue-3: #416fff;
|
|
--color-brand-blue-4: #101c40;
|
|
--color-brand-blue-5: #3964e6;
|
|
|
|
--color-brand-complement: orange;
|
|
|
|
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
|
|
--text-color-dark: black;
|
|
--text-color-light: #f8f9fa;
|
|
|
|
--bg-dark: #343a40;
|
|
--bg-darker: #212529;
|
|
--bg-darkest: #000;
|
|
}
|
|
|
|
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 {
|
|
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-complement);
|
|
}
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|