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 --gradient-average-light: oklch(86.49% 0.018 73.05);
18 --gradient-average-dark: oklch(27.58% 0.0203 289.13);
19 --nightshade-violet: oklch(22.96% 0.0242 287.67);
20 --purple-night: oklch(18.96% 0.0242 287.67);
21 --dark-crushed-grape: oklch(74.02% 0.0756 311.96);
22 --light-crushed-grape: oklch(73.48% 0.1008 284.99);
23 --reseda-green: oklch(62.33% 0.0475 126.94);
24 --earth-yellow: oklch(87.45% 0.0203 74.93);
25 --sunset: oklch(87.45% 0.0334 74.93);
26 --ultra-violet: oklch(42.21% 0.0676 297.45);
27 --rose-quartz: oklch(65.32% 0.0585 311.96);
28 --pink-puree: oklch(75.65% 0.0555 290.76);
29 --lavendar-breeze: oklch(91.06% 0.0223 290.76);
30 --purple-gray: oklch(25.63% 0.0002 290.76);
31 --alice-blue: oklch(95.38% 0.0118 239.91);
32 }
33
34 body {
35 font-weight: 600;
36 color: var(--lavendar-breeze);
37 background-color: var(--purple-night);
38 font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono",
39 monospace;
40 display: flex;
41 flex-direction: column;
42 text-align: center;
43 }
44
45 div {
46 margin: 0;
47 display: flex;
48 flex-direction: column;
49 align-items: center;
50 justify-content: center;
51 height: 90vh; /* 90% of viewport height */
52 width: 90vw; /* 90% of viewport width */
53 padding: 5vh 5vw; /* 5% border on all sides */
54 box-sizing: border-box;
55 align-self: center;
56 }
57
58 h1 {
59 font-size: calc(2 * 2vw);
60 }
61 h2 {
62 font-size: calc(1.75 * 2vw);
63 }
64 h3 {
65 font-size: calc(1.5 * 2vw);
66 }
67 h4 {
68 font-size: calc(1.25 * 2vw);
69 }
70 h5 {
71 font-size: calc(1 * 2vw);
72 }
73 h6 {
74 font-size: calc(0.75 * 2vw);
75 }
76
77 h1,
78 h2,
79 h3,
80 h4,
81 h5,
82 h6 {
83 margin: 0.5em 0 0.5em 0;
84 padding: 0.22em 0.4em 0.22em 0.4em;
85 border-radius: 0.1em;
86 width: fit-content;
87 color: var(--lavendar-breeze);
88 }
89
90 h1 {
91 background-color: var(--rose-quartz);
92 color: var(--purple-gray);
93 }
94
95 p {
96 margin: 1rem 0;
97 color: var(--pink-puree);
98 font-size: calc(
99 1rem + 1vw
100 ); /* Adjust font size based on viewport width */
101 }
102 </style>
103 </head>
104 <body>
105 <div>
106 <h1>{{type}}</h1>
107 <h2>{{postname}}</h2>
108 {{by}}
109 </div>
110 </body>
111</html>