My personal site.
1---
2import Header from "../components/Header.astro";
3---
4
5<html lang="en">
6 <head>
7 <meta charset="utf-8" />
8 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
9 <link rel="icon" href="/favicon.ico" />
10 <link
11 rel="preload"
12 href="/Fraunces.woff2"
13 as="font"
14 type="font/woff2"
15 crossorigin
16 />
17 <meta name="viewport" content="width=device-width" />
18 <meta name="generator" content={Astro.generator} />
19 <title>marco.social</title>
20
21 <style is:global>
22 @font-face {
23 font-family: "Fraunces";
24 src: url("/Fraunces.woff2") format("woff2");
25 font-display: swap;
26 }
27
28 :root {
29 --bg: oklch(97% 0.001 106.424);
30 --fg: oklch(20.8% 0.042 265.755);
31 --hr: color-mix(var(--fg), white 70%);
32 }
33
34 body {
35 background-color: var(--bg);
36 color: var(--fg);
37 font-family: Fraunces;
38 font-weight: 300;
39 font-size: 18px;
40 }
41
42 main {
43 display: flex;
44 flex-direction: column;
45 margin-block: 24px;
46 max-width: 1024px;
47 margin-inline: auto;
48 padding-inline: 12px;
49 }
50
51 strong {
52 font-weight: 500;
53 }
54
55 .sr-only {
56 position: absolute;
57 width: 1px;
58 height: 1px;
59 padding: 0;
60 margin: -1px;
61 overflow: hidden;
62 clip: rect(0, 0, 0, 0);
63 white-space: nowrap;
64 border-width: 0;
65 }
66 </style>
67 </head>
68 <body>
69 <Header />
70 <main>
71 <slot />
72 </main>
73 </body>
74</html>