engineering/www.unturf.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Redesign step labels & footnotes to match site palette

Browse source 
Step labels now use primary green (#43a047) background with white text,
bold weight, letter-spacing, & border-radius matching Pico conventions.
Footnote links switch from lime (#CDDC39) to primary green for proper
contrast in both light & dark modes. Callout boxes gain subtle
border-radius on right side. Styleguide color swatches updated.
This commit is contained in:
russell@unturf.com 2026-02-27 09:43:31 -05:00
parent aec82574e0
commit 957e418fe0
2 changed files with 16 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

20
css/unturf.css
View file

@ -9,8 +9,8 @@
--primary: #43a047; --primary: #43a047;
/* step label */ /* step label */
--step-bg: #263238; --step-bg: var(--primary);
--step-text: #CDDC39; --step-text: #fff;
/* callout boxes */ /* callout boxes */
--honest-border: #F44336; --honest-border: #F44336;
@ -21,9 +21,9 @@
--warning-bg: rgba(255, 152, 0, 0.05); --warning-bg: rgba(255, 152, 0, 0.05);
/* footnotes */ /* footnotes */
--footnote-link: #CDDC39; --footnote-link: var(--primary);
--footnote-highlight-bg: rgba(205, 220, 57, 0.1); --footnote-highlight-bg: rgba(67, 160, 71, 0.1);
--footnote-highlight-border: #CDDC39; --footnote-highlight-border: var(--primary);
/* diagrams */ /* diagrams */
--diagram-caption: #888; --diagram-caption: #888;
@ -102,8 +102,11 @@
display: inline-block; display: inline-block;
background: var(--step-bg); background: var(--step-bg);
color: var(--step-text); color: var(--step-text);
padding: 0.2em 0.6em; padding: 0.3em 0.75em;
font-size: 0.8em; font-size: 0.75em;
font-weight: bold;
letter-spacing: 0.08em;
border-radius: 0.25rem;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
@ -114,8 +117,9 @@
.warning-box { .warning-box {
border-left-width: 4px; border-left-width: 4px;
border-left-style: solid; border-left-style: solid;
padding: 0.5em 1em; padding: 0.75em 1em;
margin: 1em 0; margin: 1em 0;
border-radius: 0 0.25rem 0.25rem 0;
} }
.honest-box { border-color: var(--honest-border); background: var(--honest-bg); } .honest-box { border-color: var(--honest-border); background: var(--honest-bg); }

8
styleguide/index.html
View file

@ -54,11 +54,11 @@ A living reference for every component, element, & pattern across <span class="u
<h4>Step Label</h4> <h4>Step Label</h4>
<div class="swatch-row"> <div class="swatch-row">
<span class="swatch" style="background: var(--step-bg);"></span> <span class="swatch" style="background: var(--step-bg);"></span>
<code>--step-bg</code> #263238 <code>--step-bg</code> inherits <code>--primary</code> (#43a047)
</div> </div>
<div class="swatch-row"> <div class="swatch-row">
<span class="swatch" style="background: var(--step-text);"></span> <span class="swatch" style="background: var(--step-text);"></span>
<code>--step-text</code> #CDDC39 <code>--step-text</code> #fff
</div> </div>
<h4>Callout Boxes</h4> <h4>Callout Boxes</h4>
@ -78,11 +78,11 @@ A living reference for every component, element, & pattern across <span class="u
<h4>Footnotes</h4> <h4>Footnotes</h4>
<div class="swatch-row"> <div class="swatch-row">
<span class="swatch" style="background: var(--footnote-link);"></span> <span class="swatch" style="background: var(--footnote-link);"></span>
<code>--footnote-link</code> #CDDC39 <code>--footnote-link</code> inherits <code>--primary</code> (#43a047)
</div> </div>
<div class="swatch-row"> <div class="swatch-row">
<span class="swatch" style="background: var(--footnote-highlight-border);"></span> <span class="swatch" style="background: var(--footnote-highlight-border);"></span>
<code>--footnote-highlight-border</code> #CDDC39 <code>--footnote-highlight-border</code> inherits <code>--primary</code> (#43a047)
</div> </div>
<h4>Eight Forms of Capital</h4> <h4>Eight Forms of Capital</h4>