Internal reference / not linked from navigation
fart — Living Styleguide
Every block below is the real partial, shortcode, or page content this
site renders in production, pointed at real exhibits. Change
assets/css/custom.css, rebuild, and reload this one page to
check the whole component set at once.
01
Colour tokens
:root, html.dark — assets/css/custom.css
The site forces html.dark on every page (defaultTheme = "dark"
in hugo.toml; no page sets theme: light), so these are the
values actually in effect. Each swatch reads its own CSS variable, so it
tracks the stylesheet live.
Defined in the theme's _colors.scss but not reachable on this
site (no light-mode toggle exists): --surface-1-light #fff,
--surface-2-light #e5e5e5, --text-1-light #0a0a0a,
--text-2-light #737373, --border-light #bbb.
02
Type scale
--font-display, --v-sans, hgroup h1/p, .prose, .prose-identifier
Display stack: --font-display: "Cabroneria", "Helvetica Neue", Arial, sans-serif
(self-hosted fonts/cabroneria.woff2, variable weight 100–900).
Body copy in .prose.article uses "Helvetica" directly, not the
variable. The .vignelli article variant swaps to
--v-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif.
⚠ @font-face "Cabroneria Text" is declared at the top of
custom.css but no rule anywhere references it, and its source file
(fonts/cabroneria-text-regular.woff2) isn't present in
fonts/. Declared, unused, and missing — worth a look.
hgroup h1
hgroup p — clamp(4.5rem, 8vw, 11rem) / clamp(1.6rem, 2.4vw, 2.5rem)
.PROSE-IDENTIFIER / 0.75REM, 700, TRACKING 0.15EM
.prose — clamp(1.2rem, 6vw, 3.5rem), weight 700, line-height 0.94
.card h2 — 1.5em, 900, capitalize
03
Logotype & lockup
.logo-link, .site-wordmark, .site-logo-tagline, .site-footer-logo-link
Two real scales exist in production: the topbar lockup
(--logo-height: clamp(2.5rem, 4vw, 3rem), so 40px–48px at a
16px root) and the footer lockup
(--footer-wordmark-size: clamp(3.5rem, 9vw, 8rem), 56px–128px).
Both are the same aligned, baseline-set lockup at different scale — there
is no stacked variant in the codebase, so none is shown here.
Clear space between wordmark and tagline is proportional, not fixed:
gap: calc(var(--wordmark-size) * 0.12) in the topbar,
calc(var(--footer-wordmark-size) * 0.1) in the footer.
04
Navigation
.site-topbar, #menu — layouts/partials/header.html + menu.html
This is the real header.html partial, framed statically
(position: static instead of fixed so it doesn't
cover the page). The genuine fixed copy is doing its normal job at the
very top of this browser window right now — scroll to see
.is-compact / .is-hidden happen live.
Scrolled state — .site-topbar.is-compact
05
Listing / index — album cards
section.galleries, .card — layouts/partials/album-card.html
This is what home.html and list.html loop into:
{{ range where .Pages "Params.private" "ne" true }}
→ album-card.html per page, wrapped in
section.galleries. Real cards for three real exhibits below.
Night City
6 photos
un occupied
9 photos
Under Ground
6 photos
section.featured / .featured-card
(partial "featured.html") and nav.categories
(partial "categories.html") both run on the home page but
currently render nothing: no page sets featured: true, and
taxonomies are disabled in hugo.toml (disableKinds = ["taxonomy"]).
Not demonstrated here since there's no real data to show — this is a
documentation note, not a rendered block.
06
Detail page — exhibit heading
hgroup, .exhibit-heading, .title-nowrap, .title-bonsai — layouts/partials/title.html
Default — Night City
Night City
New York City after dark
title_nowrap + hide_identifier — 9112001
9112001
Washington, D.C., on September 11, 2001. Twenty-five years later.
title_class: title-bonsai — Cultivo del Bonsai
Cultivo del Bonsai en Puerto Rico
Una guía de cultivo de bonsai tropical en Puerto Rico. Estilos, herramientas, alambrado, tiestos y técnicas de formación, con las ilustraciones originales del libro.
07
Detail page — gallery grid
.gallery-grid, .gallery-item:nth-child — layouts/partials/gallery.html (project override)
Real thumbnails from the live Night City exhibit, run through the same curatorial full/pair/pair/full rhythm every gallery page uses. Reorder or add images on that page and this section changes with it.
08
Detail page — plate gallery
.prose.wide.plate-gallery, .plate, .plate-photo, .plate-text — shortcodes/plate.html
The real {{< plate >}} shortcode output from 9112001,
scrollable so it doesn't dominate the page. .plate-photo
scales in and .plate-text fades in via the real
reveal.js IntersectionObserver as each one crosses into view
— scroll the frame to see it fire.
Three women stopped at the railing by the Tidal Basin, looking toward the Jefferson Memorial. Smoke was already climbing past it.
Everyone on the path stopped walking at the same moment. Cameras came out instead.
The crowd along the water kept growing. No one there knew more than the smoke was telling them.
Phones were already useless in most of the city. The ones that still worked got passed hand to hand.
Near the Capitol, a veterans’ convention kept moving through its own schedule, half a mile from the smoke.
A few blocks off, a street of rowhouses looked like any other September morning.
The bank’s sign did the date in light bulbs, the same way it would any other day.
Capitol Hill emptied onto the sidewalks. People stood in loose circles, waiting to be told something.
Then everyone started walking, all in the same direction, away from the Capitol.
Congressional staff, tourists, a kid with a backpack — the crowd didn’t sort itself by who belonged there.
A sign warned drivers the lane was ending. Nobody was driving.
One officer held the middle of New Jersey Avenue by himself, waving through what little traffic was left.
The flag over the building behind them hadn’t come down to half-staff yet. That would happen later.
More police arrived than I had ever seen in one place, still working out where to stand.
Someone kept their morning run going, straight through the middle of it.
Outside one more federal building, people were out on the corner, just going about their morning.
A sightseeing bus was still running its route. Two men in suits jogged across the street in front of it anyway.
A few minutes later, the same corner. More people through it. The bus already gone.
A breaking news email from CNN came in minutes after the first plane hit. I knew in my gut what it was before anyone said the word. I called a friend in New York, and we were still on the phone when the second plane hit. That’s when I got on my bike.
No one should forget a day like that, and someone had to go out and take the pictures. That’s how I felt riding down to the water, camera in hand, while the sky over the Potomac started doing something it shouldn’t.
I lived in Capitol Hill then, close enough that a helicopter out of the Marine Barracks came in low over my house, ordnance visible underneath it. Then the streets emptied onto the sidewalks. Congressional staff, tourists, a veterans’ convention that kept moving through its own schedule — the crowd didn’t sort itself by who belonged there.
09
Detail page — related albums
hgroup, section.galleries — layouts/partials/related.html
Called here exactly as single.html calls it, against Night
City. It renders nothing below: Hugo's default Related
scoring needs shared keywords/tags/categories
to match on, hugo.toml has no [related] config, and no
content page sets any of those fields — so this block is currently dead
on every single page of the site, not just here. Give at least two
exhibits shared keywords and real cards will appear, both here and in
production.
10
Prose — legal / placeholder page
section.prose — themes/hugo-theme-gallery/layouts/_default/prose.html
Real output of the layout: prose template (used by About,
Privacy, Terms, Contact, @cabroneria) against the real About page.
About
Placeholder about copy. Replace with the real fun description of what this exhibit is and why it exists.
10a
Prose — article, base flavor
.prose.article, .mineral, .symptom — Microblend
Real Microblend content: {{< mineral >}} and
{{< symptom >}} shortcode output, plus the
lede_second flag that moves the styled lede to the second
paragraph instead of the first.
Microblend
Qué es Microblend, qué contiene, y cómo se usa para corregir deficiencias de elementos menores en las plantas.
Microblend es un término comercial genérico usado en la horticultura para describir un fertilizante compuesto por una mezcla concentrada de elementos menores, o micronutrientes.
A diferencia de los abonos comunes, que solo aportan nitrógeno, fósforo y potasio, este tipo de producto está diseñado para corregir deficiencias nutricionales que causan problemas visibles en la planta, como el amarillamiento de las hojas o clorosis.
Qué contiene
Suele incluir una combinación balanceada de los siguientes minerales esenciales, en forma soluble:
Evita que los brotes nuevos nazcan amarillos.
Esencial para la fotosíntesis y el crecimiento de la planta.
Apoya la producción de clorofila y el metabolismo.
Estimula la floración y el desarrollo de raíces.
Fortalece el sistema inmune de la planta.
Ayuda a procesar el nitrógeno y las funciones enzimáticas.
Antes y después
Una deficiencia de elementos menores se nota primero en las hojas nuevas: amarillamiento, color desigual, crecimiento débil y raíces pobres. Con el tratamiento correcto, la planta recupera un verde uniforme, tallos más gruesos y un sistema de raíces más fuerte.
Cómo se aplica
Este tipo de mezcla de micronutrientes se encuentra bajo distintas marcas comerciales según el mercado y la época. Dependiendo de la gravedad de la deficiencia, se aplica de dos formas:
- Foliar (esparcido en hojas): se disuelve en agua y se rocía con un atomizador directamente sobre las hojas, para una absorción más inmediata.
- Radicular (riego al suelo): se aplica directamente en la tierra para que las raíces lo absorban de forma constante.
Síntomas que corrige
Estas son las señales más comunes de que una planta necesita micronutrientes, antes de que el problema avance:
Clorosis
Hojas amarillas, sobre todo en el crecimiento nuevo. Es común en ixoras, trinitaria, gardenias y azaleas.
Manchado y moteado
Decoloración, manchas de óxido o ronchas en la hoja.
Crecimiento detenido
Desarrollo débil o detenido por completo.
Floración pobre
Menos flores, o flores débiles y de menor calidad.
Deficiencia de nutrientes
Poco color, baja vitalidad, y caída prematura de las hojas.
En casos avanzados, la deficiencia sin tratar puede degenerar en la muerte de la planta.
Casi siempre estas deficiencias también indican que la planta necesita un cambio de tierra: resembrar con material nuevo suele eliminar el problema de raíz.
10b
Prose — article, vignelli variant
.prose.article.vignelli, h3.paso, table — Cultivo del Bonsai
Real Cultivo del Bonsai content: numbered chapter heads, the
h3.paso step list, data tables, and inline figures. Rendered
exactly as production does today — without a
.cultivo-layout wrapper, because
content/cultivo-del-bonsai/index.md doesn't actually set
layout_class: cultivo-layout. That means the
.cultivo-layout rules in custom.css (single-column alignment
for this page) are dead code right now — nothing applies them. Worth
fixing or removing.
This is one chapter, not the book: Reglas generales,
picked because it alone carries every distinct vignelli component — the
h3.paso steps and two data tables. The rest of the book
(and its cover and author name — this page is private: true)
is left out. Its chapter number won't match the live page since this
fragment starts fresh, but the h2::before counter itself is
unaffected.
Cultivo del Bonsai en Puerto Rico
Una guía de cultivo de bonsai tropical en Puerto Rico. Estilos, herramientas, alambrado, tiestos y técnicas de formación, con las ilustraciones originales del libro.
Reglas generales
El bonsai mezcla la habilidad artística con la práctica de la horticultura. Estas reglas cubren tres cosas: cómo escoger la planta, cómo se llaman sus partes y cómo se diseña el árbol.
Paso 1 Cómo escoger la planta
- Seleccione plantas fuertes y saludables que crezcan bien en nuestras condiciones climatológicas.
- Es recomendable empezar con plantas de tamaño intermedio con un buen tronco y un buen sistema de raíces. El tamaño del bonsai terminado será de 6 a 10 pulgadas de alto.
Medidas clave
| Medida | Valor |
|---|---|
| Altura del bonsai terminado | 6–10 pulgadas |
| Altura del árbol a la que va la primera rama | 1/3 |
| Tronco descubierto : tronco con ramas alrededor | 1/3 : 2/3 |
| Diámetro del tronco en la base : altura del árbol | 1 : 6 |
Paso 2 Las cinco partes del árbol
Busque estos cinco elementos cuando seleccione una planta para hacer un bonsai.
| Parte | Qué buscar | |
|---|---|---|
| 1 | Raíces | Las raíces deben salir de la base del tronco en todas direcciones. |
| 2 | Tronco | El tronco debe ser grueso en la base e irse reduciendo en diámetro a medida que sube hacia el ápice. |
| 3 | Ápice | Todos los árboles deben tener un ápice. Después de cortar el tope de un árbol, una rama apropiada debe ser entrenada hacia arriba para reemplazar el ápice. |
| 4 | Rama principal | Debe ser gruesa y llena cerca del tronco y adelgazar paulatinamente a medida que se acerca a la punta. |
| 5 | Rama secundaria y otras ramas | Deben tener mucho follaje desde la base e irse reduciendo en tamaño a medida que se acercan al ápice. |
Paso 3 Principios de diseño
Bonsai es una de las altas formas de arte, mezclando habilidad artística con prácticas de horticultura. Para crear un bonsai bello y natural debemos entender simetría, balance y proporción.
| Principio | Descripción | |
|---|---|---|
| 1 | Estilo | El estilo de nuestro árbol dependerá mayormente de la planta misma. Una vez escogido el estilo debemos seguir las guías que le corresponden. |
| 2 | Frente | Todo bonsai debe tener un frente y éste debe ser el mejor lado de la planta. |
| 3 | Simetría | Un bonsai con perfecta simetría significa que si trazamos una línea vertical a lo largo del centro del tronco, el lado de la derecha será igual que el de la izquierda. Esto es muy monótono y falto de imaginación y es preferible crear un bonsai asimétrico que será mucho más estético. |
| 4 | Balance | Para entender el balance debemos imaginarlo como una cualidad de contrapeso. Un árbol balanceado nos da la impresión de igualdad aún cuando el lado derecho sea diferente al izquierdo. |
| 5 | Proporción | Idealmente los bonsai tienen unas proporciones predeterminadas. La proporción ideal indica que la primera rama debe estar a 1/3 de la altura del árbol, lo que nos dará 1/3 sin ramas con el tronco al descubierto y 2/3 con ramas alrededor del tronco que estará más o menos tapado por ellas. La proporción ideal entre el diámetro del tronco en la base y la altura del árbol es de uno a seis. Esto, como es natural suponer, es bastante difícil de lograr. |
11
Footer
.site-footer, .site-footer-grid, .site-footer-col — layouts/partials/footer.html
Not reproduced here — a second copy would just sit on top of the real
one. This page's own footer, immediately below, is the
real footer.html partial, unmodified.