130 lines
2.9 KiB
Text
130 lines
2.9 KiB
Text
---
|
|
import "./reset.css";
|
|
import Head from "../components/Head.astro";
|
|
import Nav from "../components/Nav.astro";
|
|
import type { Link } from "../components/Nav.astro";
|
|
export interface Props {
|
|
title?: string;
|
|
description?: string;
|
|
}
|
|
|
|
const { title, description } = Astro.props;
|
|
const links: Link[] = [
|
|
{
|
|
url: "https://ayos.blog",
|
|
icon: "blog",
|
|
},
|
|
{
|
|
url: "https://ayco.io/@ayo",
|
|
icon: "mastodon",
|
|
text: "social"
|
|
},
|
|
{
|
|
url: "https://ayco.io/gh",
|
|
icon: "github",
|
|
},
|
|
{
|
|
url: "https://codepen.io/ayoayco-the-styleful",
|
|
icon: "codepen",
|
|
text: "pens"
|
|
}
|
|
];
|
|
---
|
|
|
|
<!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.20vw + 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-text: hsl(12, 5%, 4%);
|
|
--color-bg: hsl(10, 21%, 95%);
|
|
--color-border: hsl(17, 24%, 90%);
|
|
--color-link: var(--color-brand-blue-2);
|
|
|
|
--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);
|
|
}
|
|
|
|
html, body, * {
|
|
font-family: system-ui, sans-serif;
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text);
|
|
background-color: var(--color-bg);
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
a {
|
|
font-weight: 900;
|
|
color: var(--color-link);
|
|
border-radius: 0.4rem;
|
|
}
|
|
|
|
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;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|