/* == webfonts:start — generated by tools/mk_webfonts.py, do not hand-edit == */ @font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/fonts/inter-400-600.woff2") format("woff2");unicode-range:U+0000,U+0020-007E,U+00A0-00AC,U+00AE-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+2000-200B,U+2010-2027,U+202F-2055,U+2057,U+205F,U+20AC,U+2122,U+2190-2199,U+2212,U+FEFF} @font-face{font-family:"Lora";font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/fonts/lora-400-600.woff2") format("woff2");unicode-range:U+000D,U+0020-007E,U+00A0-00AC,U+00AE-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+2010,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2044,U+2052,U+20AC,U+2122,U+2212,U+2215} @font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/lora-italic-400.woff2") format("woff2");unicode-range:U+000D,U+0020-007E,U+00A0-00AC,U+00AE-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+2010,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2044,U+2052,U+20AC,U+2122,U+2212,U+2215} /* == webfonts:end == */ /* ============================================================ Amirul Cyber — editorial light/day theme Faithful Jekyll re-implementation of the awkaishin.com design system (Astro): paper bg #f8f7f4, Lora serif reading, Inter UI, amber #8a5a1a accent. Tuned for a code-first research blog: dark ink code blocks + framed figures. ============================================================ */ :root { --bg: #f8f7f4; --bg-secondary: #eeede9; --text: #1a1a1a; --text-muted: #6a6a6a; --accent: #8a5a1a; /* 5.5:1 on paper — passes WCAG AA for text (#a3661f was 4.38) */ --accent-hover: #7c4d17; --border: #d8d6d0; --code-bg: #1c1a17; --code-text: #e6e2da; --code-border: #00000040; --font-serif: "Lora", Georgia, serif; --font-sans: "Inter", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --text-sm: .875rem; --text-base: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.5rem; --space-xs: .5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; --measure: 65ch; --measure-wide: 80ch; --content-wide: 68rem; --padding-x: 2rem; color-scheme: light; } /* Night mode — toggled via and remembered in localStorage. Values mirror the source site's dark token set. */ :root[data-theme='dark'] { --bg: #111111; --bg-secondary: #1a1a1a; --text: #e8e8e8; --text-muted: #8a8a8a; --accent: #b5844a; --accent-hover: #d4a06a; --border: #2a2a2a; --code-border: #ffffff2b; } *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html[data-theme='dark'] { color-scheme: dark; } body { background-color: var(--bg); color: var(--text); font-family: var(--font-serif); font-size: var(--text-base); line-height: 1.75; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color .2s ease, color .2s ease; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 600; line-height: 1.3; color: var(--text); } a { color: var(--accent); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--accent-hover); } p { margin-bottom: 1.75rem; } p:last-child { margin-bottom: 0; } ul, ol { padding-left: 1.5rem; } li { margin-bottom: .5rem; } li > ul, li > ol { margin-top: .5rem; } strong { font-weight: 600; } hr { border: none; border-top: 1px solid var(--border); margin: var(--space-lg) 0; } time { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); letter-spacing: .02em; } ::selection { background: var(--accent); color: var(--bg); } img { max-width: 100%; height: auto; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- layout shells ---------- */ .container { width: 100%; max-width: var(--measure-wide); margin-left: auto; margin-right: auto; padding-left: var(--padding-x); padding-right: var(--padding-x); } .container--narrow { max-width: var(--measure); } .container--wide { max-width: var(--content-wide); } main { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } main.main--home { padding-top: var(--space-md); max-width: var(--measure); } /* ---------- nav ---------- */ .site-nav { padding: var(--space-md) var(--padding-x); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); border-bottom: 1px solid var(--border); } .site-nav__name { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--text); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .site-nav__name:hover { color: var(--accent); } .site-nav__links { display: flex; align-items: baseline; gap: var(--space-md); list-style: none; padding: 0; margin: 0; } .site-nav__links a { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); letter-spacing: .02em; transition: color .15s ease; } .site-nav__links a:hover, .site-nav__links a.active { color: var(--text); } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 26px; height: 22px; background: none; border: none; cursor: pointer; padding: 0; } .nav-toggle__bar { display: block; width: 100%; height: 2px; background: var(--text); transition: transform .2s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 900px) { .site-nav { position: relative; flex-wrap: wrap; } .nav-toggle { display: flex; } .site-nav__links { display: none; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 0 var(--padding-x); z-index: 20; } .site-nav__links.is-open { display: flex; } .site-nav__links li { border-bottom: 1px solid var(--border); margin: 0; } .site-nav__links li:last-child { border-bottom: none; } .site-nav__links a { display: block; padding: .85rem 0; } } /* ---------- home ---------- */ .home__intro { padding-bottom: var(--space-lg); } .home__name { font-family: var(--font-serif); font-size: var(--text-3xl); font-weight: 500; line-height: 1.15; margin-bottom: var(--space-sm); } .home__copy { max-width: var(--measure); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.7; } .home__copy p { margin-bottom: 1rem; } .home__recent-heading { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); display: inline-block; padding-bottom: .4rem; margin: 0 0 var(--space-sm); border-bottom: 2px solid var(--accent); } .home__all-link { display: inline-block; margin-top: var(--space-md); font-family: var(--font-sans); font-size: var(--text-sm); } /* ---------- essay card list ---------- */ .essay-card { display: block; padding: var(--space-sm) 0; border-bottom: 1px solid var(--border); text-decoration: none; } .essay-list > .essay-card:first-child { border-top: 1px solid var(--border); } .essay-card:hover .essay-card__title { color: var(--accent); } .essay-card__inner { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); } .essay-card__inner time { flex-shrink: 0; white-space: nowrap; } .essay-card__title { font-family: var(--font-serif); font-size: var(--text-base); font-weight: 400; color: var(--text); transition: color .15s ease; } /* Two lines of the post's lede. Truncated in Liquid as well, so this clamp is a layout guarantee rather than the only thing keeping the card short. */ .essay-card__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .35rem; max-width: var(--measure); font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.6; color: var(--text-muted); } /* Cards with a thumbnail put it beside the text. minmax(0, 1fr) stops a long unbroken word in a title from pushing the grid wider than the column. */ .essay-card--thumb { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-sm); align-items: start; } .essay-card__body { display: block; min-width: 0; } /* The preview card is 1200x630 and the figure is 1616x685, so a 16:9 box crops a little off the sides rather than letterboxing. Sized in the markup too, so the row does not jump while the image loads. */ .essay-card__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-secondary); } /* ---------- page header ---------- */ .page-header { margin-bottom: var(--space-lg); } .page-header__label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-xs); } .page-header__title { font-size: var(--text-2xl); font-weight: 500; margin-bottom: var(--space-xs); line-height: 1.25; } .page-header__dates { display: flex; gap: var(--space-md); align-items: baseline; flex-wrap: wrap; margin-bottom: var(--space-sm); } .page-header__description { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); margin: 0; line-height: 1.6; max-width: var(--measure); } .page-header__updated { color: var(--accent); } .section-heading { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); display: inline-block; padding-bottom: .4rem; margin-bottom: var(--space-sm); border-bottom: 2px solid var(--accent); } /* ---------- article prose ---------- */ .prose { font-family: var(--font-serif); font-size: var(--text-base); line-height: 1.8; max-width: var(--content-wide); } .prose h2 { font-size: calc(var(--text-xl) * 1.15); font-weight: 700; letter-spacing: -.01em; margin-top: 3rem; margin-bottom: 1.4rem; } .prose h2:before { content: ""; display: block; width: 2.5rem; height: 2px; background: var(--accent); border-radius: 1px; margin: 0 auto 1.4rem; } .prose h3 { font-size: var(--text-lg); margin-top: 2.5rem; margin-bottom: .75rem; } .prose h4 { font-size: var(--text-base); margin-top: 2rem; margin-bottom: .6rem; } .prose p { margin-bottom: 1.75rem; } .prose a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .prose ul, .prose ol { margin-bottom: 1.75rem; } .prose blockquote { border-left: 2px solid var(--accent); padding: .25rem 0 .25rem 1.5rem; margin: 0 0 1.75rem; color: var(--text-muted); font-style: italic; } .prose blockquote p { margin-bottom: .75rem; } /* ---------- figures & images ---------- */ .prose figure { margin: 2.5rem 0; } .prose figure img { border: 1px solid var(--border); border-radius: 6px; display: block; margin: 0 auto; } .prose figcaption { margin-top: .6rem; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); text-align: center; line-height: 1.5; } .prose img { display: block; margin: 2.5rem auto; border: 1px solid var(--border); border-radius: 6px; } /* Email contact image — a small inline asset sitting after the "Email:" label, not a figure. Opt it out of the .prose img treatment above (border, centring, 2.5rem margins). The two variants swap on the site's own [data-theme] toggle; keying this off prefers-color-scheme would ignore the manual switch and could render dark text on a dark page (or light text on a light one). Both carry empty alt text so the address never appears in the markup. The dark variant also carries an inline display:none so that a stale or missing stylesheet degrades to one visible image rather than two. */ .prose img.email-img { display: inline; margin: 0 0 0 .4rem; border: 0; border-radius: 0; width: 400px; max-width: 100%; height: auto; vertical-align: middle; } .prose img.email-img--dark { display: none; } :root[data-theme='dark'] .prose img.email-img--light { display: none; } :root[data-theme='dark'] .prose img.email-img--dark { display: inline !important; } /* ---------- tables ---------- */ .prose table { width: 100%; border-collapse: collapse; margin: 0 0 2rem; font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.55; } .prose th, .prose td { border: 1px solid var(--border); padding: .55rem .8rem; text-align: left; vertical-align: top; } .prose thead th { background: var(--bg-secondary); font-weight: 600; color: var(--text); } .prose .table-wrap { overflow-x: auto; } /* ---------- code ---------- */ .prose code, .prose kbd { font-family: var(--font-mono); font-size: .86em; background-color: var(--bg-secondary); border: 1px solid var(--border); padding: .12em .38em; border-radius: 4px; overflow-wrap: break-word; } .prose pre { position: relative; margin: 0 0 2rem; } .prose pre code { display: block; overflow-x: auto; background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 6px; color: var(--code-text); font-size: .85rem; line-height: 1.65; padding: 1.1rem 1.25rem; overflow-wrap: normal; -webkit-overflow-scrolling: touch; box-shadow: inset 0 1px 0 #ffffff14; } .prose pre code::-webkit-scrollbar { height: 8px; } .prose pre code::-webkit-scrollbar-thumb { background: #ffffff2e; border-radius: 4px; } .prose pre code::-webkit-scrollbar-track { background: transparent; } /* copy button (injected by site.js) */ .btn-copy { position: absolute; top: .55rem; right: .6rem; z-index: 2; font-family: var(--font-sans); font-size: .72rem; letter-spacing: .03em; color: #b8b3a9; background: #ffffff14; border: 1px solid #ffffff22; border-radius: 4px; padding: .22rem .55rem; cursor: pointer; transition: background .15s ease, color .15s ease; } .btn-copy:hover { background: #ffffff26; color: #fff; } .btn-copy.is-copied { color: #fff; } /* Rouge — custom light-on-dark palette in the site's own hues */ .highlight .c, .highlight .c1, .highlight .cm { color: #8a8a80; font-style: italic; } .highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .o, .highlight .ow { color: #d4a06a; } .highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx { color: #b3c49a; } .highlight .mi, .highlight .mf, .highlight .mh, .highlight .il, .highlight .mo, .highlight .mb { color: #cf9a7a; } .highlight .nf, .highlight .nb, .highlight .nc, .highlight .na, .highlight .nl { color: #9db9d4; } .highlight .no, .highlight .nd, .highlight .ne, .highlight .ni { color: #b3a6d0; } .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .bp { color: var(--code-text); } .highlight .p { color: #b8b3a9; } .highlight .err { color: #e08d8d; } /* ---------- footer ---------- */ .site-footer { padding: var(--space-lg) var(--padding-x); border-top: 1px solid var(--border); margin-top: var(--space-xl); } .site-footer__inner { max-width: var(--content-wide); margin: 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm) var(--space-md); flex-wrap: wrap; } .site-footer p { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); margin: 0; } .site-footer a { color: var(--text-muted); } .site-footer a:hover { color: var(--accent); } /* ---------- small screens ---------- */ @media (max-width: 640px) { :root { --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2rem; --padding-x: 1.25rem; --space-xl: 4rem; --space-lg: 3rem; } .site-nav { padding: 1.25rem var(--padding-x); } .essay-card__inner { flex-direction: column; align-items: flex-start; gap: .2rem; } /* Narrower thumbnail column, so the title still has room for a few words per line. */ .essay-card--thumb { grid-template-columns: 112px minmax(0, 1fr); gap: .75rem; } .site-footer__inner { flex-direction: column; gap: var(--space-xs); align-items: flex-start; } .prose pre code { font-size: .8rem; padding: 1rem 1rem 1rem 1rem; } .page-header__dates { flex-direction: column; gap: 0; } } /* ---------- theme toggle (day/night, remembered) ---------- */ .theme-toggle { display: inline-flex; align-items: center; gap: .45rem; background: none; border: none; cursor: pointer; padding: 0; } .theme-toggle__icon { width: 14px; height: 14px; color: var(--text-muted); transition: color .15s ease; flex-shrink: 0; } .theme-toggle:hover .theme-toggle__icon { color: var(--accent); } .theme-toggle__track { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border); transition: border-color .15s ease; flex-shrink: 0; } .theme-toggle:hover .theme-toggle__track { border-color: var(--accent); } .theme-toggle__thumb { position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); transition: transform .2s ease; } html[data-theme='dark'] .theme-toggle__thumb { transform: translateX(14px); } .theme-toggle__icon--sun { display: block; } .theme-toggle__icon--moon { display: none; } html[data-theme='dark'] .theme-toggle__icon--sun { display: none; } html[data-theme='dark'] .theme-toggle__icon--moon { display: block; } @media (max-width: 900px) { .site-nav__links li:has(.theme-toggle) { padding: .85rem 0; border-bottom: 1px solid var(--border); } .site-nav__links li:has(.theme-toggle):last-child { border-bottom: none; } }