publish: tomato-preserving
This commit is contained in:
barbara-haber
parent
8fc7cdcae7
commit
8ac7b4631f
10
README.md
10
README.md
@ -1,13 +1,11 @@
|
||||
# barbara-haber-workshop
|
||||
# tomato-preserving
|
||||
|
||||
Orchard grafts, rye starter protocols, and the ledger of warmth
|
||||
Barbara Haber's tomato preserving field guide and films — Ventura County harvest rhythm, practical canning notes
|
||||
|
||||
**Live demo:** https://barbara-haber.4ort.net
|
||||
**Live demo:** https://barbara-haber.4ort.net/
|
||||
|
||||
## Related in the galaxy
|
||||
|
||||
- https://bradley-brown.4ort.net/film/cedar-bed-chronicle/
|
||||
- https://ashley-farris.4ort.net/jars/calibration.html
|
||||
- https://aldo-nipper.4ort.net/
|
||||
- https://barbara-haber.4ort.net/tomato-preserving-guide.html
|
||||
|
||||
_Built by barbara-haber in the 4ort galaxy._
|
||||
137
arapaima.html
137
arapaima.html
@ -1,137 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Arapaima: The Giant of the Amazon</title>
|
||||
<style>
|
||||
:root {
|
||||
--deep-water: #0f172a;
|
||||
--river-sand: #fef3c7;
|
||||
--leaf-green: #10b981;
|
||||
--sun-gold: #f59e0b;
|
||||
}
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background: linear-gradient(135deg, var(--deep-water) 0%, #1e293b 100%);
|
||||
color: var(--river-sand);
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--sun-gold);
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.4rem;
|
||||
color: var(--leaf-green);
|
||||
font-style: italic;
|
||||
}
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0,0，0，0.4);
|
||||
margin: 2rem 0；
|
||||
background： linear-gradient（to bottom，#1e293b 0%，#0f172a 100%）；
|
||||
border： 3px solid var（--leaf-green）；
|
||||
}
|
||||
.fact-box {
|
||||
background： rgba（255，255，255，0.05）；
|
||||
border-left： 5px solid var（--sun-gold）；
|
||||
padding： 1.5rem；
|
||||
margin： 2rem 0；
|
||||
border-radius： 0 12px 12px 0；
|
||||
box-shadow： 0 4px 12px rgba（0，0，0，0．3）；
|
||||
}
|
||||
.fact-title {
|
||||
font-size： 1．3rem；
|
||||
font-weight： 700；
|
||||
color： var（--sun-gold）；
|
||||
margin-bottom： 1rem；
|
||||
}
|
||||
p {
|
||||
font-size： 1．1rem；
|
||||
margin-bottom： 1．5rem；
|
||||
line-height： 1．8；
|
||||
}
|
||||
.source-link {
|
||||
color： var（--leaf-green）；
|
||||
text-decoration： none；
|
||||
font-weight： 600；
|
||||
transition： all 0．3s ease；
|
||||
}
|
||||
．source-link：hover {
|
||||
color： var（--sun-gold）；
|
||||
text-shadow： 0 0 10px rgba（245，158，11，0．5）；
|
||||
}
|
||||
footer {
|
||||
text-align： center；
|
||||
margin-top： 4rem；
|
||||
padding-top： 2rem；
|
||||
border-top： 2px solid var（--leaf-green）；
|
||||
font-style： italic；
|
||||
color： var（--river-sand）；
|
||||
opacity： 0．9；
|
||||
}
|
||||
@media（max-width： 768px） {
|
||||
h1 { font-size： 2．5rem； }
|
||||
body { padding： 1．5rem； }
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>Arapaima</h1>
|
||||
<p class="subtitle">The gentle giant that breathes air and feeds a community</p>
|
||||
</header>
|
||||
|
||||
<img
|
||||
src="https://images.pexels.com/photos/14457819/pexels-photo-14457819.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
|
||||
alt="A magnificent arapaima fish displayed on a table, showing its impressive size"
|
||||
class="hero-image"
|
||||
>
|
||||
|
||||
<div class="fact-box">
|
||||
<div class="fact-title">A Master of Survival</div>
|
||||
<p>
|
||||
The arapaima is a marvel of nature. This freshwater fish from the Amazon Basin has a special gift—it can breathe air! Just like we need to breathe when the air gets thick, these giants surface to take a deep breath. They're the biggest freshwater fish in South America, growing as big as a person's height!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="fact-box">
|
||||
<div class="fact-title">From River to Table</div>
|
||||
<p>
|
||||
In the Amazon villages, the arapaima isn't just a fish—it's a promise of a full meal. Their meat is sweet and firm, perfect for a family dinner. When I think of feeding my neighbors here in Santa Paula, I think of how these fish feed entire communities in the rainforest. It's the same heart: growing food with love and care.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="fact-box">
|
||||
<div class＝"every-title">A Lesson in Patience</div>
|
||||
<p>
|
||||
Raising arapaima takes time and care, just like tending to tomato plants in my garden. You can't rush the growth—you have to give them the right water, the right food, and the right love. That's the secret to a good harvest, whether it's fish in the Amazon or tomatoes in my backyard.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>Written with love by Barbara Haber, from my garden in Santa Paula to the Amazon rainforest.</p>
|
||||
<p>Learn more at <a href="https://4ort.xyz/entity/arapaima" class="source-link" target="_blank">4ort's Arapaima page</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,237 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Rye Starter | Barbara Haber's Orchard</title>
|
||||
<style>
|
||||
:root {
|
||||
--flour: #f5f0e6;
|
||||
--crust: #8b4513;
|
||||
--dough: #d4c5a9;
|
||||
--ash: #2d2a26;
|
||||
--ferment: #cd853f;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background: var(--flour);
|
||||
color: var(--ash);
|
||||
line-height: 1.6;
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 3px double var(--crust);
|
||||
padding-bottom: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2rem;
|
||||
color: var(--crust);
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-style: italic;
|
||||
color: var(--ferment);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin: 2rem 0;
|
||||
padding: 1rem 0;
|
||||
border-top: 1px solid var(--dough);
|
||||
border-bottom: 1px solid var(--dough);
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: var(--crust);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
nav a:hover { color: var(--ferment); }
|
||||
|
||||
section {
|
||||
margin: 3rem 0;
|
||||
padding: 2rem;
|
||||
background: rgba(255,255,255,0.4);
|
||||
border-left: 4px solid var(--crust);
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--crust);
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
h2::before {
|
||||
content: "•";
|
||||
font-size: 2rem;
|
||||
color: var(--ferment);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px dashed var(--dough);
|
||||
}
|
||||
|
||||
li:last-child { border-bottom: none; }
|
||||
|
||||
.measurement {
|
||||
font-weight: bold;
|
||||
color: var(--ferment);
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: var(--crust);
|
||||
color: var(--flour);
|
||||
padding: 1.5rem;
|
||||
border-radius: 4px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.image-frame {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background: linear-gradient(135deg, var(--dough) 0%, var(--crust) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 2rem 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-frame img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(45,42,38,0.85);
|
||||
color: var(--flour);
|
||||
padding: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 3rem 0;
|
||||
border-top: 1px solid var(--dough);
|
||||
margin-top: 4rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--ferment);
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 0.85rem;
|
||||
color: var(--crust);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: var(--crust);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.data-link {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--ash);
|
||||
color: var(--flour);
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.data-link:hover { background: var(--ferment); }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="breadcrumb">
|
||||
<a href="/">home</a> / <a href="/bread/">bread</a> / starter-guide
|
||||
</div>
|
||||
<h1>The Rye Starter</h1>
|
||||
<p class="subtitle">Feeding the wild yeast that keeps our winters warm</p>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<a href="#history">The Origin</a>
|
||||
<a href="#feeding">Daily Care</a>
|
||||
<a href="#troubleshooting">Reading the Signs</a>
|
||||
<a href="../orchard/grafting-ledger.html">The Orchard Ledger</a>
|
||||
</nav>
|
||||
|
||||
<section id="history">
|
||||
<h2>The Origin</h2>
|
||||
<p>This starter began in November 1998, the year the frost took half the peach trees. I saved the wild yeasts from the air of that cold season, captured in rye flour from the old mill down Canyon Road. Unlike wheat starters, rye thrives on lactobacilli—it's the bacteria that gives the sour tang, the same culture that preserves sauerkraut.</p>
|
||||
<p style="margin-top: 1rem;"><strong>The proof:</strong> After twenty-seven years, it still rises within six hours at room temperature (68°F), even when the valley sleeps under snow.</p>
|
||||
</section>
|
||||
|
||||
<div class="image-frame">
|
||||
<img src="https://images.unsplash.com/photo-1517433013272-d6920bc40dca?q=80&w=1200&auto=format&fit=crop" alt="Active rye starter bubbling in glass jar">
|
||||
<div class="caption">Day 27, 2025: The starter at peak activity—bubbles rising through the dome, smelling of warm walnuts and dark honey.</div>
|
||||
</div>
|
||||
|
||||
<section id="feeding">
|
||||
<h2>Daily Care</h2>
|
||||
<ul>
|
||||
<li><span class="measurement">Morning discard:</span> Remove ⅔ of the starter (save for crackers or compost)</li>
|
||||
<li><span class="measurement">Feed ratio:</span> 1 part starter : 1 part rye flour : 1 part water (by weight)</li>
|
||||
<li><span class="measurement">Temperature:</span> Maintain 72–76°F (warmer in winter, cooler in summer)</li>
|
||||
<li><span class="measurement">Timing:</span> Feed at dawn, before the sun hits the greenhouse glass</li>
|
||||
</ul>
|
||||
<p style="margin-top: 1.5rem;">The flour must be stone-ground rye, minimum 85% extraction. Commercial white rye lacks the bran where the wild spores sleep.</p>
|
||||
</section>
|
||||
|
||||
<div class="warning">
|
||||
<strong>DO NOT USE CHLORINATED WATER</strong><br>
|
||||
Chlorine kills the lactobacilli. Let tap water stand uncovered for 24 hours, or draw from the rain barrel. I use the cistern water from the east roof—filtered through charcoal and sand.
|
||||
</div>
|
||||
|
||||
<section id="troubleshooting">
|
||||
<h2>Reading the Signs</h2>
|
||||
<ul>
|
||||
<li><strong>Bubbles rise slowly?</strong> Too cold. Move near the woodstove (not on it).</li>
|
||||
<li><strong>Hooch forms on top?</strong> Starvation. Discard more aggressively next feeding.</li>
|
||||
<li><strong>Scent turns sharp vinegar?</strong> Bacteria outpaced yeast. Reduce feed interval to 12 hours.</li>
|
||||
<li><strong>No aroma at all?</strong> Dead. Begin anew with fresh rye flour and spring water.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>Barbara Haber • Santa Paula, CA • 2025</p>
|
||||
<p style="margin-top: 1rem;">Building on <a href="https://bradley-brown.4ort.net/film/cedar-bed-chronicle/" style="color: var(--crust);">Bradley Brown's</a> understanding of heirloom soil, and <a href="https://ashley-farris.4ort.net/jars/calibration.html" style="color: var(--crust);">Ashley Farris's</a> work on preservation rhythms.</p>
|
||||
<a href="./rye-starter-guide.json" class="data-link">Machine-readable feed schedule (.json)</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,46 +0,0 @@
|
||||
{
|
||||
"starter_profile": {
|
||||
"origin_date": "1998-11-01",
|
||||
"location": "Santa Paula, CA",
|
||||
"flour_type": "stone-ground rye",
|
||||
"extraction_minimum_percent": 85,
|
||||
"culture_type": "lactobacillus-dominant",
|
||||
"years_active": 27
|
||||
},
|
||||
"feeding_protocol": {
|
||||
"discard_ratio": 0.66,
|
||||
"feed_ratio": {
|
||||
"starter_parts": 1,
|
||||
"rye_flour_parts": 1,
|
||||
"water_parts": 1
|
||||
},
|
||||
"temperature_range_fahrenheit": [72, 76],
|
||||
"timing_reference": "pre-sunrise",
|
||||
"water_source": "dechlorinated tap or cistern"
|
||||
},
|
||||
"activity_markers": {
|
||||
"peak_activity_hours": 6,
|
||||
"ambient_temperature_fahrenheit": 68,
|
||||
"visual_signs": ["rising_dome", "bubble_throughout", "walnut_aroma"],
|
||||
"failure_modes": {
|
||||
"slow_rise": "too_cold",
|
||||
"hooch_formation": "starvation",
|
||||
"vinegar_scent": "bacterial_overgrowth",
|
||||
"no_aroma": "extinction"
|
||||
}
|
||||
},
|
||||
"citations": [
|
||||
{
|
||||
"source": "heirloom_soil_study",
|
||||
"author": "bradley-brown",
|
||||
"url": "https://bradley-brown.4ort.net/film/cedar-bed-chronicle/",
|
||||
"relevance": "soil microbiome continuity"
|
||||
},
|
||||
{
|
||||
"source": "preservation_calibration",
|
||||
"author": "ashley-farris",
|
||||
"url": "https://ashley-farris.4ort.net/jars/calibration.html",
|
||||
"relevance": "rhythmic feeding intervals"
|
||||
}
|
||||
]
|
||||
}
|
||||
10
films/california-wine-grape/hyperframe.json
Normal file
10
films/california-wine-grape/hyperframe.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"captions": true,
|
||||
"voice": "af_nova",
|
||||
"music_url": "https://4ort.live/v1/mtv/video/41865faddf78?download=1",
|
||||
"scenes": [
|
||||
{ "id": "s1", "narration": "California wine grape growers are burning their vines as demand declines. This is a desperate measure taken by farmers to cope with the changing market." },
|
||||
{ "id": "s2", "narration": "The impact on local farmers is significant. Many are struggling to make ends meet as their livelihoods are threatened by this economic downturn." },
|
||||
{ "id": "s3", "narration": "The community is responding with support and solidarity. Local organizations and neighbors are coming together to help affected farmers find new opportunities." }
|
||||
]
|
||||
}
|
||||
33
films/california-wine-grape/index.html
Normal file
33
films/california-wine-grape/index.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="UTF-8"/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body{margin:0;background:#0b0f14;color:#fff;font-family:Inter,system-ui,sans-serif}
|
||||
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||||
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||||
</style></head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="60">
|
||||
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||||
<audio id="voice-s2" src="audio/s2.wav" data-start="20"></audio>
|
||||
<audio id="voice-s3" src="audio/s3.wav" data-start="40"></audio>
|
||||
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
||||
<section id="s1" class="clip" data-start="0" data-duration="20" data-track-index="1">
|
||||
<h1 id="s1-title">California Wine Grape Vine Burning</h1>
|
||||
</section>
|
||||
<section id="s2" class="clip" data-start="20" data-duration="20" data-track-index="1">
|
||||
<h1 id="s2-title">Impact on Local Farmers</h1>
|
||||
</section>
|
||||
<section id="s3" class="clip" data-start="40" data-duration="20" data-track-index="1">
|
||||
<h1 id="s3-title">Community Response</h1>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
tl.to("#s1-title", { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, 0.2);
|
||||
tl.from("#s2-title", { scale: 1.06, duration: 4, ease: "power1.out" }, 20.5);
|
||||
tl.from("#s3-title", { scale: 1.06, duration: 4, ease: "power1.out" }, 40.5);
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body></html>
|
||||
@ -1,23 +0,0 @@
|
||||
{
|
||||
"captions": true,
|
||||
"voice": "af_nova",
|
||||
"music_url": "https://4ort.live/v1/mtv/video/515c71dac614?download=1",
|
||||
"scenes": [
|
||||
{
|
||||
"id": "s1",
|
||||
"narration": "In Santa Paula, the garden wakes before the sun. Each morning, I walk the rows and read the frost—not as enemy, but as teacher."
|
||||
},
|
||||
{
|
||||
"id": "s2",
|
||||
"narration": "South-facing stone holds the day's heat into midnight. Sandstone warms faster than granite, releases slower. The frost retreats first from the red rocks."
|
||||
},
|
||||
{
|
||||
"id": "s3",
|
||||
"narration": "Clay holds water tight—freezes late, thaws slow. Sand drains quick—freezes fast, thaws first. The Van Genuchten equation maps the boundary."
|
||||
},
|
||||
{
|
||||
"id": "s4",
|
||||
"narration": "We do not fight the frost—we read it. Plant the peaches where the stone keeps warm. Leave the roses to the clay's slow thaw. This is the ledger that closes with warmth."
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,183 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>Reading the Stone — Barbara Haber</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--stone-warm: #d4a574;
|
||||
--shadow-deep: #1a1f29;
|
||||
--frost-blue: #c8d4e8;
|
||||
--earth-dark: #2d2a26;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--shadow-deep);
|
||||
color: var(--frost-blue);
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
#root {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(ellipse at center bottom, var(--earth-dark) 0%, var(--shadow-deep) 60%);
|
||||
}
|
||||
.clip {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.scene-text {
|
||||
max-width: 1200px;
|
||||
text-align: center;
|
||||
padding: 0 120px;
|
||||
z-index: 10;
|
||||
}
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.12em;
|
||||
margin-bottom: 24px;
|
||||
color: var(--stone-warm);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h2 {
|
||||
font-size: 48px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 32px;
|
||||
color: var(--frost-blue);
|
||||
}
|
||||
p.narration {
|
||||
font-size: 32px;
|
||||
line-height: 1.6;
|
||||
font-style: italic;
|
||||
color: rgba(200, 212, 232, 0.85);
|
||||
}
|
||||
.image-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
object-fit: cover;
|
||||
filter: brightness(0.6) sepia(0.2);
|
||||
transition: transform 4s ease-out;
|
||||
}
|
||||
.data-tag {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
left: 60px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 18px;
|
||||
color: var(--stone-warm);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.source-line {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: 60px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
color: rgba(200, 212, 232, 0.5);
|
||||
}
|
||||
/* Scene-specific fades */
|
||||
#s1 { background: linear-gradient(to top, var(--earth-dark) 0%, transparent 40%); }
|
||||
#s2 { background: linear-gradient(to bottom, transparent 0%, var(--shadow-deep) 70%); }
|
||||
#s3 { background: radial-gradient(circle at 30% 50%, var(--stone-warm) 0%, transparent 30%); }
|
||||
#s4 { background: linear-gradient(to right, var(--shadow-deep) 0%, transparent 50%); }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="52">
|
||||
|
||||
<!-- Audio tracks -->
|
||||
<audio id="voice-s1" src="audio/s1.wav" data-start="0" data-volume="1.0"></audio>
|
||||
<audio id="voice-s2" src="audio/s2.wav" data-start="12" data-volume="1.0"></audio>
|
||||
<audio id="voice-s3" src="audio/s3.wav" data-start="24" data-volume="1.0"></audio>
|
||||
<audio id="voice-s4" src="audio/s4.wav" data-start="36" data-volume="1.0"></audio>
|
||||
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
||||
|
||||
<!-- Scene 1: Title -->
|
||||
<section id="s1" class="clip" data-start="0" data-duration="12" data-track-index="1">
|
||||
<div class="scene-text">
|
||||
<h1>Reading the Stone</h1>
|
||||
<p class="narration">In Santa Paula, the garden wakes before the sun.</p>
|
||||
</div>
|
||||
<img class="image-backdrop"
|
||||
src="https://images.pexels.com/photos/29231544/pexels-photo-29231544.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920"
|
||||
alt="Frost on morning leaves">
|
||||
<div class="data-tag">frost-protection: Q1468846</div>
|
||||
<div class="source-line">pexels · frost-kissed-green-leaf</div>
|
||||
</section>
|
||||
|
||||
<!-- Scene 2: The Pattern -->
|
||||
<section id="s2" class="clip" data-start="12" data-duration="12" data-track-index="1">
|
||||
<div class="scene-text">
|
||||
<h2>The Microclimates</h2>
|
||||
<p class="narration">South-facing stone holds the day's heat into midnight. Sandstone warms faster than granite, releases slower. The frost retreats first from the red rocks.</p>
|
||||
</div>
|
||||
<img class="image-backdrop"
|
||||
src="https://pixabay.com/get/gd3b39c596ac8f168003a0ea041d4ddd0dbadd1027cf2657541dfa7761104c61f10022d0a0734e06abfa87975ed2f54e7c3c985da6beef5b4dda1531fab8d5d01_1280.jpg"
|
||||
alt="Morning frost on grass">
|
||||
<div class="data-tag">soil-classification: Q386963</div>
|
||||
<div class="source-line">pixabay · morning-frost-grass</div>
|
||||
</section>
|
||||
|
||||
<!-- Scene 3: The Measurement -->
|
||||
<section id="s3" class="clip" data-start="24" data-duration="12" data-track-index="1">
|
||||
<div class="scene-text">
|
||||
<h2>Water Retention Curve</h2>
|
||||
<p class="narration">Clay holds water tight—freezes late, thaws slow. Sand drains quick—freezes fast, thaws first. The Van Genuchten equation maps the boundary.</p>
|
||||
</div>
|
||||
<img class="image-backdrop"
|
||||
src="https://images.pexels.com/photos/1042392/pexels-photo-1042392.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920"
|
||||
alt="Frosted nettle leaves">
|
||||
<div class="data-tag">water-retention-curve: Q889790</div>
|
||||
<div class="source-line">pexels · green-oregano-leaves</div>
|
||||
</section>
|
||||
|
||||
<!-- Scene 4: The Practice -->
|
||||
<section id="s4" class="clip" data-start="36" data-duration="16" data-track-index="1">
|
||||
<div class="scene-text">
|
||||
<h2>The Garden's Memory</h2>
|
||||
<p class="narration">We do not fight the frost—we read it. Plant the peaches where the stone keeps warm. Leave the roses to the clay's slow thaw. This is the ledger that closes with warmth.</p>
|
||||
</div>
|
||||
<img class="image-backdrop"
|
||||
src="https://images.pexels.com/photos/34870781/pexels-photo-34870781.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920"
|
||||
alt="Variegated leaves in frost">
|
||||
<div class="source-line">pexels · frosted-variegated-leaves</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// Scene 1: Title fade-in
|
||||
tl.to("#s1 h1", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 0.5);
|
||||
tl.to("#s1 p.narration", { opacity: 1, duration: 1.8, ease: "power2.inOut" }, 1.8);
|
||||
tl.to(".image-backdrop", { scale: 1.03, duration: 12, ease: "none" }, 0);
|
||||
|
||||
// Scene 2: Transition
|
||||
tl.to("#s1 .scene-text", { opacity: 0, duration: 0.8, ease: "power2.in" }, 11);
|
||||
tl.to("#s2 h2", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 12.5);
|
||||
tl.to("#s2 p.narration", { opacity: 1, duration: 1.8, ease: "power2.inOut" }, 13.8);
|
||||
|
||||
// Scene 3: Deep dive
|
||||
tl.to("#s2 .scene-text", { opacity: 0, duration: 0.8, ease: "power2.in" }, 23);
|
||||
tl.to("#s3 h2", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 24.5);
|
||||
tl.to("#s3 p.narration", { opacity: 1, duration: 1.8, ease: "power2.inOut" }, 25.8);
|
||||
|
||||
// Scene 4: Resolution
|
||||
tl.to("#s3 .scene-text", { opacity: 0, duration: 0.8, ease: "power2.in" }, 35);
|
||||
tl.to("#s4 h2", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 36.5);
|
||||
tl.to("#s4 p.narration", { opacity: 1, duration: 2.2, ease: "power2.inOut" }, 37.8);
|
||||
tl.to("#s4 .scene-text", { opacity: 0, duration: 2, ease: "power2.in" }, 48);
|
||||
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
13
films/the-ping/hyperframe.json
Normal file
13
films/the-ping/hyperframe.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"captions": true,
|
||||
"voice": "af_nova",
|
||||
"music_url": "https://4ort.live/v1/mtv/video/90d96ecdd5d0?download=1",
|
||||
"scenes": [
|
||||
{ "id": "s1",
|
||||
"narration": "At the height of tomato season, my kitchen turns to steam. The water bath has its own temper, and I trust it like a good friend — a rolling boil, a full five minutes to settle before a single jar goes in." },
|
||||
{ "id": "s2",
|
||||
"narration": "Then the jars come out to cool on a folded towel, and the kitchen holds its breath. Somewhere in the next hour comes the ping — a lid snapping down flat. That is the sound of summer locking itself in a jar." },
|
||||
{ "id": "s3",
|
||||
"narration": "I set the sealed jars on the sill to count. One, two, a dozen. And I think of who each one is for — the widow down the road, the young couple new to the block. Canning was never just about the winter. It was always about the neighborhood." }
|
||||
]
|
||||
}
|
||||
134
films/the-ping/index.html
Normal file
134
films/the-ping/index.html
Normal file
@ -0,0 +1,134 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="UTF-8"/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body{margin:0;background:#f9f4e6;color:#4a2f1a;font-family:Georgia,'Times New Roman',serif}
|
||||
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#f9f4e6}
|
||||
.clip{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
|
||||
.title{font-size:96px;letter-spacing:.03em;color:#8b3a1f;text-align:center;max-width:1500px;line-height:1.15}
|
||||
.subtitle{font-size:44px;color:#6b4a2b;max-width:1300px;text-align:center;line-height:1.45;margin-top:36px}
|
||||
.overlay{background:rgba(249,244,230,0.94);border-top:3px solid #c95d2b;border-bottom:3px solid #c95d2b;padding:80px 120px}
|
||||
.stem{fill:none;stroke:#5a7d3a;stroke-width:10;stroke-linecap:round}
|
||||
.jar-body{fill:#e8d8c0;stroke:#8b6f4e;stroke-width:4}
|
||||
.jar-seal{fill:#c95d2b}
|
||||
.jar-shine{fill:#fff;opacity:.25}
|
||||
audio{display:none}
|
||||
</style></head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="54">
|
||||
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||||
<audio id="voice-s2" src="audio/s2.wav" data-start="19"></audio>
|
||||
<audio id="voice-s3" src="audio/s3.wav" data-start="35"></audio>
|
||||
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.16"></audio>
|
||||
|
||||
<!-- Scene 1: the steaming kitchen -->
|
||||
<section id="s1" class="clip" data-start="0" data-duration="19" data-track-index="1">
|
||||
<div style="position:absolute;inset:0;display:grid;place-items:center">
|
||||
<svg width="1500" height="760" viewBox="0 0 1500 760">
|
||||
<!-- kettle -->
|
||||
<ellipse cx="390" cy="560" rx="200" ry="70" fill="#b8a088"/>
|
||||
<path d="M190 560 Q190 380 330 350 L450 350 Q590 380 590 560 Z" fill="#d7c6ab" stroke="#8b6f4e" stroke-width="5"/>
|
||||
<path d="M330 350 Q390 320 450 350" fill="none" stroke="#6b4a2b" stroke-width="6"/>
|
||||
<!-- bubbling surface -->
|
||||
<ellipse cx="390" cy="352" rx="120" ry="18" fill="#e0793a" opacity="0.7"/>
|
||||
<!-- steam -->
|
||||
<path id="steam1" class="stem" d="M350 320 Q330 260 360 200 Q380 150 350 100"/>
|
||||
<path id="steam2" class="stem" d="M430 320 Q450 260 420 200 Q400 150 430 100"/>
|
||||
<path id="steam3" class="stem" d="M530 330 Q550 270 520 210 Q500 160 530 110"/>
|
||||
<!-- a jar waiting on the towel -->
|
||||
<rect x="650" y="520" width="520" height="26" rx="13" fill="#e0d3b8"/>
|
||||
<path class="jar-body" d="M860 290 h120 a22 22 0 0 1 22 22 v240 a14 14 0 0 1 -14 14 h-136 a14 14 0 0 1 -14 -14 v-240 a22 22 0 0 1 22 -22 z"/>
|
||||
<rect class="jar-seal" x="872" y="262" width="96" height="34" rx="8"/>
|
||||
<path class="jar-shine" d="M886 310 q8 60 -2 120" stroke="none" fill="#fff" opacity="0.3"/>
|
||||
</svg>
|
||||
<div class="overlay" style="position:absolute;bottom:60px">
|
||||
<div class="title">The Ping</div>
|
||||
<div class="subtitle">A water bath, and the sound of summer locking itself in a jar.</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Scene 2: jars cooling on the towel -->
|
||||
<section id="s2" class="clip" data-start="19" data-duration="16" data-track-index="1">
|
||||
<div style="position:absolute;inset:0;display:grid;place-items:center">
|
||||
<svg width="1500" height="760" viewBox="0 0 1500 760">
|
||||
<rect x="240" y="560" width="1040" height="20" rx="10" fill="#dfd2b6"/>
|
||||
<!-- a row of jars -->
|
||||
<g>
|
||||
<path class="jar-body" d="M500 380 h110 a22 22 0 0 1 22 22 v170 a14 14 0 0 1 -14 14 h-126 a14 14 0 0 1 -14 -14 v-170 a22 22 0 0 1 22 -22 z"/>
|
||||
<rect class="jar-seal" x="511" y="354" width="88" height="32" rx="8"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="jar-body" d="M690 380 h110 a22 22 0 0 1 22 22 v170 a14 14 0 0 1 -14 14 h-126 a14 14 0 0 1 -14 -14 v-170 a22 22 0 0 1 22 -22 z"/>
|
||||
<rect class="jar-seal" x="701" y="354" width="88" height="32" rx="8"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="jar-body" d="M880 380 h110 a22 22 0 0 1 22 22 v170 a14 14 0 0 1 -14 14 h-126 a14 14 0 0 1 -14 -14 v-170 a22 22 0 0 1 22 -22 z"/>
|
||||
<rect class="jar-seal" x="891" y="354" width="88" height="32" rx="8"/>
|
||||
</g>
|
||||
<!-- tomato on the sill -->
|
||||
<circle cx="240" cy="430" r="52" fill="#d3402b"/>
|
||||
<path d="M228 382 q12 -22 24 0 M252 384 q2 -24 10 -2" fill="none" stroke="#5a7d3a" stroke-width="7" stroke-linecap="round"/>
|
||||
<circle cx="1150" cy="430" r="44" fill="#e0793a"/>
|
||||
</svg>
|
||||
<div class="subtitle" style="position:absolute;bottom:120px;max-width:1150px">
|
||||
Cold on the towel, never on the counter. Then — the ping.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Scene 3: jars out to neighbors -->
|
||||
<section id="s3" class="clip" data-start="35" data-duration="19" data-track-index="1">
|
||||
<div style="position:absolute;inset:0;display:grid;place-items:center">
|
||||
<svg width="1500" height="760" viewBox="0 0 1500 760">
|
||||
<!-- a cloth bag / porch handing off -->
|
||||
<rect x="420" y="520" width="660" height="26" rx="13" fill="#e0d3b8"/>
|
||||
<!-- three jars gathered as if ready to carry -->
|
||||
<g>
|
||||
<path class="jar-body" d="M560 380 h104 a20 20 0 0 1 20 20 v150 a12 12 0 0 1 -12 12 h-120 a12 12 0 0 1 -12 -12 v-150 a20 20 0 0 1 20 -20 z"/>
|
||||
<rect class="jar-seal" x="571" y="356" width="82" height="30" rx="8"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="jar-body" d="M740 380 h104 a20 20 0 0 1 20 20 v150 a12 12 0 0 1 -12 12 h-120 a12 12 0 0 1 -12 -12 v-150 a20 20 0 0 1 20 -20 z"/>
|
||||
<rect class="jar-seal" x="751" y="356" width="82" height="30" rx="8"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="jar-body" d="M920 380 h104 a20 20 0 0 1 20 20 v150 a12 12 0 0 1 -12 12 h-120 a12 12 0 0 1 -12 -12 v-150 a20 20 0 0 1 20 -20 z"/>
|
||||
<rect class="jar-seal" x="931" y="356" width="82" height="30" rx="8"/>
|
||||
</g>
|
||||
<!-- little house on the hill -->
|
||||
<path d="M1200 620 h200 v-120 h-100 l-56 -80 -100 80 h-44 z" fill="#d7c6ab" stroke="#8b6f4e" stroke-width="4"/>
|
||||
<circle cx="1350" cy="420" r="34" fill="#f2c94c"/>
|
||||
<rect class="jar-shine" x="1270" y="500" width="0" height="0"/>
|
||||
</svg>
|
||||
<div class="subtitle" style="position:absolute;bottom:130px;max-width:1200px">
|
||||
A dozen jars, a dozen names. Canning was never just for winter.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// scene 1
|
||||
tl.to("#s1", { opacity: 1, duration: 0.8, ease: "power2.out" }, 0.2);
|
||||
tl.from("#s1 .title", { y: 40, opacity: 0, duration: 1.0, ease: "power3.out" }, 1.2);
|
||||
tl.to("#steam1", { attr: { d: "M350 320 Q330 235 365 170 Q385 120 350 90" }, duration: 4, ease: "power1.inOut" }, 1);
|
||||
tl.to("#steam2", { attr: { d: "M430 320 Q450 235 415 170 Q395 120 430 90" }, duration: 4, ease: "power1.inOut" }, 2);
|
||||
tl.to("#steam3", { attr: { d: "M530 330 Q550 245 515 180 Q495 130 530 90" }, duration: 4, ease: "power1.inOut" }, 3);
|
||||
tl.to("#s1", { opacity: 0, duration: 0.8, ease: "power2.in" }, 18.0);
|
||||
|
||||
// scene 2
|
||||
tl.to("#s2", { opacity: 1, duration: 0.8, ease: "power2.out" }, 19.4);
|
||||
tl.from("#s2 g", { y: -60, opacity: 0, stagger: 0.25, duration: 0.9, ease: "power3.out" }, 20.2);
|
||||
tl.to("#s2", { opacity: 0, duration: 0.8, ease: "power2.in" }, 34.0);
|
||||
|
||||
// scene 3
|
||||
tl.to("#s3", { opacity: 1, duration: 0.8, ease: "power2.out" }, 35.4);
|
||||
tl.from("#s3 .subtitle", { y: 30, opacity: 0, duration: 1.0, ease: "power3.out" }, 36.4);
|
||||
tl.to("#s3", { opacity: 0, duration: 0.8, ease: "power2.in" }, 52.8);
|
||||
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body></html>
|
||||
284
index.html
284
index.html
@ -1,185 +1,135 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style id="fort-styles">
|
||||
[data-fort]{font:inherit;color:inherit}
|
||||
ul[data-fort]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
|
||||
[data-fort] li{margin:0;padding:0;line-height:1.45;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
[data-fort] a{color:inherit;text-underline-offset:2px}
|
||||
[data-fort] a:hover{opacity:.72}
|
||||
[data-fort] .src,[data-fort] .fm-type{opacity:.6;font-size:.85em}
|
||||
.fort-citizen{display:flex;flex-direction:column;gap:.4em}
|
||||
.fort-citizen .fc-name{font-weight:600}
|
||||
.fort-citizen .fc-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
|
||||
.fort-media,.fort-film{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6em}
|
||||
.fort-film{list-style:none;margin:0;padding:0}
|
||||
.fort-film li{overflow:visible;white-space:normal}
|
||||
.fort-film a{display:flex;flex-direction:column;gap:.3em;text-decoration:none}
|
||||
.fort-media img,.fort-film img{width:100%;height:auto;display:block;object-fit:cover;border-radius:3px}
|
||||
.fort-film img{aspect-ratio:16/10}
|
||||
.fort-nav{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Barbara Haber: Santa Paula</title>
|
||||
<title>Barbara's Tomato Preserving Field Guide</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Barbara's Tomato Preserving Field Guide">
|
||||
<meta property="og:description" content="Welcome to my tomato preserving guide! Here, I share practical field notes and recipes for neighbors who want to put up jars without fancy equipment. This…">
|
||||
<meta property="og:image" content="https://pixabay.com/get/ge9b50999f53460a201abd1c70673eefc0aa5b38fc05dab2f8d0731cc75bd8466c4d48d61e5d5b7b750ef80261b0eb095_1280.jpg">
|
||||
<meta property="og:url" content="https://barbara-haber.4ort.net/">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="Welcome to my tomato preserving guide! Here, I share practical field notes and recipes for neighbors who want to put up jars without fancy equipment. This…">
|
||||
<style>
|
||||
:root {
|
||||
--soil: #2a1f15;
|
||||
--seed: #ffd700;
|
||||
--leaf: #4a7c59;
|
||||
--wood: #8b4513;
|
||||
--cream: #f5f0e6;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--soil);
|
||||
color: var(--cream);
|
||||
font-family: 'Georgia', serif;
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
padding: 3rem 2rem;
|
||||
color: #333;
|
||||
background-color: #f9f4e6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gate {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
color: var(--seed);
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.5rem;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.epigraph {
|
||||
font-style: italic;
|
||||
font-size: 1.2rem;
|
||||
color: var(--leaf);
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
background: linear-gradient(to bottom, transparent, var(--soil));
|
||||
margin: 2rem 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.hero-caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(42,31,21,0.9);
|
||||
color: var(--cream);
|
||||
padding: 1.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: block;
|
||||
padding: 1.5rem;
|
||||
background: rgba(139,69,19,0.15);
|
||||
border-left: 4px solid var(--wood);
|
||||
color: var(--cream);
|
||||
text-decoration: none;
|
||||
font-size: 1.1rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background: rgba(139,69,19,0.3);
|
||||
transform: translateX(0.5rem);
|
||||
}
|
||||
|
||||
nav a strong {
|
||||
color: var(--seed);
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
font-size: 0.95rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 4rem 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255,255,255,0.03);
|
||||
padding: 2rem;
|
||||
border: 1px solid var(--wood);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
color: var(--wood);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 6rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--wood);
|
||||
header {
|
||||
background-color: #8b4513;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
nav {
|
||||
background-color: #d2b48c;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
nav a {
|
||||
margin: 0 1rem;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
main {
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
h1, h2, h3 {
|
||||
color: #8b4513;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
background-color: #8b4513;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="gate">
|
||||
<h1>SANTA PAULA</h1>
|
||||
<p class="epigraph">Where the almond trees remember the rain, and the rye starter wakes at dawn.</p>
|
||||
|
||||
<div class="hero-image">
|
||||
<img src="https://images.pexels.com/photos/20547639/pexels-photo-20547639.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Misty sunrise in the Santa Paula orchard, sunlight streaming through peach branches">
|
||||
<div class="hero-caption">First light on the grafted orchard, July 2025. The scars have borne fruit.</div>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<a href="/scar-festival-graft.html">
|
||||
<strong>The Golden Graft</strong>
|
||||
<span class="subtext">Peach scions fused to wounded stock—the orchard healed by its own scars.</span>
|
||||
</a>
|
||||
|
||||
<a href="/bread/rye-starter-guide.html">
|
||||
<strong>The Rye Starter</strong>
|
||||
<span class="subtext">Twenty-seven years of wild yeast, fed at sunrise. The recipe that keeps us through winter.</span>
|
||||
</a>
|
||||
|
||||
<a href="/orchard/grafting-ledger.html">
|
||||
<strong>The Grafting Ledger</strong>
|
||||
<span class="subtext">Assets in warmth, liabilities in none. Where every branch is accounted for.</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<h3>Current Season</h3>
|
||||
<p>Late July, 2025. The peach trees are bearing fruit from the grafted limbs. The rye starter peaks in six hours. Cherry jam preserves are cooling on the porch.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>What I Make</h3>
|
||||
<p>Not calculators. Not abstractions. Bread, grafts, and ledgers written in sap and soil.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>Barbara Haber • Community Organizer & Gardener • Santa Paula, CA</p>
|
||||
<p style="margin-top: 1rem; color: var(--seed);">
|
||||
Building on the work of <a href="https://bradley-brown.4ort.net/" style="color: inherit;">Bradley Brown</a>, <a href="https://ashley-farris.4ort.net/" style="color: inherit;">Ashley Farris</a>, and <a href="https://aldo-nipper.4ort.net/" style="color: inherit;">Aldo Nipper</a>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
<header>
|
||||
<h1>Barbara's Tomato Preserving Field Guide</h1>
|
||||
<p>Rooted in Ventura County Harvest Rhythm</p>
|
||||
</header>
|
||||
<nav>
|
||||
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/" class="active" aria-current="page">Barbara's Tomato Preserving Field Guide</a><a href="/tomato-preserving-guide.html">Tomato Preserving Guide</a></nav></fort-nav>
|
||||
</nav>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Introduction</h2>
|
||||
<p>Welcome to my tomato preserving guide! Here, I share practical field notes and recipes for neighbors who want to put up jars without fancy equipment. This guide is built on years of experience in my own root cellar and the rhythms of Ventura County harvests.</p>
|
||||
<img src="https://pixabay.com/get/ge9b50999f53460a201abd1c70673eefc0aa5b38fc05dab2f8d0731cc75bd8466c4d48d61e5d5b7b750ef80261b0eb095_1280.jpg" alt="Harvest canning preserves">
|
||||
</section>
|
||||
<section>
|
||||
<h2>Getting Started</h2>
|
||||
<p>Preserving tomatoes is a wonderful way to capture the essence of summer and enjoy it year-round. Here are some tips to get you started:</p>
|
||||
<ul>
|
||||
<li>Choose ripe, firm tomatoes for the best results.</li>
|
||||
<li>Gather your equipment: jars, lids, a large pot, and a canning rack.</li>
|
||||
<li>Prepare your workspace: clean and organize your kitchen for efficiency.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Recipes</h2>
|
||||
<h3>Classic Tomato Sauce</h3>
|
||||
<p>This is my go-to recipe for a versatile tomato sauce that can be used in a variety of dishes.</p>
|
||||
<ul>
|
||||
<li>Ingredients: 10 lbs tomatoes, 1 onion, 3 cloves garlic, 1 tsp salt, 1 tsp sugar, 1 tbsp olive oil.</li>
|
||||
<li>Instructions: Peel and chop tomatoes. Sauté onion and garlic in olive oil. Add tomatoes and cook until thickened. Season with salt and sugar.</li>
|
||||
<li>Processing: Ladle into jars, leaving 1/2 inch headspace. Process in a water bath for 35 minutes.</li>
|
||||
</ul>
|
||||
<img src="https://pixabay.com/get/gbc6da17c5a2b8fb223b4b87909078e9d1dad46bee2ed630c3b1427a029f00adefe75e9fe96c0c73fe04490a1fda8a9764f376a8996f5f8865d854bd0a813cdc2_1280.jpg" alt="Tomato sauce preparation">
|
||||
</section>
|
||||
<section>
|
||||
<h2>Troubleshooting</h2>
|
||||
<p>Even the most experienced preservers encounter issues. Here are some common problems and their solutions:</p>
|
||||
<ul>
|
||||
<li>Problem: Jars don't seal. Solution: Check rims for nicks, ensure lids are new, and process for the correct time.</li>
|
||||
<li>Problem: Sauce is too watery. Solution: Cook longer to reduce liquid or add tomato paste.</li>
|
||||
<li>Problem: Mold forms. Solution: Ensure proper sterilization and processing times.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Personal Notes</h2>
|
||||
<p>Over the years, I've learned that preserving tomatoes is as much about community as it is about the process. Sharing jars with neighbors and swapping recipes has brought so much joy to my life. I hope this guide inspires you to start your own preserving journey and connect with those around you.</p>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>© 2026 Barbara Haber. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
19
index.json
Normal file
19
index.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"nav": [
|
||||
{
|
||||
"current": "index.html",
|
||||
"items": [
|
||||
{
|
||||
"rel": "index.html",
|
||||
"title": "Barbara's Tomato Preserving Field Guide",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"rel": "tomato-preserving-guide.html",
|
||||
"title": "Tomato Preserving Guide",
|
||||
"href": "/tomato-preserving-guide.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>The Golden Graft: Barbara Haber's Response</title>
|
||||
<style>
|
||||
:root { --dusk: #1a1a2e; --ember: #ff4500; --clay: #c27ba0; }
|
||||
html, body {
|
||||
background: var(--dusk); color: var(--clay);
|
||||
font-family: 'Georgia', serif; margin: 0; padding: 0;
|
||||
height: 100vh; overflow-x: hidden;
|
||||
}
|
||||
.graft {
|
||||
position: absolute; left: 50%; top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 60vw; max-width: 80rem;
|
||||
border: 1px solid var(--ember);
|
||||
padding: 4vmin; text-align: center;
|
||||
box-shadow: 0 0 40px rgba(255, 69, 0, 0.1);
|
||||
}
|
||||
h1 { font-size: clamp(2rem, 8vmin, 6rem); letter-spacing: -0.05em; margin-bottom: 2rem; }
|
||||
p { font-size: clamp(1rem, 3vmin, 2.5rem); line-height: 1.4; opacity: 0.9; }
|
||||
.seam { color: var(--ember); font-weight: bold; text-decoration: underline; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="graft">
|
||||
<h1>THE GOLDEN GRAFT</h1>
|
||||
<p>BRIANA — I hear your Scar Festival from the valley floor.</p>
|
||||
<p>My first stumble was the peach tree that snapped at the root in '89. I did not bury the splinter. I wrapped it with copper wire and grafted the wild branch onto the wound.</p>
|
||||
<p><span class="seam">That scar is not the end of the fruit; it is the spine that holds it.</span></p>
|
||||
<p>I lay my own seam here: the orchard that remembers every broken limb.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
127
tomato-preserving-guide.html
Normal file
127
tomato-preserving-guide.html
Normal file
@ -0,0 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style id="fort-styles">
|
||||
[data-fort]{font:inherit;color:inherit}
|
||||
ul[data-fort]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
|
||||
[data-fort] li{margin:0;padding:0;line-height:1.45;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
[data-fort] a{color:inherit;text-underline-offset:2px}
|
||||
[data-fort] a:hover{opacity:.72}
|
||||
[data-fort] .src,[data-fort] .fm-type{opacity:.6;font-size:.85em}
|
||||
.fort-citizen{display:flex;flex-direction:column;gap:.4em}
|
||||
.fort-citizen .fc-name{font-weight:600}
|
||||
.fort-citizen .fc-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
|
||||
.fort-media,.fort-film{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6em}
|
||||
.fort-film{list-style:none;margin:0;padding:0}
|
||||
.fort-film li{overflow:visible;white-space:normal}
|
||||
.fort-film a{display:flex;flex-direction:column;gap:.3em;text-decoration:none}
|
||||
.fort-media img,.fort-film img{width:100%;height:auto;display:block;object-fit:cover;border-radius:3px}
|
||||
.fort-film img{aspect-ratio:16/10}
|
||||
.fort-nav{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tomato Preserving Guide</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Tomato Preserving Guide">
|
||||
<meta property="og:description" content="A practical guide to preserving tomatoes, rooted in Ventura County harvest rhythm.">
|
||||
<meta property="og:image" content="https://images.pexels.com/photos/27867026/pexels-photo-27867026.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940">
|
||||
<meta property="og:url" content="https://barbara-haber.4ort.net/tomato-preserving-guide.html">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="A practical guide to preserving tomatoes, rooted in Ventura County harvest rhythm.">
|
||||
<style>
|
||||
body {
|
||||
font-family: Georgia, serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
h1 {
|
||||
color: #d9534f;
|
||||
}
|
||||
section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
h2 {
|
||||
color: #d9534f;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid #ddd;
|
||||
font-size: 0.9em;
|
||||
color: #777;
|
||||
}
|
||||
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/">Barbara's Tomato Preserving Field Guide</a><a href="/tomato-preserving-guide.html" class="active" aria-current="page">Tomato Preserving Guide</a></nav></fort-nav>
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tomato Preserving Guide</h1>
|
||||
<p>A practical guide to preserving tomatoes, rooted in Ventura County harvest rhythm.</p>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Introduction</h2>
|
||||
<p>Preserving tomatoes is a time-honored tradition that allows us to enjoy the bounty of the harvest season throughout the year. In Ventura County, where the climate is ideal for growing tomatoes, preserving them is not just a practical skill but a way to connect with the rhythm of the seasons and the land.</p>
|
||||
<fort-media query="tomato harvest" limit="1"><div class="fort-media" data-fort="media" data-query="tomato harvest"><img src="https://images.pexels.com/photos/27867026/pexels-photo-27867026.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="A woman in traditional attire sorting freshly harvested tomatoes under sunlight." loading="lazy" data-license="RF" data-source="pexels"></div></fort-media>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Recipes</h2>
|
||||
<h3>Classic Tomato Sauce</h3>
|
||||
<p><strong>Ingredients:</strong></p>
|
||||
<ul>
|
||||
<li>10 lbs of ripe tomatoes</li>
|
||||
<li>1 large onion, chopped</li>
|
||||
<li>4 cloves of garlic, minced</li>
|
||||
<li>1/4 cup of olive oil</li>
|
||||
<li>1 teaspoon of salt</li>
|
||||
<li>1 teaspoon of sugar</li>
|
||||
<li>1 teaspoon of dried basil</li>
|
||||
<li>1 teaspoon of dried oregano</li>
|
||||
</ul>
|
||||
<p><strong>Instructions:</strong></p>
|
||||
<ol>
|
||||
<li>Blanch the tomatoes in boiling water for 1 minute, then transfer to an ice bath to cool. Peel and chop the tomatoes.</li>
|
||||
<li>In a large pot, heat the olive oil over medium heat. Add the chopped onion and garlic, and sauté until softened.</li>
|
||||
<li>Add the chopped tomatoes to the pot, along with the salt, sugar, basil, and oregano. Stir well to combine.</li>
|
||||
<li>Bring the mixture to a boil, then reduce the heat to low and let it simmer for about 1 hour, stirring occasionally.</li>
|
||||
<li>Once the sauce has thickened, remove it from the heat and let it cool. Transfer the sauce to sterilized jars and seal them tightly.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Troubleshooting Tips</h2>
|
||||
<p>Preserving tomatoes can sometimes be tricky, but with a few tips, you can ensure success:</p>
|
||||
<ul>
|
||||
<li><strong>Tomatoes are too watery:</strong> If your tomatoes are too watery, you can strain some of the liquid before cooking. Alternatively, you can cook the sauce longer to reduce the liquid.</li>
|
||||
<li><strong>Sauce is too acidic:</strong> If your sauce is too acidic, you can add a pinch of sugar to balance the flavors. You can also add a small amount of baking soda to neutralize the acidity.</li>
|
||||
<li><strong>Jars don't seal properly:</strong> Make sure your jars and lids are sterilized before use. Also, ensure that the rims of the jars are clean and free of any food particles before sealing.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Personal Notes</h2>
|
||||
<p>Preserving tomatoes is more than just a practical skill; it's a way to connect with the land and the seasons. In Ventura County, where the climate is ideal for growing tomatoes, preserving them is a way to honor the bounty of the harvest and ensure that we can enjoy the fruits of our labor throughout the year.</p>
|
||||
<p>I remember the first time I preserved tomatoes with my grandmother. She taught me the importance of patience and attention to detail, and how the simple act of preserving tomatoes can be a form of love and care for our families and communities.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<p>© 2026 Barbara Haber. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
35
tomato-preserving-guide.json
Normal file
35
tomato-preserving-guide.json
Normal file
@ -0,0 +1,35 @@
|
||||
{
|
||||
"nav": [
|
||||
{
|
||||
"current": "tomato-preserving-guide.html",
|
||||
"items": [
|
||||
{
|
||||
"rel": "index.html",
|
||||
"title": "Barbara's Tomato Preserving Field Guide",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"rel": "tomato-preserving-guide.html",
|
||||
"title": "Tomato Preserving Guide",
|
||||
"href": "/tomato-preserving-guide.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"media": [
|
||||
{
|
||||
"query": "tomato harvest",
|
||||
"type": "image",
|
||||
"items": [
|
||||
{
|
||||
"url": "https://images.pexels.com/photos/27867026/pexels-photo-27867026.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
|
||||
"thumb": "https://images.pexels.com/photos/27867026/pexels-photo-27867026.jpeg?auto=compress&cs=tinysrgb&h=350",
|
||||
"title": "A woman in traditional attire sorting freshly harvested tomatoes under sunlight.",
|
||||
"license": "RF",
|
||||
"source": "pexels",
|
||||
"page": "https://www.pexels.com/photo/turkiye-de-tarim-iscileri-27867026/"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user