Refactor unturf.css with custom properties, add styleguide page
Extract all hardcoded colors into :root CSS custom properties. Consolidate callout box shared structure into grouped selectors. Merge brand font-family declarations. Remove redundant box-sizing rule. Reorganize into 7 clearly labeled sections. Create /styleguide/ as living reference for every component: color palette, typography, layout, navigation, step labels, callout boxes, capital cards, diagrams, footnotes, tables, lists.
This commit is contained in:
parent
1d2427f89c
commit
8fff6ce010
2 changed files with 550 additions and 71 deletions
173
css/unturf.css
173
css/unturf.css
|
|
@ -2,20 +2,59 @@
|
|||
unturf. shared stylesheet
|
||||
============================================================ */
|
||||
|
||||
/* ---- 1. custom properties ---- */
|
||||
|
||||
:root {
|
||||
/* brand */
|
||||
--primary: #43a047;
|
||||
|
||||
/* step label */
|
||||
--step-bg: #263238;
|
||||
--step-text: #CDDC39;
|
||||
|
||||
/* callout boxes */
|
||||
--honest-border: #F44336;
|
||||
--honest-bg: rgba(244, 67, 54, 0.05);
|
||||
--recipe-border: #4CAF50;
|
||||
--recipe-bg: rgba(76, 175, 80, 0.05);
|
||||
--warning-border: #FF9800;
|
||||
--warning-bg: rgba(255, 152, 0, 0.05);
|
||||
|
||||
/* footnotes */
|
||||
--footnote-link: #CDDC39;
|
||||
--footnote-highlight-bg: rgba(205, 220, 57, 0.1);
|
||||
--footnote-highlight-border: #CDDC39;
|
||||
|
||||
/* diagrams */
|
||||
--diagram-caption: #888;
|
||||
|
||||
/* eight forms of capital */
|
||||
--capital-living: #4CAF50;
|
||||
--capital-material: #795548;
|
||||
--capital-financial: #607D8B;
|
||||
--capital-intellectual: #2196F3;
|
||||
--capital-experiential: #009688;
|
||||
--capital-social: #FF9800;
|
||||
--capital-cultural: #9C27B0;
|
||||
--capital-spiritual: #E91E63;
|
||||
|
||||
/* software page */
|
||||
--unsandbox-color: #c4b550;
|
||||
}
|
||||
|
||||
/* ---- brand ---- */
|
||||
.unturf-brand {
|
||||
/* ---- 2. brand & typography ---- */
|
||||
|
||||
.unturf-brand,
|
||||
.site-title {
|
||||
font-family: 'chunkfiveregular', sans-serif;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-family: 'chunkfiveregular', sans-serif;
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ---- 3. navigation ---- */
|
||||
|
||||
.nav-links {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
|
@ -27,6 +66,8 @@
|
|||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ---- 4. layout ---- */
|
||||
|
||||
.content-wide {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
|
@ -35,7 +76,10 @@
|
|||
max-width: 460px;
|
||||
}
|
||||
|
||||
/* ---- diagrams ---- */
|
||||
/* ---- 5. content components ---- */
|
||||
|
||||
/* diagrams */
|
||||
|
||||
.diagram {
|
||||
margin: 1.5em 0;
|
||||
text-align: center;
|
||||
|
|
@ -48,36 +92,46 @@
|
|||
|
||||
.diagram figcaption {
|
||||
font-size: 0.85em;
|
||||
color: #888;
|
||||
color: var(--diagram-caption);
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
/* ---- step labels ---- */
|
||||
/* step labels */
|
||||
|
||||
.step-label {
|
||||
display: inline-block;
|
||||
background: #263238;
|
||||
color: #CDDC39;
|
||||
background: var(--step-bg);
|
||||
color: var(--step-text);
|
||||
padding: 0.2em 0.6em;
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* ---- honest box (warnings / caveats) ---- */
|
||||
.honest-box {
|
||||
border-left: 4px solid #F44336;
|
||||
/* callout boxes (shared structure) */
|
||||
|
||||
.honest-box,
|
||||
.recipe-box,
|
||||
.warning-box {
|
||||
border-left-width: 4px;
|
||||
border-left-style: solid;
|
||||
padding: 0.5em 1em;
|
||||
margin: 1em 0;
|
||||
background: rgba(244, 67, 54, 0.05);
|
||||
}
|
||||
|
||||
.honest-box b {
|
||||
color: #F44336;
|
||||
}
|
||||
.honest-box { border-color: var(--honest-border); background: var(--honest-bg); }
|
||||
.honest-box b { color: var(--honest-border); }
|
||||
|
||||
.recipe-box { border-color: var(--recipe-border); background: var(--recipe-bg); }
|
||||
.recipe-box b { color: var(--recipe-border); }
|
||||
|
||||
.warning-box { border-color: var(--warning-border); background: var(--warning-bg); }
|
||||
.warning-box b { color: var(--warning-border); }
|
||||
|
||||
/* footnotes */
|
||||
|
||||
/* ---- footnotes ---- */
|
||||
sup a {
|
||||
text-decoration: none;
|
||||
color: #CDDC39;
|
||||
color: var(--footnote-link);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -99,12 +153,13 @@ sup a:hover {
|
|||
}
|
||||
|
||||
.footnotes li:target {
|
||||
background: rgba(205, 220, 57, 0.1);
|
||||
background: var(--footnote-highlight-bg);
|
||||
padding: 0.25em;
|
||||
border-left: 3px solid #CDDC39;
|
||||
border-left: 3px solid var(--footnote-highlight-border);
|
||||
}
|
||||
|
||||
/* ---- capital cards (eight forms of capital) ---- */
|
||||
/* capital cards (eight forms of capital) */
|
||||
|
||||
.capital-card {
|
||||
border-left: 4px solid var(--primary);
|
||||
padding: 0.5em 1em;
|
||||
|
|
@ -115,50 +170,24 @@ sup a:hover {
|
|||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.capital-card--living { border-color: #4CAF50; }
|
||||
.capital-card--living h4 { color: #4CAF50; }
|
||||
.capital-card--material { border-color: #795548; }
|
||||
.capital-card--material h4 { color: #795548; }
|
||||
.capital-card--financial { border-color: #607D8B; }
|
||||
.capital-card--financial h4 { color: #607D8B; }
|
||||
.capital-card--intellectual { border-color: #2196F3; }
|
||||
.capital-card--intellectual h4 { color: #2196F3; }
|
||||
.capital-card--experiential { border-color: #009688; }
|
||||
.capital-card--experiential h4 { color: #009688; }
|
||||
.capital-card--social { border-color: #FF9800; }
|
||||
.capital-card--social h4 { color: #FF9800; }
|
||||
.capital-card--cultural { border-color: #9C27B0; }
|
||||
.capital-card--cultural h4 { color: #9C27B0; }
|
||||
.capital-card--spiritual { border-color: #E91E63; }
|
||||
.capital-card--spiritual h4 { color: #E91E63; }
|
||||
.capital-card--living { border-color: var(--capital-living); }
|
||||
.capital-card--living h4 { color: var(--capital-living); }
|
||||
.capital-card--material { border-color: var(--capital-material); }
|
||||
.capital-card--material h4 { color: var(--capital-material); }
|
||||
.capital-card--financial { border-color: var(--capital-financial); }
|
||||
.capital-card--financial h4 { color: var(--capital-financial); }
|
||||
.capital-card--intellectual { border-color: var(--capital-intellectual); }
|
||||
.capital-card--intellectual h4 { color: var(--capital-intellectual); }
|
||||
.capital-card--experiential { border-color: var(--capital-experiential); }
|
||||
.capital-card--experiential h4 { color: var(--capital-experiential); }
|
||||
.capital-card--social { border-color: var(--capital-social); }
|
||||
.capital-card--social h4 { color: var(--capital-social); }
|
||||
.capital-card--cultural { border-color: var(--capital-cultural); }
|
||||
.capital-card--cultural h4 { color: var(--capital-cultural); }
|
||||
.capital-card--spiritual { border-color: var(--capital-spiritual); }
|
||||
.capital-card--spiritual h4 { color: var(--capital-spiritual); }
|
||||
|
||||
/* ---- recipe page ---- */
|
||||
.recipe-box {
|
||||
border-left: 4px solid #4CAF50;
|
||||
padding: 0.5em 1em;
|
||||
margin: 1em 0;
|
||||
background: rgba(76, 175, 80, 0.05);
|
||||
}
|
||||
|
||||
.recipe-box b {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
border-left: 4px solid #FF9800;
|
||||
padding: 0.5em 1em;
|
||||
margin: 1em 0;
|
||||
background: rgba(255, 152, 0, 0.05);
|
||||
}
|
||||
|
||||
.warning-box b {
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
/* ---- software page ---- */
|
||||
.software-page * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* ---- 6. software page ---- */
|
||||
|
||||
.software-page body {
|
||||
overflow-x: hidden;
|
||||
|
|
@ -177,7 +206,7 @@ sup a:hover {
|
|||
|
||||
.unsandbox-logo {
|
||||
font-family: ArialPixel, system-ui, sans-serif;
|
||||
color: #c4b550;
|
||||
color: var(--unsandbox-color);
|
||||
}
|
||||
|
||||
.neopig-logo {
|
||||
|
|
@ -209,12 +238,6 @@ sup a:hover {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.logo-container {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
.software-page article {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -253,6 +276,14 @@ sup a:hover {
|
|||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* ---- 7. responsive ---- */
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.logo-container {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue