287 lines
49 KiB
HTML
287 lines
49 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="./support.js"></script>
|
|
</head>
|
|
<body>
|
|
<x-dc>
|
|
<helmet>
|
|
<meta name="design_doc_mode" content="canvas">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Instrument+Sans:wght@400;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Archivo:wght@400;500;600;800&family=Literata:opsz,wght@7..72,400;7..72,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>body{margin:0;background:#ecebe8;color:#111;font-family:'IBM Plex Sans',sans-serif}a{color:#111}a:hover{color:#444}</style>
|
|
</helmet>
|
|
<section data-screen-label="Turn 1 directions" style="padding:64px;display:flex;flex-direction:column;gap:40px">
|
|
<div style="display:flex;flex-direction:column;gap:12px;max-width:900px">
|
|
<h1 style="margin:0;font:600 40px/1.1 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em">RenewCMS, three directions</h1>
|
|
<p style="margin:0;font:400 17px/1.55 'IBM Plex Sans',sans-serif;color:#444;text-wrap:pretty">All three share your palette, the white-on-black R and square corners (<code style="font-family:'IBM Plex Mono',monospace">--ui-radius: 0</code>). They differ in type, density and how much the sand accent carries. Each shows the article list at desktop in light and at 390 px in dark. Pick one and I'll build the full foundations.</p>
|
|
</div>
|
|
<div style="display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start">
|
|
|
|
<div id="1a" data-screen-label="1a Ledger" style="width:1240px;box-sizing:border-box;background:#fff;padding:48px;display:flex;flex-direction:column;gap:36px">
|
|
<div style="display:flex;align-items:center;gap:14px"><span style="background:#111;color:#fff;font:500 14px 'IBM Plex Mono',monospace;padding:4px 9px">1a</span><h2 style="margin:0;font:600 32px/1.1 'IBM Plex Sans',sans-serif;letter-spacing:-0.01em">Ledger</h2></div>
|
|
<p style="margin:0;max-width:820px;font:400 16px/1.6 'IBM Plex Sans',sans-serif;color:#444;text-wrap:pretty">Quiet and precise, like a well-kept account book. Monochrome, hairline borders, compact rows so a few hundred articles scan quickly. Sand appears only where you are: the active nav item and selection. Article content switches to a sturdy serif so writing feels distinct from the tool.</p>
|
|
<div style="display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;font:400 13px/1.5 'IBM Plex Sans',sans-serif;color:#444">
|
|
<div style="display:flex;flex-direction:column;gap:10px">
|
|
<div style="display:flex;gap:6px">
|
|
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#111"></div><span>primary</span><span style="font-family:'IBM Plex Mono',monospace">#111111</span></div>
|
|
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#444"></div><span>neutral-600</span><span style="font-family:'IBM Plex Mono',monospace">#444444</span></div>
|
|
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#666"></div><span>text-muted</span><span style="font-family:'IBM Plex Mono',monospace">#666666</span></div>
|
|
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#e6e4e0"></div><span>border</span><span style="font-family:'IBM Plex Mono',monospace">#e6e4e0</span></div>
|
|
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#e8dfd1"></div><span>secondary</span><span style="font-family:'IBM Plex Mono',monospace">#e8dfd1</span></div>
|
|
</div>
|
|
<span>Primary is ink, secondary is sand, neutral is the brand grays with a slight warm tint on borders.</span>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:6px">
|
|
<span style="font:600 28px/1.1 'IBM Plex Sans',sans-serif;color:#111">Aa IBM Plex Sans</span>
|
|
<span style="font:600 26px/1.2 'Source Serif 4',serif;color:#111">Aa Source Serif 4</span>
|
|
<span>UI at 13/20, content at 18/30. Plex Mono for ids, paths and code.</span>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:6px">
|
|
<span style="color:#111;font-weight:500">Radius 0 · 1 px borders · compact</span>
|
|
<span>Rows 44 px, controls 32 px, 24 px page gutters. No shadows except menus and modals.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width:1144px;height:680px;display:flex;border:1px solid #e6e4e0;background:#fafafa;font:400 13px/20px 'IBM Plex Sans',sans-serif;color:#111;overflow:hidden">
|
|
<div style="width:224px;flex-shrink:0;background:#fff;border-right:1px solid #e6e4e0;display:flex;flex-direction:column;padding:12px;box-sizing:border-box;gap:2px">
|
|
<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:10px"><div style="width:26px;height:26px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font:600 16px 'IBM Plex Sans',sans-serif">R</div><span style="font-weight:600;font-size:14px">RenewCMS</span></div>
|
|
<div style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;color:#444"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;"></span>Home</div>
|
|
<div style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;background:#e8dfd1;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;"></span>Articles</div>
|
|
<div style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;color:#444"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;"></span>Integration</div>
|
|
<div style="flex:1"></div>
|
|
<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;border-top:1px solid #e6e4e0;padding-top:8px"><div style="width:26px;height:26px;background:#d4c5b0;display:flex;align-items:center;justify-content:center;font:600 11px 'IBM Plex Sans',sans-serif">MA</div><span style="flex:1">marta</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;color:#666"></span></div>
|
|
</div>
|
|
<div style="flex:1;min-width:0;display:flex;flex-direction:column">
|
|
<div style="height:48px;border-bottom:1px solid #e6e4e0;background:#fff;display:flex;align-items:center;padding:0 24px;gap:8px;color:#666"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/panel-left.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/panel-left.svg') center / contain no-repeat;"></span><span style="width:1px;height:16px;background:#e6e4e0;margin:0 6px"></span><span>Home</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;"></span><span style="color:#111">Articles</span><span style="flex:1"></span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;"></span></div>
|
|
<div style="padding:24px;display:flex;flex-direction:column;gap:16px">
|
|
<div style="display:flex;align-items:flex-end;gap:16px"><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif">Articles</span><span style="color:#666">Everything you've written, online and in draft.</span></div><div style="height:32px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#111;color:#fff;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span>New article</div></div>
|
|
<div style="display:flex;align-items:center;gap:16px;border-bottom:1px solid #e6e4e0">
|
|
<div style="display:flex;gap:20px;flex:1"><span style="height:36px;display:flex;align-items:center;gap:6px;border-bottom:2px solid #111;font-weight:500">All <span style="color:#666">6</span></span><span style="height:36px;display:flex;align-items:center;gap:6px;color:#666">Online <span>4</span></span><span style="height:36px;display:flex;align-items:center;gap:6px;color:#666">Drafts <span>2</span></span></div>
|
|
<div style="width:240px;height:30px;margin-bottom:6px;border:1px solid #cfccc7;background:#fff;display:flex;align-items:center;gap:8px;padding:0 10px;color:#666;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;"></span>Search by title</div>
|
|
</div>
|
|
<div style="background:#fff;border:1px solid #e6e4e0">
|
|
<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 120px 130px 44px;height:36px;align-items:center;padding:0 12px;color:#666;background:#f3f2f0;font-weight:500"><span>Title</span><span>Status</span><span>Created</span><span style="display:flex;align-items:center;gap:4px;color:#111">Updated<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;"></span></span><span></span></div>
|
|
<sc-for list="{{ articles }}" as="a" hint-placeholder-count="6">
|
|
<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 120px 130px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid #e6e4e0">
|
|
<span style="font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:16px">{{ a.t }}</span>
|
|
<span><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;background:#111;color:#fff;font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;border:1px solid #999;color:#444;font-size:12px;font-weight:500;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if></span>
|
|
<span style="color:#666">{{ a.c }}</span><span style="color:#666">{{ a.u }}</span>
|
|
<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;color:#666;justify-self:center"></span>
|
|
</div>
|
|
</sc-for>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex;gap:40px;align-items:flex-start">
|
|
<div style="width:390px;height:780px;flex-shrink:0;background:#111;color:#fafafa;font:400 14px/20px 'IBM Plex Sans',sans-serif;display:flex;flex-direction:column;overflow:hidden">
|
|
<div style="height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid #333"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;"></span><div style="width:24px;height:24px;background:#111;border:1px solid #444;color:#fff;display:flex;align-items:center;justify-content:center;font:600 14px 'IBM Plex Sans',sans-serif">R</div><span style="flex:1;font-weight:600;font-size:16px">Articles</span><div style="width:44px;height:44px;background:#fafafa;color:#111;display:flex;align-items:center;justify-content:center"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span></div></div>
|
|
<div style="padding:12px 16px;display:flex;flex-direction:column;gap:10px">
|
|
<div style="height:44px;border:1px solid #444;display:flex;align-items:center;gap:8px;padding:0 12px;color:#999;background:#1a1a1a"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;"></span>Search by title</div>
|
|
<div style="display:flex;gap:20px;border-bottom:1px solid #333"><span style="height:40px;display:flex;align-items:center;gap:6px;border-bottom:2px solid #fafafa;font-weight:500">All <span style="color:#999">6</span></span><span style="height:40px;display:flex;align-items:center;color:#999">Online 4</span><span style="height:40px;display:flex;align-items:center;color:#999">Drafts 2</span></div>
|
|
</div>
|
|
<sc-for list="{{ articles }}" as="a" hint-placeholder-count="6">
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #2a2a2a">
|
|
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:6px"><span style="font-weight:500;font-size:15px">{{ a.t }}</span><div style="display:flex;align-items:center;gap:10px;font-size:12px;color:#999"><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;background:#fafafa;color:#111;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border:1px solid #666;color:#cfccc7;font-weight:500;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if><span>Updated {{ a.u }}</span></div></div>
|
|
<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;color:#999"></span>
|
|
</div>
|
|
</sc-for>
|
|
</div>
|
|
<div style="flex:1;display:flex;flex-direction:column;gap:14px;max-width:560px;padding-top:8px">
|
|
<span style="font:600 30px/1.25 'Source Serif 4',serif;color:#111">Choosing lime plaster for old stone walls</span>
|
|
<p style="margin:0;font:400 18px/30px 'Source Serif 4',serif;color:#222;text-wrap:pretty">Cement traps moisture in solid walls. Lime lets the stone breathe, which is why we strip it back on almost every farmhouse we take on.</p>
|
|
<blockquote style="margin:0;padding-left:18px;border-left:2px solid #111;font:italic 400 18px/30px 'Source Serif 4',serif;color:#444">It sets slowly, and that is the point.</blockquote>
|
|
<p style="margin:0;font:400 13px/1.5 'IBM Plex Sans',sans-serif;color:#666;text-wrap:pretty">Contrast: #111 on #fafafa 18.1:1 · #666 on #fafafa 5.5:1 · #999 on #111 6.6:1. #999 on light fails AA, so it is kept for dark mode and disabled states only.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="1b" data-screen-label="1b Atelier" style="width:1240px;box-sizing:border-box;background:#fff;padding:48px;display:flex;flex-direction:column;gap:36px">
|
|
<div style="display:flex;align-items:center;gap:14px"><span style="background:#111;color:#fff;font:500 14px 'IBM Plex Mono',monospace;padding:4px 9px">1b</span><h2 style="margin:0;font:500 34px/1.1 'Newsreader',serif">Atelier</h2></div>
|
|
<p style="margin:0;max-width:820px;font:400 16px/1.6 'Instrument Sans',sans-serif;color:#444;text-wrap:pretty">Warm and unhurried, like a workshop with good light. The sand accent becomes the frame: a sand sidebar around a pale working surface. Titles are set in a literary serif everywhere, including the table, so the list reads like a table of contents. Generous rows, larger controls, friendly on a phone.</p>
|
|
<div style="display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;font:400 13px/1.5 'Instrument Sans',sans-serif;color:#444">
|
|
<div style="display:flex;flex-direction:column;gap:10px">
|
|
<div style="display:flex;gap:6px">
|
|
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#222"></div><span>primary</span><span style="font-family:'IBM Plex Mono',monospace">#222222</span></div>
|
|
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#d4c5b0"></div><span>secondary</span><span style="font-family:'IBM Plex Mono',monospace">#d4c5b0</span></div>
|
|
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#e8dfd1"></div><span>bg-accented</span><span style="font-family:'IBM Plex Mono',monospace">#e8dfd1</span></div>
|
|
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#fafafa;border:1px solid #e6e4e0;box-sizing:border-box"></div><span>bg</span><span style="font-family:'IBM Plex Mono',monospace">#fafafa</span></div>
|
|
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#666"></div><span>text-muted</span><span style="font-family:'IBM Plex Mono',monospace">#666666</span></div>
|
|
</div>
|
|
<span>Primary is near-black for a softer button. Sand is structural here, not just a highlight.</span>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:6px">
|
|
<span style="font:600 28px/1.1 'Instrument Sans',sans-serif;color:#111">Aa Instrument Sans</span>
|
|
<span style="font:500 28px/1.2 'Newsreader',serif;color:#111">Aa Newsreader</span>
|
|
<span>UI at 15/22, titles and content in Newsreader at 19/32.</span>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:6px">
|
|
<span style="color:#111;font-weight:500">Radius 0 · tonal surfaces · comfortable</span>
|
|
<span>Rows 60 px, controls 40 px, 32 px gutters. Separation by surface color more than by lines.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width:1144px;height:680px;display:flex;background:#fafafa;font:400 15px/22px 'Instrument Sans',sans-serif;color:#111;overflow:hidden;border:1px solid #e6e4e0">
|
|
<div style="width:248px;flex-shrink:0;background:#e8dfd1;display:flex;flex-direction:column;padding:20px 16px;box-sizing:border-box;gap:4px">
|
|
<div style="display:flex;align-items:center;gap:12px;height:40px;padding:0 4px;margin-bottom:20px"><div style="width:32px;height:32px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font:500 20px 'Newsreader',serif">R</div><span style="font:500 20px 'Newsreader',serif">RenewCMS</span></div>
|
|
<div style="display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;color:#444"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;"></span>Home</div>
|
|
<div style="display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;background:#fafafa;font-weight:600"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;"></span>Articles</div>
|
|
<div style="display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;color:#444"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;"></span>Integration</div>
|
|
<div style="flex:1"></div>
|
|
<div style="display:flex;align-items:center;gap:12px;height:48px;padding:0 4px"><div style="width:32px;height:32px;background:#222;color:#e8dfd1;display:flex;align-items:center;justify-content:center;font:600 12px 'Instrument Sans',sans-serif">MA</div><span style="flex:1">marta</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;color:#444"></span></div>
|
|
</div>
|
|
<div style="flex:1;min-width:0;display:flex;flex-direction:column">
|
|
<div style="height:60px;display:flex;align-items:center;padding:0 32px;gap:8px;color:#666;font-size:14px"><span>Home</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;"></span><span style="color:#111">Articles</span><span style="flex:1"></span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;color:#444"></span></div>
|
|
<div style="padding:4px 32px 32px;display:flex;flex-direction:column;gap:22px">
|
|
<div style="display:flex;align-items:flex-end;gap:16px"><div style="flex:1;display:flex;flex-direction:column;gap:4px"><span style="font:500 36px/1.1 'Newsreader',serif">Articles</span><span style="color:#666">Everything you've written, online and in draft.</span></div><div style="height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#222;color:#fff;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span>New article</div></div>
|
|
<div style="display:flex;align-items:center;gap:16px">
|
|
<div style="display:flex;border:1px solid #d4c5b0;flex-shrink:0"><span style="height:38px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#e8dfd1;font-weight:600">All <span style="font-weight:400;color:#444">6</span></span><span style="height:38px;display:flex;align-items:center;gap:6px;padding:0 14px;color:#444">Online 4</span><span style="height:38px;display:flex;align-items:center;gap:6px;padding:0 14px;color:#444">Drafts 2</span></div>
|
|
<span style="flex:1"></span>
|
|
<div style="width:280px;height:40px;border:1px solid #d4c5b0;background:#fff;display:flex;align-items:center;gap:10px;padding:0 12px;color:#666;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;"></span>Search by title</div>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:2px">
|
|
<div style="display:grid;grid-template-columns:minmax(0,1fr) 120px 130px 140px 48px;height:36px;align-items:center;padding:0 16px;color:#666;font-size:14px"><span>Title</span><span>Status</span><span>Created</span><span style="display:flex;align-items:center;gap:4px;color:#111">Updated<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;"></span></span><span></span></div>
|
|
<sc-for list="{{ articles5 }}" as="a" hint-placeholder-count="5">
|
|
<div style="display:grid;grid-template-columns:minmax(0,1fr) 120px 130px 140px 48px;height:60px;align-items:center;padding:0 16px;background:#fff">
|
|
<span style="font:500 18px/1.2 'Newsreader',serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:16px">{{ a.t }}</span>
|
|
<span><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;background:#111;color:#fff;font-size:13px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;background:#e8dfd1;color:#222;font-size:13px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if></span>
|
|
<span style="color:#666;font-size:14px">{{ a.c }}</span><span style="color:#666;font-size:14px">{{ a.u }}</span>
|
|
<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;color:#444;justify-self:center"></span>
|
|
</div>
|
|
</sc-for>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex;gap:40px;align-items:flex-start">
|
|
<div style="width:390px;height:780px;flex-shrink:0;background:#111;color:#fafafa;font:400 15px/22px 'Instrument Sans',sans-serif;display:flex;flex-direction:column;overflow:hidden">
|
|
<div style="height:60px;display:flex;align-items:center;gap:12px;padding:0 16px;background:#222"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:22px;height:22px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;"></span><span style="flex:1;font:500 22px 'Newsreader',serif">Articles</span><div style="height:44px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#d4c5b0;color:#111;font-weight:600"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span>New</div></div>
|
|
<div style="padding:16px;display:flex;flex-direction:column;gap:12px">
|
|
<div style="height:44px;border:1px solid #444;display:flex;align-items:center;gap:10px;padding:0 12px;color:#999"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;"></span>Search by title</div>
|
|
<div style="display:flex;border:1px solid #444"><span style="flex:1;height:40px;display:flex;align-items:center;justify-content:center;gap:6px;background:#444;font-weight:600">All 6</span><span style="flex:1;height:40px;display:flex;align-items:center;justify-content:center;color:#cfccc7">Online 4</span><span style="flex:1;height:40px;display:flex;align-items:center;justify-content:center;color:#cfccc7">Drafts 2</span></div>
|
|
</div>
|
|
<div style="padding:0 16px;display:flex;flex-direction:column;gap:8px">
|
|
<sc-for list="{{ articles5 }}" as="a" hint-placeholder-count="5">
|
|
<div style="display:flex;align-items:flex-start;gap:12px;padding:14px;background:#222">
|
|
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:8px"><span style="font:500 19px/1.25 'Newsreader',serif">{{ a.t }}</span><div style="display:flex;align-items:center;gap:10px;font-size:13px;color:#999"><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;background:#d4c5b0;color:#111;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;background:#444;color:#e8dfd1;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if><span>{{ a.u }}</span></div></div>
|
|
<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;color:#999;padding-top:2px"></span>
|
|
</div>
|
|
</sc-for>
|
|
</div>
|
|
</div>
|
|
<div style="flex:1;display:flex;flex-direction:column;gap:14px;max-width:560px;padding-top:8px">
|
|
<span style="font:500 34px/1.2 'Newsreader',serif;color:#111">Choosing lime plaster for old stone walls</span>
|
|
<p style="margin:0;font:400 19px/32px 'Newsreader',serif;color:#222;text-wrap:pretty">Cement traps moisture in solid walls. Lime lets the stone breathe, which is why we strip it back on almost every farmhouse we take on.</p>
|
|
<blockquote style="margin:0;padding:14px 18px;background:#e8dfd1;font:italic 400 19px/30px 'Newsreader',serif;color:#222">It sets slowly, and that is the point.</blockquote>
|
|
<p style="margin:0;font:400 13px/1.5 'Instrument Sans',sans-serif;color:#666;text-wrap:pretty">Contrast: #222 on #e8dfd1 12.4:1 · #444 on #e8dfd1 7.3:1 · #111 on #d4c5b0 11.2:1 · #e8dfd1 on #444 7.3:1.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="1c" data-screen-label="1c Plank" style="width:1240px;box-sizing:border-box;background:#fff;padding:48px;display:flex;flex-direction:column;gap:36px">
|
|
<div style="display:flex;align-items:center;gap:14px"><span style="background:#111;color:#fff;font:500 14px 'IBM Plex Mono',monospace;padding:4px 9px">1c</span><h2 style="margin:0;font:800 36px/1.05 'Archivo',sans-serif;letter-spacing:-0.02em">Plank</h2></div>
|
|
<p style="margin:0;max-width:820px;font:400 16px/1.6 'Archivo',sans-serif;color:#444;text-wrap:pretty">Solid and confident, like freshly cut timber and a builder's pencil. A black sidebar anchors the page, headings are heavy, dates and ids sit in monospace. Status is shape-coded: online is a filled sand tag, draft is a dashed outline. Most graphic of the three, still restrained.</p>
|
|
<div style="display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;font:400 13px/1.5 'Archivo',sans-serif;color:#444">
|
|
<div style="display:flex;flex-direction:column;gap:10px">
|
|
<div style="display:flex;gap:6px">
|
|
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#111"></div><span>primary</span><span style="font-family:'JetBrains Mono',monospace">#111111</span></div>
|
|
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#d4c5b0"></div><span>secondary</span><span style="font-family:'JetBrains Mono',monospace">#d4c5b0</span></div>
|
|
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#222"></div><span>neutral-800</span><span style="font-family:'JetBrains Mono',monospace">#222222</span></div>
|
|
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#fff;border:1px solid #cfccc7;box-sizing:border-box"></div><span>bg</span><span style="font-family:'JetBrains Mono',monospace">#ffffff</span></div>
|
|
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#666"></div><span>text-muted</span><span style="font-family:'JetBrains Mono',monospace">#666666</span></div>
|
|
</div>
|
|
<span>Ink and sand at full strength. White page, black frame, sand for the one thing that is live.</span>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:6px">
|
|
<span style="font:800 28px/1.1 'Archivo',sans-serif;color:#111;letter-spacing:-0.02em">Aa Archivo</span>
|
|
<span style="font:600 26px/1.2 'Literata',serif;color:#111">Aa Literata</span>
|
|
<span style="font:400 14px 'JetBrains Mono',monospace;color:#111">2026-09-24 · /v1/article/12</span>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:6px">
|
|
<span style="color:#111;font-weight:500">Radius 0 · 2 px frame lines · medium</span>
|
|
<span>Rows 52 px, controls 40 px. Heavy rules around the table, hairlines inside it.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width:1144px;height:680px;display:flex;background:#fff;font:400 14px/20px 'Archivo',sans-serif;color:#111;overflow:hidden;border:2px solid #111;box-sizing:border-box">
|
|
<div style="width:232px;flex-shrink:0;background:#111;color:#fafafa;display:flex;flex-direction:column;padding:16px 12px;box-sizing:border-box;gap:4px">
|
|
<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:18px"><div style="width:30px;height:30px;background:#111;border:1px solid #666;color:#fff;display:flex;align-items:center;justify-content:center;font:800 18px 'Archivo',sans-serif;box-sizing:border-box">R</div><span style="font:800 16px 'Archivo',sans-serif;letter-spacing:-0.01em">RenewCMS</span></div>
|
|
<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;color:#cfccc7"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;"></span>Home</div>
|
|
<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;background:#d4c5b0;color:#111;font-weight:600"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;"></span>Articles</div>
|
|
<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;color:#cfccc7"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;"></span>Integration</div>
|
|
<div style="flex:1"></div>
|
|
<div style="display:flex;align-items:center;gap:10px;height:48px;padding:8px 6px 0;border-top:1px solid #333"><div style="width:30px;height:30px;background:#fafafa;color:#111;display:flex;align-items:center;justify-content:center;font:600 12px 'Archivo',sans-serif">MA</div><span style="flex:1">marta</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;color:#999"></span></div>
|
|
</div>
|
|
<div style="flex:1;min-width:0;display:flex;flex-direction:column">
|
|
<div style="height:52px;border-bottom:1px solid #cfccc7;display:flex;align-items:center;padding:0 32px;gap:8px;color:#666"><span>Home</span><span>/</span><span style="color:#111;font-weight:500">Articles</span><span style="flex:1"></span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;color:#111"></span></div>
|
|
<div style="padding:28px 32px;display:flex;flex-direction:column;gap:22px">
|
|
<div style="display:flex;align-items:flex-end;gap:16px"><div style="flex:1;display:flex;flex-direction:column;gap:6px"><span style="font:800 40px/1 'Archivo',sans-serif;letter-spacing:-0.03em">Articles</span><span style="color:#666">Everything you've written, online and in draft.</span></div><div style="height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#111;color:#fff;font-weight:600"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span>New article</div></div>
|
|
<div style="display:flex;align-items:center;gap:16px">
|
|
<div style="display:flex;gap:6px;flex:1"><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#111;color:#fff;font-weight:600">All <span style="font:400 12px 'JetBrains Mono',monospace">6</span></span><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #cfccc7;box-sizing:border-box">Online <span style="font:400 12px 'JetBrains Mono',monospace;color:#666">4</span></span><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #cfccc7;box-sizing:border-box">Drafts <span style="font:400 12px 'JetBrains Mono',monospace;color:#666">2</span></span></div>
|
|
<div style="width:260px;height:40px;border:2px solid #111;display:flex;align-items:center;gap:10px;padding:0 12px;color:#666;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;color:#111"></span>Search by title</div>
|
|
</div>
|
|
<div style="border-top:2px solid #111;border-bottom:2px solid #111">
|
|
<div style="display:grid;grid-template-columns:minmax(0,1fr) 120px 120px 130px 44px;height:40px;align-items:center;padding:0 8px;font-weight:600;border-bottom:1px solid #111"><span>Title</span><span>Status</span><span>Created</span><span style="display:flex;align-items:center;gap:4px">Updated<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;"></span></span><span></span></div>
|
|
<sc-for list="{{ articles5 }}" as="a" hint-placeholder-count="5">
|
|
<div style="display:grid;grid-template-columns:minmax(0,1fr) 120px 120px 130px 44px;height:52px;align-items:center;padding:0 8px;border-top:1px solid #e6e4e0">
|
|
<span style="font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:16px">{{ a.t }}</span>
|
|
<span><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;background:#d4c5b0;color:#111;font-size:12px;font-weight:600"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border:1px dashed #444;color:#444;font-size:12px;font-weight:600;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if></span>
|
|
<span style="color:#666;font:400 12px 'JetBrains Mono',monospace">{{ a.ci }}</span><span style="color:#666;font:400 12px 'JetBrains Mono',monospace">{{ a.ui }}</span>
|
|
<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;justify-self:center"></span>
|
|
</div>
|
|
</sc-for>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex;gap:40px;align-items:flex-start">
|
|
<div style="width:390px;height:780px;flex-shrink:0;background:#111;color:#fafafa;font:400 15px/22px 'Archivo',sans-serif;display:flex;flex-direction:column;overflow:hidden;position:relative">
|
|
<div style="height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:2px solid #333"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:22px;height:22px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;"></span><div style="width:26px;height:26px;border:1px solid #666;display:flex;align-items:center;justify-content:center;font:800 15px 'Archivo',sans-serif;box-sizing:border-box">R</div><span style="flex:1"></span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;"></span></div>
|
|
<div style="padding:20px 16px 12px;display:flex;flex-direction:column;gap:14px">
|
|
<span style="font:800 32px/1 'Archivo',sans-serif;letter-spacing:-0.03em">Articles</span>
|
|
<div style="display:flex;gap:6px"><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#fafafa;color:#111;font-weight:600">All <span style="font:400 12px 'JetBrains Mono',monospace">6</span></span><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #444;box-sizing:border-box">Online <span style="font:400 12px 'JetBrains Mono',monospace;color:#999">4</span></span><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #444;box-sizing:border-box">Drafts <span style="font:400 12px 'JetBrains Mono',monospace;color:#999">2</span></span></div>
|
|
</div>
|
|
<sc-for list="{{ articles5 }}" as="a" hint-placeholder-count="5">
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid #333">
|
|
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:8px"><span style="font-weight:600;font-size:16px">{{ a.t }}</span><div style="display:flex;align-items:center;gap:10px;color:#999;font:400 12px 'JetBrains Mono',monospace"><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;background:#d4c5b0;color:#111;font:600 12px 'Archivo',sans-serif"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;border:1px dashed #999;color:#e8dfd1;font:600 12px 'Archivo',sans-serif;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if><span>{{ a.ui }}</span></div></div>
|
|
<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;color:#999"></span>
|
|
</div>
|
|
</sc-for>
|
|
<div style="position:absolute;left:16px;right:16px;bottom:16px;height:52px;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span>New article</div>
|
|
</div>
|
|
<div style="flex:1;display:flex;flex-direction:column;gap:14px;max-width:560px;padding-top:8px">
|
|
<span style="font:600 30px/1.25 'Literata',serif;color:#111">Choosing lime plaster for old stone walls</span>
|
|
<p style="margin:0;font:400 18px/31px 'Literata',serif;color:#222;text-wrap:pretty">Cement traps moisture in solid walls. Lime lets the stone breathe, which is why we strip it back on almost every farmhouse we take on.</p>
|
|
<blockquote style="margin:0;padding-left:18px;border-left:4px solid #d4c5b0;font:italic 400 18px/31px 'Literata',serif;color:#444">It sets slowly, and that is the point.</blockquote>
|
|
<p style="margin:0;font:400 13px/1.5 'Archivo',sans-serif;color:#666;text-wrap:pretty">Contrast: #111 on #d4c5b0 11.2:1 · #cfccc7 on #111 12.5:1 · #444 dashed border on #fff 9.7:1. Dashed vs filled keeps status legible without color.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</x-dc>
|
|
<script type="text/x-dc" data-dc-script>
|
|
class Component extends DCLogic {
|
|
renderVals() {
|
|
const articles = [
|
|
{ t: 'How we price a bathroom renovation', on: true, c: '12 Mar 2026', u: '2 hours ago', ci: '2026-03-12', ui: '2h ago' },
|
|
{ t: 'Choosing lime plaster for old stone walls', on: false, c: '9 Sep 2026', u: 'Yesterday', ci: '2026-09-09', ui: '1d ago' },
|
|
{ t: 'Before and after: the Rue Verte kitchen', on: true, c: '28 Aug 2026', u: '3 days ago', ci: '2026-08-28', ui: '3d ago' },
|
|
{ t: 'Winter checklist for timber windows', on: false, c: '2 Sep 2026', u: '5 days ago', ci: '2026-09-02', ui: '5d ago' },
|
|
{ t: 'Why we reuse original floorboards', on: true, c: '14 Jun 2026', u: '18 Aug 2026', ci: '2026-06-14', ui: '2026-08-18' },
|
|
{ t: 'Our first passive-house retrofit', on: true, c: '3 Apr 2026', u: '2 Jul 2026', ci: '2026-04-03', ui: '2026-07-02' }
|
|
].map(a => ({ ...a, draft: !a.on }))
|
|
return { articles, articles5: articles.slice(0, 5) }
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|