(landing) added Closets section

This commit is contained in:
Dominique Deschatre
2026-04-17 19:18:10 -03:00
parent 89f0eb5cb3
commit e5f5009f80
3 changed files with 43 additions and 17 deletions
@@ -6,21 +6,21 @@
<div>
<span class="eyebrow">the method of loci, updated</span>
<h2 class="display">
Wings. Rooms. <em>Drawers.</em>
Wings. Rooms. Closets. <em>Drawers.</em>
</h2>
</div>
<p class="lede">
An ancient memory technique, reworked for a machine. Broad categories
nest time-based groupings; time-based groupings hold verbatim drawers.
A symbolic index lets the model scan thousands of drawers in a single
pass and open only the ones it needs.
nest time-based groupings; time-based groupings bundle topics; topics
hold verbatim drawers. A symbolic index lets the model scan thousands
of drawers in a single pass and open only the ones it needs.
</p>
</div>
<div class="anatomy-diagram">
<article class="stratum">
<span class="n">W wing</span>
<h3>The <em>Wing</em></h3>
<h3>The <em>Wings</em></h3>
<p class="sub">people · projects · topics</p>
<p>A broad region of the palace, keyed to a real entity a person by name, a project by codename, a domain of your life. Entity-first, always.</p>
<div class="diagram">
@@ -36,7 +36,7 @@
<article class="stratum">
<span class="n">R room</span>
<h3>The <em>Room</em></h3>
<h3>The <em>Rooms</em></h3>
<p class="sub">days · sessions · threads</p>
<p>Inside a wing sit rooms discrete units of time. One room per day, or one per session. Walk the corridor and the palace unfolds chronologically, room by room.</p>
<div class="diagram">
@@ -50,9 +50,32 @@
</div>
</article>
<article class="stratum">
<span class="n">C closet</span>
<h3>The <em>Closets</em></h3>
<p class="sub">topics · threads · bundles</p>
<p>Inside a room, closets group related drawers by topic or thread. Open one closet and you see every drawer on that subject together no need to walk the whole room.</p>
<div class="diagram">
<svg viewBox="0 0 200 80" fill="none" stroke="currentColor" stroke-width="1" style="color:var(--prism);">
<rect x="10" y="14" width="54" height="52" />
<rect x="73" y="14" width="54" height="52" />
<rect x="136" y="14" width="54" height="52" />
<line x1="37" y1="14" x2="37" y2="66" opacity="0.5"/>
<line x1="100" y1="14" x2="100" y2="66" opacity="0.5"/>
<line x1="163" y1="14" x2="163" y2="66" opacity="0.5"/>
<circle cx="33" cy="40" r="1.2" fill="currentColor"/>
<circle cx="41" cy="40" r="1.2" fill="currentColor"/>
<circle cx="96" cy="40" r="1.2" fill="currentColor"/>
<circle cx="104" cy="40" r="1.2" fill="currentColor"/>
<circle cx="159" cy="40" r="1.2" fill="currentColor"/>
<circle cx="167" cy="40" r="1.2" fill="currentColor"/>
</svg>
</div>
</article>
<article class="stratum">
<span class="n">D drawer</span>
<h3>The <em>Drawer</em></h3>
<h3>The <em>Drawers</em></h3>
<p class="sub">verbatim · permanent · exact</p>
<p>Each room holds drawers. A drawer is a single chunk of verbatim content the exact words, untouched. The palace's promise is kept here.</p>
<div class="diagram">
+12 -9
View File
@@ -31,7 +31,7 @@ body.mempalace-active { overflow-x: hidden; }
--hair: rgba(158, 216, 255, 0.14);
--hair-strong: rgba(158, 216, 255, 0.28);
--ice: #EAF4FF;
--ice-dim: #B8C7D9;
--ice-dim: #aabbcf;
--ice-ghost: rgba(234, 244, 255, 0.56);
--prism: #9ED8FF;
--prism-core: #4AA3FF;
@@ -156,8 +156,8 @@ body.mempalace-active { overflow-x: hidden; }
.mempalace-landing .display em { font-style: italic; color: var(--prism); }
.mempalace-landing .lede {
font-family: var(--f-display);
font-style: italic;
font-weight: 300;
/* font-style: italic; */
font-weight: 400;
color: var(--ice-dim);
font-size: clamp(1.2rem, 1.8vw, 1.55rem);
line-height: 1.45;
@@ -813,16 +813,19 @@ body.mempalace-active { overflow-x: hidden; }
.mempalace-landing .anatomy-diagram {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 3vw, 2.5rem);
grid-template-columns: repeat(4, 1fr);
gap: clamp(1rem, 2.2vw, 1.75rem);
padding: 2rem 0;
}
@media (max-width: 1200px) {
.mempalace-landing .anatomy-diagram { grid-template-columns: repeat(2, 1fr); }
}
.mempalace-landing .stratum {
position: relative;
border: var(--rule) solid var(--hair);
padding: 2rem 1.5rem;
padding: 1.75rem 1.25rem;
background: linear-gradient(180deg, rgba(17,21,28,0.6), rgba(10,13,18,0.2));
min-height: 360px;
min-height: 340px;
display: flex;
flex-direction: column;
transition: border-color 0.4s ease, transform 0.4s ease;
@@ -845,9 +848,9 @@ body.mempalace-active { overflow-x: hidden; }
.mempalace-landing .stratum h3 {
font-family: var(--f-display);
font-weight: 400;
font-size: 2.4rem;
font-size: clamp(1.75rem, 2vw, 2.1rem);
letter-spacing: -0.01em;
margin: 1.5rem 0 0.25rem;
margin: 1.25rem 0 0.25rem;
color: var(--ice);
}
.mempalace-landing .stratum h3 em { font-style: italic; color: var(--prism); font-weight: 300; }
@@ -50,7 +50,7 @@ onMounted(() => {
try { data = await res.json() } catch (_) { /* no body */ }
if (res.ok) {
setState('success', (data && data.message) || "You're on the list! We'll be in touch.")
setState('success', (data && data.message) || "Success! You're on the list for updates.")
// keep inputs disabled so they can't resubmit accidentally
input.value = email
return