style.css (9570B)
1 /* ===== Archie-style theme, no Hugo ===== */ 2 3 /* Light theme (default) */ 4 :root { 5 --primary: #dc143c; 6 --primary-hover: #b91c3c; 7 --on-primary: #ffffff; 8 --border: #663399; 9 --text: #232333; 10 --heading: #232333; 11 --muted: #737373; 12 --meta: #767676; 13 --bg: #ffffff; 14 --code-bg: #f1f1f1; 15 --pre-bg: #ececec; 16 17 --content-max-width: 800px; 18 --content-padding: 1ch; 19 --radius: 5px; 20 } 21 22 /* Dark theme: follows the system unless the user chose light */ 23 @media (prefers-color-scheme: dark) { 24 :root:not([data-theme="light"]) { 25 --primary: #50fa7b; 26 --primary-hover: #50fa7b; 27 --on-primary: #000000; 28 --border: #0066ff; 29 --text: #ffffff; 30 --heading: #dddddd; 31 --muted: #dddddd; 32 --meta: #b5b5b5; 33 --bg: #202124; 34 --code-bg: #3a3a3a; 35 --pre-bg: #272822; 36 } 37 } 38 39 /* Dark theme: chosen manually with the toggle */ 40 :root[data-theme="dark"] { 41 --primary: #50fa7b; 42 --primary-hover: #50fa7b; 43 --on-primary: #000000; 44 --border: #0066ff; 45 --text: #ffffff; 46 --heading: #dddddd; 47 --muted: #dddddd; 48 --meta: #b5b5b5; 49 --bg: #202124; 50 --code-bg: #3a3a3a; 51 --pre-bg: #272822; 52 } 53 54 /* ===== Reset / base ===== */ 55 *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } 56 57 html { 58 color: var(--text); 59 font-family: 'Roboto Mono', 'Courier New', monospace; 60 font-size: 15px; 61 line-height: 1.6; 62 scroll-behavior: smooth; 63 } 64 65 @media (prefers-reduced-motion: reduce) { 66 html { scroll-behavior: auto; } 67 } 68 69 body { 70 margin: 8px; 71 background-color: var(--bg); 72 color: var(--text); 73 transition: background-color 0.2s ease, color 0.2s ease; 74 } 75 76 ::selection { background: var(--primary); color: var(--on-primary); } 77 78 p { 79 font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 80 line-height: 1.5; 81 margin-block: 0.5em; 82 } 83 84 hr { 85 border: 0; 86 border-block-start: 3px dotted var(--border); 87 margin-block: 1em; 88 } 89 90 blockquote { 91 border-inline-start: 3px solid var(--border); 92 padding-inline-start: 1em; 93 color: var(--muted); 94 margin: 0; 95 font-style: italic; 96 } 97 98 /* ===== Links (thick underline, fill on hover) ===== */ 99 a { 100 border-block-end: 3px solid var(--primary); 101 color: inherit; 102 text-decoration: none; 103 transition: background-color 0.2s ease, color 0.2s ease; 104 } 105 106 a:hover, 107 a:focus { 108 background-color: var(--primary-hover); 109 color: var(--on-primary); 110 outline: 2px solid var(--primary); 111 outline-offset: 2px; 112 } 113 114 /* small arrow on external links */ 115 a[target="_blank"]::after { 116 content: "↗"; 117 display: inline-block; 118 margin-left: 0.2em; 119 font-size: 0.8em; 120 } 121 /* but not on image/icon-only links or the site name */ 122 header .main a::after, 123 .no-arrow::after, 124 .readmore::after { content: none !important; } 125 126 /* ===== Lists: "* " markers ===== */ 127 ul { 128 list-style: none; 129 padding-inline-start: 2ch; 130 } 131 ul li { text-indent: -2ch; } 132 ul > li::before { 133 content: '* '; 134 font-weight: bold; 135 color: var(--primary); 136 } 137 138 /* ===== Images ===== */ 139 img { 140 border: 3px solid var(--pre-bg); 141 max-inline-size: 100%; 142 block-size: auto; 143 border-radius: var(--radius); 144 } 145 146 /* ===== Code ===== */ 147 code { 148 background-color: var(--code-bg); 149 padding: 0.1em 0.2em; 150 border-radius: 3px; 151 font-size: 0.9em; 152 } 153 pre { 154 background-color: var(--pre-bg); 155 line-height: 1.4; 156 overflow-x: auto; 157 padding: 1em; 158 border-radius: var(--radius); 159 border: 1px solid var(--border); 160 } 161 pre code { background: transparent; padding: 0; font-size: 100%; } 162 163 /* ===== Layout ===== */ 164 .content { 165 max-inline-size: var(--content-max-width); 166 margin-inline: auto; 167 margin-block-end: 4em; 168 padding-inline: var(--content-padding); 169 overflow-wrap: break-word; 170 } 171 172 /* ===== Header ===== */ 173 header { 174 display: flex; 175 flex-wrap: wrap; 176 justify-content: space-between; 177 align-items: center; 178 margin-block: 1em; 179 line-height: 2.5em; 180 gap: 1rem; 181 } 182 183 header .main { 184 font-size: 1.5rem; 185 font-weight: bold; 186 display: flex; 187 align-items: center; 188 gap: 0.75rem; 189 } 190 191 header .main img.avatar { 192 width: 48px; 193 height: 48px; 194 object-fit: cover; 195 border-radius: 50%; 196 } 197 198 nav { 199 display: flex; 200 align-items: center; 201 gap: 1rem; 202 flex-wrap: wrap; 203 } 204 205 /* theme toggle (icon button) */ 206 .nav-toggle { 207 appearance: none; 208 -webkit-appearance: none; 209 border: none; 210 background: none; 211 margin: 0; 212 font: inherit; 213 cursor: pointer; 214 padding: 0.5rem; 215 border-radius: 4px; 216 display: inline-flex; 217 align-items: center; 218 justify-content: center; 219 color: var(--text); 220 transition: all 0.2s ease; 221 } 222 .nav-toggle:hover, 223 .nav-toggle:focus { 224 background-color: var(--primary); 225 color: var(--on-primary); 226 outline: 2px solid var(--primary); 227 outline-offset: 2px; 228 } 229 .nav-toggle:active { transform: scale(0.95); } 230 231 .feather { 232 width: 1.5rem; 233 height: 1.5rem; 234 stroke: currentColor; 235 stroke-width: 2; 236 stroke-linecap: round; 237 stroke-linejoin: round; 238 fill: none; 239 display: inline-block; 240 vertical-align: middle; 241 } 242 243 /* ===== Headings: markdown-style prefixes ===== */ 244 h1, h2, h3, h4, h5, h6 { 245 font-size: 1.2rem; 246 margin-block-start: 2em; 247 margin-block-end: 0.5em; 248 line-height: 1.2; 249 color: var(--heading); 250 } 251 h1::before { color: var(--primary); content: '# '; } 252 h2::before { color: var(--primary); content: '## '; } 253 h3::before { color: var(--primary); content: '### '; } 254 h4::before { color: var(--primary); content: '#### '; } 255 256 /* ===== Home-page pieces ===== */ 257 .site-description { 258 display: flex; 259 justify-content: space-between; 260 align-items: center; 261 flex-wrap: wrap; 262 gap: 1rem; 263 } 264 265 .list-item { margin-block-end: 1.5em; } 266 .list-item h3 { margin-block-start: 1.25em; margin-block-end: 0.25em; } 267 268 .meta, time { 269 color: var(--meta); 270 font-size: 0.9em; 271 letter-spacing: -0.5px; 272 } 273 274 .readmore { display: inline-block; margin-block-start: 0.25em; } 275 276 /* tags (used for stack + project tech) */ 277 .tags { 278 display: flex; 279 flex-wrap: wrap; 280 gap: 0.5rem; 281 list-style: none; 282 padding: 0; 283 margin-block: 0.5rem; 284 } 285 .tags li { text-indent: 0; } 286 .tags li::before { content: none; } 287 .tag, 288 .tags a { 289 display: inline-block; 290 border-block-end: 3px solid var(--primary); 291 padding: 0.25rem 0.5rem; 292 border-radius: 3px; 293 font-size: 0.9em; 294 transition: all 0.2s ease; 295 } 296 /* non-link tags: no hover fill needed, but keep a subtle one */ 297 .tags a:hover, .tags a:focus { background-color: var(--primary-hover); color: var(--on-primary); } 298 299 /* "Portfolio Graveyard" collapsible */ 300 details { 301 border: 1px dotted var(--border); 302 border-radius: var(--radius); 303 padding: 0.75rem 1rem; 304 margin-block: 1rem; 305 } 306 summary { 307 cursor: pointer; 308 font-weight: bold; 309 font-size: 1.2rem; 310 color: var(--heading); 311 list-style: none; 312 } 313 summary::-webkit-details-marker { display: none; } 314 summary::before { content: '## '; color: var(--primary); } 315 details[open] summary::after { content: ' ▾'; color: var(--primary); } 316 details:not([open]) summary::after { content: ' ▸'; color: var(--primary); } 317 318 /* contact / link rows */ 319 .link-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-block: 0.75rem; } 320 321 /* 88x31 web badges: wrap to fit the screen */ 322 .web-badges { 323 display: flex; 324 flex-wrap: wrap; 325 justify-content: center; 326 gap: 0.5rem; 327 margin-block: 3rem 1.5rem; 328 } 329 .web-badges img { 330 width: 88px; 331 height: 31px; 332 border: 0; /* the border was shrinking the image and blurring it */ 333 outline: 1px solid var(--border); /* outline doesn't change the size */ 334 border-radius: 0; 335 image-rendering: pixelated; 336 transition: transform 150ms ease; 337 } 338 .web-badges img:hover { transform: scale(1.05); } 339 340 .post-scroll { 341 margin-block-start: 1rem; 342 font-size: 0.8rem; 343 color: var(--meta); 344 text-align: center; 345 } 346 347 /* ===== Footer ===== */ 348 footer { 349 display: flex; 350 align-items: center; 351 border-block-start: 0.4rem dotted var(--border); 352 padding-block: 2rem; 353 margin-block-start: 2rem; 354 gap: 0.5rem; 355 flex-wrap: wrap; 356 } 357 .soc { 358 display: inline-flex; 359 align-items: center; 360 border-block-end: none; 361 padding: 0 0.25rem; 362 } 363 .soc:hover, .soc:focus { color: var(--on-primary); } 364 .border { 365 display: inline-block; 366 margin-inline: 0.5rem; 367 border: 1px solid var(--border); 368 block-size: 1.2em; 369 padding: 0; 370 } 371 .footer-info { margin-inline-start: auto; font-size: 0.9em; } 372 373 /* ===== Focus ring for keyboard users ===== */ 374 :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } 375 376 /* ===== Journal/component styles ===== */ 377 table { width:100%; border-collapse:collapse; margin-block:1rem; overflow:hidden; border-radius:var(--radius); } 378 th { padding:.75rem; border:1px solid var(--border); background:var(--pre-bg); text-align:start; font-weight:bold; } 379 td { padding:.75rem; border:1px solid var(--border); } 380 tr:nth-child(even) { background:var(--code-bg); } 381 .callout { background:var(--pre-bg); border:1px solid var(--border); border-radius:var(--radius); padding:1em; margin-block:1em; } 382 .table-wrapper { overflow-x: auto; } 383 384 /* ===== Mobile ===== */ 385 @media (max-width: 37.4em) { 386 .content { padding-inline: 0.5rem; } 387 header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } 388 .site-description { flex-direction: column; align-items: flex-start; } 389 .footer-info { margin-inline-start: 0; } 390 } 391 392 /* non-clickable tag chips: label, not link */ 393 .tag { 394 border-block-end: 0; 395 background: var(--code-bg); 396 color: var(--muted); 397 } 398 399 /* keep underline only on tags that are real links (Links section) */ 400 .tags a { border-block-end: 3px solid var(--primary); } 401 402 /* slightly lighter underline on project titles */ 403 .list-item h3 a { border-block-end-width: 2px; } 404 405 header .main img.avatar { border-width: 2px; } 406 407 /* end */