Kaffesky/kaffesky-markdown-templates
3
0
Fork 0
mirror of https://github.com/Kaffesky/kaffesky-markdown-templates.git synced 2026-04-18 14:57:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions
kaffesky-markdown-templates/convertion_templates_iA-Writer/ExampleTemplate_CleanDoc.iatemplate/Contents/Resources/style.css
jostein 37ba3383ba Updating iA-writer section
2026-03-26 10:15:02 +01:00

227 lines
6.7 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* ============================================================
CleanDoc — Shared Styles
Roboto type system, A4 document layout
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400;1,700&family=Roboto+Mono:wght@400;500&display=swap');
/* --- Design tokens ---------------------------------------- */
:root {
/* Typefaces */
--font-body: 'Roboto', -apple-system, sans-serif;
--font-mono: 'Roboto Mono', 'Courier New', monospace;
/* A4 content column
A4 = 210mm wide. 25mm side margins each = 160mm text width.
At 96dpi: 160mm × (96/25.4) ≈ 605px.
We use 620px — a comfortable line measure for Roboto 10.5pt. */
--content-width: 620px;
/* Type scale — Minor Third (1.2×) anchored at 10.5pt
10.5pt @ 96dpi ≈ 14px */
--text-xs: 11px; /* captions, footer meta */
--text-sm: 12px; /* table cells, code */
--text-base: 14px; /* body — ~10.5pt on A4 */
--text-md: 16px; /* h4 / lead text */
--text-lg: 19px; /* h3 */
--text-xl: 23px; /* h2 */
--text-2xl: 28px; /* h1 in document */
--text-3xl: 42px; /* title page title */
/* Line heights — Roboto needs slightly tighter lh than serifs */
--lh-tight: 1.25;
--lh-snug: 1.45;
--lh-base: 1.65; /* body text */
--lh-loose: 1.80;
/* Colour palette */
--c-ink: #1c1c1e;
--c-mid: #48484a;
--c-muted: #8e8e93;
--c-rule: #d1d1d6;
--c-tint: #f2f2f7;
--c-accent: #0a5cf5; /* single accent — deep blue */
--c-white: #ffffff;
/* Spacing unit: 4px grid */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
--sp-20: 80px;
}
/* --- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* --- Base ------------------------------------------------- */
html {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--lh-base);
color: var(--c-ink);
background-color: var(--c-white);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* --- Content column --------------------------------------- */
body {
max-width: var(--content-width);
margin: 0 auto;
/* No top/bottom padding here — controlled by IATemplateHeaderHeight */
}
/* --- Headings --------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-body);
color: var(--c-ink);
font-weight: 700;
line-height: var(--lh-tight);
margin-top: var(--sp-10);
margin-bottom: var(--sp-3);
}
/* First heading in a document should not add top margin */
.document > h1:first-child,
.document > h2:first-child,
.document > h3:first-child {
margin-top: 0;
}
h1 { font-size: var(--text-2xl); letter-spacing: -0.02em; font-weight: 300; }
h2 { font-size: var(--text-xl); font-weight: 500; border-bottom: 1.5px solid var(--c-rule); padding-bottom: var(--sp-2); }
h3 { font-size: var(--text-lg); font-weight: 500; }
h4 { font-size: var(--text-md); font-weight: 700; color: var(--c-mid); }
h5 { font-size: var(--text-base); font-weight: 700; color: var(--c-mid); }
h6 { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); }
/* Keep heading with following paragraph */
h1 + p, h2 + p, h3 + p, h4 + p { margin-top: var(--sp-2); }
/* --- Body text -------------------------------------------- */
p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
em { font-style: italic; }
a {
color: var(--c-accent);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
/* --- Lists ------------------------------------------------ */
ul, ol {
padding-left: var(--sp-6);
margin-bottom: var(--sp-4);
}
li { margin-bottom: var(--sp-1); line-height: var(--lh-snug); }
li > ul, li > ol { margin-top: var(--sp-1); margin-bottom: 0; }
/* --- Blockquote ------------------------------------------- */
blockquote {
margin: var(--sp-8) 0;
padding: var(--sp-4) var(--sp-6);
border-left: 3px solid var(--c-accent);
background: var(--c-tint);
font-weight: 300;
font-size: var(--text-md);
line-height: var(--lh-snug);
color: var(--c-mid);
}
blockquote p:last-child { margin-bottom: 0; }
/* --- Code ------------------------------------------------- */
code {
font-family: var(--font-mono);
font-size: 0.875em;
font-weight: 500;
background: var(--c-tint);
padding: 0.1em 0.35em;
border-radius: 3px;
border: 1px solid var(--c-rule);
}
pre {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.6;
background: var(--c-tint);
border: 1px solid var(--c-rule);
border-radius: 4px;
padding: var(--sp-4) var(--sp-6);
margin: var(--sp-6) 0;
overflow-x: auto;
}
pre code { background: none; border: none; padding: 0; font-size: inherit; }
/* --- Tables ----------------------------------------------- */
table {
width: 100%;
border-collapse: collapse;
margin: var(--sp-6) 0;
font-size: var(--text-sm);
}
thead {
border-bottom: 2px solid var(--c-ink);
}
th {
text-align: left;
font-weight: 700;
padding: var(--sp-2) var(--sp-3);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--c-mid);
}
td {
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--c-rule);
vertical-align: top;
line-height: var(--lh-snug);
}
tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) td { background: var(--c-tint); }
/* --- HR --------------------------------------------------- */
hr {
border: none;
border-top: 1px solid var(--c-rule);
margin: var(--sp-10) 0;
}
/* --- Images ----------------------------------------------- */
img {
max-width: 100%;
height: auto;
display: block;
margin: var(--sp-6) auto;
}
figcaption {
text-align: center;
font-size: var(--text-xs);
color: var(--c-muted);
margin-top: var(--sp-2);
font-style: italic;
}
/* ============================================================
Night mode
============================================================ */
html.night-mode {
--c-ink: #f2f2f7;
--c-mid: #aeaeb2;
--c-muted: #636366;
--c-rule: #38383a;
--c-tint: #1c1c1e;
--c-accent: #4a9eff;
--c-white: #000000;
}
Reference in a new issue View git blame Copy permalink