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: column;
32 flex-wrap: wrap;
33 justify-content: flex-end;
34 align-items: flex-start;
35 align-content: flex-end;
36}
37
38.title-list li {
39 margin-bottom: 0.375rem;
40}
41
42/* icons settings */
43.icons {
44 width: 1.3rem;
45 height: 1.3rem;
46 aspect-ratio: 1/1;
47 display: inline-block;
48 vertical-align: middle;
49 color: var(--text);
50 fill: var(--text);
51 background-color: transparent;
52 cursor: pointer;
53}
54
55.icons:hover {
56 background-color: transparent;
57 color: var(--accent);
58}
59
60/* footnotes */
61.footnote-definition {
62 margin: 0 0 0 0.125rem;
63}
64
65.footnote-definition-label {
66 color: var(--accent);
67}
68
69.footnote-definition p {
70 display: inline;
71 margin: 0.625rem 0 0 0.625rem;
72}
73
74/* general classes */
75.no-style {
76 padding: 0;
77 margin: 0;
78 border: none;
79 border-radius: 0;
80}
81
82.no-style:hover {
83 background-color: transparent;
84 color: var(--accent);
85}
86
87.center {
88 text-align: center;
89}
90
91.center img {
92 display: block;
93 margin: 1rem auto;
94}
95
96.float-right {
97 float: right;
98}
99
100.float-left {
101 float: left;
102}
103
104div code,
105li code,
106p code {
107 color: var(--text);
108 background-color: var(--bg-light);
109}
110
111pre {
112 border-top-left-radius: 0;
113}
114
115blockquote {
116 padding-top: 0.2rem;
117 padding-bottom: 0.2rem;
118}
119
120blockquote:has(+ pre) {
121 display: inline-block;
122 border: none;
123 font-family: "code" !important;
124 font-size: 0.8rem;
125 font-weight: 600;
126 margin: 0;
127 margin-bottom: 0.2rem;
128 margin-block: 0 0;
129 border-top-left-radius: 5px;
130 border-top-right-radius: 5px;
131 padding-left: 0.75rem;
132 padding-right: 0.75rem;
133 padding-top: 0.25rem;
134 padding-bottom: 0.25rem;
135 position: relative;
136 background-color: var(--accent);
137}
138
139blockquote:has(+ pre) p {
140 margin: 0;
141 color: var(--accent-text);
142}
143
144.yt-embed {
145 width: 100%;
146 display: flex;
147 justify-content: center;
148}
149
150.yt-embed iframe {
151 width: 100%;
152 aspect-ratio: 16 / 9;
153}