the home site for me: also iteration 3 or 4 of my site
dunkirk.sh
1<!DOCTYPE html>
2<html>
3 <head>
4 <style>
5 :root,
6 ::backdrop {
7 color-scheme: dark;
8 --bg: #222529;
9 --bg-light: #464949;
10 --text: #d6d6d6;
11 --text-light: #c5c0b7;
12 --accent: #78b6ad;
13 --accent-light: #87c9e5;
14 --accent-text: var(--bg);
15 --border: #dbd5bc;
16 --link: #e2c8a2;
17 }
18
19 body {
20 font-weight: 600;
21 color: #d6d6d6;
22 background-color: #222529;
23 font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono",
24 monospace;
25 display: flex;
26 flex-direction: column;
27 text-align: center;
28 }
29
30 div {
31 margin: 0;
32 display: flex;
33 flex-direction: column;
34 align-items: center;
35 justify-content: center;
36 height: 90vh; /* 90% of viewport height */
37 width: 90vw; /* 90% of viewport width */
38 padding: 5vh 5vw; /* 5% border on all sides */
39 box-sizing: border-box;
40 align-self: center;
41 }
42
43 h1 {
44 font-size: calc(
45 2rem + 2vw
46 ); /* Adjust font size based on viewport width */
47 margin: 0.5em 0;
48 line-height: 1.1;
49 }
50
51 h1::before {
52 color: var(--accent);
53 content: "# ";
54 }
55
56 p {
57 margin: 1rem 0;
58 font-size: calc(
59 1rem + 1vw
60 ); /* Adjust font size based on viewport width */
61 }
62 </style>
63 </head>
64 <body>
65 <div>
66 <h1>{{postname}}</h1>
67 <p>By Kieran Klukas</p>
68 </div>
69 </body>
70</html>