(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> <div>
<span class="eyebrow">the method of loci, updated</span> <span class="eyebrow">the method of loci, updated</span>
<h2 class="display"> <h2 class="display">
Wings. Rooms. <em>Drawers.</em> Wings. Rooms. Closets. <em>Drawers.</em>
</h2> </h2>
</div> </div>
<p class="lede"> <p class="lede">
An ancient memory technique, reworked for a machine. Broad categories An ancient memory technique, reworked for a machine. Broad categories
nest time-based groupings; time-based groupings hold verbatim drawers. nest time-based groupings; time-based groupings bundle topics; topics
A symbolic index lets the model scan thousands of drawers in a single hold verbatim drawers. A symbolic index lets the model scan thousands
pass and open only the ones it needs. of drawers in a single pass and open only the ones it needs.
</p> </p>
</div> </div>
<div class="anatomy-diagram"> <div class="anatomy-diagram">
<article class="stratum"> <article class="stratum">
<span class="n">W wing</span> <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 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> <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"> <div class="diagram">
@@ -36,7 +36,7 @@
<article class="stratum"> <article class="stratum">
<span class="n">R room</span> <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 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> <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"> <div class="diagram">
@@ -50,9 +50,32 @@
</div> </div>
</article> </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"> <article class="stratum">
<span class="n">D drawer</span> <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 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> <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"> <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: rgba(158, 216, 255, 0.14);
--hair-strong: rgba(158, 216, 255, 0.28); --hair-strong: rgba(158, 216, 255, 0.28);
--ice: #EAF4FF; --ice: #EAF4FF;
--ice-dim: #B8C7D9; --ice-dim: #aabbcf;
--ice-ghost: rgba(234, 244, 255, 0.56); --ice-ghost: rgba(234, 244, 255, 0.56);
--prism: #9ED8FF; --prism: #9ED8FF;
--prism-core: #4AA3FF; --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 .display em { font-style: italic; color: var(--prism); }
.mempalace-landing .lede { .mempalace-landing .lede {
font-family: var(--f-display); font-family: var(--f-display);
font-style: italic; /* font-style: italic; */
font-weight: 300; font-weight: 400;
color: var(--ice-dim); color: var(--ice-dim);
font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-size: clamp(1.2rem, 1.8vw, 1.55rem);
line-height: 1.45; line-height: 1.45;
@@ -813,16 +813,19 @@ body.mempalace-active { overflow-x: hidden; }
.mempalace-landing .anatomy-diagram { .mempalace-landing .anatomy-diagram {
position: relative; position: relative;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(4, 1fr);
gap: clamp(1rem, 3vw, 2.5rem); gap: clamp(1rem, 2.2vw, 1.75rem);
padding: 2rem 0; padding: 2rem 0;
} }
@media (max-width: 1200px) {
.mempalace-landing .anatomy-diagram { grid-template-columns: repeat(2, 1fr); }
}
.mempalace-landing .stratum { .mempalace-landing .stratum {
position: relative; position: relative;
border: var(--rule) solid var(--hair); 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)); background: linear-gradient(180deg, rgba(17,21,28,0.6), rgba(10,13,18,0.2));
min-height: 360px; min-height: 340px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: border-color 0.4s ease, transform 0.4s ease; transition: border-color 0.4s ease, transform 0.4s ease;
@@ -845,9 +848,9 @@ body.mempalace-active { overflow-x: hidden; }
.mempalace-landing .stratum h3 { .mempalace-landing .stratum h3 {
font-family: var(--f-display); font-family: var(--f-display);
font-weight: 400; font-weight: 400;
font-size: 2.4rem; font-size: clamp(1.75rem, 2vw, 2.1rem);
letter-spacing: -0.01em; letter-spacing: -0.01em;
margin: 1.5rem 0 0.25rem; margin: 1.25rem 0 0.25rem;
color: var(--ice); color: var(--ice);
} }
.mempalace-landing .stratum h3 em { font-style: italic; color: var(--prism); font-weight: 300; } .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 */ } try { data = await res.json() } catch (_) { /* no body */ }
if (res.ok) { 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 // keep inputs disabled so they can't resubmit accidentally
input.value = email input.value = email
return return