mirror of
https://github.com/nexu-io/open-design.git
synced 2026-09-20 06:15:06 +08:00
pftom
d3d95121f3
- Updated the `sortByVisualAppeal` function to prioritize featured ranks, ensuring that curated plugins are displayed prominently. - Added tests to verify the new sorting logic, ensuring that plugins with numeric featured ranks are sorted correctly ahead of others. - Introduced new example templates for a magazine article layout, a Twitter share card, and a Xiaohongshu card, expanding the available options for users. - Enhanced the overall plugin preview experience by integrating these new templates, providing users with more visually appealing and functional examples. This update significantly improves the plugin sorting mechanism and enriches the template offerings, enhancing user engagement and experience.
85 lines
4.2 KiB
HTML
85 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Kami Parchment · Open Design Studio №26</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Serif+SC:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
|
<style>
|
|
body {
|
|
font-family: 'Source Serif Pro', 'Noto Serif SC', Georgia, serif;
|
|
background: #f5f4ed;
|
|
color: #1f1d18;
|
|
}
|
|
.ink-blue { color: #1B365D; }
|
|
.meta { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
|
|
.rule { border-color: #d4d1c5; }
|
|
.display { font-family: 'Source Serif Pro', 'Noto Serif SC', Georgia, serif; }
|
|
.h1-display { font-size: clamp(48px, 7vw, 96px); line-height: 1.05; letter-spacing: -0.01em; font-weight: 500; }
|
|
.tag { display: inline-block; padding: 3px 10px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; background: #efeee5; color: #1B365D; }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen">
|
|
<div class="max-w-[920px] mx-auto px-10 py-14">
|
|
|
|
<!-- top folio rule -->
|
|
<header class="flex items-baseline justify-between border-b rule pb-3 text-[11px] meta uppercase tracking-[0.18em]" style="color:#6b665b">
|
|
<span>KAMI · Open Design</span>
|
|
<span>Vol. 01 · Issue №26 · MMXXVI</span>
|
|
<span>Apache-2.0</span>
|
|
</header>
|
|
|
|
<!-- kicker -->
|
|
<div class="mt-12 flex items-baseline gap-3">
|
|
<span class="tag">Studio Letter</span>
|
|
<span class="meta text-[11px] uppercase tracking-[0.18em]" style="color:#6b665b">Berlin · 52.5200° N · 13.4050° E</span>
|
|
</div>
|
|
|
|
<!-- hero headline -->
|
|
<h1 class="display h1-display mt-4">
|
|
Designing <span style="font-style:italic" class="ink-blue">intelligence</span><br/>
|
|
on warm paper.
|
|
</h1>
|
|
|
|
<!-- lede -->
|
|
<p class="mt-8 text-[20px] leading-relaxed max-w-[680px]" style="color:#3a382f">
|
|
The open-source design studio for editorial documents and slide decks — typeset by your own coding agent. Pure white is a screen affordance, not a publishing convention. Paper has temperature, and so does type.
|
|
</p>
|
|
|
|
<!-- 3 columns -->
|
|
<section class="mt-14 grid grid-cols-3 gap-10 border-t rule pt-10">
|
|
<article>
|
|
<div class="meta text-[10px] uppercase tracking-[0.18em] ink-blue">01 · Pillar</div>
|
|
<h2 class="display text-[24px] font-semibold mt-2 leading-snug">Composed,<br/>not assembled.</h2>
|
|
<p class="mt-3 text-[14.5px] leading-relaxed" style="color:#3a382f">Every page is set by hand. We don't concatenate sections — we typeset them.</p>
|
|
</article>
|
|
<article>
|
|
<div class="meta text-[10px] uppercase tracking-[0.18em] ink-blue">02 · Pillar</div>
|
|
<h2 class="display text-[24px] font-semibold mt-2 leading-snug">One typeface<br/>speaks.</h2>
|
|
<p class="mt-3 text-[14.5px] leading-relaxed" style="color:#3a382f">Source Serif Pro carries every level of hierarchy. No display vs. body fights.</p>
|
|
</article>
|
|
<article>
|
|
<div class="meta text-[10px] uppercase tracking-[0.18em] ink-blue">03 · Pillar</div>
|
|
<h2 class="display text-[24px] font-semibold mt-2 leading-snug">Ring or whisper,<br/>never shout.</h2>
|
|
<p class="mt-3 text-[14.5px] leading-relaxed" style="color:#3a382f">Hairline rules, single accent, no drop shadows. The page should feel printed.</p>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- pull quote -->
|
|
<blockquote class="mt-14 border-l-2 pl-5 italic" style="border-color:#1B365D">
|
|
<p class="text-[22px] leading-snug max-w-[620px]" style="color:#1f1d18">
|
|
"We release one document per fortnight, and every one of them is something we'd actually print."
|
|
</p>
|
|
<footer class="mt-3 text-[12.5px] meta uppercase tracking-[0.16em]" style="color:#6b665b">— Editorial Team · Berlin, 2026</footer>
|
|
</blockquote>
|
|
|
|
<!-- colophon -->
|
|
<footer class="mt-16 pt-6 border-t rule flex items-baseline justify-between text-[11px] meta uppercase tracking-[0.18em]" style="color:#6b665b">
|
|
<span>Set in Source Serif Pro & IBM Plex Mono</span>
|
|
<span>opendesign.studio</span>
|
|
<span>№26 / 26</span>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|