the home site for me: also iteration 3 or 4 of my site
1<!DOCTYPE html>
2<html>
3 <head>
4 <style>
5 @font-face {
6 font-family: "Maple Mono";
7 src: url("{{fontsPath}}/maple-mono-latin-400-normal.woff2") format("woff2");
8 font-weight: 400;
9 font-style: normal;
10 }
11 @font-face {
12 font-family: "Maple Mono";
13 src: url("{{fontsPath}}/maple-mono-latin-400-italic.woff2") format("woff2");
14 font-weight: 400;
15 font-style: italic;
16 }
17 @font-face {
18 font-family: "Maple Mono";
19 src: url("{{fontsPath}}/maple-mono-latin-700-normal.woff2") format("woff2");
20 font-weight: 700;
21 font-style: normal;
22 }
23 @font-face {
24 font-family: "Maple Mono";
25 src: url("{{fontsPath}}/maple-mono-latin-700-italic.woff2") format("woff2");
26 font-weight: 700;
27 font-style: italic;
28 }
29
30 :root {
31 color-scheme: dark;
32 --purple-night: oklch(18.96% 0.0242 287.67);
33 --ultra-violet: oklch(42.21% 0.0676 297.45);
34 --rose-quartz: oklch(65.32% 0.0585 311.96);
35 --pink-puree: oklch(75.65% 0.0555 290.76);
36 --lavendar-breeze: oklch(91.06% 0.0223 290.76);
37 --purple-gray: oklch(25.63% 0.0002 290.76);
38
39 --bg: var(--purple-night);
40 --bg-light: var(--ultra-violet);
41 --text: var(--lavendar-breeze);
42 --text-light: var(--pink-puree);
43 --accent: var(--rose-quartz);
44 --accent-text: var(--purple-gray);
45 }
46
47 * {
48 margin: 0;
49 padding: 0;
50 box-sizing: border-box;
51 }
52
53 body {
54 width: 1200px;
55 height: 630px;
56 background-color: var(--bg);
57 font-family: "Maple Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
58 font-weight: 600;
59 color: var(--text);
60 position: relative;
61 }
62
63 .container {
64 width: 100%;
65 height: 100%;
66 padding: 3rem;
67 display: flex;
68 align-items: center;
69 justify-content: center;
70 position: relative;
71 }
72
73 .type {
74 position: absolute;
75 top: 3rem;
76 left: 3rem;
77 font-size: 1.1rem;
78 color: var(--text-light);
79 }
80
81 .title {
82 font-size: 3.5rem;
83 font-style: italic;
84 font-weight: 700;
85 color: var(--accent-text);
86 background-color: var(--accent);
87 border-bottom: 5px solid var(--bg-light);
88 border-radius: 0.2em 0.2em 0.27em 0.27em;
89 padding: 0.22em 0.4em;
90 line-height: 1.15;
91 text-align: center;
92 max-width: 900px;
93 }
94
95 .author {
96 position: absolute;
97 bottom: 3rem;
98 left: 3rem;
99 font-size: 1.1rem;
100 color: var(--text-light);
101 }
102 </style>
103 </head>
104 <body>
105 <div class="container">
106 <span class="type">{{type}}</span>
107 <h1 class="title">{{postname}}</h1>
108 <span class="author">by Kieran Klukas</span>
109 </div>
110 </body>
111</html>