Template:Resource card/styles.css: Difference between revisions

/* 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.

   2026-08-07 SECOND PASS: dropped the full 1px border around the card --
   hierarchy now comes from an elevated surface tone (--edfm-surface-3,
   one step brighter than the article surface) plus the accent rail and
   corner-cut alone, per "stop using a border around everything". More
   generous padding, a real hover interaction (small lift + brighter
   surface + stronger accent, ~150ms, honours prefers-reduced-motion via
   the global rule in Common.css), tags visually separated from the
   description by their own rule instead of just a margin, and single
   (non-grid) cards get a deliberate ~760px max width instead of the
   previous 640px, which read as an arbitrary half-width leftover rather
   than an intentional size.

   The linked resource name reuses the site's normal external-link colour
   (from MediaWiki:Common.css's `.mw-parser-output a.external` rule)
   rather than redefining it here, per "use the site's link/accent system,
   not bright orange for every name" -- only the external-link *icon* is
   swapped for a custom arrow glyph, positioned consistently regardless of
   name length. */
.edfm-resource {
	position: relative;
	background: var( --edfm-surface-3 );
	border-left: 3px solid var( --edfm-cyan );
	padding: 1.4em 1.6em;
	margin: 1.4em 0;
	clip-path: polygon( 0 0, calc( 100% - 10px ) 0, 100% 10px, 100% 100%, 0 100% );
	max-width: 760px;
	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;
}
.edfm-resource:hover {
	background: var( --edfm-surface-4 );
	border-left-color: var( --edfm-orange );
	transform: translateY( -2px );
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.35 );
}
.edfm-resource-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 0.7em;
	row-gap: 0.15em;
}
.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.1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	overflow-wrap: anywhere;
}
/* Swap the default MediaWiki external-link icon for a bigger, consistently
   -aligned arrow that reads clearly at this larger name size. Core sets
   the default icon via `.mw-parser-output a.external` at (0,2,1)
   specificity (two classes + a tag); matching that shape here (plus the
   card's own class, so it's scoped to just this component) keeps the
   override unambiguous rather than depending on stylesheet order. */
.edfm-resource-name a.external {
	background-image: none !important;
	padding-right: 0 !important;
}
.edfm-resource-name a.external::after {
	content: '\2197';
	display: inline-block;
	margin-left: 0.3em;
	font-weight: 400;
}
.edfm-resource-fullname {
	color: var( --edfm-text-dim );
	font-size: 0.82em;
	letter-spacing: 0.02em;
}
.edfm-resource-desc {
	margin: 0.6em 0 0 0;
	color: var( --edfm-text-muted );
	font-size: 1rem;
	line-height: 1.6;
}
.edfm-resource-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: 1em;
	padding-top: 0.9em;
	border-top: 1px solid var( --edfm-border-soft );
}
.edfm-resource-tag {
	font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --edfm-text-dim );
	background: var( --edfm-surface-2 );
	padding: 0.2em 0.6em;
}

/* 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. Cards should
   never visually touch -- a deliberately generous 1.4rem (~22px) gap. */
.edfm-resource-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
	gap: 1.4rem;
}
.edfm-resource-grid .edfm-resource {
	max-width: none;
	margin: 0;
	height: 100%;
}

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