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 justify-content: center;
16 align-items: center;
17 text-align: center;
18 padding-bottom: 0.5rem;
19}
20
21#footer-container p {
22 margin: 0;
23}
24
25.accent-data {
26 color: var(--accent-dark);
27}
28
29.tags-data {
30 display: flex;
31 flex-direction: row;
32 flex-wrap: wrap;
33 justify-content: flex-end;
34 align-items: flex-start;
35 align-content: flex-end;
36 gap: 0.25rem;
37}
38
39.title-list li {
40 margin-bottom: 0.375rem;
41}
42
43/* icons settings */
44.icons {
45 width: 1.3rem;
46 height: 1.3rem;
47 aspect-ratio: 1 / 1;
48 display: inline-block;
49 vertical-align: middle;
50 color: var(--text);
51 fill: var(--text);
52 background-color: transparent;
53 cursor: pointer;
54}
55
56.icons:hover {
57 background-color: transparent;
58 color: var(--accent);
59}
60
61/* footnotes */
62.footnote-definition {
63 margin: 0 0 0 0.125rem;
64}
65
66.footnote-definition-label {
67 color: var(--accent);
68}
69
70.footnote-definition p {
71 display: inline;
72 margin: 0.625rem 0 0 0.625rem;
73}
74
75/* general classes */
76.no-style {
77 padding: 0;
78 margin: 0;
79 border: none;
80 border-radius: 0;
81}
82
83.no-style:hover {
84 background-color: transparent;
85 color: var(--accent);
86}
87
88.center {
89 text-align: center;
90}
91
92.center img {
93 display: block;
94 margin: 1rem auto;
95}
96
97.center figcaption {
98 text-align: center;
99}
100
101.float-right {
102 float: right;
103}
104
105.float-left {
106 float: left;
107}
108
109div > code,
110li code,
111p code {
112 padding: 0.1em 0.3em 0.1em 0.3em;
113 color: var(--text-dark);
114 background-color: var(--bg-light);
115}
116
117pre {
118 border-top-left-radius: 0;
119}
120
121blockquote {
122 padding-top: 0.2rem;
123 padding-bottom: 0.2rem;
124}
125
126blockquote:has(+ pre) {
127 display: inline-block;
128 border: none;
129 font-family: "code", monospace !important;
130 font-size: 0.8rem;
131 font-weight: 600;
132 margin: 0;
133 margin-bottom: 0.2rem;
134 margin-block: 0 0;
135 border-top-left-radius: 0.2em;
136 border-top-right-radius: 0.2em;
137 padding-left: 0.75rem;
138 padding-right: 0.75rem;
139 padding-top: 0.25rem;
140 padding-bottom: 0.25rem;
141 position: relative;
142 background-color: var(--accent);
143}
144
145blockquote:has(+ pre) p {
146 margin: 0;
147 color: var(--accent-text);
148}
149
150blockquote:has(+ pre) p::selection {
151 background: var(--pink-puree);
152}
153
154.yt-embed {
155 width: 100%;
156 display: flex;
157 flex-direction: column;
158 justify-content: center;
159 align-content: center;
160 text-align: center;
161}
162
163.yt-embed iframe {
164 width: 100%;
165 aspect-ratio: 16 / 9;
166 align-self: center;
167}
168
169.yt-embed figcaption {
170 margin-top: 1rem;
171 text-align: center;
172}
173
174#elr table {
175 border-style: none;
176}
177
178#elr td {
179 border-style: dashed;
180}
181
182:root {
183 --nightshade-violet: oklch(0.27 0.0242 287.67);
184 --purple-night: oklch(27.58% 0.0203 289.13);
185 --dark-crushed-grape: oklch(74.02% 0.0756 311.96);
186 --light-crushed-grape: oklch(73.48% 0.1008 284.99);
187 --reseda-green: oklch(62.33% 0.0475 126.94);
188 --earth-yellow: oklch(86.49% 0.018 73.05);
189 --sunset: oklch(0.86 0.0213 73.05);
190 --ultra-violet: oklch(42.21% 0.0676 297.45);
191 --rose-quartz: oklch(65.32% 0.0585 311.96);
192 --pink-puree: oklch(75.65% 0.0555 290.76);
193 --lavendar-breeze: oklch(91.06% 0.0223 290.76);
194 --purple-gray: oklch(25.63% 0.0002 290.76);
195 --alice-blue: oklch(95.38% 0.0118 239.91);
196}