/* Typografie ========================================================================== */ @font-face { font-family: 'latolight'; src: url('../fonts/lato-latin-300-normal.woff2') format('woff2'), url('../fonts/lato-latin-300-normal.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* @font-face { font-family: 'latobold'; src: url('../fonts/lato-latin-700-normal.woff2') format('woff2'), url('../fonts/lato-latin-700-normal.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } */ @font-face { font-family: 'playfair_displayregular'; src: url('../fonts/playfair-display-latin-400-normal.woff2') format('woff2'), url('../fonts/playfair-display-latin-400-normal.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* Theme tokens ========================================================================== Single source of truth for every theme colour. Light values live in :root; the dark theme is the one [data-theme="dark"] override below. The active theme is set on by the no-FOUC inline script in base.njk (storage → OS prefers-color-scheme → light) and toggled by assets/js/theme.js. */ :root { --bg: white; --fg: black; --link: indigo; --link-underline: rgba(75, 0, 130, .6); /* a:hover border-bottom */ --border: black; /* all hairline borders */ --border-muted: silver; /* sup a border */ --shadow: #464646; /* every box-shadow offset */ --muted: gray; /* language switcher */ --surface-2: #f0f0f0; /* tag hover fill */ --surface-overlay: rgba(255, 255, 255, .9); /* projects-nav article p bg */ --accent: #006c66; /* made-for-mpi special tag */ /* Inversion pair — derived, so it auto-flips per theme. Pressed tags, list-row hover and article

all use these. */ --invert-bg: var(--fg); --invert-fg: var(--bg); } :root[data-theme="dark"] { --bg: #000; --fg: #fff; --link: #b9a7e6; /* lightened indigo for contrast */ --link-underline: rgba(185, 167, 230, .6); --border: #fff; --border-muted: #777; --shadow: #b9b9b9; /* light offset, visible on black */ --muted: #aaa; --surface-2: #1a1a1a; --surface-overlay: rgba(0, 0, 0, .9); --accent: #2bb5ad; /* lightened teal */ /* --invert-bg/-fg inherit the derived :root rule and flip automatically */ } html { overflow-y: scroll; } body { margin: 0 auto; width: 98%; background-color: var(--bg); color: var(--fg); font-family: 'latolight', sans-serif; font-size: large; line-height: 1.4; } header h1 { font-family: 'playfair_displayregular', serif; text-transform: lowercase; font-size: xx-large; } h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: xx-large; } a { color: var(--link); text-decoration: none; border-bottom: 1px solid var(--bg); /* "invisible" underline; flips with theme */ } a:hover { border-bottom-color: var(--link-underline); } /* Navigation ========================================================================== */ .breadcrumb { display: inline-block; } .breadcrumb ul { text-align: right; list-style-type: none; } .breadcrumb li { display: inline-block; } .breadcrumb a { white-space: nowrap; } body > header nav .nav-external{ display: none; } body > header nav { margin-right: 2rem; } body > header nav li { display: inline-block; margin: 0 0.5rem; } footer nav, footer a { display: block; } sup a { display: inline-block; font-size: x-small; padding: 0px 3px; border: 1px solid var(--border-muted); } footer nav ul { list-style-type: none; padding-left: 0; } footer nav { margin-left: -1em; } .languageswitcher { margin-left: 1em; font-variant: small-caps; color: var(--muted); } /* Mark the current language (the bare , not the alternate ) as "you are here" with an underline that stays visible in both themes. */ .languageswitcher > span { text-decoration: underline; text-underline-offset: 3px; } /* Theme switcher: a brutalist control matching the tag/filter chips, sitting in the main > header row next to the language switcher. Fixed size so swapping the ☀/☾ glyph (set by assets/js/theme.js) causes no layout shift. */ .theme-switcher { margin-left: 1em; width: 2em; height: 2em; padding: 0; font-size: smaller; line-height: 1; background: transparent; color: inherit; border: 1px solid var(--border); box-shadow: 3px 3px var(--shadow); cursor: pointer; } .theme-switcher:focus-visible { outline: 2px solid var(--border); outline-offset: 2px; } .theme-switcher__icon { font-size: 1rem; } /* Layout ========================================================================== */ body { display: flex; } body > header { position: fixed; top: 420px; z-index: 1; } body > main { width: 70%; margin-left: 150px; padding: 0 20px; } body > footer { /* position: sticky; top: 0; */ width: 30%; padding-left: 20px; } main > header { display: flex; flex-wrap: wrap; justify-content: right; padding-top: 1rem; } main > header > h2 { flex-grow: 1; margin: 0; } /* Style ========================================================================== */ body > header { transform: rotate(-90deg); transform-origin: 0 0; white-space: nowrap; text-align: right; padding-left: 10px; padding-right: 8em; padding-top: 40px; border-top: 1px solid var(--border); } body > header h1 { margin: 0; padding: 0 25px 0 0; display: flex; flex-direction: row-reverse; align-items: baseline; gap: 0.5em; } body > header > h1 span { font-size: small; } body > header h1 a { color: var(--fg); text-decoration: none; } body > header nav { font-size: medium; display: flex; flex-direction: row-reverse; sup { font-size: x-small; } } main { border-left: 1px solid var(--border); } main ul { padding-left: 1em; } footer > header { padding-left: 0; } /* Page: Services ========================================================================== */ .page--services main h3 { font-family: 'playfair_displayregular', serif; text-transform: lowercase; font-size: x-large; margin-top: 3rem; } /* Component: Tags ========================================================================== */ .tags { padding-left: 0; margin: 0; list-style: none; } .tags li { display: inline-block; margin: 0.5rem 0.5rem 0.5rem 0; } /* Shared tag chip — identical markup (an ) for the filter panel and the project detail pages, rendered via src/_includes/tags.njk. */ .tag { display: inline-block; font-size: smaller; padding: 2px 8px; color: inherit; /* detail links were indigo; unify to body color */ background: transparent; border: 1px solid var(--border); /* overrides global a { border-bottom: bg } */ box-shadow: 3px 3px var(--shadow); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .tag:hover { background-color: var(--surface-2); /* subtle fill */ color: var(--fg); border-color: var(--border); /* beats global a:hover border-bottom-color */ } .tag[aria-pressed="true"] { /* set by JS on the filter panel's links */ background-color: var(--invert-bg); color: var(--invert-fg); } /* Special tags — per-tag overrides keyed off the slugified data-tag attribute (set in src/_includes/tags.njk). Collect future one-off tag styles below. */ .tag[data-tag="made-for-mpi"] { box-shadow: 3px 3px var(--accent); border-color: var(--accent); animation: all-badge-orbit 1.6s steps(1) infinite; } .tag[data-tag="made-for-mpi"]:hover { background-color: var(--accent); color: white; border-color: var(--accent); } /* Section: Project ========================================================================== */ .project { display: flex; flex-wrap: wrap; } .project hr { visibility: hidden; border-width: 1px; margin: 0; padding: 0; } .meta > h1 { display: inline-block; padding: 0.25rem 0.5rem; border: 1px solid var(--border); box-shadow: 3px 3px var(--shadow); } .project-images { margin-right: 3rem; } /* Carousel: big teaser (natural aspect) on the left, a wrapping grid of square thumbnails to its right. Scoped to [data-carousel] so the image-less terminal fallback (also wrapped in .project-images) keeps its plain block layout. */ .project-images[data-carousel] { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; } .project-images__main { flex: 1 1 260px; min-width: 0; max-width: 400px; /* never upscale past the 400px source */ margin: 0; cursor: pointer; } .project-images__main :is(img, picture) { display: block; width: 100%; height: auto; } .project-images__thumbs { flex: 1 1 160px; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .5rem; } .project-images__thumbs li { margin: 0; padding: 0; } .project-images__thumb { display: block; width: 72px; height: 72px; padding: 0; border: 1px solid var(--border); background: none; cursor: pointer; opacity: .55; transition: opacity .15s ease; } .project-images__thumb :is(img, picture) { display: block; width: 100%; height: 100%; } .project-images__thumb img { object-fit: cover; /* crop to square */ } .project-images__thumb:hover, .project-images__thumb[aria-current="true"] { opacity: 1; } .project-images__thumb[aria-current="true"] { box-shadow: 3px 3px var(--shadow); } .page--project .project-tags { text-align: left; } /* ---- Terminal card: a green-phosphor CRT console shown instead of an image when a project has no bitmap (rendered by terminal-card.njk on teaser tiles and detail pages). ---- */ .terminal-card { position: relative; background: radial-gradient(120% 130% at 50% 0%, #0c1a0c 0%, #060d06 65%, #020402 100%); border: 1px solid #1c3a1c; box-shadow: 3px 3px #464646, inset 0 0 40px rgba(0, 0, 0, .9); color: #39ff14; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; } /* CRT scanline overlay — non-interactive, sits above the text for that behind-the-glass look. */ .terminal-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, .5) 3px ); opacity: .4; mix-blend-mode: multiply; } /* GNOME / Adwaita-style header bar: flat neutral-dark titlebar, centred title */ .terminal-card__bar { position: relative; display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: 6px; background: linear-gradient(#323232, #2b2b2b); border-bottom: 1px solid #1b1b1b; color: #dcdcdc; font-size: 11px; padding: 5px 6px; } .terminal-card__icon { grid-column: 1; justify-self: start; display: block; width: 16px; height: 16px; } .terminal-card__title { grid-column: 2; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; } .terminal-card__controls { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 6px; } .terminal-card__btn { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .09); color: #d6d6d6; font-size: 12px; line-height: 1; font-style: normal; } .terminal-card__body { position: relative; padding: 10px; } .terminal-card__line { margin: 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; text-shadow: 0 0 6px rgba(57, 255, 20, .55); } .terminal-card__user { color: #7cfc7c; } .terminal-card__path { color: #5fd7ff; } .terminal-card__colon, .terminal-card__sigil { color: #3a7a3a; } .terminal-card__cmd { color: #d6ffc2; } .terminal-card__cursor { display: inline-block; width: .55em; height: 1.05em; margin-left: 1px; vertical-align: -.18em; background: #39ff14; box-shadow: 0 0 8px rgba(57, 255, 20, .8); animation: terminal-blink 1.05s steps(1) infinite; } @keyframes terminal-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .terminal-card__cursor { animation: none; } } /* Teaser variant: fill the 1:1 tile, drop the outer border/shadow (the tile already frames it) and collapse the prompt to just "$ cmd" to fit the square. */ .projects-nav article .terminal-card--teaser { height: 100%; border: 0; box-shadow: inset 0 0 40px rgba(0, 0, 0, .9); display: flex; flex-direction: column; } .terminal-card--teaser .terminal-card__body { flex: 1; } .terminal-card--teaser .terminal-card__line { font-size: 11px; } .terminal-card--teaser .terminal-card__colon, .terminal-card--teaser .terminal-card__path { display: none; } /* Detail variant: cap width like the gallery's first image; round the corners for the GNOME client-side-decoration window look. */ .terminal-card--detail { max-width: 400px; border-radius: 8px; } /* Section: Projects ========================================================================== */ .projects-nav { display: flex; flex-wrap: wrap; justify-content: space-evenly; } .projects-nav article { position: relative; min-width: 110px; max-width: 250px; width: 15svw; aspect-ratio: 1 / 1; border: 1px solid var(--border); box-shadow: 3px 3px var(--shadow); margin: 10px; overflow: hidden; /* -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); filter: gray; filter: url("data:image/svg+xml;utf8,#greyscale"); */ } /* Filtered-out cards: keep explicit so flex display can't re-show them. */ .projects-nav article[hidden] { display: none; } .projects-nav article a { text-decoration: none; display: block; width: 100%; height: 100%; } .projects-nav .tile-size-2 { width: 420px; height: 420px; } /* Text block: collapsed to 0 height at rest, expands on hover and pushes the image below it downwards. The grid-template-rows 0fr -> 1fr trick gives a smooth, content-height-aware reveal. */ .projects-nav article .teaser-text { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; } .projects-nav article .teaser-text-inner { overflow: hidden; } /* Image keeps the full square height, so as the text expands above it the image slides down and its bottom is clipped by the article's overflow. object-fit/-position on the inner reproduce what background-size: contain + background-position: center top did before it became a real image. */ .projects-nav article .teaser-img { height: 100%; } .projects-nav article .teaser-img :is(img, picture) { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; } .projects-nav article h3, .projects-nav article p { margin: 0; padding: 0px 5px; /* font-family: 'latobold'; */ font-size: 14px; } .projects-nav article h3 { background-color: var(--invert-bg); color: var(--invert-fg); white-space: nowrap; } .projects-nav article p { background-color: var(--surface-overlay); color: var(--fg); padding-bottom: 5px; padding-top: 5px; } .projects-nav article:hover { -webkit-filter: none; -moz-filter: none; filter: none; } .projects-nav article:hover .teaser-text { grid-template-rows: 1fr; } /* main is a flex item of body (main 70% / footer 30%). The wide list rows would raise main's automatic flex min-size and balloon main past its 70% basis (stealing width from the footer) when the list is toggled on — a visible shift. min-width:0 removes that floor so main keeps its 70% width in BOTH layouts; the rows ellipsize to fit. Scoped to the listing page only (detail = .page--project). */ .page--projects main { min-width: 0; } /* List / TOC view (toggled on by the view button via .projects-nav--list): the same
cards, reflowed into compact "title — description" rows. Brutal styling: hard black hairlines, full contrast, invert the whole row on hover (same gesture as a pressed tag). Placed after the grid rules so these win at equal specificity. */ .projects-nav--list { display: block; border-top: 1px solid var(--border); } .projects-nav--list article { width: auto; max-width: none; min-width: 0; aspect-ratio: auto; height: auto; margin: 0; border: 0; border-bottom: 1px solid var(--border); box-shadow: none; overflow: visible; } /* Each row is a real list item with a native square marker. The marker inherits `color`, so it turns white together with the text when the row inverts on hover — no extra ::marker rule needed. Title + description are inline text that ellipsizes at the row's edge. */ .projects-nav--list article a { width: auto; display: list-item; list-style: square inside; padding: 0.45em 0.6em; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .projects-nav--list article a:hover { background: var(--invert-bg); color: var(--invert-fg); } /* No imagery in list mode. (The `article` keeps specificity on par with the grid `.projects-nav article .teaser-*` rules so these win by source order.) */ .projects-nav--list article .teaser-img, .projects-nav--list article .terminal-card { display: none; } /* Flatten the wrappers so the h3 + p sit inline on the row. */ .projects-nav--list article .teaser-text, .projects-nav--list article .teaser-text-inner { display: contents; } .projects-nav--list article h3 { display: inline; background: none; color: inherit; margin: 0 0.5em 0 0; padding: 0; font-size: 1rem; } .projects-nav--list article p { display: inline; background: none; color: inherit; margin: 0; padding: 0; font-size: 0.8rem; } /* Feed view (toggled on via .projects-nav--feed): the same
cards expanded into a long, single-column scroll. Each row shows the title, the description, theme-styled badge-links and a responsive grid of ALL images. The .project-feed block is hidden by default and only revealed here. */ .project-feed { display: none; } .projects-nav--feed { display: block; border-top: 1px solid var(--border); } .projects-nav--feed article { width: auto; max-width: none; min-width: 0; aspect-ratio: auto; height: auto; margin: 0; border: 0; border-bottom: 1px solid var(--border); box-shadow: none; overflow: visible; padding: 1.25em 0; } /* Hide the grid/list teaser link; reveal the expanded feed block. */ .projects-nav--feed article > a { display: none; } .projects-nav--feed .project-feed { display: block; } .project-feed__title { margin: 0 0 0.25em; font-size: 1.2rem; } .projects-nav .project-feed__title a { text-decoration: none; color: inherit; border-bottom: none; padding: 0.45em 0.6em; display: list-item; list-style: square inside; padding: 0.45em 0.6em; } .project-feed__title a:hover { text-decoration: underline; } .projects-nav article .project-feed__desc, .project-feed__desc { margin: 0 0 0.5em; display: block; } .feed-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5em; padding: 0; margin: 1em 0; } .projects-nav .feed-badges .tag { font-size: x-small; display: inline-block; width: auto; height: auto; } .feed-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6em; margin-top: 0.75em; } .feed-images img { width: 100%; height: auto; border: 1px solid var(--border); box-shadow: 3px 3px var(--shadow); } /* Section: Projects filter (progressive enhancement) ========================================================================== */ /* Hidden visually, but kept in the accessibility tree for screen readers. */ /* The project detail page already shows the title as the .meta > h1, so the layout's

is a visual duplicate — hide it but keep it in the accessibility tree (and as the page's heading outline) for screen readers. */ .visually-hidden, .page--project main > header > h2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .projects-filter { margin-bottom: 1em; } /* Toolbar: two clusters — the search/filter actions and the layout switch — centered with a generous gap so the targets are easy to hit on touch screens. */ .projects-filter__toolbar { display: flex; align-items: center; justify-content: center; gap: 1em; } .projects-filter__actions, .projects-filter__views { display: flex; align-items: center; } /* Set the layout switch apart from the search/filter actions with a divider. */ .projects-filter__views { padding-left: 1em; border-left: 1px solid var(--shadow); } /* "All" reset: sits directly above the listing, centered in its own mount, and is only shown (by JS) while a filter narrows the list. The orbiting box-shadow glow draws the eye back to the reset. */ .projects-reset { text-align: center; margin: 0 0 1em; } .projects-filter__reset { font-size: smaller; padding: 2px 8px; background: transparent; color: inherit; border: 1px solid var(--border); box-shadow: 3px 3px var(--shadow); cursor: pointer; animation: all-badge-orbit 1.6s steps(1) infinite; } .projects-filter__reset:focus-visible { outline: 2px solid var(--border); outline-offset: 2px; } @keyframes all-badge-orbit { 0% { box-shadow: 3px 3px var(--shadow); } /* bottom-right (initial) */ 25% { box-shadow: -3px 3px var(--shadow); } /* bottom-left */ 50% { box-shadow: -3px -3px var(--shadow); } /* top-left */ 75% { box-shadow: 3px -3px var(--shadow); } /* top-right */ 100% { box-shadow: 3px 3px var(--shadow); } /* back to bottom-right */ } @media (prefers-reduced-motion: reduce) { .projects-filter__reset { animation: none; } } .filter-icon-btn { position: relative; background: transparent; border: none; padding: 0.5em; line-height: 0; color: inherit; cursor: pointer; } /* Active controls invert to black, the same gesture as a pressed tag: the chosen layout (aria-pressed) and the search/tag toggles while a filter is applied (.is-active, set by projects-filter.js). */ .projects-filter__views .filter-icon-btn[aria-pressed="true"], .projects-filter__actions.is-active .filter-icon-btn { background: var(--invert-bg); color: var(--invert-fg); } .filter-icon-btn:focus-visible { outline: 2px solid var(--border); outline-offset: 2px; } .projects-filter__search { margin: 0.75em 0; text-align: center; } .projects-filter__search label { display: block; font-size: smaller; margin-bottom: 0.25em; } .projects-filter__search input { width: 100%; max-width: 24em; padding: 0.3em 0.5em; border: 1px solid var(--border); box-shadow: 3px 3px var(--shadow); background: var(--bg); color: var(--fg); } .projects-filter__tags { border: none; padding: 0; margin: 0.75em 0 0; text-align: center; } .projects-filter__tags legend { font-size: smaller; margin-bottom: 0.5em; } .projects-status { font-size: smaller; min-height: 1.2em; margin: 0 0 1em; text-align: center; } /* Section: Footer ========================================================================== */ footer { border-left: 1px solid var(--border); } footer p { white-space: nowrap; } .legals { font-size: small; margin-top: 3em; } /* Icons & Badges ========================================================================== */ .icon { vertical-align: text-top; fill: currentColor; /* color: silver; */ } .badge-wagtail { max-width: 300px; } /* small viewports ========================================================================== */ @media only screen and (max-width : 800px) { body { display: block; font-size: medium; } body > main, body > footer { width: auto; margin-left: 55px; } body > main { padding-right: 5px; padding-left: 5px; } body > header { top: 350px; padding-top: 0; } body > header h1 { font-size: large; } body > header p, body > header ul { margin: 5px 0; font-size: small; } footer > header > h2 { margin-top: 0; padding-top: 2rem; } main > header { padding-right: 0; } main > header h2, .meta > h1 { font-size: x-large; } .page--services main p { margin-bottom: 0; } .projects-nav article { margin: 5px; } .projects-nav article p { display: none; } }