/* tariqdeir.com — B / Index. One stylesheet, no framework. */ @font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :root { --ground: #F2F1EC; --ink: #141413; --muted: #5E5C55; --rule: #D6D4CC; --accent: #1F6B3A; --page: 1040px; --gutter: 120px; --section-gap: 56px; --cols: 120px minmax(0, 1fr) 200px 96px; --col-gap: 24px; color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --ground: #111210; --ink: #E8E6DF; --muted: #9C9A92; --rule: #2C2D2A; --accent: #5BD08A; } } /* The cheat code. egg.js adds .cheat to . */ body.cheat { --ground: #000; --ink: #33FF66; --muted: #1FA84A; --rule: #0F4D22; --accent: #B6FFC9; text-shadow: 0 0 6px rgb(51 255 102 / 0.45); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; line-height: 1.6; transition: background-color 0.3s, color 0.3s; } a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--accent); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .muted { color: var(--muted); } .accent { color: var(--accent); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; padding: 4px 8px; background: var(--ink); color: var(--ground); } /* Layout */ .wrap { max-width: calc(var(--page) + 2 * var(--gutter)); min-height: 100vh; margin: 0 auto; padding: 72px var(--gutter); display: flex; flex-direction: column; gap: var(--section-gap); } main { display: flex; flex-direction: column; gap: var(--section-gap); } /* Header */ .site-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; color: var(--muted); } .site-name { text-decoration: none; } .site-name span { color: var(--ink); } .site-name[aria-current] span { color: inherit; } .site-header ul { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; } .site-header nav a[aria-current] { color: var(--ink); } /* Intro and prose */ .intro { display: flex; flex-direction: column; gap: 20px; max-width: 760px; } .intro > *, .prose > * { margin: 0; } h1 { font-size: 40px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; } .lede, .prose p { font-size: 18px; } .prose { display: flex; flex-direction: column; gap: 20px; max-width: 760px; } .prose .label { margin-bottom: -12px; } .cursor { color: var(--accent); animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } body { transition: none; } } /* Page prose (Now) */ .page { display: flex; flex-direction: column; gap: 32px; } strong, b { font-weight: 500; } .page .intro .label { margin: 0; } .prose h2 { margin: 16px 0 -8px; font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .prose ul { margin: 0; padding-left: 1.4em; font-size: 18px; } .prose li + li { margin-top: 6px; } .prose li::marker { color: var(--muted); } /* Posts */ .post { display: flex; flex-direction: column; gap: 40px; } .post .intro { gap: 12px; } .post-body { gap: 20px; } .post-body h2, .prose.post-body h2 { margin: 20px 0 -4px; font-size: 22px; font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--ink); } .post-body h3 { margin: 8px 0 -8px; font-size: 18px; font-weight: 500; } .post-body blockquote { margin: 0; padding-left: 20px; border-left: 2px solid var(--accent); color: var(--muted); } .post-body blockquote p { margin: 0; } .post-body hr { width: 100%; border: 0; border-top: 1px solid var(--rule); margin: 8px 0; } .post-body img { max-width: 100%; height: auto; } .post-image { display: block; width: 100%; height: auto; border: 1px solid var(--rule); } .headshot { display: block; width: 100%; max-width: 280px; height: auto; border: 1px solid var(--rule); } .post-body ol { margin: 0; padding-left: 1.6em; font-size: 18px; } .post-body code { font-size: 0.9em; background: color-mix(in srgb, var(--rule) 45%, transparent); padding: 1px 4px; } .post-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; max-width: 760px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--muted); } .post-foot p { margin: 0; } /* Section labels */ .label { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .label-note { text-transform: none; letter-spacing: 0; font-weight: 400; } /* Index tables */ .index-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; } .more { font-size: 14px; color: var(--muted); white-space: nowrap; } .index table { width: 100%; border-collapse: collapse; table-layout: fixed; } .index tbody tr { display: grid; grid-template-columns: var(--cols); column-gap: var(--col-gap); padding: 12px 0; border-top: 1px solid var(--rule); } .index tbody tr:last-child { border-bottom: 1px solid var(--rule); } .index th, .index td { padding: 0; text-align: left; font-weight: 400; vertical-align: baseline; min-width: 0; } .index .k, .index .m, .index .x { color: var(--muted); } .index .k.accent, .index .x.accent { color: var(--accent); } .index .t a { overflow-wrap: anywhere; } /* Contact form */ .contact { display: flex; flex-direction: column; gap: 20px; max-width: 560px; } .contact p { margin: 0; display: flex; flex-direction: column; gap: 6px; } .contact input, .contact textarea { font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 0; padding: 10px 12px; width: 100%; } .contact textarea { resize: vertical; } .contact input:focus-visible, .contact textarea:focus-visible, .contact button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); } .contact button { font: inherit; align-self: flex-start; cursor: pointer; color: var(--ground); background: var(--ink); border: 0; padding: 10px 20px; } .contact button:hover { background: var(--accent); } .hp { position: absolute; left: -9999px; } /* Footer */ .site-footer { margin-top: auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; color: var(--muted); } .site-footer p { margin: 0; } /* Tablet: shrink the gutters before anything else. */ @media (max-width: 1100px) { :root { --gutter: 48px; } } /* Mobile: two columns, metadata tucked under the title. */ @media (max-width: 680px) { :root { --gutter: 20px; --section-gap: 44px; --col-gap: 16px; } .wrap { padding-top: 32px; padding-bottom: 40px; } h1 { font-size: 32px; } .lede, .prose p { font-size: 17px; } .index tbody tr { grid-template-columns: 108px auto minmax(0, 1fr); grid-template-areas: "k t t" ". m x"; column-gap: 0; row-gap: 2px; } .index .k { padding-right: 12px; } .index .k { grid-area: k; white-space: nowrap; } .index .t { grid-area: t; } .index .m { grid-area: m; font-size: 14px; } .index .x { grid-area: x; font-size: 14px; } .index .m:not(:empty) + .x:not(:empty)::before { content: "\00a0·\00a0"; color: var(--muted); } .konami { display: none; } } /* Very narrow phones: metadata gets a line each so nothing overflows. */ @media (max-width: 360px) { .index tbody tr { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "k t" ". m" ". x"; } .index .m:not(:empty) + .x:not(:empty)::before { content: none; } }