fklement/homepage_relaunch
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mixc

Browse Source
This commit is contained in:
Felix Klement committed 2026-10-04 19:12:42 +02:00
1 parent 00edb9dfc2
commit 3865c45642
18 files changed
+439 -87
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/team/Research.astro
+12 -37
View File
@@ -34,28 +34,28 @@ const fieldStyle = (paper: (typeof papers)[number]) =>
</div>
<div class="research__controls" data-research-controls hidden>
<fieldset class="research__group">
<legend class="research__legend">{r.sortLabel}</legend>
<div class="research__options">
<fieldset class="choice-group">
<legend class="choice-group__legend">{r.sortLabel}</legend>
<div class="choices">
{(['cites', 'newest', 'oldest'] as const).map((key, i) => (
<label class="research__option">
<label class="choice">
<input type="radio" name="research-sort" value={key} checked={i === 0} />
<span>{r.sort[key]}</span>
</label>
))}
</div>
</fieldset>
<fieldset class="research__group">
<legend class="research__legend">{r.filterLabel}</legend>
<div class="research__options research__options--wrap">
<label class="research__option">
<fieldset class="choice-group">
<legend class="choice-group__legend">{r.filterLabel}</legend>
<div class="choices">
<label class="choice">
<input type="radio" name="research-category" value="" checked />
<span>{r.all} <span class="research__n">{papers.length}</span></span>
<span>{r.all} <span class="choice__n">{papers.length}</span></span>
</label>
{categories.map((c) => (
<label class="research__option">
<label class="choice">
<input type="radio" name="research-category" value={c} />
<span>{r.categories[c] ?? c} <span class="research__n">{countIn(c)}</span></span>
<span>{r.categories[c] ?? c} <span class="choice__n">{countIn(c)}</span></span>
</label>
))}
</div>
@@ -209,37 +209,12 @@ const fieldStyle = (paper: (typeof papers)[number]) =>
letter-spacing: 0;
}
/* Controls: segmented rows in the menu bar's language, hairline cells and mono caps. */
/* Controls: segmented rows (.choice-group, base.css). */
.research__controls {
margin-top: var(--space-7);
display: grid;
gap: var(--space-4);
}
.research__group { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--space-2); }
.research__legend { padding: 0; color: var(--ink-muted); font-size: var(--step-small); }
/* Each option draws its own frame and overlaps its neighbours by one line, so a wrapped row
never leaves a rule running past its last option. */
.research__options { display: flex; flex-wrap: wrap; padding: 0 var(--hairline) var(--hairline) 0; }
.research__option { position: relative; display: flex; margin: 0 calc(-1 * var(--hairline)) calc(-1 * var(--hairline)) 0; }
.research__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.research__option > span {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border: var(--hairline) solid var(--line);
font-family: var(--font-mono);
font-size: var(--step-micro);
font-weight: var(--weight-medium);
letter-spacing: var(--track-caps);
text-transform: uppercase;
line-height: 1;
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.research__option:hover > span { background: color-mix(in srgb, var(--ink) var(--tint-hover), transparent); }
.research__option input:checked + span { background: var(--ink); color: var(--paper); }
.research__option input:focus-visible + span { outline: var(--focus-width) solid var(--ink); outline-offset: calc(-1 * var(--focus-width) - 2px); }
.research__n { color: inherit; opacity: 0.6; }
.research__list { margin-top: var(--space-6); scroll-margin-top: calc(var(--header-height) + var(--space-5)); }
.research__item[hidden] { display: none; }