Lucas WintherandClaude Fable 5.2
3c094522f2
Spec 008 is approved and on hold at the owner's request; its mockups and screenshots move into mockups/ so they outlive the session. Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
49 lines
4.2 KiB
HTML
49 lines
4.2 KiB
HTML
<!-- /simple side panel, variant A (2026-11-11). CHOSEN by the owner (spec 008).
|
|
A fragment, not a page: the <aside> replaces .sm-side in a BUILT /simple/index.html and the <style> goes before </head>
|
|
(it sits on top of src/site/styles/simple.css). Screenshots: mockups/shots/simple-side-a-1440.png, -390.png.
|
|
Throwaway markup: match the look, do not copy the code. "[newest post title]" is a stand-in; the reading / listening /
|
|
last film values were copied from the live site on 2026-11-11. -->
|
|
<style>
|
|
.sm-ways{margin-top:40px;gap:22px}
|
|
.way{display:grid}
|
|
.sm-in{list-style:none;margin:6px 0 0 42px;padding:0;font-size:14px;line-height:1.45;color:var(--cream-dim)}
|
|
.sm-in li{padding:3px 0}
|
|
.sm-in li.k{margin-top:8px;font:600 10.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#a8927f}
|
|
.sm-in a,.sm-late a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(242,231,215,.28)}
|
|
.sm-in time{margin-left:8px;font-size:12.5px;color:#a8927f;font-variant-numeric:tabular-nums}
|
|
.sm-in span{color:var(--cream)}
|
|
.mk{display:inline-block;width:.62em;height:.62em;border-radius:50%;border:1.4px solid var(--cream-dim);margin:0 .3em 0 .7em;vertical-align:.02em}
|
|
.mk.ai{background:var(--cream-dim)}
|
|
.sm-rn{display:grid;grid-template-columns:84px minmax(0,1fr);gap:6px 14px;margin:36px 0 0 42px;font-size:14px}
|
|
.sm-rn dt{font:600 10.5px/1.9 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#a8927f}
|
|
.sm-rn dd{margin:0;color:var(--cream)} .sm-rn dd span{color:var(--cream-dim);margin-left:6px;font-size:13px}
|
|
.sm-late{margin:40px 0 0}
|
|
.sm-late h2{display:flex;align-items:center;gap:12px;margin:0 0 10px;font:600 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#a8927f}
|
|
.sm-late h2::after{content:"";flex:1;height:1px;background:rgba(242,231,215,.18)}
|
|
.sm-late ol{list-style:none;margin:0;padding:0}
|
|
.sm-late li{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid rgba(242,231,215,.12);font-size:15.5px}
|
|
.sm-late li a{justify-self:start;font-family:var(--serif);font-size:17px}
|
|
.sm-late time,.sm-late li span{font-size:12.5px;color:#a8927f;font-variant-numeric:tabular-nums}
|
|
.sm-rnl{margin:16px 0 0;font-size:14px;line-height:1.55;color:var(--cream-dim);max-width:30em} .sm-rnl b{font-weight:400;color:var(--cream)}
|
|
@media (hover:hover){.sm-in a:hover,.sm-late a:hover{border-color:var(--saffron)}}
|
|
@media (max-width:900px){.sm-rn,.sm-in{margin-left:42px}}
|
|
.sm-ways .sm-in a{display:inline;padding:0}.sm-ways .sm-in a::before{content:none}.sm-in li{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.sm-in li:first-child{justify-content:flex-start;gap:0}.sm-rn{margin-top:28px}</style>
|
|
<aside class="sm-side"><h1>Lucas Winther</h1><p class="sm-line">Computer Scientist with passion for development.</p>
|
|
<nav class="sm-ways" aria-label="The two spaces">
|
|
<div class="way"><a href="/work/"><span class="n">work</span><span class="d">projects, writing, the CV in full</span></a>
|
|
<ul class="sm-in">
|
|
<li><span>13 projects</span> <i class="mk hand" aria-hidden="true"></i> 11 by hand <i class="mk ai" aria-hidden="true"></i> 2 made with AI</li>
|
|
<li class="k">latest writing</li>
|
|
<li><a href="/work/writing/synthetic-work-post/">[newest post title]</a> <time>14 Mar</time></li>
|
|
</ul></div>
|
|
<div class="way"><a href="/off-the-clock/"><span class="n">off the clock</span><span class="d">things I love and things I think</span></a>
|
|
<ul class="sm-in">
|
|
<li class="k">newest on the wall</li>
|
|
<li><a href="/off-the-clock/a-whisker-away/">A Whisker Away</a> <time>film · 10 Nov</time></li>
|
|
<li><a href="/off-the-clock/always-never/">Always Never</a> <time>comic · 10 Nov</time></li>
|
|
<li><a href="/off-the-clock/saltlakridserne/">Saltlakridserne</a> <time>music · 10 Nov</time></li>
|
|
</ul></div>
|
|
</nav>
|
|
<dl class="sm-rn"><dt>reading</dt><dd>Wolvenheart, Vol. 1 <span>Mark London</span></dd><dt>listening</dt><dd>New Commandments <span>Moon Walker</span></dd><dt>last film</dt><dd>Backrooms <span>7 Aug</span></dd></dl>
|
|
<p class="sm-more"><a href="/">the start page</a> · <a href="/everything/">everything in one list</a></p></aside>
|