russell@unturf.com
8fff6ce010
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.
312 lines
6.2 KiB
CSS
312 lines
6.2 KiB
CSS
/* ============================================================
|
|
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;
|
|
}
|
|
|
|
/* ---- 2. brand & typography ---- */
|
|
|
|
.unturf-brand,
|
|
.site-title {
|
|
font-family: 'chunkfiveregular', sans-serif;
|
|
}
|
|
|
|
.site-title {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* ---- 3. navigation ---- */
|
|
|
|
.nav-links {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.nav-links a[aria-current="page"] {
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ---- 4. layout ---- */
|
|
|
|
.content-wide {
|
|
max-width: 960px;
|
|
}
|
|
|
|
.content-narrow {
|
|
max-width: 460px;
|
|
}
|
|
|
|
/* ---- 5. content components ---- */
|
|
|
|
/* diagrams */
|
|
|
|
.diagram {
|
|
margin: 1.5em 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.diagram img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.diagram figcaption {
|
|
font-size: 0.85em;
|
|
color: var(--diagram-caption);
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
/* step labels */
|
|
|
|
.step-label {
|
|
display: inline-block;
|
|
background: var(--step-bg);
|
|
color: var(--step-text);
|
|
padding: 0.2em 0.6em;
|
|
font-size: 0.8em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.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 */
|
|
|
|
sup a {
|
|
text-decoration: none;
|
|
color: var(--footnote-link);
|
|
font-weight: bold;
|
|
}
|
|
|
|
sup a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.footnotes {
|
|
font-size: 0.85em;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.footnotes ol {
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
.footnotes li {
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
.footnotes li:target {
|
|
background: var(--footnote-highlight-bg);
|
|
padding: 0.25em;
|
|
border-left: 3px solid var(--footnote-highlight-border);
|
|
}
|
|
|
|
/* capital cards (eight forms of capital) */
|
|
|
|
.capital-card {
|
|
border-left: 4px solid var(--primary);
|
|
padding: 0.5em 1em;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.capital-card h4 {
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
.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); }
|
|
|
|
/* ---- 6. software page ---- */
|
|
|
|
.software-page body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.software-page h1,
|
|
.software-page h2 {
|
|
font-family: 'chunkfiveregular', sans-serif;
|
|
}
|
|
|
|
.software-page h1 a,
|
|
.software-page h2 a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.unsandbox-logo {
|
|
font-family: ArialPixel, system-ui, sans-serif;
|
|
color: var(--unsandbox-color);
|
|
}
|
|
|
|
.neopig-logo {
|
|
font-family: system-ui, sans-serif;
|
|
font-weight: 900;
|
|
background: linear-gradient(135deg, #ff6b6b, #ff8e53, #ff6b9d);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.software-page hgroup {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.software-page hgroup p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.logo-container a {
|
|
display: block;
|
|
}
|
|
|
|
.logo-container {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.software-page article {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.software-page article h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.software-page article p {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.software-page article img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.software-page article nav ul {
|
|
display: grid !important;
|
|
grid-template-columns: 1fr;
|
|
gap: 0.25rem;
|
|
padding: 0;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.software-page article nav ul li a {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.projects-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
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;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.project-uncloseai {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.software-page article nav ul {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.project-makepostsell nav ul,
|
|
.project-remarkbox nav ul {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.logo-container {
|
|
max-width: 400px;
|
|
}
|
|
}
|