the home site for me: also iteration 3 or 4 of my site
dunkirk.sh
1#nav-bar {
2 padding: 0.625rem 0 0 0;
3 display: flex;
4 flex-direction: row;
5 gap: 0.25rem;
6 flex-wrap: wrap;
7 justify-content: flex-end;
8 align-items: center;
9 align-content: flex-end;
10}
11
12#footer-container {
13 display: flex;
14 flex-direction: column;
15 flex-wrap: wrap;
16 justify-content: center;
17 align-items: center;
18 text-align: center;
19 padding-bottom: 0.5rem;
20}
21
22#footer-container p {
23 margin: 0;
24}
25
26.accent-data {
27 color: var(--accent-dark);
28}
29
30.tags-data {
31 display: flex;
32 flex-direction: row;
33 flex-wrap: wrap;
34 justify-content: flex-end;
35 align-items: flex-start;
36 align-content: flex-end;
37 gap: 0.25rem;
38}
39
40.title-list li {
41 margin-bottom: 0.375rem;
42}
43
44/* icons settings */
45.icons {
46 width: 1.3rem;
47 height: 1.3rem;
48 aspect-ratio: 1 / 1;
49 display: inline-block;
50 vertical-align: middle;
51 color: var(--text);
52 fill: var(--text);
53 background-color: transparent;
54 cursor: pointer;
55}
56
57.icons:hover {
58 background-color: transparent;
59 color: var(--accent);
60}
61
62/* footnotes */
63.footnote-definition {
64 margin: 0 0 0 0.125rem;
65}
66
67.footnote-definition-label {
68 color: var(--accent);
69}
70
71.footnote-definition p {
72 display: inline;
73 margin: 0.625rem 0 0 0.625rem;
74}
75
76/* general classes */
77.no-style {
78 padding: 0;
79 margin: 0;
80 border: none;
81 border-radius: 0;
82}
83
84.no-style:hover {
85 background-color: transparent;
86 color: var(--accent);
87}
88
89.center {
90 text-align: center;
91}
92
93.center img {
94 display: block;
95 margin: 1rem auto;
96}
97
98.center figcaption {
99 text-align: center;
100}
101
102.float-right {
103 float: right;
104}
105
106.float-left {
107 float: left;
108}
109
110div code,
111li code,
112p code {
113 padding: 0.1em 0.3em 0.1em 0.3em;
114 color: var(--text-dark);
115 background-color: var(--bg-light);
116}
117
118pre {
119 border-top-left-radius: 0;
120}
121
122blockquote {
123 padding-top: 0.2rem;
124 padding-bottom: 0.2rem;
125}
126
127blockquote:has(+ pre) {
128 display: inline-block;
129 border: none;
130 font-family: "code" !important;
131 font-size: 0.8rem;
132 font-weight: 600;
133 margin: 0;
134 margin-bottom: 0.2rem;
135 margin-block: 0 0;
136 border-top-left-radius: 0.2em;
137 border-top-right-radius: 0.2em;
138 padding-left: 0.75rem;
139 padding-right: 0.75rem;
140 padding-top: 0.25rem;
141 padding-bottom: 0.25rem;
142 position: relative;
143 background-color: var(--accent);
144}
145
146blockquote:has(+ pre) p {
147 margin: 0;
148 color: var(--accent-text);
149}
150
151blockquote:has(+ pre) p::selection {
152 background: var(--pink-puree);
153}
154
155.yt-embed {
156 width: 100%;
157 display: flex;
158 justify-content: center;
159}
160
161.yt-embed iframe {
162 width: 100%;
163 aspect-ratio: 16 / 9;
164}
165
166:root {
167 --gradient-average-light: oklch(86.49% 0.018 73.05);
168 --gradient-average-dark: oklch(27.58% 0.0203 289.13);
169 --nightshade-violet: oklch(22.96% 0.0242 287.67);
170 --purple-night: oklch(18.96% 0.0242 287.67);
171 --dark-crushed-grape: oklch(74.02% 0.0756 311.96);
172 --light-crushed-grape: oklch(73.48% 0.1008 284.99);
173 --reseda-green: oklch(62.33% 0.0475 126.94);
174 --earth-yellow: oklch(87.45% 0.0203 74.93);
175 --sunset: oklch(87.45% 0.0334 74.93);
176 --ultra-violet: oklch(42.21% 0.0676 297.45);
177 --rose-quartz: oklch(65.32% 0.0585 311.96);
178 --pink-puree: oklch(75.65% 0.0555 290.76);
179 --lavendar-breeze: oklch(91.06% 0.0223 290.76);
180 --purple-gray: oklch(25.63% 0.0002 290.76);
181 --alice-blue: oklch(95.38% 0.0118 239.91);
182}
183
184body::after {
185 content: "";
186 position: absolute;
187 top: 0;
188 left: 0;
189 width: 100%;
190 height: 100%;
191 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='3' stitchTiles='stitch'/%3E%3CfeBlend mode='screen'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23noise)' /%3E%3C/svg%3E");
192 background-size: 12%;
193 opacity: var(--noise-strength);
194 pointer-events: none;
195}