style(release-description): editorial eyebrow + divider-rule aesthetic

This commit is contained in:
daniel-c-harvey
2026-06-17 15:30:33 -04:00
parent 08f56d09d1
commit 282cafc52f
2 changed files with 37 additions and 5 deletions
@@ -10,6 +10,10 @@
{
<MudContainer MaxWidth="MaxWidth.Small">
<div class="deepdrft-release-description">
<div class="deepdrft-release-description-header">
<span class="deepdrft-release-description-label">Notes</span>
<div class="deepdrft-release-description-rule"></div>
</div>
<p class="deepdrft-release-description-text">@Description</p>
</div>
</MudContainer>
@@ -685,18 +685,46 @@ h2, h3, h4, h5, h6,
RELEASE DESCRIPTION BLURB
Shared block rendered just below the hero/header on every release detail page
(Session, Mix, Cut). Theme-driven colours keep it legible in both palettes.
Borrows the eyebrow-label + divider-rule motif from the home page.
============================================================================= */
.deepdrft-release-description {
margin: 1.5rem 0;
margin: 2rem 0 2.5rem;
}
/* Header row: eyebrow label left + thin rule filling the rest */
.deepdrft-release-description-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.25rem;
}
/* Eyebrow label — mirrors .section-label / .split-eyebrow from Home */
.deepdrft-release-description-label {
font-family: var(--deepdrft-font-mono);
font-size: 0.62rem;
letter-spacing: 0.28em;
color: var(--deepdrft-green-accent);
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
/* Thin rule to the right of the label — mirrors .divider-line from Home */
.deepdrft-release-description-rule {
flex: 1;
height: 1px;
background: color-mix(in srgb, var(--deepdrft-muted) 35%, transparent);
}
/* Body paragraph — body font, display-serif feel via generous line-height */
.deepdrft-release-description-text {
margin: 0;
max-width: 60ch;
font-family: var(--deepdrft-font-body);
font-size: 1.05rem;
line-height: 1.7;
font-family: var(--deepdrft-font-display);
font-size: 1.1rem;
font-weight: 300;
line-height: 1.75;
color: var(--mud-palette-text-primary);
opacity: 0.85;
}