Extract all inline styles into shared unturf.css, add hemp bioplastic recipe page
Move all inline <style> blocks from every HTML page into /css/unturf.css. Convert inline style attributes to CSS classes across all pages. Fix footer links so "unturf. software" stays one full link everywhere. Add hemp bioplastic process/recipe page with 7 diagrams, 3 approaches, exact quantities, safety notes, & 12 footnoted sources. Add "no dashes or emdashes" rule to CLAUDE.md.
This commit is contained in:
parent
b14172f41e
commit
eef1b92c48
29 changed files with 2147 additions and 307 deletions
274
css/unturf.css
Normal file
274
css/unturf.css
Normal file
|
|
@ -0,0 +1,274 @@
|
|||
/* ============================================================
|
||||
unturf. shared stylesheet
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
--primary: #43a047;
|
||||
}
|
||||
|
||||
/* ---- brand ---- */
|
||||
.unturf-brand {
|
||||
font-family: 'chunkfiveregular', sans-serif;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-family: 'chunkfiveregular', sans-serif;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.content-wide {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.content-narrow {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
/* ---- diagrams ---- */
|
||||
.diagram {
|
||||
margin: 1.5em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.diagram img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.diagram figcaption {
|
||||
font-size: 0.85em;
|
||||
color: #888;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
/* ---- step labels ---- */
|
||||
.step-label {
|
||||
display: inline-block;
|
||||
background: #263238;
|
||||
color: #CDDC39;
|
||||
padding: 0.2em 0.6em;
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* ---- honest box (warnings / caveats) ---- */
|
||||
.honest-box {
|
||||
border-left: 4px solid #F44336;
|
||||
padding: 0.5em 1em;
|
||||
margin: 1em 0;
|
||||
background: rgba(244, 67, 54, 0.05);
|
||||
}
|
||||
|
||||
.honest-box b {
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
/* ---- footnotes ---- */
|
||||
sup a {
|
||||
text-decoration: none;
|
||||
color: #CDDC39;
|
||||
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: rgba(205, 220, 57, 0.1);
|
||||
padding: 0.25em;
|
||||
border-left: 3px solid #CDDC39;
|
||||
}
|
||||
|
||||
/* ---- 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: #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; }
|
||||
|
||||
/* ---- 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;
|
||||
}
|
||||
|
||||
.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: #c4b550;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.logo-container {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue