/* davidarcos.net, theme "hst". One file, no build step. Light and dark follow the reader's system, or the switch in the header (js/theme.js, the only script on a content page). */ /* the fonts, served from the site (OFL, see fonts/): Inter for the text and the titles, Fira Code for the numbers and the code. No italic face: the theme uses none, and an in a text is a medium weight, so nothing is ever synthesised */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: fallback; src: url("../fonts/inter-latin.woff2?v=2c295d99") format("woff2"); } @font-face { font-family: "Fira Code"; font-style: normal; font-weight: 300 700; font-display: fallback; src: url("../fonts/fira-code-latin.woff2?v=771bf4b7") format("woff2"); } /* the ground. Every token holds its light and its dark value in light-dark(); which one applies follows color-scheme: the reader's browser by default, or the value the switch in the header sets on */ :root { color-scheme: light dark; /* the wardrobe: black jeans, a red or a blue plaid shirt; and the troll: brown and moss. Every colour on the site derives from these */ --jeans: #232321; --red: light-dark(#b8322f, #e5776f); --blue: light-dark(#2f5f8f, #8ab4e6); --brown: light-dark(#6f4e2c, #b3926b); --moss: light-dark(#5f6b3b, #a3b06e); /* light: a soft warm grey, not white, easier on the eyes over a long read; dark: the jeans, a shade darker */ --bg: light-dark(#e8e6e0, #1a1917); /* a warm grey, a step darker than paper, so the light mode does not glare */ --bg-2: light-dark(#dedbd3, #1f1e1b); /* the bottom of the page gradient */ --fg: light-dark(var(--jeans), #e9e6df); --muted: light-dark(#66665f, #a3a39c); --line: light-dark(#cbc9c0, #302f2b); --accent: var(--red); /* links, hovers, focus, dates: everything that answers the reader */ --accent-2: var(--blue); /* the signature: the big years and the rule of a quote */ --accent-fg: light-dark(#ffffff, #0f1b2e); --card: light-dark(#dddbd3, #252420); --banner-bg: light-dark(color-mix(in oklab, var(--brown) 10%, var(--bg)), color-mix(in oklab, var(--brown) 16%, var(--bg))); --banner-fg: light-dark(#4a3620, #e8d9c4); --tag-bg: light-dark(color-mix(in oklab, var(--moss) 14%, var(--bg)), color-mix(in oklab, var(--moss) 18%, var(--bg))); --badge: light-dark(#bf4f18, #ee6f27); /* the menéame orange, darkened to AA on the light ground */ --badge-ink: light-dark(#a84512, #ee6f27); /* the same orange as small text (the marks): AA at 0.9rem */ --badge-fg: light-dark(#ffffff, #1a1208); --badge-hover: light-dark(#a84512, #f58a4a); --line-strong: light-dark(#8d8d85, #6e6e67); --rule: color-mix(in oklab, var(--accent-2) 35%, var(--line)); /* the separators between things: the line with a touch of blue */ --rule-strong: color-mix(in oklab, var(--accent-2) 55%, var(--line)); /* the left rule of a quoted thing: a comment, a mention, a mark's border */ --date-size: 0.85rem; /* every date, month, day and count, one size */ --title-size: clamp(1.6rem, 1rem + 2.4vw, 2.2rem); /* page and post titles, fluid */ --year-size: clamp(2rem, 1.2rem + 4vw, 3rem); /* the big year of a post, fluid */ --year-list-size: 1.5rem; /* the year of a list row, on the Home and the Blog: a label, not a figure */ --measure: 50rem; /* the one width of the site: header, lists, the post text and its cover (800 px, the covers' own size) */ --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* the text too: Inter, with the reader's own behind it */ --display: "Inter", system-ui, sans-serif; /* titles, the site name, the abstracts */ --mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* years, dates, marks, code */ } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html { font-synthesis: none; font-size: 106.25%; line-height: 1.6; font-family: var(--font); background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; } body { background-color: var(--bg); background-image: radial-gradient(color-mix(in oklab, var(--fg) 7%, transparent) 0.8px, transparent 1.1px); background-size: 18px 18px; background-position: 0.5px 0.5px; } /* a flat ground with a faint grain: paper, not a fill. The half pixel puts each dot on the centre of a pixel, and the 0.8px radius, fading to 1.1px, lights it and touches its four neighbours: a 0.6px dot at 9px fell on the corner of four pixels, all 0.707px away, and a 1x screen drew nothing. No gradient (nobody saw it) and no fixed attachment (a repaint on every scroll, and iOS ignores it) */ body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent); } /* the underline lighter than the text: a paragraph with five links is not an alert */ a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--accent); } em, i, cite, blockquote { font-style: normal; } em, i { font-weight: 500; } /* emphasis without an italic face: a half step up in weight */ .link-icon { width: 0.85em; height: 0.85em; fill: currentColor; vertical-align: -0.08em; } /* the network's mark in front of a link to it, the colour of the link */ .icon-pybcn { display: inline-block; background: currentColor; -webkit-mask: url("../img/pybcn.png?v=d77f0a30") center / contain no-repeat; mask: url("../img/pybcn.png?v=d77f0a30") center / contain no-repeat; } /* Python Barcelona's logo as a mask, like the menéame one: the colour of the text, red on hover, monochrome like the rest */ img { max-width: 100%; height: auto; display: block; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* the icon symbols: present for , never drawn (the hidden attribute is not enough for an inline svg in every browser) */ h1, h2, h3 { line-height: 1.15; font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; font-variation-settings: "opsz" 32; } code { font-family: var(--mono); font-size: 0.92em; } pre, .highlight { overflow-x: auto; padding: 1rem; background: var(--card); border-radius: 6px; border-left: 3px solid var(--brown); font-size: 0.9rem; } blockquote { margin: 1.25rem 0; padding: 0.25rem 0 0.25rem 1.1rem; border-left: 3px solid var(--accent-2); font-family: var(--display); color: var(--muted); font-size: 1.02em; } /* the quoted abstract: the blue rule and the grey say "quoted", no italic needed */ /* the talk abstract is the most quotable paragraph: full ink */ blockquote p { margin: 0.5rem 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* one frame for every page: header, main and footer never change width between pages */ .site-main, .site-footer-inner { width: min(100% - 2rem, var(--measure)); margin-inline: auto; } .site-header { border-bottom: 2px solid var(--rule); } .site-header-inner { width: min(100% - 2rem, var(--measure)); margin-inline: auto; padding: 1.5rem 0 0; } /* the header follows the reader. theme.js measures it (--header-h), keeps its place with the spacer, and sets html.is-scrolled once the page has moved past the sentinel: then it is fixed at the top and folds into one row, the face small, the name and the motto side by side, the search and the switch; the sections wait upstairs. Out of the flow, so nothing below it moves when it folds */ .scroll-sentinel { position: absolute; top: 5rem; height: 1px; width: 1px; } @media (min-width: 40rem) { .js-header .site-header-space { height: var(--header-h, 9.5rem); } .js-header .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .site-header-inner { transition: padding 0.25s ease; } .site-avatar img, .site-title { transition: width 0.25s ease, height 0.25s ease, font-size 0.25s ease; } .is-scrolled .site-header-inner { display: flex; align-items: center; gap: 1.25rem; padding: 0.4rem 0; } .is-scrolled .site-brand { margin: 0; flex: 0 0 auto; gap: 0.6rem; } .is-scrolled .site-brand > div { display: flex; align-items: baseline; gap: 0.6rem; } .is-scrolled .site-avatar img { width: 2rem; height: 2rem; } .is-scrolled .site-title { font-size: 1.15rem; } .is-scrolled .site-tagline { margin: 0; font-size: 0.85rem; } .is-scrolled .site-nav { flex: 1 1 auto; padding: 0; margin: 0; gap: 0.9rem; } .is-scrolled .site-nav > a { display: none; } /* folded: the name is the way home, the sections wait upstairs; the search and the switch stay */ .is-scrolled .nav-search input { width: 8rem; padding: 0.3rem 0.7rem; font-size: 0.9rem; } .is-scrolled .nav-search input:focus { width: 12rem; } } @media (prefers-reduced-motion: reduce) { .site-header-inner, .site-avatar img, .site-title { transition: none; } } /* the seven mountains of Bergen close every page, under the footer: the edge of the map */ .mountains { display: block; width: 100%; margin: 0; height: clamp(3rem, 5vw, 5rem); color: var(--brown); } /* the edge of the map, as an old engraving: the slopes hatched in the rock's brown, one line on the ridge */ .mountains path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .mountains .ground { display: none; } .mountains .ridge-fill { fill: url(#hatch); fill-opacity: 0.45; stroke: none; } /* the hatching: brown lines, a map's shading, not a colour */ .mountains .ridge-mid { display: none; } /* no middle range: two ridges read cleaner than three */ .mountains .ridge-back { display: none; } /* one ridge only: the near slopes in moss and their brown outline */ .site-title { font-family: var(--display); font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; font-variation-settings: "opsz" 32; color: var(--fg); text-decoration: none; } .site-title:hover, .site-title:focus-visible { color: var(--accent); } .site-brand { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.25rem; } /* the face and the name, side by side: the site is a person */ /* the menu row sticks to the top while the page scrolls (the face and the name scroll away), over the paper with a light blur */ .comments, .comment, .archive-divider, .year-group, .mention, [id] { scroll-margin-top: 4rem; } /* an anchor lands under the sticky header, not behind it */ .site-avatar img { display: block; width: 3.75rem; height: 3.75rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg) 15%, transparent); } .site-tagline { margin: 0.1rem 0 0; color: var(--muted); font-family: var(--mono); font-size: 0.95rem; } /* the motto in the mono voice, like the nav */ .motto { font-family: var(--mono); font-size: 0.95em; } /* a motto quoted in the text (hic sunt dracones): the same voice as the tagline */ .site-nav { display: flex; gap: 1.25rem; align-items: center; padding: 0.5rem 0 0.75rem; } .nav-search { margin-left: auto; } .nav-buscar { display: none; } /* the search as a link: only on a phone, where the field would take a row of its own */ body.search .nav-search { visibility: hidden; } /* the search page has its own field; the space stays so the header does not move */ .nav-search input { font: inherit; font-size: 1rem; padding: 0.45rem 0.9rem; width: 13rem; max-width: 100%; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--fg); } @media (min-width: 40rem) { .nav-search input:focus { width: 20rem; } } /* the field grows while it is used; on a phone it is a link */ .site-nav a { color: var(--fg); text-decoration: none; font-family: var(--mono); font-size: 1.05rem; font-weight: 600; } .site-nav a:hover { color: var(--accent); } .site-nav a[aria-current="page"], .site-nav a.is-here { color: var(--accent-2); } /* where you are (the page, or the section a post belongs to): a statement, so blue */ .site-main { flex: 1; padding: 1.25rem 0 1rem; } .site-footer { border-top: 2px solid var(--rule); color: var(--muted); font-size: 0.85rem; } /* a band across the page, like the header; the content keeps the column */ .site-footer-inner { padding: 1.5rem 0 0.25rem; } .social { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .social a { display: inline-flex; padding: 0.5rem; color: var(--muted); border-radius: 6px; } .social a:hover { color: var(--accent); } .social svg, .social .icon-pybcn { width: 1.5rem; height: 1.5rem; fill: currentColor; } .license { margin: 0 auto; text-align: center; text-wrap: balance; } /* the theme switch: one button in the top right corner of the header, above the search, that flips light and dark; the icon is the mode a click gives (the moon on the light ground, the sun on the dark). Hidden until theme.js sets data-theme, since without it the button would do nothing */ .theme-switch { display: inline-flex; padding: 0.5rem; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 6px; } :root:not([data-theme]) .theme-switch { display: none; } .theme-switch:hover { color: var(--accent); } .theme-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-switch svg { display: none; width: 1.25rem; height: 1.25rem; } :root[data-theme="light"] .theme-moon, :root[data-theme="dark"] .theme-sun { display: block; } .page-title { font-size: var(--title-size); margin: 0 0 1.5rem; } /* home */ .intro { font-size: 1.1rem; margin-bottom: 1rem; } .intro h1 { font-size: var(--title-size); margin: 0 0 1rem; } .intro-label { font-family: var(--mono); font-size: 0.92em; font-weight: 600; color: var(--accent-2); } /* the labels of the Home (Ahora, Fuera del teclado), inline at the start of their sentence: the mono blue voice, like the marks */ hr { border: 0; border-top: 2px solid var(--rule); margin: 1rem 0; } /* a rule in the text: the same line as the header's and the footer's */ /* the career, at /cv/: one row per job, years in the blue mono voice, the role in red, the company in the text colour, the detail muted; no links, no logos */ .cv-section { font-size: 1rem; } .cv-section h2 { font-family: var(--display); font-size: 1.2rem; font-weight: 700; color: var(--fg); margin: 1.5rem 0 0.4rem; } .cv-section h2:first-child { margin-top: 0.5rem; } /* the three groups: in the text colour, so they stand out from the blue years and the red roles */ .cv { border-collapse: collapse; width: 100%; } .cv td { padding: 0.25rem 0; vertical-align: baseline; border-top: 1px solid var(--line); } .cv tr:first-child td { border-top: 0; } .cv-years { font-family: var(--mono); font-size: 1rem; font-weight: 600; color: var(--accent-2); white-space: nowrap; padding-right: 0.9rem !important; width: 1%; } /* as wide as "2024 - 2026" and no more */ .cv-dash { color: var(--muted); } .cv td + td { white-space: nowrap; } /* one line per row: the notes are written short enough for the 50rem measure */ @media (max-width: 40rem) { .cv td + td { white-space: normal; } } .cv-role { color: var(--accent); font-weight: 600; } .cv-at { color: var(--muted); } .cv-org { font-weight: 600; } .cv-org a, .cv-note a { color: inherit; text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent); } /* a linked name in the CV keeps its colour; the underline says it leads somewhere */ .cv-org a:hover, .cv-note a:hover { color: var(--accent); } .cv-note { color: var(--muted); } /* home timeline: the year once per row, the loudest thing on the page, then the cards of that year */ .timeline { display: flex; flex-direction: column; } .year-row { display: grid; grid-template-columns: max-content 1fr; gap: 1.25rem; padding: 1rem 0; border-top: 1px solid var(--rule); } .intro ~ .timeline .card-title { font-size: 1.2rem; } .year-row:first-child { border-top: 0; padding-top: 0; } .year-big { font-family: var(--mono); font-size: var(--year-list-size); font-weight: 800; line-height: 1; color: var(--accent-2); letter-spacing: -0.04em; padding-top: 0.35rem; min-width: 3.5rem; white-space: nowrap; font-variant-numeric: tabular-nums; } /* the column is as wide as the year needs; four tabular digits, so every row matches */ .year-cards { display: flex; flex-direction: column; gap: 1.25rem; } .card { position: relative; display: grid; grid-template-columns: 22rem 1fr; gap: 1rem; align-items: start; padding: 0.5rem; margin: -0.5rem; border-radius: 8px; } .card:hover, .card:focus-within { background: var(--card); } /* everything in the card answers the hover: text warms, date and summary come forward */ .card:hover .card-date, .card:focus-within .card-date, .card:hover .card-title a, .card:focus-within .card-title a { color: var(--accent); } .card:hover .card-summary, .card:focus-within .card-summary { color: var(--fg); } .card-summary { color: var(--muted); } /* stretched link: the title is the one real link, its ::after covers the whole card */ .card-title a::after { content: ""; position: absolute; inset: 0; } .card-title a:focus-visible { outline: none; } .card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .card-cover { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: var(--card); } .card-cover::after { content: ""; position: absolute; inset: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 12%, transparent); pointer-events: none; } /* a hairline inside every cover: photos of different brightness sit as one set */ .card-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: filter 0.2s ease; } .card:hover .card-cover img, .card:focus-within .card-cover img { filter: none; } /* the card lights up */ .intro ~ .timeline .card-cover img { transition: filter 0.2s ease, transform 0.2s linear; } .intro ~ .timeline .card:hover .card-cover img, .intro ~ .timeline .card:focus-within .card-cover img { transform: scale(1.2); } /* the Home only: the photo comes closer inside its frame and the card keeps its size, as the organizers' cards at pybcn.org */ @media (prefers-reduced-motion: reduce) { .intro ~ .timeline .card:hover .card-cover img, .intro ~ .timeline .card:focus-within .card-cover img { transform: none; } } .card-title { font-size: 1.3rem; margin: 0 0 0.25rem; } .card-title a { color: var(--fg); text-decoration: none; } .card-date { margin: 0 0 0.4rem; color: var(--accent-2); font-size: var(--date-size); font-family: var(--mono); } /* time is blue, everywhere */ .card-kind, .post-kind { color: var(--accent-2); } /* what the post is (Charla, Podcast...), with its emoji, before the date: "Artículo del 18 de septiembre de 2026" */ .card-del { color: var(--muted); font-family: var(--font); font-size: 0.9em; } /* the "del": grey, and not in the mono, so the two blue things stand */ .card:hover .card-kind, .card:focus-within .card-kind { color: var(--accent); } /* the kind lights up with the date */ .card-summary { margin: 0; } @media (max-width: 40rem) { .comment { grid-template-columns: 56px 1fr; gap: 0.75rem; } .comment-avatar { width: 56px; height: 56px; } .year-row { grid-template-columns: 1fr; gap: 0.5rem; } .card { grid-template-columns: 6rem 1fr; gap: 0.75rem; } /* on a phone the Home is a list: a thumbnail and the text, like the Blog's small cards */ .card-cover { max-width: none; } .card-title { font-size: 1.05rem; } .card-summary { display: none; } /* the summary waits on the post; the row is title, kind and date */ .site-nav { flex-wrap: wrap; gap: 0.75rem 1rem; } .nav-search { display: none; } .nav-buscar { display: inline; } } /* blog: the portfolio first, the home's timeline with a small cover and no summary; then the archive as an index */ .featured { margin-bottom: 1rem; } .featured .year-row { padding: 0.9rem 0; column-gap: 0.75rem; } /* the year column lines up with the archive index below */ .featured .year-cards { gap: 0.75rem; } .card-small { grid-template-columns: 7rem 1fr; gap: 0.9rem; align-items: center; } .card-small .card-title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0; } .card-small .card-date { margin: 0.1rem 0 0; } @media (max-width: 40rem) { .card-small { grid-template-columns: 6rem 1fr; } .card-small .card-cover { max-width: none; } } /* the archive index: the year sits in a left rail, small. */ .page-lead { margin: -1rem 0 1.5rem; color: var(--muted); } .page-title { color: var(--fg); } .post-content h2, .post-content h3, .post-content h4 { color: var(--accent-2); } /* the headings inside a post, in the signature colour */ /* the blog index: four columns, year, month and day centred, the title free to wrap */ .year-group { display: grid; grid-template-columns: max-content 2.5rem 1.75rem 1fr; column-gap: 0.75rem; border-top: 1px solid var(--rule); padding: 0.9rem 0; } /* the same rule as the portfolio rows */ .year { font-family: var(--mono); font-size: var(--year-list-size); font-weight: 800; line-height: 1; color: var(--accent-2); letter-spacing: -0.04em; margin: 0; padding-top: 0.35rem; min-width: 3.5rem; white-space: nowrap; font-variant-numeric: tabular-nums; } /* the same big year as the portfolio rows above, in ink: here it is a heading, not decoration */ .month-groups { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; } .year-list { list-style: none; margin: 0; padding: 0; } .month-group { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; } .month-group + .month-group { margin-top: 0.35rem; } .month { font-family: var(--mono); font-size: var(--date-size); font-weight: 600; color: var(--accent-2); margin: 0; padding-top: 0.3rem; line-height: 1.6; text-align: center; justify-self: stretch; min-width: 0; } .year-list { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; } .year-item { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; position: relative; } /* relative: the caption hangs under the row */ /* start, not baseline: the day lines up with the month and the year, which sit in other rows */ .year-item .day { padding-top: 0.3rem; line-height: 1.6; text-align: center; justify-self: stretch; min-width: 0; } /* only the title cell is the hover surface and the link target; the day is a plain cell like the year and the month */ .year-item-text { position: relative; padding: 0.3rem 0.5rem; margin: 0 -0.5rem; border-radius: 6px; } /* the whole line is the link, same as the cards on the home page */ .year-item a::after { content: ""; position: absolute; inset: 0; } .year-item-text:hover, .year-item-text:focus-within { background: var(--card); } .year-item-text:hover a, .year-item-text:focus-within a { color: var(--accent); } .year-item:has(.year-item-text:hover) time, .year-item:has(.year-item-text:focus-within) time, .year-item-text:hover .mark, .year-item-text:focus-within .mark { color: var(--accent); border-color: var(--accent); } /* the row answers as one: title, day and marks in the accent */ .month-group:has(.year-item-text:hover) .month, .month-group:has(.year-item-text:focus-within) .month, .year-group:has(.year-item-text:hover) .year, .year-group:has(.year-item-text:focus-within) .year, .year-row:has(.card:hover) .year-big, .year-row:has(.card:focus-within) .year-big { color: var(--accent); } /* and so do its month and its year */ .year-item a:focus-visible { outline: none; } .year-item-text:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; } .year-item time { color: var(--accent-2); font-family: var(--mono); font-size: var(--date-size); } .year-item a { color: var(--fg); text-decoration: none; font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; } /* the same voice as the card titles above */ /* post */ .post-header { margin-bottom: 0.5rem; } .post-header > :last-child { margin-bottom: 0; } /* the cover, or the tags: the text starts right after */ .post-title { font-size: var(--title-size); margin: 0 0 0.5rem; text-wrap: balance; } .post-lead { margin: -0.5rem 0 0.9rem; font-size: 1.1rem; color: var(--muted); text-wrap: pretty; } /* the Summary, the same words the card shows, so the post says what it is before it starts */ .post-lead .tldr { text-decoration: none; cursor: help; font-style: normal; font-family: var(--mono); font-size: var(--date-size); color: var(--accent-2); } .post-header .post-meta .post-kind, .post-header .post-meta > time { font-family: var(--mono); font-size: 1.1rem; } /* the post's date, bigger than any other: the year has to be seen now that the big year is gone */ .post-meta .post-kind { margin-right: -0.25rem; } .post.archive .post-kind, .post.archive .post-meta > time { color: var(--brown); } /* an Archive post: brown, like its rows on the Blog; its marks moss, its meneos orange, the same as there */ .post.archive .mark { color: var(--moss); border-color: color-mix(in oklab, var(--moss) 55%, var(--line)); } .post.archive .mark-meneame { color: var(--badge-ink); border-color: var(--badge-ink); } .post-meta { margin: 0 0 0.9rem; color: var(--muted); font-family: var(--mono); font-size: var(--date-size); display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } .post-cover-figure { margin: 0 0 1rem; } .post-cover { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; } .post-cover-figure figcaption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--muted); } .post-content { font-size: 1.05rem; overflow-wrap: anywhere; } .post-content strong, .intro strong, .year-note strong { color: var(--accent); } /* bold is for the names that matter */ .num { font-family: var(--mono); font-size: 0.95em; color: var(--accent); } /* a figure in the text: the mono voice, like every number on the site, in red because it counts */ .yr { font-family: var(--mono); font-size: 0.92em; color: var(--accent-2); } /* a year mentioned in the text, in the same voice as the big ones */ .year-big .yr, .year .yr { font-size: inherit; } .post-content p { margin: 1rem 0; text-wrap: pretty; } .post-content h2, .post-content h3, .post-content h4 { margin: 1.75rem 0 0.5rem; text-wrap: balance; } .post-content img { border-radius: 6px; } .post-content ul, .post-content ol { padding-left: 1.5rem; margin: 1rem 0; } .post-content li { margin: 0.25rem 0; } .post-content li > ul, .post-content li > ol { margin: 0.25rem 0; } .embed { margin: 1rem 0; } .embed iframe { width: 100%; border: 0; border-radius: 6px; background: var(--card); } .post-content > p > img, .post-content > p > a > img { margin-inline: auto; } /* a photo narrower than the column sits centred */ .embed-video iframe { aspect-ratio: 16 / 9; } .embed-slides iframe { aspect-ratio: 16 / 10; } .embed-audio iframe { height: 200px; } .embed-spotify iframe { height: 232px; border-radius: 12px; } .banner { margin: 0 0 1rem; padding: 0.75rem 1rem; background: var(--banner-bg); color: var(--banner-fg); border-left: 3px solid var(--brown); border-radius: 0 6px 6px 0; font-size: 0.95rem; display: flex; gap: 0.75rem; align-items: center; } .banner-icon { flex: none; opacity: 0.85; } .badge { margin: 0 0 1.25rem; } .badge a { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.45rem 1.1rem 0.45rem 0.7rem; background: var(--badge); color: var(--badge-fg); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.95rem; } .badge a:hover, .badge a:focus-visible { background: var(--badge-hover); } .badge img { width: 20px; height: 20px; } .badge-date, .badge-count { font-family: var(--mono); } .tags-label { color: var(--muted); text-decoration: none; } .tags-label:hover { color: var(--accent); } .tags { margin: 0 0 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; font-size: 0.85rem; color: var(--muted); } .tags-label { display: inline-flex; align-items: center; gap: 0.3rem; } .tags-icon { width: 0.9em; height: 0.9em; } .tags-list { list-style: none; margin: 0; padding: 0; display: contents; } .tags a { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.6rem; background: var(--tag-bg); border-radius: 4px; color: var(--fg); text-decoration: none; } .tags a .tags-icon { opacity: 0.7; } .tags a:hover { background: var(--accent); color: var(--accent-fg); } /* search and not found */ .search-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .search-form input { flex: 1; font: inherit; padding: 0.45rem 0.9rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--fg); } .search-form button { font: inherit; padding: 0.5rem 1rem; border: 0; border-radius: 6px; background: var(--accent); color: var(--accent-fg); font-weight: 600; cursor: pointer; } .search-status { color: var(--muted); } .search-results { list-style: none; margin: 0; padding: 0; } .search-results li { position: relative; padding: 0.75rem 0.5rem; margin: 0 -0.5rem; border-top: 1px solid var(--rule); border-radius: 6px; } .search-results li a::after { content: ""; position: absolute; inset: 0; } .search-results li:hover, .search-results li:focus-within { background: var(--card); } .search-results .year-item-marks { margin-left: 0.5rem; } .search-results li:hover a, .search-results li:focus-within a { color: var(--accent); text-decoration: none; } .search-results li:hover p, .search-results li:focus-within p { color: var(--fg); } .search-results li:hover time, .search-results li:focus-within time, .search-results li:hover .search-kind, .search-results li:focus-within .search-kind { color: var(--accent); } .search-results li a:focus-visible { outline: none; } .search-results li:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; } .search-results time, .search-results .search-kind { display: inline-block; color: var(--accent-2); font-family: var(--mono); font-weight: 400; font-size: var(--date-size); font-variant-numeric: tabular-nums; } .search-results time { margin-right: 0.6rem; } .search-results li.is-archive time, .search-results li.is-archive .search-kind { color: var(--brown); } /* the era reads by colour here too */ .search-results li.is-archive .mark { color: var(--moss); border-color: color-mix(in oklab, var(--moss) 55%, var(--line)); } .search-results li.is-archive .mark-meneame { color: var(--badge-ink); border-color: var(--badge-ink); } .search-results li a { color: var(--fg); text-decoration: none; font-weight: 600; } .search-results p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.95rem; } .search-results mark { background: transparent; color: var(--accent); font-weight: 700; } /* comments: preserved, read only */ .comments { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--rule); } .comments-title { font-size: 1.2rem; margin: 0 0 0.25rem; color: var(--accent-2); } .comments-note { margin: 0.5rem 0 1.25rem; } .banner.note { margin: 1.25rem 0; } /* the editorial notes inside a post: a credit, a lost photo, a dead poll */ .comment-permalink { color: var(--muted); text-decoration: none; } .comment-permalink:hover { color: var(--accent); text-decoration: underline; } .comment:target { background: var(--card); border-radius: 0 6px 6px 0; border-left-color: var(--accent-2); } .comment-list { list-style: none; margin: 0; padding: 0; } .comment { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; padding: 0.75rem 0.75rem; margin-inline: -0.5rem; border-top: 1px solid var(--rule); border-left: 3px solid var(--rule-strong); } /* a blue rule down the left of each comment, the width of a quote's */ .comment.is-reply { margin-left: 2.5rem; } .comment-avatar { width: 96px; height: 96px; border-radius: 8px; background: var(--card); } .comment-meta { margin: 0 0 0.25rem; font-size: 0.9rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; } .comment-author { font-weight: 600; color: var(--fg); } a.comment-author:hover, a.mention-title:hover, .comment-permalink:hover time { color: var(--accent); } .comment-meta time, .mention time, .post-meta time { font-family: var(--mono); font-size: var(--date-size); color: var(--accent-2); } .comment-text { font-size: 0.98rem; overflow-wrap: anywhere; } .comment-text p { margin: 0.4rem 0; } /* the line between the portfolio and the archive on the blog page */ .page-lead + .archive-divider { margin-top: 0; } /* a tag page with no talks: the Archive starts right under the lead */ .archive-divider { margin: 1.5rem 0 1.5rem; padding: 1rem 1.25rem; background: var(--banner-bg); color: var(--banner-fg); border-left: 3px solid var(--brown); border-radius: 0 6px 6px 0; } .archive-divider h2 { margin: 0 0 0.35rem; font-size: 1.2rem; } .archive-divider p { margin: 0; font-size: 0.95rem; } /* marks on the blog lines: meneos and comment counts */ .year-item-text { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: baseline; } @media (min-width: 40rem) { .year-item-text { flex-wrap: nowrap; } .year-item-text > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .year-item-marks { margin-left: auto; flex: 0 0 auto; } } /* one line per post */ .year-item-marks { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; font-size: 0.9rem; color: var(--muted); align-self: center; } /* the pills centre on the title line, not on its baseline */ .mark { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.45rem; font-family: var(--mono); font-size: var(--date-size); border-radius: 999px; border: 1px solid var(--rule-strong); white-space: nowrap; text-decoration: none; color: var(--accent-2); } /* the counts in the blue, like the dates: what a post carries */ .mark-icon { width: 1.25em; height: 1.25em; display: block; } /* a block, so the flex row centres it with the number */ .mark-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* not display: none, so a screen reader hears "9 comentarios", not "9" */ /* the words never appear inline (that would change the row's height); a hover opens a small window below the marks with the full text */ .marks-window { display: none; position: absolute; right: 0; top: calc(100% - 0.2rem); z-index: 3; gap: 0.4rem; padding: 0.45rem 0.6rem; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); font-size: 0.9rem; color: var(--muted); white-space: nowrap; } .search-results li:hover .marks-window, .search-results li:focus-within .marks-window { display: inline-flex; } /* the blog index card: a caption that opens right under the hovered row or card, spanning its width, over whatever follows (it takes no pointer events, so the hover stays on the row); no cover on the portfolio cards, which show it already */ .peek { display: none; } @media (min-width: 40rem) and (hover: hover) { .peek { position: absolute; left: 0; right: 0; top: calc(100% + 0.25rem); z-index: 3; display: none; flex-direction: column; gap: 0.6rem; padding: 0.7rem 0.8rem; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16); font-size: 0.9rem; color: var(--muted); pointer-events: none; } .year-item-text:hover + .peek, .year-item-text:focus-within + .peek, .card-small:hover .peek, .card-small:focus-within .peek { display: flex; } .year-item > .peek { left: 3.25rem; grid-column: 1 / -1; } /* the caption starts under the title, past the month and day cells */ .peek-cover { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: var(--card); max-width: 18rem; } /* the whole cover, last, at a third of the row */ .peek-cover img { width: 100%; height: 100%; object-fit: cover; } .peek-body { min-width: 0; } .peek-summary { margin: 0 0 0.45rem; color: var(--fg); } .peek-marks { margin: 0 0 0.45rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .peek-kind { font-family: var(--mono); font-size: var(--date-size); color: var(--accent-2); margin-right: 0.2rem; } .peek-kind time { color: inherit; } .peek-summary .tldr { font-family: var(--mono); font-size: var(--date-size); color: var(--accent-2); } .peek-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; font-size: 0.85rem; } .peek-tags li { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem; background: var(--tag-bg); border-radius: 4px; color: var(--fg); } .peek-tags li svg { width: 0.9em; height: 0.9em; fill: currentColor; } .peek-tags .peek-tags-label { background: none; padding-left: 0; color: var(--muted); } .peek-tags:last-child, .peek-marks:last-child, .peek-summary:last-child { margin-bottom: 0; } } a.mark:hover { color: var(--accent); border-color: var(--accent); } .mark-meneame { border-color: var(--badge-ink); color: var(--badge-ink); } .mark-icon-meneame { display: inline-block; background: currentColor; -webkit-mask: url("../img/meneame.png?v=21b90977") center / contain no-repeat; mask: url("../img/meneame.png?v=21b90977") center / contain no-repeat; } .post-back { margin: 2.5rem 0 0; font-size: 0.95rem; } .timeline + .post-back { margin-top: 0.75rem; } /* on the Home, right under the last card */ .post-nav + .post-back { margin-top: 0.75rem; } /* right under the previous/next block, no gap */ /* previous and next post, at the end: the older one on the left, the newer on the right */ .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0 0; padding-top: 0.75rem; border-top: 2px solid var(--rule); font-size: 0.95rem; } .post-nav a { display: flex; gap: 0.6rem; align-items: center; color: var(--fg); text-decoration: none; } .post-nav a:hover, .post-nav a:hover .post-nav-date, .post-nav a:hover .post-nav-arrow, .post-nav a:hover .post-nav-label { color: var(--accent); } .post-nav-next { text-align: right; justify-content: flex-end; } .post-nav-label { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--accent-2); text-transform: uppercase; letter-spacing: 0.06em; } /* a label states, so blue; the hover turns the whole link red */ .post-nav-arrow { flex: none; font-size: 1.8rem; line-height: 1; color: var(--accent-2); } .post-nav-date { display: block; font-family: var(--mono); font-size: var(--date-size); color: var(--accent-2); margin-top: 0.15rem; } .post-nav a:hover .post-nav-arrow { color: var(--accent); } .post-content a[target="_blank"] img { cursor: zoom-in; } /* the cue that the photo opens on its own */ /* a link that no longer works: the text stays, the underline says it was a link, the tooltip says where */ .dead-link { color: var(--muted); text-decoration: underline dotted; text-decoration-color: color-mix(in oklab, var(--accent) 60%, transparent); text-underline-offset: 0.15em; cursor: help; } /* a link that leads nowhere: grey, a dotted red line, a dagger, and the address on hover */ .dead-link::after { content: "\2020"; font-size: 0.75em; vertical-align: super; color: var(--accent); margin-left: 0.1em; } /* site map */ .map-section { margin-bottom: 1rem; } .map-section h2 { font-size: 1.2rem; margin: 0 0 0.6rem; color: var(--accent-2); } .map-list { margin: 0; padding-left: 1.25rem; } /* a real list, with its bullets */ .map-list li { padding: 0.2rem 0; } .map-note { color: var(--muted); font-size: 0.9rem; margin-left: 0.4rem; } .map-other { margin: 2rem 0 0; text-align: center; font-size: 0.9rem; } .wardley-wrap { margin: 1.5rem 0; } .wardley { width: 100%; height: auto; display: block; font-family: var(--font); } .map-edge { margin: 3rem 0 0; text-align: center; color: var(--muted); font-family: var(--mono); letter-spacing: 0.2em; } /* the tag index: every pill is one link, name and count together; the star marks the ones with ten posts or more */ .tags-index { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .tags-index a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.4rem 0.3rem 0.6rem; background: var(--tag-bg); border-radius: 4px; color: var(--fg); text-decoration: none; font-size: 0.95rem; line-height: 1.2; } /* the same box as the tags of a post */ .tags-index .tags-icon { opacity: 0.7; } .tags-index .is-live .tags-icon { color: var(--accent); opacity: 1; } /* red label: the tag has talks or articles, not only the Archive */ .tags-index .tag-count { font-family: var(--mono); font-size: var(--date-size); color: var(--accent-2); background: var(--bg); border-radius: 3px; padding: 0.05rem 0.4rem; min-width: 1.5rem; text-align: center; } .tags-index a:hover, .tags-index a:focus-visible { background: var(--accent); color: var(--accent-fg); } .tags-index a:hover .tag-count, .tags-index a:focus-visible .tag-count { color: var(--accent); background: var(--accent-fg); } .tags-index a:hover .tags-icon, .tags-index a:focus-visible .tags-icon { color: inherit; opacity: 1; } .year-group.archive .year, .year-group.archive .month, .year-group.archive .day { color: var(--brown); } /* the era reads by colour: the Portfolio and the Notes in blue, the Archive in the troll's brown */ .mark-comments, .year-group.archive .mark { color: var(--moss); border-color: color-mix(in oklab, var(--moss) 55%, var(--line)); } /* the comments are the trolls: moss, in every era; in the Archive every mark is moss */ .year-group.archive .mark-meneame { color: var(--badge-ink); border-color: var(--badge-ink); } /* except the meneos, which keep their orange */ .year-group.archive .peek-kind { color: var(--brown); } /* the caption of an Archive row says Archivado in brown, like the post */ /* the history timeline on "Sobre el blog": the home page's year rows, with prose on the right */ .history .year-row { align-items: start; } .history .year-note > p:first-child { margin-top: 0; } .history .year-note > p:last-child { margin-bottom: 0; } /* mentions: pingbacks and trackbacks, under the comments */ .mentions { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--rule); } .mention-list { list-style: none; margin: 0; padding: 0; } .mention { padding: 0.5rem 0.75rem; border-top: 1px solid var(--rule); border-left: 3px solid var(--rule-strong); font-size: 0.95rem; } .mention-title { font-weight: 600; color: var(--fg); } .mention time { margin-left: 0.5rem; } .mention-excerpt { display: block; color: var(--muted); margin-top: 0.15rem; } /* the blog index on a phone: the year on its own line, then month, day and title in three narrow columns. Last in the file on purpose: these must win over the desktop rules above. */ @media (max-width: 40rem) { .year-group { grid-template-columns: 2.5rem 1.75rem 1fr; column-gap: 0.5rem; } .comment.is-reply { margin-left: 1rem; } .year { grid-column: 1 / -1; padding: 0 0 0.35rem; } .month-groups { grid-column: 1 / -1; } } /* one focus ring for everything; the stretched-link rows show it on the row, not on the invisible link */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } ::selection { background: color-mix(in oklab, var(--accent) 25%, transparent); } .card a:focus-visible, .year-item a:focus-visible, .search-results li a:focus-visible { outline: none; } .card:focus-within, .year-item-text:focus-within, .search-results li:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } /* skip link: only visible when it has focus */ .skip { position: absolute; left: -999px; top: 1rem; z-index: 10; padding: 0.5rem 0.75rem; background: var(--accent); color: var(--accent-fg); border-radius: 6px; text-decoration: none; } .skip:focus { left: 1rem; } /* footer: the icons wrap into a narrow block on a phone */ @media (max-width: 40rem) { .social { max-width: 15rem; margin-inline: auto; } } .print-url { display: none; } /* print: paper, black ink, the page's address under the name, links with their address, the embeds as their address, no chrome */ @media print { @page { margin: 2cm; } :root { color-scheme: light; } html, body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; } .site-header, .js-header .site-header, .is-scrolled .site-header { position: static; background: none; backdrop-filter: none; border-bottom: 1px solid #000; } /* in the flow: a fixed header prints on every sheet, over the text */ .is-scrolled .site-header-inner { display: block; padding: 0 0 0.5rem; } .is-scrolled .site-title, .is-scrolled .site-tagline { all: revert; } .site-header-space, .scroll-sentinel, .site-nav, .theme-switch, .skip, .badge, .comment-permalink, .peek, .post-nav, .post-back, .social, .mountains, .tags-label::after, iframe { display: none !important; } .site-header-inner { padding: 0 0 0.5rem; } .site-brand { gap: 0.6rem; } .site-brand > div { display: flex; align-items: baseline; gap: 0.6rem; } .site-avatar img { width: 1cm; height: 1cm; box-shadow: none; border: 1px solid #999; } .site-title { font-size: 14pt; } .site-tagline { font-size: 9pt; } .site-header-inner, .site-main, .site-footer-inner { width: auto; } .site-main { padding: 0.5rem 0 0; } .print-url { display: block; margin: 0 0 0.25rem; font-family: var(--mono); font-size: 9pt; color: #555; } .post-title { font-size: 20pt; margin-top: 0; } .post-lead { font-size: 11pt; color: #333; } .post-meta, .post-meta > time, .post-kind, .card-date, .yr, .year, .year-big, time, .post-content strong, .intro strong, .year-note strong, .num, .cv-role, .cv-years, .tldr { color: #000; } .post-cover { max-height: 9cm; width: auto; } a { color: #000; text-decoration: none; } .post-content a[href^="http"]::after, .comment-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; word-break: break-all; } .embed::after { content: attr(data-url); display: block; font-family: var(--mono); font-size: 9pt; color: #555; } /* the frame is gone: its address stays */ .banner, .archive-divider { background: none; border: 1px solid #999; border-left-width: 3px; color: #333; } .comments, .mentions { border-top: 1px solid #000; } .comment { border-left-color: #999; break-inside: avoid; } .comment-avatar { width: 40px; height: 40px; } figure, img, blockquote, pre, table, .card, .year-item { break-inside: avoid; } h1, h2, h3 { break-after: avoid; } /* the lists: the year as a heading above its cards or rows, so it never ends a sheet alone */ .year-row, .year-group { display: block; } .year-big, .year { break-after: avoid; margin: 0 0 0.2cm; padding: 0; } .year-cards { display: block; } .card { margin: 0 0 0.4cm; padding: 0; grid-template-columns: 6cm 1fr; } .card-kind, .peek-kind, .month, .day { color: #000; } img { max-width: 100%; } .site-footer { border-top: 1px solid #000; font-size: 9pt; color: #555; } } /* one motion vocabulary: colour and background fade, nothing moves; off for people who asked for less motion */ a, .card, .year-item-text, .search-results li, .badge a, .mark, .tags a { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .nav-search input { transition: width 0.2s ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }