cmc/cleberg.net

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

Commit 8d273600c7

8d273600c72b865a820c26875b472a6fe9ac04a0

parent: 927757547a

Unsigned

cmc <hello@cleberg.net> · 2026-01-18 23:21 UTC 

tweak font sizing

Layout: unified · split

theme/static/styles.css +50 −7
@@ -20,6 +20,7 @@ html, body {
20body { 20body {
21 color: var(--text); 21 color: var(--text);
22 font-family: var(--font); 22 font-family: var(--font);
23 font-size: 0.85rem;
23 line-height: 1.5; 24 line-height: 1.5;
24 display: flex; 25 display: flex;
25 flex-direction: column; 26 flex-direction: column;
@@ -107,7 +108,7 @@ nav a:hover {
107 background: rgba(0, 0, 0, 0.3); 108 background: rgba(0, 0, 0, 0.3);
108 padding: 1rem; 109 padding: 1rem;
109 margin-bottom: 2rem; 110 margin-bottom: 2rem;
110 font-size: 0.85rem; 111 font-size: 0.8rem;
111 display: grid; 112 display: grid;
112 grid-template-columns: auto 1fr; 113 grid-template-columns: auto 1fr;
113 gap: 0.5rem 1rem; 114 gap: 0.5rem 1rem;
@@ -126,6 +127,10 @@ h1, h2, h3 {
126 letter-spacing: 2px; 127 letter-spacing: 2px;
127} 128}
128 129
130h1 { font-size: 1.5rem; margin-bottom: 1rem; }
131h2 { font-size: 1.2rem; margin-top: 1.5rem; }
132h3 { font-size: 1rem; }
133
129a { 134a {
130 color: var(--green); 135 color: var(--green);
131 transition: 0.2s; 136 transition: 0.2s;
@@ -166,18 +171,29 @@ blockquote::before {
166 padding: 0 5px; 171 padding: 0 5px;
167} 172}
168 173
169/* Blog List */ 174/* Blog List (TUI Style) */
170.post { 175.post {
171 margin: 0.5rem 0; 176 margin: 0.5rem 0;
172 padding: 5px; 177 padding: 8px 5px;
173 border-bottom: 1px dashed rgba(0, 255, 157, 0.1); 178 border-bottom: 1px dashed rgba(0, 255, 157, 0.1);
179 display: flex;
180 flex-direction: row; /* Default: Side-by-side for desktop */
181 align-items: baseline;
174} 182}
175 183
176.post time { 184.post time {
177 color: var(--green); 185 color: var(--green);
178 opacity: 0.6; 186 opacity: 0.6;
179 font-size: 0.8rem; 187 font-size: 0.75rem;
180 margin-right: 1rem; 188 margin-right: 1.5rem;
189 white-space: nowrap; /* Prevents date from wrapping */
190 font-family: var(--font);
191}
192
193.post a {
194 font-size: 0.85rem;
195 text-decoration: none;
196 flex: 1;
181} 197}
182 198
183.post a::before { 199.post a::before {
@@ -262,7 +278,8 @@ footer {
262.status-bar { 278.status-bar {
263 background: var(--green); 279 background: var(--green);
264 color: var(--bg); 280 color: var(--bg);
265 padding: 4px 12px; 281 font-size: 0.7rem;
282 padding: 2px 10px;
266 display: flex; 283 display: flex;
267 justify-content: space-between; 284 justify-content: space-between;
268 font-weight: bold; 285 font-weight: bold;
@@ -288,8 +305,34 @@ footer {
288 margin-right: 10px; 305 margin-right: 10px;
289} 306}
290 307
308@media (max-width: 600px) {
309}
310
311/* Mobile Responsiveness for Blog List */
312@media (max-width: 650px) {
313 .post {
314 flex-direction: column;
315 align-items: flex-start;
316 gap: 4px;
317 }
318
319 .post time {
320 margin-right: 0;
321 margin-bottom: 2px;
322 font-size: 0.7rem;
323 opacity: 0.4;
324 }
325
326 .post a {
327 padding: 4px 0;
328 }
329}
330
331/* General Layout Mobile Fixes */
291@media (max-width: 600px) { 332@media (max-width: 600px) {
292 body { overflow-y: auto; } 333 body { overflow-y: auto; }
293 .terminal-shell { height: auto; } 334 .terminal-shell { height: auto; }
294 .system-header { flex-direction: column; gap: 1rem; } 335 .system-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
336 nav ul { flex-wrap: wrap; gap: 10px 20px;}
337 .glass-pane { padding: 1rem; }
295}\ No newline at end of file 338}\ No newline at end of file