481 lines
18 KiB
HTML
481 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>styleguide — unturf.</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="theme-color" content="#5871ad">
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="/css/chunkfive/stylesheet.css" type="text/css" charset="utf-8" />
|
|
<link rel="stylesheet" href="/css/pico.classless.min.css">
|
|
<link rel="stylesheet" href="/css/unturf.css">
|
|
<style>
|
|
.swatch {
|
|
display: inline-block;
|
|
width: 3em;
|
|
height: 3em;
|
|
border-radius: 4px;
|
|
vertical-align: middle;
|
|
margin-right: 0.5em;
|
|
border: 1px solid rgba(128, 128, 128, 0.2);
|
|
}
|
|
.swatch-row {
|
|
margin-bottom: 0.75em;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<main class="content-wide">
|
|
|
|
<center><a href="/"><h1 class="site-title">unturf.</h1></a></center>
|
|
<center><h3>grow food not lawn</h3></center>
|
|
<center class="nav-links"><small><a href="/let-us-define-a-permacomputer/">manifesto</a> · <a href="/eight-forms-of-capital/">eight forms of capital</a> · <a href="/single-use-plastics/">single-use plastics</a> · <a href="/hemp-bioplastic/">hemp bioplastic</a> · <a href="/hemp-bioplastic/process/">recipe</a> · <a href="/software/">free software</a></small></center>
|
|
|
|
<h2>Styleguide</h2>
|
|
|
|
<p>
|
|
A living reference for every component, element, & pattern across <span class="unturf-brand">unturf.</span> pages. This page uses <code>unturf.css</code> layered on <a href="https://picocss.com/" target="_blank">Pico CSS v2.0.6</a> (classless). What you see here matches what appears across all pages.
|
|
</p>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 1. COLOR PALETTE -->
|
|
<!-- ============================================================ -->
|
|
|
|
<h3>1. Color Palette</h3>
|
|
|
|
<p>Every color lives in a CSS custom property inside <code>:root</code>. Change a variable, change every page.</p>
|
|
|
|
<h4>Brand</h4>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--primary);"></span>
|
|
<code>--primary</code> #43a047
|
|
</div>
|
|
|
|
<h4>Step Label</h4>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--step-bg);"></span>
|
|
<code>--step-bg</code> inherits <code>--primary</code> (#43a047)
|
|
</div>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--step-text);"></span>
|
|
<code>--step-text</code> #fff
|
|
</div>
|
|
|
|
<h4>Callout Boxes</h4>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--honest-border);"></span>
|
|
<code>--honest-border</code> #F44336 (honest box)
|
|
</div>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--recipe-border);"></span>
|
|
<code>--recipe-border</code> #4CAF50 (recipe box)
|
|
</div>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--warning-border);"></span>
|
|
<code>--warning-border</code> #FF9800 (warning box)
|
|
</div>
|
|
|
|
<h4>Footnotes</h4>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--footnote-link);"></span>
|
|
<code>--footnote-link</code> inherits <code>--primary</code> (#43a047)
|
|
</div>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--footnote-highlight-border);"></span>
|
|
<code>--footnote-highlight-border</code> inherits <code>--primary</code> (#43a047)
|
|
</div>
|
|
|
|
<h4>Eight Forms of Capital</h4>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--capital-living);"></span>
|
|
<code>--capital-living</code> #4CAF50
|
|
</div>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--capital-material);"></span>
|
|
<code>--capital-material</code> #795548
|
|
</div>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--capital-financial);"></span>
|
|
<code>--capital-financial</code> #607D8B
|
|
</div>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--capital-intellectual);"></span>
|
|
<code>--capital-intellectual</code> #2196F3
|
|
</div>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--capital-experiential);"></span>
|
|
<code>--capital-experiential</code> #009688
|
|
</div>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--capital-social);"></span>
|
|
<code>--capital-social</code> #FF9800
|
|
</div>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--capital-cultural);"></span>
|
|
<code>--capital-cultural</code> #9C27B0
|
|
</div>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background: var(--capital-spiritual);"></span>
|
|
<code>--capital-spiritual</code> #E91E63
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 2. TYPOGRAPHY -->
|
|
<!-- ============================================================ -->
|
|
|
|
<h3>2. Typography</h3>
|
|
|
|
<p>Pico CSS handles body text via system fonts. <span class="unturf-brand">unturf.</span> uses ChunkFive (<code>'chunkfiveregular'</code>) for branding only.</p>
|
|
|
|
<h4>Brand Font</h4>
|
|
<p><span class="unturf-brand" style="font-size: 2em;">unturf.</span> ← <code>class="unturf-brand"</code></p>
|
|
|
|
<h4>Heading Hierarchy</h4>
|
|
<p><code><h1></code> stays reserved for the site logo. Content headings start at <code><h2></code>.</p>
|
|
<h2>h2: Page Title</h2>
|
|
<h3>h3: Section Heading</h3>
|
|
<h4>h4: Subsection Heading</h4>
|
|
|
|
<h4>Text Styles</h4>
|
|
<p>A regular paragraph of body text. Pico CSS provides the base font stack, line height, & color.</p>
|
|
<p><b>Bold text</b> via <code><b></code> tag.</p>
|
|
<p><i>Italic text</i> via <code><i></code> tag.</p>
|
|
<p><code>Inline code</code> via <code><code></code> tag.</p>
|
|
<p><small>Small text via <code><small></code> tag, used for navigation & footer.</small></p>
|
|
|
|
<h4>Blockquote</h4>
|
|
<blockquote><code>go-rusty-rails-jvm.js</code></blockquote>
|
|
|
|
<hr>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 3. LAYOUT -->
|
|
<!-- ============================================================ -->
|
|
|
|
<h3>3. Layout</h3>
|
|
|
|
<p>Two layout widths exist. Apply one class to <code><main></code>. Pico CSS provides the centering & padding.</p>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr><th>Class</th><th>Max Width</th><th>Used On</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td><code>.content-narrow</code></td><td>460px</td><td>manifesto</td></tr>
|
|
<tr><td><code>.content-wide</code></td><td>960px</td><td>all other content pages</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<hr>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 4. NAVIGATION & FOOTER -->
|
|
<!-- ============================================================ -->
|
|
|
|
<h3>4. Navigation & Footer</h3>
|
|
|
|
<p>Every content page shares a header & footer pattern. Current page link gets <code>aria-current="page"</code> for bold, reduced opacity styling.</p>
|
|
|
|
<h4>Header Pattern</h4>
|
|
<pre><code><center><a href="/"><h1 class="site-title">unturf.</h1></a></center>
|
|
<center><h3>grow food not lawn</h3></center>
|
|
<center class="nav-links"><small>
|
|
<a href="...">manifesto</a> &middot;
|
|
<a href="..." aria-current="page">current page</a> &middot;
|
|
<a href="...">other page</a>
|
|
</small></center></code></pre>
|
|
|
|
<h4>Footer Pattern</h4>
|
|
<pre><code><footer>
|
|
<center><a href="/software/" class="unturf-brand">unturf. software</a></center>
|
|
<center>Russell Ballestrini | <span class="unturf-brand">unturf.</span> &copy; 2025</center>
|
|
</footer></code></pre>
|
|
|
|
<hr>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 5. STEP LABEL -->
|
|
<!-- ============================================================ -->
|
|
|
|
<h3>5. Step Label</h3>
|
|
|
|
<p>Progressive disclosure pattern. A numbered label introduces each section on multi-step pages.</p>
|
|
|
|
<span class="step-label">STEP 1</span>
|
|
<h4>Example Section Title</h4>
|
|
<p>Content follows a step label & heading pair.</p>
|
|
|
|
<pre><code><span class="step-label">STEP 1</span>
|
|
<h3>Section Title</h3></code></pre>
|
|
|
|
<hr>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 6. CALLOUT BOXES -->
|
|
<!-- ============================================================ -->
|
|
|
|
<h3>6. Callout Boxes</h3>
|
|
|
|
<p>Three box types share the same structure (left border, padding, subtle background). Each carries a distinct color & purpose.</p>
|
|
|
|
<div class="honest-box">
|
|
<b>Honest box.</b> Caveats, corrections, uncomfortable truths. Red border signals caution about claims or expectations.
|
|
</div>
|
|
|
|
<div class="recipe-box">
|
|
<b>Recipe box.</b> Procedures, instructions, actionable steps. Green border signals constructive action.
|
|
</div>
|
|
|
|
<div class="warning-box">
|
|
<b>Warning box.</b> Safety notes, hazards, things that could cause harm. Orange border signals attention required.
|
|
</div>
|
|
|
|
<pre><code><div class="honest-box">
|
|
<b>Label.</b> Content here.
|
|
</div>
|
|
|
|
<div class="recipe-box">
|
|
<b>Label.</b> Content here.
|
|
</div>
|
|
|
|
<div class="warning-box">
|
|
<b>Label.</b> Content here.
|
|
</div></code></pre>
|
|
|
|
<hr>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 7. CAPITAL CARDS -->
|
|
<!-- ============================================================ -->
|
|
|
|
<h3>7. Capital Cards</h3>
|
|
|
|
<p>Eight color coded cards for the <a href="/eight-forms-of-capital/">eight forms of capital</a>. Each variant sets a left border color & heading color via custom property.</p>
|
|
|
|
<div class="capital-card capital-card--living">
|
|
<h4>Living Capital</h4>
|
|
<p>Soil, water, plants, animals, ecosystems.</p>
|
|
</div>
|
|
|
|
<div class="capital-card capital-card--material">
|
|
<h4>Material Capital</h4>
|
|
<p>Stone, metal, timber, tools, servers, networks.</p>
|
|
</div>
|
|
|
|
<div class="capital-card capital-card--financial">
|
|
<h4>Financial Capital</h4>
|
|
<p>Money, currencies, securities.</p>
|
|
</div>
|
|
|
|
<div class="capital-card capital-card--intellectual">
|
|
<h4>Intellectual Capital</h4>
|
|
<p>Ideas, concepts, knowledge, open source code.</p>
|
|
</div>
|
|
|
|
<div class="capital-card capital-card--experiential">
|
|
<h4>Experiential Capital</h4>
|
|
<p>Embodied know-how built from lived experience.</p>
|
|
</div>
|
|
|
|
<div class="capital-card capital-card--social">
|
|
<h4>Social Capital</h4>
|
|
<p>Influence, connections, relationships, trust.</p>
|
|
</div>
|
|
|
|
<div class="capital-card capital-card--cultural">
|
|
<h4>Cultural Capital</h4>
|
|
<p>Shared story, myth, song, art, ceremony, ethics.</p>
|
|
</div>
|
|
|
|
<div class="capital-card capital-card--spiritual">
|
|
<h4>Spiritual Capital</h4>
|
|
<p>Karma, faith, presence, connection to a greater whole.</p>
|
|
</div>
|
|
|
|
<pre><code><div class="capital-card capital-card--living">
|
|
<h4>Living Capital</h4>
|
|
<p>Description here.</p>
|
|
</div></code></pre>
|
|
|
|
<p>Variants: <code>--living</code>, <code>--material</code>, <code>--financial</code>, <code>--intellectual</code>, <code>--experiential</code>, <code>--social</code>, <code>--cultural</code>, <code>--spiritual</code>.</p>
|
|
|
|
<hr>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 8. DIAGRAM FIGURE -->
|
|
<!-- ============================================================ -->
|
|
|
|
<h3>8. Diagram Figure</h3>
|
|
|
|
<p>All diagrams wrap in <code><figure class="diagram"></code>. Images scale to container width. Captions render small & gray.</p>
|
|
|
|
<figure class="diagram">
|
|
<img src="/eight-forms-of-capital/img/individual-forms.svg" alt="Example diagram: eight forms of capital from foundation to emergence">
|
|
<figcaption>example caption: from living capital at the foundation to cultural capital as emergent community property</figcaption>
|
|
</figure>
|
|
|
|
<pre><code><figure class="diagram">
|
|
<img src="path/to/diagram.svg" alt="Description">
|
|
<figcaption>caption text</figcaption>
|
|
</figure></code></pre>
|
|
|
|
<hr>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 9. FOOTNOTES -->
|
|
<!-- ============================================================ -->
|
|
|
|
<h3>9. Footnotes</h3>
|
|
|
|
<p>Inline superscript links point to numbered footnotes at the bottom of a page. Clicking a footnote number scrolls down. A back arrow scrolls up. Targeted footnotes highlight with a lime left border.<sup id="ref-sg1"><a href="#fn-sg1">[1]</a></sup></p>
|
|
|
|
<h4>Inline Pattern</h4>
|
|
<pre><code><sup id="ref1"><a href="#fn1">[1]</a></sup></code></pre>
|
|
|
|
<h4>Footnote Section</h4>
|
|
<div class="footnotes">
|
|
<ol>
|
|
<li id="fn-sg1">Example footnote demonstrating the pattern. Source title, <a href="#" target="_blank"><i>Publication Name</i></a>, date. <a href="#ref-sg1">↩</a></li>
|
|
</ol>
|
|
</div>
|
|
|
|
<pre><code><div class="footnotes">
|
|
<ol>
|
|
<li id="fn1">Source text. <a href="#ref1">&#8617;</a></li>
|
|
</ol>
|
|
</div></code></pre>
|
|
|
|
<hr>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 10. TABLES -->
|
|
<!-- ============================================================ -->
|
|
|
|
<h3>10. Tables</h3>
|
|
|
|
<p>Pico CSS styles tables from semantic markup alone. No classes needed.</p>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr><th>Capital</th><th>Permacomputer Expression</th><th>Quadrivium Value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Living</td><td>Durable hardware, repair not replace</td><td>Harmony</td></tr>
|
|
<tr><td>Intellectual</td><td>Open source, public domain, seeds to sprout</td><td>Truth</td></tr>
|
|
<tr><td>Social</td><td>By people, for people, voluntary</td><td>Freedom</td></tr>
|
|
<tr><td>Spiritual</td><td>Love as fuel, wu wei, homeostasis</td><td>Love</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<hr>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 11. LISTS -->
|
|
<!-- ============================================================ -->
|
|
|
|
<h3>11. Lists</h3>
|
|
|
|
<h4>Unordered</h4>
|
|
<ul>
|
|
<li>Glass jars for storage</li>
|
|
<li>Steel water bottles</li>
|
|
<li>Cotton bags</li>
|
|
<li>Beeswax wraps</li>
|
|
</ul>
|
|
|
|
<h4>Ordered</h4>
|
|
<ol>
|
|
<li>Eliminate petroleum plastic</li>
|
|
<li>Grow hemp</li>
|
|
<li>Process cooperatively</li>
|
|
<li>Compost at end of life</li>
|
|
</ol>
|
|
|
|
<hr>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 12. HORIZONTAL RULE & LINKS -->
|
|
<!-- ============================================================ -->
|
|
|
|
<h3>12. Horizontal Rule & Links</h3>
|
|
|
|
<p>A horizontal rule (<code><hr></code>) separates major sections:</p>
|
|
|
|
<hr>
|
|
|
|
<p>Links styled by Pico CSS: <a href="/">home</a>, <a href="/let-us-define-a-permacomputer/">manifesto</a>, <a href="https://picocss.com/" target="_blank">external link</a>.</p>
|
|
|
|
<hr>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 13. SOFTWARE PAGE COMPONENTS -->
|
|
<!-- ============================================================ -->
|
|
|
|
<h3>13. Software Page Components</h3>
|
|
|
|
<p>The <a href="/software/">software page</a> uses a distinct layout. A <code>class="software-page"</code> on <code><html></code> scopes all its rules. These classes apply only on that page:</p>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr><th>Class</th><th>Purpose</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td><code>.software-page</code></td><td>Root scope on <code><html></code>, triggers ChunkFive headings & layout rules</td></tr>
|
|
<tr><td><code>.projects-grid</code></td><td>Responsive grid: 1 column mobile, 2 columns at 768px+</td></tr>
|
|
<tr><td><code>.logo-container</code></td><td>Subtle background box for project logos</td></tr>
|
|
<tr><td><code>.unsandbox-logo</code></td><td>ArialPixel font, gold color</td></tr>
|
|
<tr><td><code>.neopig-logo</code></td><td>Gradient text effect (pink/orange)</td></tr>
|
|
<tr><td><code>.project-uncloseai</code></td><td>Spans full width at desktop breakpoint</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<hr>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 14. UNCLOSEAI WIDGET -->
|
|
<!-- ============================================================ -->
|
|
|
|
<h3>14. uncloseai. Widget</h3>
|
|
|
|
<p>Every content page loads the <a href="https://uncloseai.com/">uncloseai.</a> chat widget via a single script tag. The widget provides free machine learning chat, page translation, & text to speech.</p>
|
|
|
|
<h4>Embed Pattern</h4>
|
|
<pre><code><script src="https://uncloseai.com/uncloseai.js" type="module"></script></code></pre>
|
|
|
|
<p>Place before <code></body></code>. The script injects a floating button (bottom right) that opens a chat modal. Translation & TTS features appear as controls inside the modal.</p>
|
|
|
|
<h4>Behavior</h4>
|
|
<table>
|
|
<thead>
|
|
<tr><th>Feature</th><th>Trigger</th><th>Notes</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Chat</td><td>Click floating button</td><td>Page context passed automatically</td></tr>
|
|
<tr><td>Translate</td><td>Globe icon in modal controls</td><td>Renders translated page inline via iframe</td></tr>
|
|
<tr><td>Text to Speech</td><td>Speaker icon in modal controls</td><td>Multiple voices, adjustable speed</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h4>CSS Isolation</h4>
|
|
<p>The widget loads its own stylesheet (<code>uncloseai-modal-pico.css</code> on PicoCSS sites, <code>uncloseai-modal-builtin.css</code> elsewhere). All selectors scope to <code>dialog#uncloseai-embedded-modal</code>, <code>dialog#translate-modal</code>, or <code>dialog#tts-modal</code> to avoid leaking into host page styles.</p>
|
|
|
|
<h4>Software Page Card</h4>
|
|
<p>On the <a href="/software/">software page</a>, <code>.project-uncloseai</code> spans full grid width at desktop breakpoints.</p>
|
|
|
|
<hr>
|
|
|
|
<p><a href="/let-us-define-a-permacomputer/">← back to the manifesto</a></p>
|
|
|
|
</main>
|
|
|
|
<footer>
|
|
<center><a href="/software/" class="unturf-brand">unturf. software</a></center>
|
|
<center>Russell Ballestrini | <span class="unturf-brand">unturf.</span> © 2025</center>
|
|
</footer>
|
|
|
|
<script src="/js/diagram-zoom.js"></script>
|
|
<script src="https://uncloseai.com/uncloseai.js" type="module"></script>
|
|
</body>
|
|
</html>
|