Template:Resource card/styles.css

/* 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;
	}
}