/* blog.tmlr.org — "Midnight": the TMLR logo's navy as the page, serif titles (Newsreader) and IBM Plex Sans text. Fonts are loaded in _includes/head.html. Dark is the default. The button in the header sets data-theme="light" on (see _includes/theme-toggle.html); everything colour-related lives in the two variable blocks below. */ :root { color-scheme: dark; --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: "Newsreader", Georgia, "Times New Roman", serif; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --measure: 47.5rem; /* 760px column shared by the header, the content and the footer */ --bg: #0b1640; --surface: #13225a; --text: #dfe4f5; --text-strong: #f2f4fc; --title: #e8ecf9; --body-soft: #c3cbe9; --list-text: #b7c0de; --caption: #a4afd6; --muted: #8f9bcf; --muted-2: #7f8bc0; --accent: #b9c2ea; --accent-strong: #c5cdf2; --link-hover: #ffffff; --hairline: rgba(185, 194, 234, 0.22); --hairline-soft: rgba(185, 194, 234, 0.14); --rule: rgba(185, 194, 234, 0.32); --logo-ring: rgba(185, 194, 234, 0.35); --shadow: 0 24px 60px rgba(0, 0, 0, 0.35); } :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --surface: #eef1f9; --text: #1f2430; --text-strong: #111633; --title: #1a2050; --body-soft: #3d4354; --list-text: #4a5064; --caption: #6b7286; --muted: #6b7286; --muted-2: #7a8199; --accent: #2b3f8f; --accent-strong: #112467; --link-hover: #0b1640; --hairline: rgba(17, 36, 103, 0.18); --hairline-soft: rgba(17, 36, 103, 0.10); --rule: rgba(17, 36, 103, 0.28); --logo-ring: rgba(17, 36, 103, 0.15); --shadow: 0 18px 40px rgba(17, 36, 103, 0.12); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 18px; line-height: 1.65; color: var(--text); background: var(--bg); } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; } img { max-width: 100%; height: auto; } .wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem; } /* Header ------------------------------------------------------------------ */ .site-header { border-bottom: 1px solid var(--hairline); } .header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1.5rem; padding-top: 1.1rem; padding-bottom: 1.1rem; } .brand { display: flex; align-items: center; gap: .85rem; line-height: 1; color: var(--text-strong); font-family: var(--serif); font-weight: 500; font-size: 1.65rem; letter-spacing: -.01em; } .brand:hover { color: var(--text-strong); text-decoration: none; } .brand img { height: 48px; width: auto; display: block; border-radius: 4px; box-shadow: 0 0 0 1px var(--logo-ring); } .brand em { font-style: italic; font-weight: 400; color: var(--accent); } .site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem 1.75rem; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .site-nav a { color: var(--accent); } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--link-hover); text-decoration: none; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--hairline); border-radius: 999px; background: none; color: var(--accent); cursor: pointer; padding: 0; } .theme-toggle:hover { color: var(--link-hover); border-color: var(--rule); } .theme-toggle svg { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } /* Content ----------------------------------------------------------------- */ main.wrap { padding-top: 3.25rem; padding-bottom: 3rem; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .6em; color: var(--text-strong); } h1 { font-size: 3.1rem; line-height: 1.08; letter-spacing: -.015em; } h2 { font-size: 1.9rem; margin-top: 2em; color: var(--accent-strong); } h3 { font-size: 1.45rem; margin-top: 1.6em; } .meta { color: var(--muted); font-size: .85rem; margin: 0; } .meta a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; } .meta a:hover { color: var(--link-hover); text-decoration-color: currentColor; } /* Featured post (front page) ---------------------------------------------- */ .featured { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 2rem; align-items: center; background: var(--surface); border-radius: 16px; padding: 1.75rem; box-shadow: var(--shadow); } .featured-image img { width: 280px; height: 220px; object-fit: contain; background: #ffffff; padding: 8px; border-radius: 10px; display: block; } .featured-image.is-placeholder img { object-fit: cover; background: none; padding: 0; } .featured .label { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .featured h2 { font-size: 2.35rem; line-height: 1.1; margin: .55rem 0 .7rem; color: var(--text-strong); } .featured h2 a { color: var(--text-strong); } .featured h2 a:hover { color: var(--link-hover); text-decoration: none; } .featured p { margin: 0 0 .85rem; font-size: 1.05rem; line-height: 1.55; color: var(--body-soft); } .featured .meta { margin: 0; } /* Post list (front page) -------------------------------------------------- */ .year-heading { font-family: var(--font); font-size: 1.25rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); margin: 2.9rem 0 .4rem; display: flex; align-items: center; gap: 1rem; } .year-heading::after { content: ""; flex: 1; height: 1px; background: var(--rule); } .post-summary { padding: 1.6rem 0; margin: 0; border-bottom: 1px solid var(--hairline-soft); } .post-summary h3 { font-size: 1.75rem; line-height: 1.2; margin: .35rem 0 .5rem; } .post-summary h3 a { color: var(--title); } .post-summary h3 a:hover { color: var(--link-hover); text-decoration: none; } .post-summary p { margin: 0; font-size: 1.03rem; line-height: 1.55; color: var(--list-text); } /* Single post ------------------------------------------------------------- */ .post-header { margin-bottom: 2.25rem; } .post-header h1 { margin-bottom: .6rem; } .post-content { font-size: 1.125rem; line-height: 1.7; } .post-content > :first-child { margin-top: 0; } .post-content p, .post-content ul, .post-content ol, .post-content blockquote, .post-content table, .post-content .highlighter-rouge, .post-content figure { margin: 0 0 1.3em; } .post-content li { margin-bottom: .4em; } .post-content li > p { margin-bottom: .5em; } .post-content li::marker { color: var(--accent); } .post-content strong { color: var(--text-strong); font-weight: 600; } .post-content blockquote { margin-left: 0; padding: .1rem 0 .1rem 1.1rem; border-left: 3px solid var(--accent); color: var(--body-soft); } .post-content blockquote > :last-child { margin-bottom: 0; } .post-content img { display: block; margin: 0 auto; border-radius: 8px; } .post-content figure { margin: 2em 0; background: var(--surface); border-radius: 14px; padding: 1rem; } .post-content figure img { background: #ffffff; } .post-content figcaption { font-size: .88rem; line-height: 1.5; color: var(--caption); margin-top: .85rem; text-align: center; } .post-content hr { border: 0; border-top: 1px solid var(--hairline); margin: 2.5em 0; } .post-content sup { line-height: 0; } .post-content code { font-family: var(--mono); font-size: .86em; background: var(--surface); padding: .1em .35em; border-radius: 4px; color: var(--title); } .post-content pre { margin: 0; padding: 1rem 1.1rem; background: var(--surface); border-radius: 10px; overflow-x: auto; line-height: 1.5; } .post-content pre code { background: none; padding: 0; font-size: .85em; } .post-content .highlight, .post-content .highlight pre, .post-content pre.highlight { background: var(--surface); border-radius: 10px; } .post-content table { border-collapse: collapse; font-size: .95em; display: block; max-width: 100%; overflow-x: auto; } .post-content th, .post-content td { border: 1px solid var(--hairline); padding: .45em .75em; text-align: left; vertical-align: top; } .post-content th { background: var(--surface); color: var(--text-strong); } .post-content .footnotes { font-size: .9em; color: var(--muted); border-top: 1px solid var(--hairline); margin-top: 2.5em; padding-top: 1em; } .post-content .footnotes ol { padding-left: 1.4em; } .post-content mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; } /* Post footer ------------------------------------------------------------- */ .post-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); } .pager { display: flex; justify-content: space-between; gap: 1.5rem; } .pager a { max-width: 46%; font-family: var(--serif); font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--title); } .pager a:hover { color: var(--link-hover); text-decoration: none; } .pager .newer { margin-left: auto; text-align: right; } .pager .label { display: block; font-family: var(--font); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .25rem; } /* Footer ------------------------------------------------------------------ */ .site-footer { border-top: 1px solid var(--hairline); padding: 1.6rem 0 3rem; color: var(--muted); font-size: .88rem; } .site-footer .links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-bottom: .5rem; } .site-footer p { margin: 0; } @media (max-width: 640px) { body { font-size: 17px; } h1 { font-size: 2.2rem; } .brand { font-size: 1.4rem; } .brand img { height: 40px; } .header-inner { flex-direction: column; align-items: flex-start; } .featured { grid-template-columns: 1fr; padding: 1.25rem; } .featured-image img { width: 100%; height: auto; max-height: 260px; } .featured h2 { font-size: 1.9rem; } .post-content { font-size: 1.05rem; } .pager { flex-direction: column; } .pager a, .pager .newer { max-width: none; margin-left: 0; text-align: left; } } @media print { :root { color-scheme: light; } body { background: #ffffff; color: #111111; } h1, h2, h3, .featured h2 a, .post-summary h3 a, .post-content strong { color: #111111; } a { color: #1d3f9a; } .site-header, .site-footer, .pager { display: none; } .post-content figure, .post-content pre, .post-content code, .post-content .highlight { background: #f3f4f8; } }