JL Kruger
5422131782
Homepage (site/index.html): integration-v14 promoted, Writings section integrated with 33 pieces clustered by type (stories/essays/miscellany), Writings welcome lightbox, content frame at 98% opacity. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
582 lines
20 KiB
HTML
582 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Solarpunk Sundae Design System</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* ============================================
|
|
SOLARPUNK SUNDAE DESIGN SYSTEM
|
|
Sweet Sustainability | Pastel Ecology | Delicious Future
|
|
============================================ */
|
|
|
|
/* ===== 1. CSS RESET ===== */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ===== 2. CSS VARIABLES ===== */
|
|
:root {
|
|
/* --- BACKGROUND GRADIENT ---
|
|
Cream to pastel progression - soft and sweet */
|
|
--bg-gradient-1: #f9f4ef; /* Vanilla cream */
|
|
--bg-gradient-2: #f5f0e8; /* Warm cream */
|
|
--bg-gradient-3: #efe8f0; /* Lavender cream */
|
|
--bg-gradient-4: #e8f0ed; /* Mint cream */
|
|
|
|
/* --- SURFACE BACKGROUNDS --- */
|
|
--bg-elevated: rgba(255,255,255,0.60);
|
|
--bg-card: rgba(255,255,255,0.80);
|
|
--bg-darker: rgba(200,220,200,0.25);
|
|
--bg-solid-dark: #d8e8d0;
|
|
--bg-solid-light: #ffffff;
|
|
|
|
/* --- BORDERS --- */
|
|
--border-color: #b8d4a8;
|
|
--border-width: 2px;
|
|
--border-width-thick: 3px;
|
|
|
|
/* --- BORDER RADIUS ---
|
|
Soft and round like scoops of ice cream */
|
|
--radius-sm: 8px;
|
|
--radius-md: 14px;
|
|
--radius-lg: 20px;
|
|
--radius-xl: 28px;
|
|
--radius-organic: 16px 22px 18px 24px;
|
|
|
|
/* --- COLOR SYSTEM ---
|
|
Inspired by artisan ice cream, fresh fruit, whipped cream */
|
|
--mint-1: #a8d8b9; /* Mint ice cream */
|
|
--mint-2: #88c098; /* Deeper mint */
|
|
--peach-1: #ffc4a3; /* Peach sorbet */
|
|
--peach-2: #ffb088; /* Ripe peach */
|
|
--honey-1: #ffd68f; /* Honeycomb */
|
|
--honey-2: #ffc75f; /* Golden honey */
|
|
--berry-1: #e8a8c8; /* Strawberry cream */
|
|
--berry-2: #d888a8; /* Berry compote */
|
|
--sky-1: #a8d8e8; /* Sky blue sorbet */
|
|
--sky-2: #88c0d8; /* Ocean foam */
|
|
|
|
/* --- TYPOGRAPHY COLORS --- */
|
|
--text-primary: #4a5a48;
|
|
--text-secondary: #6a7a68;
|
|
--text-muted: #8a9a88;
|
|
--text-dark: #2a3a28;
|
|
--text-white: #ffffff;
|
|
--text-h1-gradient: linear-gradient(135deg, #a8d8b9 0%, #ffd68f 33%, #e8a8c8 66%, #a8d8e8 100%);
|
|
--text-h2: #88c098;
|
|
--text-h3: #ffc75f;
|
|
--text-h4: #a8d8e8;
|
|
--text-h5: #ffc4a3;
|
|
--text-h6: #4a5a48;
|
|
|
|
/* --- BUTTON GRADIENTS --- */
|
|
--btn-mint-gradient: linear-gradient(135deg, #a8d8b9 0%, #88c098 100%);
|
|
--btn-honey-gradient: linear-gradient(135deg, #ffd68f 0%, #ffc75f 100%);
|
|
--btn-berry-gradient: linear-gradient(135deg, #e8a8c8 0%, #d888a8 100%);
|
|
--btn-sky-gradient: linear-gradient(135deg, #a8d8e8 0%, #88c0d8 100%);
|
|
|
|
/* --- FONTS --- */
|
|
--font-header: 'Outfit', sans-serif;
|
|
--font-body: 'Space Grotesk', sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
/* ===== 3. BASE STYLES ===== */
|
|
body {
|
|
font-family: var(--font-body);
|
|
background: linear-gradient(180deg,
|
|
var(--bg-gradient-1) 0%,
|
|
var(--bg-gradient-2) 33%,
|
|
var(--bg-gradient-3) 66%,
|
|
var(--bg-gradient-4) 100%);
|
|
background-attachment: fixed;
|
|
color: var(--text-primary);
|
|
line-height: 1.7;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* ===== 4. LAYOUT ===== */
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
|
|
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
|
|
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
|
|
|
|
/* ===== 5. TYPOGRAPHY ===== */
|
|
h1 {
|
|
font-size: clamp(2rem, 5vw, 3rem);
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
background: var(--text-h1-gradient);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
font-family: var(--font-header);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: clamp(1.5rem, 4vw, 2rem);
|
|
font-weight: 600;
|
|
color: var(--text-h2);
|
|
margin-bottom: 1rem;
|
|
font-family: var(--font-header);
|
|
}
|
|
|
|
h3 {
|
|
font-size: clamp(1.25rem, 3vw, 1.5rem);
|
|
font-weight: 600;
|
|
color: var(--text-h3);
|
|
margin-bottom: 0.75rem;
|
|
font-family: var(--font-header);
|
|
}
|
|
|
|
h4 {
|
|
font-size: clamp(1.1rem, 2.5vw, 1.25rem);
|
|
font-weight: 600;
|
|
color: var(--text-h4);
|
|
margin-bottom: 0.75rem;
|
|
font-family: var(--font-header);
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--text-h5);
|
|
margin-bottom: 0.5rem;
|
|
font-family: var(--font-header);
|
|
}
|
|
|
|
h6 {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: var(--text-h6);
|
|
margin-bottom: 0.5rem;
|
|
font-family: var(--font-header);
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 1rem;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
strong {
|
|
color: var(--mint-2);
|
|
font-weight: 600;
|
|
}
|
|
|
|
em {
|
|
color: var(--honey-1);
|
|
font-style: italic;
|
|
}
|
|
|
|
code {
|
|
font-family: var(--font-mono);
|
|
background: var(--bg-elevated);
|
|
padding: 0.25rem 0.5rem;
|
|
border: var(--border-width) solid var(--border-color);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.9em;
|
|
color: var(--sky-2);
|
|
}
|
|
|
|
pre {
|
|
font-family: var(--font-mono);
|
|
background: var(--bg-elevated);
|
|
padding: 1.25rem;
|
|
border: var(--border-width) solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
overflow-x: auto;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
pre code {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
blockquote {
|
|
background: var(--bg-elevated);
|
|
border-left: var(--border-width-thick) solid var(--mint-1);
|
|
border-radius: var(--radius-sm);
|
|
padding: 1.25rem 1.5rem;
|
|
margin: 1.5rem 0;
|
|
font-style: italic;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
ul, ol {
|
|
margin-bottom: 1.5rem;
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
ul li, ol li {
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
dl {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
dt {
|
|
font-weight: 600;
|
|
color: var(--mint-2);
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
dd {
|
|
margin-left: 2rem;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* ===== BUTTONS ===== */
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 0.875rem 1.75rem;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 0.9375rem;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
cursor: pointer;
|
|
border: none;
|
|
font-family: var(--font-body);
|
|
border-radius: var(--radius-md);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.btn:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-mint {
|
|
background: var(--btn-mint-gradient);
|
|
color: white;
|
|
box-shadow: 0 4px 12px rgba(168, 216, 185, 0.4);
|
|
}
|
|
|
|
.btn-mint:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(168, 216, 185, 0.5);
|
|
}
|
|
|
|
.btn-honey {
|
|
background: var(--btn-honey-gradient);
|
|
color: white;
|
|
box-shadow: 0 4px 12px rgba(255, 214, 143, 0.4);
|
|
}
|
|
|
|
.btn-honey:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(255, 214, 143, 0.5);
|
|
}
|
|
|
|
.btn-berry {
|
|
background: var(--btn-berry-gradient);
|
|
color: white;
|
|
box-shadow: 0 4px 12px rgba(232, 168, 200, 0.4);
|
|
}
|
|
|
|
.btn-berry:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(232, 168, 200, 0.5);
|
|
}
|
|
|
|
.btn-sky {
|
|
background: var(--btn-sky-gradient);
|
|
color: white;
|
|
box-shadow: 0 4px 12px rgba(168, 216, 232, 0.4);
|
|
}
|
|
|
|
.btn-sky:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(168, 216, 232, 0.5);
|
|
}
|
|
|
|
/* ===== CARDS & PANELS ===== */
|
|
.card {
|
|
background: var(--bg-card);
|
|
backdrop-filter: blur(10px);
|
|
border: var(--border-width) solid var(--border-color);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: 0 2px 8px rgba(184, 212, 168, 0.15);
|
|
}
|
|
|
|
.card-elevated {
|
|
background: var(--bg-elevated);
|
|
backdrop-filter: blur(10px);
|
|
border: var(--border-width) solid var(--border-color);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.card-solid {
|
|
background: var(--bg-solid-light);
|
|
border: var(--border-width) solid var(--border-color);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: 0 4px 16px rgba(184, 212, 168, 0.2);
|
|
}
|
|
|
|
.card-mint {
|
|
border-left: 4px solid var(--mint-1);
|
|
}
|
|
|
|
.card-honey {
|
|
border-left: 4px solid var(--honey-1);
|
|
}
|
|
|
|
.card-berry {
|
|
border-left: 4px solid var(--berry-1);
|
|
}
|
|
|
|
.card-sky {
|
|
border-left: 4px solid var(--sky-1);
|
|
}
|
|
|
|
/* ===== BADGES ===== */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 0.375rem 0.875rem;
|
|
border-radius: var(--radius-md);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
border: var(--border-width) solid;
|
|
}
|
|
|
|
.badge-mint {
|
|
background: rgba(168, 216, 185, 0.2);
|
|
color: var(--mint-2);
|
|
border-color: var(--mint-1);
|
|
}
|
|
|
|
.badge-honey {
|
|
background: rgba(255, 214, 143, 0.2);
|
|
color: #d4a850;
|
|
border-color: var(--honey-1);
|
|
}
|
|
|
|
.badge-berry {
|
|
background: rgba(232, 168, 200, 0.2);
|
|
color: var(--berry-2);
|
|
border-color: var(--berry-1);
|
|
}
|
|
|
|
.badge-sky {
|
|
background: rgba(168, 216, 232, 0.2);
|
|
color: var(--sky-2);
|
|
border-color: var(--sky-1);
|
|
}
|
|
|
|
/* ===== ALERTS ===== */
|
|
.alert {
|
|
padding: 1.25rem 1.5rem;
|
|
border-radius: var(--radius-md);
|
|
border: var(--border-width) solid;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.alert-mint {
|
|
background: rgba(168, 216, 185, 0.15);
|
|
border-color: var(--mint-1);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.alert-honey {
|
|
background: rgba(255, 214, 143, 0.15);
|
|
border-color: var(--honey-1);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.alert-berry {
|
|
background: rgba(232, 168, 200, 0.15);
|
|
border-color: var(--berry-1);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.alert-sky {
|
|
background: rgba(168, 216, 232, 0.15);
|
|
border-color: var(--sky-1);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* ===== UTILITY CLASSES ===== */
|
|
.text-center { text-align: center; }
|
|
.mt-2 { margin-top: 1rem; }
|
|
.mb-3 { margin-bottom: 1.5rem; }
|
|
|
|
/* ===== HORIZONTAL RULE ===== */
|
|
hr {
|
|
border: none;
|
|
height: var(--border-width);
|
|
background: linear-gradient(to right, transparent, var(--border-color), transparent);
|
|
margin: 2.5rem 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- HEADER -->
|
|
<header class="text-center mb-3">
|
|
<h1>Solarpunk Sundae</h1>
|
|
<p style="font-size: 1.125rem; color: var(--text-secondary);">Sweet Sustainability | Pastel Ecology | Delicious Future</p>
|
|
</header>
|
|
|
|
<hr>
|
|
|
|
<!-- INTRODUCTION -->
|
|
<section class="mb-3">
|
|
<div class="card-solid">
|
|
<h2>A Sweet Take on Sustainable Design</h2>
|
|
<p>Solarpunk Sundae combines <strong>ecological optimism</strong> with the delightful aesthetics of artisan desserts. This design system proves that <em>sustainability can be sweet</em>, featuring pastel palettes inspired by mint ice cream, peach sorbet, honeycomb, and berry compote.</p>
|
|
<p>Like the best desserts, this system is crafted with care—organic curves, soft shadows, and a color palette that's as nourishing as it is beautiful.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- COLOR PALETTE -->
|
|
<section class="mb-3">
|
|
<h2>Flavor Palette</h2>
|
|
<div class="grid grid-4">
|
|
<div class="card" style="background: var(--mint-1); color: var(--text-dark);">
|
|
<h4 style="color: var(--text-dark);">Mint Ice Cream</h4>
|
|
<code style="background: rgba(255,255,255,0.4); color: var(--text-dark); border-color: var(--text-dark);">#a8d8b9</code>
|
|
</div>
|
|
<div class="card" style="background: var(--honey-1); color: var(--text-dark);">
|
|
<h4 style="color: var(--text-dark);">Honeycomb</h4>
|
|
<code style="background: rgba(255,255,255,0.4); color: var(--text-dark); border-color: var(--text-dark);">#ffd68f</code>
|
|
</div>
|
|
<div class="card" style="background: var(--berry-1); color: var(--text-dark);">
|
|
<h4 style="color: var(--text-dark);">Strawberry Cream</h4>
|
|
<code style="background: rgba(255,255,255,0.4); color: var(--text-dark); border-color: var(--text-dark);">#e8a8c8</code>
|
|
</div>
|
|
<div class="card" style="background: var(--sky-1); color: var(--text-dark);">
|
|
<h4 style="color: var(--text-dark);">Sky Sorbet</h4>
|
|
<code style="background: rgba(255,255,255,0.4); color: var(--text-dark); border-color: var(--text-dark);">#a8d8e8</code>
|
|
</div>
|
|
<div class="card" style="background: var(--peach-1); color: var(--text-dark);">
|
|
<h4 style="color: var(--text-dark);">Peach Sorbet</h4>
|
|
<code style="background: rgba(255,255,255,0.4); color: var(--text-dark); border-color: var(--text-dark);">#ffc4a3</code>
|
|
</div>
|
|
<div class="card" style="background: var(--mint-2); color: white;">
|
|
<h4 style="color: white;">Deeper Mint</h4>
|
|
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#88c098</code>
|
|
</div>
|
|
<div class="card" style="background: var(--berry-2); color: white;">
|
|
<h4 style="color: white;">Berry Compote</h4>
|
|
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#d888a8</code>
|
|
</div>
|
|
<div class="card" style="background: var(--sky-2); color: white;">
|
|
<h4 style="color: white;">Ocean Foam</h4>
|
|
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#88c0d8</code>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr>
|
|
|
|
<!-- BUTTONS -->
|
|
<section class="mb-3">
|
|
<h2>Button Flavors</h2>
|
|
<div class="grid grid-2">
|
|
<div class="card card-mint">
|
|
<h3>Mint & Honey</h3>
|
|
<button class="btn btn-mint">Mint Action</button>
|
|
<button class="btn btn-honey mt-2">Honey Action</button>
|
|
</div>
|
|
<div class="card card-berry">
|
|
<h3>Berry & Sky</h3>
|
|
<button class="btn btn-berry">Berry Action</button>
|
|
<button class="btn btn-sky mt-2">Sky Action</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- BADGES -->
|
|
<section class="mb-3">
|
|
<h2>Sweet Badges</h2>
|
|
<div class="card">
|
|
<span class="badge badge-mint">Organic</span>
|
|
<span class="badge badge-honey">Sustainable</span>
|
|
<span class="badge badge-berry">Handcrafted</span>
|
|
<span class="badge badge-sky">Fresh</span>
|
|
</div>
|
|
</section>
|
|
|
|
<hr>
|
|
|
|
<!-- ALERTS -->
|
|
<section class="mb-3">
|
|
<h2>Flavor Alerts</h2>
|
|
<div class="alert alert-mint">
|
|
<strong>Success!</strong> Your sustainable garden is thriving with fresh mint and herbs.
|
|
</div>
|
|
<div class="alert alert-honey">
|
|
<strong>Notice:</strong> Solar panels are generating 20% more energy than projected!
|
|
</div>
|
|
<div class="alert alert-berry">
|
|
<strong>Update:</strong> Community berry harvest scheduled for this weekend.
|
|
</div>
|
|
<div class="alert alert-sky">
|
|
<strong>Info:</strong> Rainwater collection system at 85% capacity.
|
|
</div>
|
|
</section>
|
|
|
|
<!-- IMPLEMENTATION -->
|
|
<section class="mb-3">
|
|
<h2>Design Philosophy</h2>
|
|
<div class="card-solid">
|
|
<h3>Sweet Sustainability Principles</h3>
|
|
<ul>
|
|
<li><strong>Pastel Optimism:</strong> Light, airy colors that evoke joy and possibility</li>
|
|
<li><strong>Organic Curves:</strong> Generous border radius (8-28px) for softness</li>
|
|
<li><strong>Dessert-Inspired Palette:</strong> Mint, honey, berry, peach, sky</li>
|
|
<li><strong>High Contrast Text:</strong> Dark green text ensures readability on pastels</li>
|
|
<li><strong>Artisan Details:</strong> Subtle shadows and backdrop blur for depth</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="card text-center" style="padding: 2rem;">
|
|
<h2>Solarpunk Sundae Style Complete</h2>
|
|
<p style="margin-top: 1rem;">Sustainable design never tasted so sweet 🍦🌱</p>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|