/* ========================================================================== Noah Hailegiorgis — site styles Plain hand-maintained CSS. Theming via [data-theme] on . ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap'); :root { --max-width: 660px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --font-hand: "Caveat", "Comic Sans MS", "Segoe Print", cursive; --font-serif: "Lora", Georgia, "Times New Roman", serif; /* Light theme (default) */ --bg: #ffffff; --bg-soft: #f5f5f4; --text: #1b1b1d; --text-soft: #5c5c66; --accent: #fd5e53; --border: #e5e5e3; --code-bg: #f3f3f1; } html[data-theme="dark"] { --bg: #1c1b22; --bg-soft: #25242c; --text: #e8e6e3; --text-soft: #9a98a4; --accent: #ff6f61; --border: #34333d; --code-bg: #2a2932; } /* Respect OS preference before any JS runs, unless user already chose. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --bg: #1c1b22; --bg-soft: #25242c; --text: #e8e6e3; --text-soft: #9a98a4; --accent: #ff6f61; --border: #34333d; --code-bg: #2a2932; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background 0.2s ease, color 0.2s ease; } /* Serious reading content uses an editorial serif. */ .post-title, .page-title, .post-content, .post-list h2, .post-list .excerpt { font-family: var(--font-serif); } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem 4rem; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; } /* ---- Header ------------------------------------------------------------- */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 0 2.5rem; flex-wrap: wrap; gap: 0.75rem; } .logo { font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem; color: var(--text); } .logo:hover { text-decoration: none; } .logo .mark { color: var(--accent); margin-right: 0.4ch; } .site-nav { display: flex; align-items: center; gap: 1.25rem; } .site-nav a { color: var(--text-soft); font-size: 0.88rem; } .site-nav a:hover { color: var(--accent); text-decoration: none; } /* Vertical rule separating internal links from external project links */ .nav-divider { width: 1px; height: 0.95em; background: var(--border); display: inline-block; vertical-align: middle; } /* External-link cue on the project links */ .site-nav a.external::after { content: "\2197"; /* ↗ */ font-size: 0.7em; margin-left: 0.2em; vertical-align: top; color: var(--text-soft); } .site-nav a.external:hover::after { color: var(--accent); } .theme-toggle { background: none; border: none; cursor: pointer; color: var(--text-soft); display: inline-flex; padding: 0; line-height: 0; } .theme-toggle:hover { color: var(--accent); } /* ---- Home ---------------------------------------------------------------- */ .home { max-width: 34rem; margin: 0 auto; min-height: 62vh; padding: 2rem 0 4rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .home h1 { margin: 0 0 0.5rem; font-size: 2rem; letter-spacing: -0.01em; } .home .subtitle { color: var(--text-soft); margin: 0 0 2.25rem; font-family: var(--font-mono); font-size: 0.95rem; } .home .bio { margin: 0 0 2.25rem; line-height: 1.8; } .home-links { font-size: 0.95rem; color: var(--text-soft); margin: 0; line-height: 2.2; } /* ---- Home: hand-drawn aesthetic (home page only) ------------------------- */ .page-home .home h1 { font-family: var(--font-hand); font-weight: 700; font-size: 3.4rem; letter-spacing: 0; line-height: 1.05; margin: 0 0 0.35rem; } .page-home .home .subtitle { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; margin: 0 0 1.6rem; } .page-home .home .bio { font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.7; margin: 0 0 1.85rem; } .page-home .home-links { font-family: var(--font-serif); font-size: 1rem; line-height: 2.2; } /* hand-drawn squiggle underline on home links */ .page-home .home a { text-decoration: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Cpath d='M0 4 Q3 1 6 4 T12 4 T18 4 T24 4' fill='none' stroke='%23fd5e53' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: 0 95%; background-size: 15px 5px; padding-bottom: 3px; } .page-home .home a:hover { color: var(--accent); } /* ---- Home tic-tac-toe (hand-drawn) --------------------------------------- */ .game { margin-top: 3.5rem; --ink: var(--text); --hand: var(--font-hand); } .game-subtitle { font-family: var(--hand); color: var(--text-soft); font-size: 1.3rem; margin: 0 0 1.2rem; } .ttt-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; width: 196px; margin: 0 auto; } .ttt-cell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--ink); border: 2px solid var(--ink); /* wobbly, hand-inked box */ border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; font-family: var(--hand); font-size: 2.7rem; font-weight: 700; line-height: 1; cursor: pointer; transition: background 0.15s ease; } /* give every box a slightly different wobble + tilt so it reads as sketched */ .ttt-cell:nth-child(3n+1) { border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px; transform: rotate(-1.2deg); } .ttt-cell:nth-child(3n+2) { border-radius: 225px 15px 255px 15px / 15px 255px 15px 225px; transform: rotate(0.9deg); } .ttt-cell:nth-child(3n) { border-radius: 15px 255px 15px 225px / 225px 15px 255px 15px; transform: rotate(-0.6deg); } .ttt-cell:hover:not(:disabled) { background: var(--bg-soft); } .ttt-cell:disabled { cursor: default; } .ttt-cell.is-x { color: var(--ink); } .ttt-cell.is-o { color: var(--accent); } .ttt-cell.is-win { background: var(--code-bg); } .game-status { font-family: var(--hand); font-size: 1.2rem; color: var(--text-soft); margin: 1.1rem 0 0.7rem; min-height: 1.3em; } .game-reset { font-family: var(--hand); background: none; border: 2px solid var(--ink); border-radius: 18px 220px 18px 220px / 220px 18px 220px 18px; color: var(--text-soft); font-size: 1.05rem; padding: 0.1rem 1.1rem; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .game-reset:hover { color: var(--accent); background: var(--bg-soft); } .home-links a { color: var(--text-soft); } .home-links a:hover { color: var(--accent); } /* ---- Article list (clickable cards) ------------------------------------- */ .page-title { font-size: 1.4rem; margin: 1rem 0 2rem; } .post-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .post-list li { position: relative; border: 1px solid var(--border); border-radius: 10px; padding: 1.2rem 1.35rem; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .post-list li:hover, .post-list li:focus-within { border-color: var(--accent); background: var(--bg-soft); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07); } .post-list h2 { font-size: 1.2rem; line-height: 1.3; margin: 0.1rem 0 0.4rem; } .post-list h2 a { color: var(--text); } .post-list h2 a:hover { text-decoration: none; } .post-list li:hover h2 a { color: var(--accent); } /* stretch the title link so the whole card is clickable */ .post-list h2 a::after { content: ""; position: absolute; inset: 0; } .post-meta { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-soft); margin: 0 0 0.3rem; } .post-list .excerpt { color: var(--text-soft); margin: 0; line-height: 1.5; } /* ---- Single post -------------------------------------------------------- */ .post-title { font-size: 1.75rem; line-height: 1.25; margin: 0.5rem 0 1.5rem; } .post-cover { margin: 1.5rem 0; } .post-cover img { border-radius: 6px; width: 100%; } .post-cover figcaption { text-align: center; font-size: 0.85rem; color: var(--text-soft); margin-top: 0.5rem; } .post-content { font-size: 1.05rem; } .post-content h2 { font-size: 1.45rem; margin: 2.25rem 0 0.75rem; } .post-content h3 { font-size: 1.2rem; margin: 1.75rem 0 0.5rem; } .post-content p { margin: 0 0 1.25rem; } .post-content ul, .post-content ol { padding-left: 1.4rem; margin: 0 0 1.25rem; } .post-content li { margin-bottom: 0.4rem; } .post-content img { border-radius: 6px; display: block; margin: 1.5rem auto; } .post-content blockquote { margin: 1.5rem 0; padding: 0.5rem 1.25rem; border-left: 3px solid var(--accent); color: var(--text-soft); font-style: italic; } .post-content code { font-family: var(--font-mono); font-size: 0.85em; background: var(--code-bg); padding: 0.15em 0.4em; border-radius: 4px; } .post-content pre { background: var(--code-bg); padding: 1rem 1.25rem; border-radius: 6px; overflow-x: auto; border: 1px solid var(--border); } .post-content pre code { background: none; padding: 0; font-size: 0.85rem; line-height: 1.5; } .post-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; } .post-content th, .post-content td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; } .post-content th { background: var(--bg-soft); } /* Case-study snapshot / quick-facts box (above the fold) */ .snapshot { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem 1.5rem; margin: 0 0 2rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); font-family: var(--font-sans); } .snapshot dt { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); margin: 0 0 0.15rem; } .snapshot dd { margin: 0; font-size: 0.95rem; line-height: 1.4; } @media (max-width: 480px) { .snapshot { grid-template-columns: 1fr; } } /* Pipeline flow line — the unifying "source -> extract -> destination" device */ .flow { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-soft); margin: 0 0 1.6rem; line-height: 1.7; } .flow .arrow { color: var(--accent); margin: 0 0.5em; } .post-tags { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-soft); margin-top: 2rem; } .post-tags a { color: var(--text-soft); } .post-tags a:hover { color: var(--accent); } /* ---- Post navigation ---------------------------------------------------- */ .post-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; } .post-nav a { flex: 1; font-size: 0.9rem; } .post-nav .next { text-align: right; } /* ---- Footer ------------------------------------------------------------- */ .site-footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--text-soft); text-align: center; } /* ---- Responsive --------------------------------------------------------- */ @media (max-width: 540px) { body { font-size: 17px; } .post-title { font-size: 1.6rem; } .post-nav { flex-direction: column; } .post-nav .next { text-align: left; } }