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-wrap: wrap;
15 justify-content: center;
16 align-items: center;
17 text-align: center;
18 padding-bottom: 0.5rem;
19}
20
21.accent-data {
22 color: var(--accent-light);
23}
24
25.theme-transition {
26 transition: background-color 0.3s ease;
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 color: var(--text);
113 background-color: var(--bg-light);
114}
115
116pre {
117 border-top-left-radius: 0;
118}
119
120blockquote {
121 padding-top: 0.2rem;
122 padding-bottom: 0.2rem;
123}
124
125blockquote:has(+ pre) {
126 display: inline-block;
127 border: none;
128 font-family: "code" !important;
129 font-size: 0.8rem;
130 font-weight: 600;
131 margin: 0;
132 margin-bottom: 0.2rem;
133 margin-block: 0 0;
134 border-top-left-radius: 5px;
135 border-top-right-radius: 5px;
136 padding-left: 0.75rem;
137 padding-right: 0.75rem;
138 padding-top: 0.25rem;
139 padding-bottom: 0.25rem;
140 position: relative;
141 background-color: var(--accent);
142}
143
144blockquote:has(+ pre) p {
145 margin: 0;
146 color: var(--accent-text);
147}
148
149.yt-embed {
150 width: 100%;
151 display: flex;
152 justify-content: center;
153}
154
155.yt-embed iframe {
156 width: 100%;
157 aspect-ratio: 16 / 9;
158}