Jennifer Krzemien
4e48c51f3b
Study recruitment information for Aachen, Frankfurt and Heidelberg, taken from the sites' study flyers. Each site is a collapsible panel (native <details>, no JavaScript) with the study description, inclusion criteria, what participation involves, compensation, contact details and a download button for the original PDF. Content lives entirely in the front matter of content/participate/ under `locations:`, so adding a site needs no template change. The main menu gains a "Teilnahme" / "Participate" entry right after News, rendered as a highlighted button. Congo's header partial has no hook for styling a single entry, so static/css/header-cta.css matches it by href instead of forking the 234-line theme template; it is loaded site-wide via the theme's extend-head.html hook. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
82 lines
3 KiB
CSS
82 lines
3 KiB
CSS
/* ── Header call-to-action button ──
|
|
Renders the "participate" main-menu entry as a highlighted button instead of
|
|
a plain nav tab, while every other tab keeps the theme's normal styling.
|
|
|
|
Why a CSS-only approach: Congo's header partial (themes/congo/layouts/
|
|
_partials/header/hybrid.html, 234 lines) has no hook for per-entry styling.
|
|
Copying it into layouts/ just to add one class would mean maintaining a fork
|
|
of it across theme updates. Instead we match the entry by its href, which is
|
|
stable because it follows from the section name `content/participate/`
|
|
(/participate/ in English, /de/participate/ in German).
|
|
|
|
The menu entry itself lives in config/_default/menus.{de,en}.toml at
|
|
weight 60, directly after News. Rename the section and this selector must
|
|
change with it.
|
|
|
|
Why `li > a` and not just `a`: on /participate/ itself the language switcher
|
|
links to /participate/ and /de/participate/, which match [href$="/participate/"]
|
|
just as well. Those links sit nested inside a <div>, whereas the menu entry
|
|
is a direct child of its <li>. Without the child combinator the language
|
|
options in the dropdown get painted green too.
|
|
|
|
Loaded site-wide via layouts/_partials/extend-head.html. */
|
|
|
|
header nav li > a[href$="/participate/"] {
|
|
display: inline-block;
|
|
padding: 0.45rem 1rem;
|
|
border-radius: 999px;
|
|
background: #0a8f37;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
transition: background 0.18s ease, transform 0.18s ease;
|
|
}
|
|
|
|
header nav li > a[href$="/participate/"]:hover {
|
|
background: #05662e;
|
|
color: #fff;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
header nav li > a[href$="/participate/"]:focus-visible {
|
|
outline: 2px solid #05662e;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* The theme wraps the label in a <span> carrying group-hover underline
|
|
utilities — undo those inside the button. */
|
|
header nav li > a[href$="/participate/"] span {
|
|
text-decoration: none !important;
|
|
color: inherit;
|
|
}
|
|
|
|
/* Dark mode: the green carries enough contrast on its own, only the hover
|
|
state needs to go lighter rather than darker. */
|
|
html.dark header nav li > a[href$="/participate/"] {
|
|
background: #0a8f37;
|
|
}
|
|
html.dark header nav li > a[href$="/participate/"]:hover {
|
|
background: #0fb347;
|
|
}
|
|
html.dark header nav li > a[href$="/participate/"]:focus-visible {
|
|
outline-color: #4cc47a;
|
|
}
|
|
|
|
/* ── Placement ──
|
|
The entry sits at weight 60, i.e. directly after News and before the search
|
|
and language icons. Only the spacing needs adjusting: the theme's tab gap is
|
|
tuned for plain text links, and the pill needs a little more room from the
|
|
search icon that follows it. */
|
|
header nav li:has(> a[href$="/participate/"]) {
|
|
margin-inline-end: 1.75rem;
|
|
}
|
|
|
|
/* In the mobile hamburger panel the list is right-aligned; keep the button
|
|
flush with the other entries and give it room to breathe. */
|
|
@media (max-width: 639px) {
|
|
header nav li > a[href$="/participate/"] {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|