/* Custom overrides — kept separate from the theme so theme updates never overwrite these. Loaded after the theme's own CSS via custom_head. */ /* --- Homepage link cards (About / Publications / Talks / Teaching) --- */ .link-cards .link-card { display: block; text-decoration: none; color: inherit; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); transition: box-shadow 0.3s ease, transform 0.3s ease; background: #fff; } .link-cards .link-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); transform: translateY(-4px); text-decoration: none; color: inherit; } .link-cards .link-card-image-wrap { overflow: hidden; /* clips the zoomed image so it doesn't overflow the card */ } .link-cards .link-card-image { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform 0.4s ease; } /* The requested hover-zoom effect on the image, matching jan-horstmann.de */ .link-cards .link-card:hover .link-card-image { transform: scale(1.08); } .link-cards .link-card-body { padding: 1rem 1.25rem 1.5rem; } .link-cards .link-card-body h3 { margin-bottom: 0.4rem; } .link-cards .link-card-body p { margin-bottom: 0; opacity: 0.85; } /* Dark mode: the theme toggles a .dark class on . This custom widget isn't part of the theme, so it needs its own dark-mode colors — without this, the card background stayed white while the text inherited the page's light/white dark-mode text color, making it unreadable. */ .dark .link-cards .link-card { background: #343a40; color: rgba(255, 255, 255, 0.87); } .dark .link-cards .link-card-body p { color: rgba(255, 255, 255, 0.6); } /* --- Publication list: year/venue line + Open Access badge --- */ .pub-year-line { font-size: 0.9rem; opacity: 0.85; margin-top: 0.15rem; } .pub-year-line .pub-year { font-weight: 600; } .oa-badge { color: #f68212; /* conventional Open Access orange */ font-weight: 600; } .oa-badge i { margin-right: 0.2rem; } /* --- Publication count summary above the filters --- */ .pub-count-summary { font-size: 0.95rem; opacity: 0.85; margin-bottom: 1rem; } .pub-count-summary .pub-count-item { margin-right: 1rem; display: inline-block; } /* --- Publication list: BibTeX download buttons --- */ #download-filtered-bibtex { cursor: pointer; } .bibtex-data { display: none; } .pub-doi-link a { word-break: break-all; } .card .card-img-top { transition: transform 0.4s ease; } .card:hover .card-img-top { transform: scale(1.05); } .card { overflow: hidden; /* keep the zoomed image clipped to the card's rounded corners */ } /* --- Hero portrait photo: cap size instead of filling the full half-column, so it stays proportionate to the welcome text next to it --- */ .hero-img { max-width: 260px; width: 100%; height: auto; } /* --- Alternating media+text blocks (research projects) --- */ .mediatext-block .mediatext-text { order: 1; } .mediatext-block .mediatext-image-wrap { order: 2; text-align: center; } /* side="left": swap column order so the image appears on the left */ .mediatext-block.mediatext-image-left .mediatext-text { order: 2; } .mediatext-block.mediatext-image-left .mediatext-image-wrap { order: 1; } .mediatext-image { max-width: 100%; height: auto; border-radius: 6px; } @media (max-width: 767px) { /* On narrow screens always stack image above text, regardless of side, so the reading order stays sensible on mobile. */ .mediatext-block .mediatext-text, .mediatext-block .mediatext-image-wrap, .mediatext-block.mediatext-image-left .mediatext-text, .mediatext-block.mediatext-image-left .mediatext-image-wrap { order: initial; } } /* --- Footer icon row: robust cross-browser/device alignment. Previously each icon (font-glyph tags plus our one /) so its inner shape can switch color for dark mode below, the same way the icon-font glyphs do. */ .network-icon-link-svg svg { width: 1.0em; height: 1.0em; display: block; } /* Dark mode: the other icons show a coral circle with what looks like a white mark cut out of it. Match that here by flipping the inner shape's fill to the exact dark-mode page background (#282a36, see body.dark in the theme's compiled CSS) instead of white. */ .dark .codeberg-icon-mark { fill: #282a36; }