joh/project-bifrost-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: style-guide polish — section labels, representative content, emphasis scope

Browse source
This commit is contained in:
Jonathan 2026-04-18 16:42:54 +02:00
parent e6b97beb68
commit 918231f5f2
1 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/pages/style-guide.astro
View file

@ -264,6 +264,12 @@ const lucideIcons = [
The terminal keyword or phrase of every product headline is set in Newsreader Bold Italic. The terminal keyword or phrase of every product headline is set in Newsreader Bold Italic.
Everything before it stays in regular weight. Every headline ends with a period. Everything before it stays in regular weight. Every headline ends with a period.
</p> </p>
<p class="body-sm sg-note">
Scope: applies to all display and headline scales — <code>display-xl</code>, <code>display-lg</code>,
<code>display-md</code>, <code>headline-lg</code>, <code>headline-md</code>, <code>headline-sm</code>.
Not applied to <code>title</code> (sans), <code>body</code>, <code>label</code>, or <code>lead</code>.
Never applied to user-generated content (contribution text, document titles, notes).
</p>
<div class="emphasis-examples"> <div class="emphasis-examples">
<div class="display-md emphasis-headline"> <div class="display-md emphasis-headline">
A quiet place to keep <em class="emphasis-keyword">what you are reading.</em> A quiet place to keep <em class="emphasis-keyword">what you are reading.</em>
@ -411,11 +417,11 @@ const lucideIcons = [
<div class="field"> <div class="field">
<label class="field-label" for="sg-org">Organisation</label> <label class="field-label" for="sg-org">Organisation</label>
<input class="field-input" id="sg-org" type="text" value="Statens Serum Institut" /> <input class="field-input" id="sg-org" type="text" value="Statens Serum Institut" />
<span class="field-hint">Auto-saved a moment ago.</span> <span class="field-hint">e.g. Auto-saved a moment ago.</span>
</div> </div>
<div class="field"> <div class="field">
<label class="field-label" for="sg-idea">Your idea</label> <label class="field-label" for="sg-idea">Your idea</label>
<textarea class="field-input field-textarea" id="sg-idea" rows="3" placeholder="A question, an inspiration, or an idea…"></textarea> <textarea class="field-input field-textarea" id="sg-idea" rows="3" placeholder="What if the wiki could auto-link to relevant meeting notes when I paste a concept?"></textarea>
</div> </div>
<div class="field"> <div class="field">
<label class="field-label" for="sg-disabled">Read-only</label> <label class="field-label" for="sg-disabled">Read-only</label>
@ -669,6 +675,12 @@ const lucideIcons = [
.sg-section-label { .sg-section-label {
display: block; display: block;
margin-bottom: var(--space-7); margin-bottom: var(--space-7);
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--text-label-md);
color: var(--on-surface-muted);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
} }
.sg-sub { .sg-sub {
font-family: var(--font-sans); font-family: var(--font-sans);