mirrors / tw93--kami

项目文件夹

tw93--kami
文件
main
T
wehub-resource-sync d436a5e4ff chore: import upstream snapshot with attribution
2026-07-13 13:05:52 +08:00

543 行
14 KiB
HTML
原始文件 永久链接 Blame 文件历史

<!DOCTYPE html>
<!-- ==================================================================
LONG DOCUMENT · English · parchment design system
Multi-page A4 white paper / tech report / annual review
Flow: cover -> toc -> exec summary -> chapters -> appendix
================================================================== -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{DOC_TITLE}}</title>
<meta name="author" content="{{AUTHOR}}">
<meta name="description" content="{{DESCRIPTION}}">
<meta name="keywords" content="{{KEYWORDS}}">
<meta name="generator" content="Kami">
<style>
/* Palatino is a system font, no @font-face needed */
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 500; font-style: normal; }
@page {
size: A4;
margin: 20mm 22mm 22mm 22mm;
background: #f5f4ed;
@top-right {
content: string(section-title);
font-family: Charter, Georgia, Palatino, serif;
font-size: 8pt;
color: #6b6a64;
}
@bottom-center {
content: counter(page) " · {{DOC_TITLE}}";
font-family: Charter, Georgia, Palatino, serif;
font-size: 9pt;
color: #6b6a64;
}
}
@page:first {
@top-right { content: ""; }
@bottom-center { content: ""; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--parchment: #f5f4ed;
--ivory: #faf9f5;
--near-black:#141413;
--dark-warm: #3d3d3a;
--olive: #504e49;
--stone: #6b6a64;
--brand: #1B365D;
--border: #e8e6dc;
--border-soft:#e5e3d8;
--tag-bg: #E4ECF5;
--serif: Charter, Georgia,
Palatino, "Times New Roman", serif;
--sans: var(--serif);
--mono: "JetBrains Mono", "SF Mono", "Fira Code",
Consolas, Monaco, monospace;
--rhythm-module: 14pt;
--rhythm-section: 18pt;
}
html, body { background: var(--parchment); }
@media screen {
body { max-width: 210mm; margin: 0 auto; padding: 20mm 22mm 22mm 22mm; }
}
body {
color: var(--near-black);
font-family: var(--serif);
font-size: 10.5pt;
line-height: 1.55;
widows: 3;
orphans: 3;
}
.sans { font-family: var(--sans); }
/* COVER */
.cover {
min-height: 240mm;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 40mm 0 0 0;
break-after: page;
}
.cover-eyebrow {
display: inline-flex;
align-items: center;
gap: 8pt;
font-family: var(--sans);
font-size: 10pt;
color: var(--brand);
letter-spacing: 2pt;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 18pt;
}
.cover-eyebrow::before {
content: "";
width: 9pt;
height: 1.5pt;
border-radius: 0.75pt;
background: var(--brand);
flex-shrink: 0;
}
.cover-title {
font-size: 40pt;
font-weight: 500;
color: var(--near-black);
line-height: 1.12;
letter-spacing: -0.5pt;
margin-bottom: 16pt;
}
.cover-sub {
font-family: var(--sans);
font-size: 14pt;
color: var(--olive);
line-height: 1.45;
max-width: 85%;
margin-bottom: 30pt;
}
.cover-meta {
font-family: var(--sans);
font-size: 10pt;
color: var(--stone);
line-height: 1.55;
font-variant-numeric: tabular-nums;
}
.cover-meta strong { color: var(--dark-warm); font-weight: 500; }
/* TOC */
.toc { break-after: page; }
.toc h2 {
font-size: 22pt;
font-weight: 500;
margin-bottom: var(--rhythm-module);
border-left: 2.5pt solid var(--brand);
border-radius: 1.5pt;
padding-left: 8pt;
}
.toc-item {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6pt 0;
border-bottom: 0.3pt dotted var(--border);
font-size: 11pt;
}
.toc-item:last-of-type { border-bottom: none; }
.toc-num {
color: var(--brand);
font-weight: 500;
min-width: 30pt;
font-variant-numeric: tabular-nums;
}
.toc-title {
flex: 1;
color: var(--near-black);
padding-left: 6pt;
text-decoration: none;
display: flex;
justify-content: space-between;
gap: 12pt;
}
.toc-title[href]::after {
content: target-counter(attr(href), page);
color: var(--stone);
font-variant-numeric: tabular-nums;
margin-left: auto;
}
/* HEADINGS */
h1 {
font-size: 24pt;
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.3pt;
margin: 0 0 10pt 0;
border-left: 2.5pt solid var(--brand);
border-radius: 1.5pt;
padding-left: 8pt;
color: var(--near-black);
break-after: avoid;
string-set: section-title content();
}
.running-title { string-set: section-title content(); }
h2 {
font-size: 16pt;
font-weight: 500;
line-height: 1.25;
margin: 24pt 0 8pt 0;
color: var(--near-black);
break-after: avoid;
}
h3 {
font-size: 13pt;
font-weight: 500;
line-height: 1.3;
margin: 18pt 0 6pt 0;
color: var(--dark-warm);
break-after: avoid;
}
.chapter-num {
font-family: var(--sans);
font-size: 10pt;
color: var(--brand);
letter-spacing: 1pt;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 6pt;
}
/* PARAGRAPHS */
p { margin: 0 0 10pt 0; line-height: 1.55; color: var(--near-black); widows: 2; orphans: 2; }
.lead {
font-size: 12pt;
line-height: 1.55;
color: var(--dark-warm);
margin-bottom: var(--rhythm-module);
}
.hl { color: var(--brand); font-weight: 500; }
strong { font-weight: 500; }
/* LISTS */
ul, ol {
margin: 6pt 0 10pt 0;
padding-left: 20pt;
line-height: 1.55;
}
ul li::marker { color: var(--brand); }
ol li::marker { color: var(--brand); font-weight: 500; }
/* QUOTE */
blockquote, .quote {
border-left: 2pt solid var(--brand);
margin: 12pt 0;
padding: 4pt 0 4pt 16pt;
color: var(--olive);
line-height: 1.55;
break-inside: avoid;
}
blockquote .cite, .quote .cite {
display: block;
font-family: var(--sans);
font-size: 9pt;
color: var(--stone);
margin-top: 4pt;
}
/* CODE */
code {
font-family: var(--mono);
font-size: 9pt;
background: var(--ivory);
padding: 1pt 4pt;
border-radius: 2pt;
color: var(--dark-warm);
}
pre {
font-family: var(--mono);
font-size: 9pt;
line-height: 1.5;
background: var(--ivory);
border-radius: 4pt;
padding: 10pt 14pt;
margin: 10pt 0;
white-space: pre-wrap;
color: var(--near-black);
break-inside: avoid;
}
pre code { background: transparent; padding: 0; font-size: inherit; }
/* TABLE (kami-table) */
table, .kami-table {
width: 100%;
border-collapse: collapse;
font-size: 9.5pt;
margin: 12pt 0;
break-inside: avoid;
}
table th, .kami-table th {
text-align: left;
font-family: var(--sans);
font-weight: 500;
color: var(--dark-warm);
padding: 6pt 8pt;
border-bottom: 1pt solid var(--border);
background: var(--ivory);
}
table td, .kami-table td {
padding: 5pt 8pt;
border-bottom: 0.3pt solid var(--border-soft);
vertical-align: top;
}
table.compact th, .kami-table.compact th { padding: 3pt 6pt; font-size: 8pt; }
table.compact td, .kami-table.compact td { padding: 2pt 6pt; font-size: 8pt; line-height: 1.4; }
table.financial td:not(:first-child), .kami-table.financial td:not(:first-child) {
text-align: right; font-variant-numeric: tabular-nums;
}
table.financial th:not(:first-child), .kami-table.financial th:not(:first-child) { text-align: right; }
table.striped tbody tr:nth-child(even) td, .kami-table.striped tbody tr:nth-child(even) td {
background: var(--ivory);
}
table .total td, .kami-table .total td {
font-weight: 500; border-top: 1pt solid var(--brand); border-bottom: none; color: var(--near-black);
}
/* CALLOUT / TAKEAWAY */
.callout {
background: var(--ivory);
border-left: 2pt solid var(--brand);
padding: 10pt 14pt;
border-radius: 3pt;
margin: 12pt 0;
line-height: 1.55;
break-inside: avoid;
}
.callout blockquote,
.callout .quote {
border-left: none;
padding-left: 0;
margin: 6pt 0;
color: var(--olive);
}
.callout blockquote:first-child,
.callout .quote:first-child { margin-top: 0; }
.callout blockquote:last-child,
.callout .quote:last-child { margin-bottom: 0; }
.takeaway {
background: var(--ivory);
border-radius: 4pt;
padding: 10pt 14pt;
margin: 14pt 0;
break-inside: avoid;
}
.takeaway-label {
font-family: var(--sans);
font-size: 9pt;
color: var(--brand);
letter-spacing: 1pt;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 4pt;
}
/* TAG */
.tag {
display: inline-block;
background: var(--tag-bg);
color: var(--brand);
font-family: var(--sans);
font-size: 9pt;
font-weight: 500;
padding: 1pt 6pt;
border-radius: 3pt;
letter-spacing: 0.4pt;
text-transform: uppercase;
margin-right: 4pt;
}
/* FIGURE */
figure { margin: 14pt 0; break-inside: avoid; }
figure img { max-width: 100%; border-radius: 4pt; }
figcaption {
font-family: var(--sans);
font-size: 9pt;
color: var(--stone);
margin-top: 6pt;
text-align: center;
}
/* CHAPTER BREAK */
.chapter { break-before: page; }
</style>
</head>
<body>
<!-- COVER -->
<section class="cover">
<div>
<div class="cover-eyebrow">{{EYEBROW - e.g. Technical Report / Annual Review / White Paper}}</div>
<div class="cover-title">{{Document title<br>can span two lines}}</div>
<div class="cover-sub">{{One-line subtitle - what this is and who it's for.}}</div>
</div>
<div class="cover-meta">
<strong>{{AUTHOR / TEAM}}</strong><br>
{{Version 1.0}} · {{YYYY.MM}}<br>
{{PUBLISHER / ORGANIZATION}}
</div>
</section>
<!-- TOC -->
<section class="toc">
<h2>Contents</h2>
<div class="toc-item"><span class="toc-num">01</span><a class="toc-title" href="#ch-executive-summary">Executive Summary</a></div>
<div class="toc-item"><span class="toc-num">02</span><a class="toc-title" href="#ch-background">Background &amp; Problem Statement</a></div>
<div class="toc-item"><span class="toc-num">03</span><a class="toc-title" href="#ch-methodology">Methodology &amp; Findings</a></div>
<div class="toc-item"><span class="toc-num">04</span><a class="toc-title" href="#ch-conclusions">Conclusions &amp; Recommendations</a></div>
<div class="toc-item"><span class="toc-num">05</span><a class="toc-title" href="#ch-appendix">Appendix</a></div>
</section>
<!-- Chapter 01 -->
<section class="chapter" id="ch-executive-summary">
<div class="chapter-num">01 · Executive Summary</div>
<h1>Executive Summary</h1>
<p class="lead">
{{Two or three sentences opening the whole thesis. Use <span class="hl">brand-color emphasis</span> to grab attention on the sharpest claim. A reader of only this paragraph should understand what the document argues.}}
</p>
<h2>Key Takeaways</h2>
<ul>
<li>{{Takeaway 1 - a quantified conclusion in one line.}}</li>
<li>{{Takeaway 2 - an insight backed by data.}}</li>
<li>{{Takeaway 3 - a forward-looking judgment.}}</li>
</ul>
<div class="takeaway">
<div class="takeaway-label">Questions this document answers</div>
{{List the three core questions as actual questions - so the reader can decide in ten seconds whether to read on.}}
</div>
</section>
<!-- Chapter 02 -->
<section class="chapter" id="ch-background">
<div class="chapter-num">02 · Background</div>
<h1>Background &amp; Problem Statement</h1>
<p class="lead">
{{Chapter intro - what this chapter is solving, why it matters. One or two sentences.}}
</p>
<h2>Current State</h2>
<p>{{Three to five lines describing the status quo. Use <span class="hl">specific figures</span> rather than adjectives.}}</p>
<h2>The Core Problem</h2>
<p>{{State the problem specifically. Use a callout to emphasize a key observation:}}</p>
<div class="callout">
{{A short quoted line or key observation. Different in tone from the body so the reader gets a breath.}}
</div>
<h2>Metrics of Success</h2>
<table>
<thead>
<tr>
<th>Dimension</th>
<th>Current</th>
<th>Target</th>
<th>Gap</th>
</tr>
</thead>
<tbody>
<tr><td>{{DIMENSION_1}}</td><td>{{VAL}}</td><td>{{VAL}}</td><td>{{GAP}}</td></tr>
<tr><td>{{DIMENSION_2}}</td><td>{{VAL}}</td><td>{{VAL}}</td><td>{{GAP}}</td></tr>
</tbody>
</table>
</section>
<!-- Chapter 03 -->
<section class="chapter" id="ch-methodology">
<div class="chapter-num">03 · Methodology</div>
<h1>Methodology &amp; Findings</h1>
<p class="lead">{{Chapter intro.}}</p>
<h2>Approach</h2>
<p>{{Describe the methodology. Code or formula examples welcome:}}</p>
<pre><code class="language-python">def analyze(data):
"""Transform raw data."""
return transform(data)</code></pre>
<h2>Key Findings</h2>
<h3>Finding 1 - {{TITLE}}</h3>
<p>{{A paragraph with data: <span class="hl">specific numbers or ratios</span>.}}</p>
<h3>Finding 2 - {{TITLE}}</h3>
<p>{{A paragraph with data: <span class="hl">specific numbers or ratios</span>.}}</p>
<blockquote>
{{A quoted passage - user interview, expert perspective, or cited source.}}
<span class="cite"> - {{SOURCE / PERSON}}, {{DATE}}</span>
</blockquote>
</section>
<!-- Chapter 04 -->
<section class="chapter" id="ch-conclusions">
<div class="chapter-num">04 · Conclusions</div>
<h1>Conclusions &amp; Recommendations</h1>
<p class="lead">{{Chapter intro - a one-line summary of the conclusion, then the recommendations below.}}</p>
<h2>Core Conclusions</h2>
<ol>
<li>{{Conclusion 1.}}</li>
<li>{{Conclusion 2.}}</li>
<li>{{Conclusion 3.}}</li>
</ol>
<h2>Recommended Next Steps</h2>
<p>{{Concrete, executable recommendations tied to the conclusions.}}</p>
<div class="takeaway">
<div class="takeaway-label">Call to Action</div>
{{If the reader does one thing, what is it? Specific enough to start Monday morning.}}
</div>
</section>
<!-- Chapter 05 -->
<section class="chapter" id="ch-appendix">
<div class="chapter-num">05 · Appendix</div>
<h1>Appendix</h1>
<h2>A. References</h2>
<ul>
<li>{{Reference 1}}</li>
<li>{{Reference 2}}</li>
</ul>
<h2>B. Glossary</h2>
<p><strong>{{TERM}}</strong> - {{definition}}</p>
<p><strong>{{TERM}}</strong> - {{definition}}</p>
<h2>C. Acknowledgements</h2>
<p>{{Acknowledgement paragraph.}}</p>
</section>
</body>
</html>
在新工单中引用 查看 Git Blame 复制永久链接