Template:Resource card/styles.css - Revision history

EDFM Content Maintenance: Make standalone resource cards full width

2026-08-10T19:26:24Z

Make standalone resource cards full width

← Older revision		Revision as of 19:26, 10 August 2026
Line 44:		Line 44:
	margin: 1.4em 0;		margin: 1.4em 0;
	clip-path: polygon( 0 0, calc( 100% - 14px ) 0, 100% 14px, 100% 100%, 0 100% );		clip-path: polygon( 0 0, calc( 100% - 14px ) 0, 100% 14px, 100% 100%, 0 100% );
	max-width: ~~760px~~;		width: 100%;
			max-width: none;
	box-sizing: border-box;		box-sizing: border-box;
	transition: background-color 0.15s ease, border-left-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;		transition: background-color 0.15s ease, border-left-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;

Sythan: Polish pass: stronger name/fullname hierarchy, corner accent motif, hover stays cyan-family + smaller shadow + focus-within parity, single-card full-width now generic via .edfm-resource-grid

2026-08-07T18:08:36Z

Polish pass: stronger name/fullname hierarchy, corner accent motif, hover stays cyan-family + smaller shadow + focus-within parity, single-card full-width now generic via .edfm-resource-grid

Show changes

Sythan: Redesign pass 2: drop full border (accent rail + elevated surface instead), bigger padding/type, real hover interaction, custom arrow icon, wider single-card max-width

2026-08-07T17:28:00Z

Redesign pass 2: drop full border (accent rail + elevated surface instead), bigger padding/type, real hover interaction, custom arrow icon, wider single-card max-width

Show changes

Sythan: New: shared styling for the Resource card component

2026-08-07T16:52:03Z

New: shared styling for the Resource card component

New page

/* Resource card component -- compact reference card for third-party
tools/sites/services (see Template:Resource card). Uses the site's
existing --edfm-* design tokens (defined once in MediaWiki:Common.css)
rather than introducing a second colour system -- this file adds one
new component to the existing theme, it does not redesign anything.
Deliberately compact: a name row, one description paragraph, an
optional tag row -- not a dashboard card.

The linked resource name reuses the site's normal external-link
styling (colour + the small arrow icon both already come from core
MediaWiki + MediaWiki:Common.css's `.mw-parser-output a.external`
rule) rather than redefining link colour here, per "use the site's
link/accent system, not bright orange for every name". */
.edfm-resource {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
padding: 0.85em 1em;
margin: 0.8em 0;
clip-path: polygon( 0 0, calc( 100% - 8px ) 0, 100% 8px, 100% 100%, 0 100% );
max-width: 640px;
box-sizing: border-box;
}
.edfm-resource-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
column-gap: 0.6em;
row-gap: 0.1em;
}
.edfm-resource-name {
/* TemplateStyles' CSS sanitizer rejects var() specifically inside
font-family (even though it's otherwise valid CSS) -- spelled out
literally here to match --edfm-mono in MediaWiki:Common.css. */
font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
font-size: 1.05em;
font-weight: 700;
letter-spacing: 0.02em;
overflow-wrap: anywhere;
}
.edfm-resource-fullname {
color: var( --edfm-text-dim );
font-size: 0.85em;
}
.edfm-resource-desc {
margin: 0.4em 0 0 0;
color: var( --edfm-text-muted );
font-size: 0.95em;
line-height: 1.55;
}
.edfm-resource-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4em;
margin-top: 0.6em;
}
.edfm-resource-tag {
font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
font-size: 0.7em;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var( --edfm-text-dim );
background: var( --edfm-surface-3 );
border: 1px solid var( --edfm-border );
padding: 0.15em 0.5em;
}

/* Optional wrapper for placing up to a few cards side by side on wide
screens. Not tied to Template:Resource card specifically -- any page
can drop `<div class="edfm-resource-grid">...</div>` around a run of
cards (or anything else). Equal-height rows via grid's default
align-items:stretch plus height:100% on the card, so cards with
slightly different description lengths still line up. */
.edfm-resource-grid {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
gap: 0.8em;
}
.edfm-resource-grid .edfm-resource {
max-width: none;
margin: 0;
height: 100%;
}

@media ( max-width: 640px ) {
.edfm-resource {
max-width: none;
}
}