cmc/cleberg.net

My personal web garden & blog. blog personal website https://cleberg.net

Commit b3a6db3127

b3a6db3127a5a72998764de62c1498508eef5da3

parent: 0b2ff729f5

Unsigned

cmc <hello@cleberg.net> · 2025-12-03 04:04 UTC 

feat: minify css theme again since the last one was not great

Layout: unified · split

theme/static/styles.css +28 −286
@@ -1,108 +1,21 @@
1:root {
2 --bg: #fafafa;
3 --bg-light: #f0f0f0;
4 --fg: #1b2229;
5 --fg-light: #383a42;
6 --link: #0f62fe;
7 --code: #8c2117;
8}
9
10body { 1body {
11 background-color: var(--bg);
12 color: var(--fg-light);
13 font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace; 2 font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
14 font-size: 0.85rem; 3 font-size: 0.85rem;
15 line-height: 1.4; 4 line-height: 1.5;
16 margin: 0 auto; 5 margin: 0 auto;
17 max-width: 50em; 6 max-width: 50em;
18 padding: 1.5rem;
19}
20
21a,
22a:active {
23 color: var(--link);
24}
25
26a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"]) {
27 display: inline;
28}
29
30a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"])::before {
31 background-color: var(--bg);
32 color: var(--fg);
33 content: "[";
34 display: inline-block;
35 padding-right: 0.15em;
36 pointer-events: none;
37 position: relative;
38 text-decoration: none;
39 z-index: 1;
40}
41
42a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"])::after {
43 background-color: var(--bg);
44 color: var(--fg);
45 content: "]";
46 display: inline-block;
47 padding-left: 0.15em;
48 pointer-events: none;
49 position: relative;
50 text-decoration: none;
51 z-index: 1;
52}
53
54h1,
55h2,
56h3,
57h4,
58h5,
59h6,
60nav,
61time,
62code,
63pre,
64.metadata-block {
65 font-family: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;
66}
67
68h1,
69h2,
70h3,
71h4,
72h5,
73h6 {
74 color: var(--fg);
75 font-size: 0.85rem;
76 font-weight: bold;
77 margin-bottom: 1rem;
78 margin-top: 1rem;
79} 7}
80 8
81h1 { 9body,
82 font-size: 0.85rem; 10footer {
83} 11 padding: 1rem 0;
84
85.skip-link {
86 height: 1px;
87 left: -10000px;
88 overflow: hidden;
89 position: absolute;
90 top: auto;
91 width: 1px;
92}
93
94.skip-link:focus {
95 height: auto;
96 position: static;
97 width: auto;
98} 12}
99 13
100nav { 14nav {
101 align-items: center; 15 align-items: center;
102 display: flex; 16 display: flex;
103 justify-content: space-around; 17 justify-content: space-around;
104 margin: 3rem 0; 18 margin: 1rem 0;
105 width: 100%;
106} 19}
107 20
108nav ul { 21nav ul {
@@ -120,216 +33,45 @@ nav ul li {
120 text-align: center; 33 text-align: center;
121} 34}
122 35
123.context-box {
124 background-color: var(--bg-light);
125 color: var(--fg);
126 display: grid;
127 font-size: 0.85rem;
128 grid-template-columns: auto 1fr;
129 gap: 0.5rem 1rem;
130 margin-bottom: 3rem;
131 margin-top: 3rem;
132 padding: 1rem;
133}
134
135.context-label {
136 color: var(--link);
137 font-weight: bold;
138 text-transform: uppercase;
139}
140
141blockquote {
142 background-color: var(--bg-light);
143 border-left: 8px solid var(--link);
144 margin: 1rem 0;
145 padding: 0.5rem 1rem;
146}
147
148blockquote p {
149 margin: 0;
150}
151
152.reply-link {
153 border: 1px dotted var(--fg-light);
154 margin-top: 3rem;
155 padding: 0.5rem 1rem;
156}
157
158img { 36img {
159 border-style: none; 37 max-width: 100%;
160 width: 100%;
161}
162
163table {
164 border: 1px dotted var(--fg);
165 border-collapse: collapse;
166 width: 100%;
167}
168
169colgroup,
170thead,
171tbody {
172 border: 1px dotted var(--fg);
173}
174
175pre,
176pre>code,
177code {
178 font-size: 0.85rem;
179} 38}
180 39
181pre { 40pre {
182 background-color: var(--bg-light); 41 border: 1px solid black;
183 margin: 0.5rem 0;
184 overflow-x: auto;
185 padding: 0.5rem; 42 padding: 0.5rem;
186} 43}
187 44
188time { 45:not(pre) > code {
189 margin-right: 0.5rem; 46 color: red;
190}
191
192:not(pre)>code {
193 color: var(--code);
194} 47}
195 48
196.post { 49.skip-link {
197 align-items: flex-start; 50 height: 1px;
198 display: flex; 51 left: -10000px;
199 margin: 0.5rem 0; 52 overflow: hidden;
200} 53 position: absolute;
201 54 top: auto;
202.post time { 55 width: 1px;
203 flex-shrink: 0;
204 font-size: 0.85rem;
205 margin-right: 1rem;
206}
207
208article {
209 border-bottom: 1px dotted var(--fg-light);
210 margin-bottom: 3rem;
211 padding-bottom: 3rem;
212}
213
214p {
215 margin-top: 0.5rem;
216 margin-bottom: 1rem;
217}
218
219footer {
220 margin: 3rem 0;
221}
222
223#table-of-contents {
224 border: 1px dotted var(--fg-light);
225 font-family: Menlo, Consolas, Monaco, "Liberation Mono", monospace;
226 font-size: 0.85rem;
227 margin-bottom: 3rem;
228 margin-top: 3rem;
229 max-width: 100%;
230 padding: 3rem;
231}
232
233#table-of-contents h2 {
234 border: none;
235 font-family: inherit;
236 font-size: 0.85rem;
237 text-transform: none;
238 font-weight: normal;
239 margin-bottom: 1rem;
240 margin-top: 0;
241 padding: 0;
242}
243
244#text-table-of-contents ul {
245 list-style: none;
246 padding-left: 0;
247 margin: 0;
248}
249
250#text-table-of-contents ul ul {
251 padding-left: 2ch;
252}
253
254#text-table-of-contents li a {
255 align-items: baseline;
256 display: flex;
257 padding: 0.2rem 0;
258}
259
260#text-table-of-contents li a::after {
261 background-image: radial-gradient(circle, var(--fg-light) 1px, transparent 1px);
262 background-position: 0 bottom;
263 background-repeat: repeat-x;
264 background-size: 8px 100%;
265 border-bottom: none;
266 content: "";
267 flex-grow: 1;
268 height: 4px;
269 margin-left: 1ch;
270 opacity: 0.6;
271 padding-left: 1ch;
272 text-align: right;
273}
274
275#text-table-of-contents li a:hover {
276 background-color: transparent;
277 color: var(--link);
278}
279
280#text-table-of-contents ul {
281 list-style: none;
282 margin: 0;
283 padding-left: 0;
284}
285
286#text-table-of-contents ul ul {
287 margin-top: 0.2rem;
288 padding-left: 3ch;
289}
290
291.outline-2 ul li {
292 list-style: none;
293}
294
295.outline-2 ul li::before {
296 color: var(--fg-light);
297 content: "- ";
298} 56}
299 57
300.outline-2 { 58.skip-link:focus {
301 59 height: auto;
302 p, 60 position: static;
303 ul, 61 width: auto;
304 ol,
305 blockquote,
306 pre,
307 table {
308 margin-left: 3ch;
309 }
310
311 blockquote p {
312 margin-left: 0;
313 }
314} 62}
315 63
316.recent-posts { 64@media (prefers-color-scheme: dark) {
317 h2 { 65 body {
318 margin-bottom: 1.5rem; 66 background-color: #000000;
67 color: #dfdfdf;
319 } 68 }
320 69
321 p { 70 a {
322 margin-top: 1.5rem; 71 color: #67c0ff;
323 } 72 }
324}
325 73
326@media (prefers-color-scheme: dark) { 74 pre {
327 :root { 75 border-color: white;
328 --bg: #000000;
329 --bg-light: #1B2229;
330 --fg: #DFDFDF;
331 --fg-light: #BBC2CF;
332 --link: #67C0FF;
333 --code: #FF6C6B;
334 } 76 }
335} 77}
theme/templates/index.html +5 −5
@@ -1,8 +1,8 @@
1{% extends "base.html" %} {% block main %} 1{% extends "base.html" %} {% block main %}
2<section class="context-box"> 2<section>
3 <span class="context-label">User:</span> <span>Christian Cleberg &lt;hello@cleberg.net&gt;</span> 3 <b>User</b>: Christian Cleberg &lt;hello@cleberg.net&gt;
4 <span class="context-label">Context:</span> <span>Technology Assurance Manager</span> 4 <br><b>Context</b>: Technology Assurance Manager
5 <span class="context-label">Status:</span> <span>Active</span> 5 <br><b>Status</b>: Active
6</section> 6</section>
7<section class="recent-posts"> 7<section class="recent-posts">
8 <h2>Recent Posts</h2> 8 <h2>Recent Posts</h2>
@@ -10,4 +10,4 @@
10 <!-- END_POSTS --> 10 <!-- END_POSTS -->
11 <p><a href="/blog/">All Posts &rarr;</a></p> 11 <p><a href="/blog/">All Posts &rarr;</a></p>
12</section> 12</section>
13{% endblock %}\ No newline at end of file 13{% endblock %}
theme/templates/post.html +4 −4
@@ -8,10 +8,10 @@
8<meta property="og:description" content="{{ project_description }}" /> 8<meta property="og:description" content="{{ project_description }}" />
9{% endif %} {% endblock %} {% block main %} 9{% endif %} {% endblock %} {% block main %}
10<article> 10<article>
11 <section class="context-box"> 11 <section>
12 <span class="context-label">Title:</span> <span>{{ post.title }}</span> 12 <b>Title</b>: {{ post.title }}
13 <span class="context-label">Date:</span> <span><time datetime='{{ post.date|strftime("%Y-%m-%d") }}'>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time></span> 13 <br><b>Date</b>: <time datetime='{{ post.date|strftime("%Y-%m-%d") }}'>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time>
14 <span class="context-label">Description:</span> <span>{{ post.description }}</span> 14 <br><b>Description</b>: {{ post.description }}
15 </section> 15 </section>
16 <section>{{ post.html | safe }}</section> 16 <section>{{ post.html | safe }}</section>
17 <div class="reply-link"><a href="mailto:hello@cleberg.net">Reply via email &rarr;</a></div> 17 <div class="reply-link"><a href="mailto:hello@cleberg.net">Reply via email &rarr;</a></div>