/* ==========================================================================
notion.css — Notion-inspired stylesheet for Markdown-generated HTML
--------------------------------------------------------------------------
Verwendung:
... dein gerenderter Markdown ...
Falls du keinen Wrapper möchtest, greifen die Styles auch auf .
========================================================================== */
/* --------------------------------------------------------------------------
1. CSS-Variablen (Light & Dark Mode)
-------------------------------------------------------------------------- */
:root {
/* Farben — angelehnt an die Notion-Palette */
--notion-text: rgb(55, 53, 47);
--notion-text-light: rgba(55, 53, 47, 0.65);
--notion-text-muted: rgba(55, 53, 47, 0.5);
--notion-bg: #ffffff;
--notion-bg-gray: rgb(247, 246, 243);
--notion-bg-hover: rgba(55, 53, 47, 0.06);
--notion-border: rgba(55, 53, 47, 0.16);
--notion-divider: rgba(55, 53, 47, 0.09);
/* Akzentfarben (für Callouts, Tags, etc.) */
--notion-red: rgb(212, 76, 71);
--notion-orange: rgb(217, 115, 13);
--notion-yellow: rgb(203, 145, 47);
--notion-green: rgb(68, 131, 97);
--notion-blue: rgb(51, 126, 169);
--notion-purple: rgb(144, 101, 176);
--notion-pink: rgb(193, 76, 138);
/* Hintergrund-Tints für Callouts */
--notion-red-bg: rgb(253, 235, 236);
--notion-orange-bg: rgb(250, 235, 221);
--notion-yellow-bg: rgb(251, 243, 219);
--notion-green-bg: rgb(221, 237, 229);
--notion-blue-bg: rgb(221, 235, 241);
--notion-purple-bg: rgb(234, 228, 242);
--notion-pink-bg: rgb(244, 223, 235);
/* Code */
--notion-code-text: rgb(235, 87, 87);
--notion-code-bg: rgba(135, 131, 120, 0.15);
--notion-block-bg: rgb(247, 246, 243);
/* Typografie */
--notion-font-sans:
ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
"Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--notion-font-serif:
Lyon-Text, Georgia, "YuMincho", "Yu Mincho", "Hiragino Mincho ProN",
"Hiragino Mincho Pro", "Songti TC", "Songti SC", serif;
--notion-font-mono:
"SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono",
Courier, monospace;
/* Layout */
--notion-content-width: 900px;
--notion-page-padding: 96px;
}
@media (prefers-color-scheme: dark) {
:root {
--notion-text: rgba(255, 255, 255, 0.9);
--notion-text-light: rgba(255, 255, 255, 0.6);
--notion-text-muted: rgba(255, 255, 255, 0.4);
--notion-bg: rgb(25, 25, 25);
--notion-bg-gray: rgb(37, 37, 37);
--notion-bg-hover: rgba(255, 255, 255, 0.055);
--notion-border: rgba(255, 255, 255, 0.13);
--notion-divider: rgba(255, 255, 255, 0.07);
--notion-red-bg: rgba(212, 76, 71, 0.2);
--notion-orange-bg: rgba(217, 115, 13, 0.2);
--notion-yellow-bg: rgba(203, 145, 47, 0.2);
--notion-green-bg: rgba(68, 131, 97, 0.2);
--notion-blue-bg: rgba(51, 126, 169, 0.2);
--notion-purple-bg: rgba(144, 101, 176, 0.2);
--notion-pink-bg: rgba(193, 76, 138, 0.2);
--notion-code-text: rgb(255, 115, 105);
--notion-code-bg: rgba(135, 131, 120, 0.25);
--notion-block-bg: rgb(37, 37, 37);
}
}
/* --------------------------------------------------------------------------
2. Reset & Basis
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
background: var(--notion-bg);
color: var(--notion-text);
font-family: var(--notion-font-sans);
font-size: 16px;
line-height: 1.5;
font-feature-settings: "kern", "liga", "calt";
}
/* --------------------------------------------------------------------------
3. Seiten-Layout
-------------------------------------------------------------------------- */
.notion-page,
body > article,
body > main {
max-width: var(--notion-content-width);
margin: 0 auto;
padding: var(--notion-page-padding) var(--notion-page-padding) 30vh;
color: var(--notion-text);
}
@media (max-width: 768px) {
.notion-page,
body > article,
body > main {
padding: 40px 24px 30vh;
}
}
/* --------------------------------------------------------------------------
4. Überschriften
-------------------------------------------------------------------------- */
.notion-page h1,
.notion-page h2,
.notion-page h3,
.notion-page h4,
.notion-page h5,
.notion-page h6 {
font-weight: 600;
line-height: 1.3;
color: var(--notion-text);
margin: 0;
padding: 3px 2px;
}
/* Titel der Seite — der erste h1 ist besonders groß */
.notion-page h1 {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.02em;
margin-top: 32px;
margin-bottom: 16px;
}
.notion-page h1:first-child { margin-top: 0; }
.notion-page h2 {
font-size: 30px;
line-height: 1.3;
font-weight: 600;
letter-spacing: -0.01em;
margin-top: 32px;
margin-bottom: 4px;
}
.notion-page h3 {
font-size: 24px;
line-height: 1.3;
font-weight: 600;
margin-top: 28px;
margin-bottom: 2px;
}
.notion-page h4 { font-size: 20px; margin-top: 22px; }
.notion-page h5 { font-size: 18px; margin-top: 18px; }
.notion-page h6 { font-size: 16px; margin-top: 16px; color: var(--notion-text-light); }
/* --------------------------------------------------------------------------
5. Absätze & Inline-Elemente
-------------------------------------------------------------------------- */
.notion-page p {
margin: .9em 0;
padding: 3px 2px;
min-height: 1.5em;
}
.notion-page strong, .notion-page b { font-weight: 600; }
.notion-page em, .notion-page i { font-style: italic; }
.notion-page mark {
background: var(--notion-yellow-bg);
color: inherit;
padding: 1px 2px;
border-radius: 2px;
}
.notion-page del, .notion-page s {
text-decoration: line-through;
color: var(--notion-text-light);
}
.notion-page sub, .notion-page sup {
font-size: 0.75em;
line-height: 0;
}
/* --------------------------------------------------------------------------
6. Links
-------------------------------------------------------------------------- */
.notion-page a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--notion-text-muted);
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: text-decoration-color 100ms ease, background-color 100ms ease;
}
.notion-page a:hover {
text-decoration-color: var(--notion-text);
background: var(--notion-bg-hover);
}
/* --------------------------------------------------------------------------
7. Listen
-------------------------------------------------------------------------- */
.notion-page ul,
.notion-page ol {
margin: 1px 0;
padding-left: 1.7em;
}
.notion-page li {
padding: 3px 2px;
margin: 0;
}
.notion-page li > p { padding: 0; margin: 0; }
.notion-page ul { list-style: disc; }
.notion-page ul ul { list-style: circle; }
.notion-page ul ul ul { list-style: square; }
.notion-page ol { list-style: decimal; }
.notion-page ol ol { list-style: lower-alpha; }
.notion-page ol ol ol { list-style: lower-roman; }
/* Task-Listen (GFM Checkboxen) */
.notion-page li input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 14px;
height: 14px;
margin: 0 6px 0 -22px;
vertical-align: middle;
border: 1.5px solid var(--notion-border);
border-radius: 3px;
background: transparent;
cursor: pointer;
position: relative;
}
.notion-page li input[type="checkbox"]:checked {
background: var(--notion-blue);
border-color: var(--notion-blue);
}
.notion-page li input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 3px;
top: 0px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.notion-page li:has(input[type="checkbox"]) { list-style: none; margin-left: -1.4em; }
/* --------------------------------------------------------------------------
8. Blockzitate
-------------------------------------------------------------------------- */
.notion-page blockquote {
margin: 6px 0;
padding: 3px 14px;
border-left: 3px solid var(--notion-text);
font-size: 1em;
line-height: 1.5;
color: var(--notion-text);
}
.notion-page blockquote p { padding: 3px 0; }
/* --------------------------------------------------------------------------
9. Code
-------------------------------------------------------------------------- */
/* Inline-Code */
.notion-page :not(pre) > code {
font-family: var(--notion-font-mono);
font-size: 85%;
color: var(--notion-code-text);
background: var(--notion-code-bg);
padding: 0.2em 0.4em;
border-radius: 4px;
word-break: break-word;
}
/* Code-Block */
.notion-page pre {
font-family: var(--notion-font-mono);
background: var(--notion-block-bg);
border-radius: 4px;
padding: 32px 16px 16px;
margin: 6px 0;
overflow-x: auto;
font-size: 14px;
line-height: 1.5;
tab-size: 2;
position: relative;
}
.notion-page pre code {
background: transparent;
padding: 0;
color: var(--notion-text);
font-size: inherit;
white-space: pre;
}
/* Optionales "Sprach-Label" oben links — funktioniert mit
...
*/
.notion-page pre > code[class*="language-"]::before {
content: attr(class);
position: absolute;
top: 8px;
left: 16px;
font-size: 11px;
font-family: var(--notion-font-sans);
color: var(--notion-text-muted);
text-transform: lowercase;
letter-spacing: 0.02em;
}
.notion-page pre > code[class*="language-"] {
/* Hack: zeige nur das, was nach "language-" kommt */
}
/* --------------------------------------------------------------------------
10. Tabellen
-------------------------------------------------------------------------- */
.notion-page table {
border-collapse: collapse;
width: 100%;
margin: 6px 0;
font-size: 14px;
line-height: 1.4;
}
.notion-page th,
.notion-page td {
border: 1px solid var(--notion-border);
padding: 7px 9px;
text-align: left;
vertical-align: top;
min-width: 100px;
}
.notion-page th {
background: var(--notion-bg-gray);
font-weight: 500;
color: var(--notion-text-light);
font-size: 13px;
}
.notion-page tr:hover td { background: var(--notion-bg-hover); }
/* --------------------------------------------------------------------------
11. Trennlinien
-------------------------------------------------------------------------- */
.notion-page hr {
border: none;
border-top: 1px solid var(--notion-divider);
margin: 12px 0;
}
/* --------------------------------------------------------------------------
12. Bilder & Medien
-------------------------------------------------------------------------- */
.notion-page img,
.notion-page video {
max-width: 100%;
height: auto;
border-radius: 3px;
margin: 6px 0;
display: block;
}
.notion-page figure {
margin: 6px 0;
}
.notion-page figcaption {
font-size: 14px;
color: var(--notion-text-light);
text-align: left;
padding: 6px 2px;
}
/* --------------------------------------------------------------------------
13. Callouts
-------------------------------------------------------------------------- */
/* Standard-Callout: 💡 Text…
Farb-Varianten: callout--blue, --green, --yellow, --red, --purple, --gray */
.notion-page .callout {
display: flex;
gap: 12px;
padding: 16px;
margin: 6px 0;
border-radius: 4px;
background: var(--notion-bg-gray);
border: 1px solid var(--notion-divider);
font-size: 16px;
line-height: 1.5;
}
.notion-page .callout > :first-child {
flex-shrink: 0;
font-size: 18px;
line-height: 1.5;
}
.notion-page .callout--blue { background: var(--notion-blue-bg); }
.notion-page .callout--green { background: var(--notion-green-bg); }
.notion-page .callout--yellow { background: var(--notion-yellow-bg); }
.notion-page .callout--red { background: var(--notion-red-bg); }
.notion-page .callout--purple { background: var(--notion-purple-bg); }
.notion-page .callout--orange { background: var(--notion-orange-bg); }
.notion-page .callout--pink { background: var(--notion-pink-bg); }
/* --------------------------------------------------------------------------
14. Toggle (Details-Element)
-------------------------------------------------------------------------- */
.notion-page details {
margin: 1px 0;
padding: 3px 2px;
}
.notion-page details > summary {
cursor: pointer;
list-style: none;
padding: 3px 2px 3px 22px;
position: relative;
font-weight: 500;
}
.notion-page details > summary::-webkit-details-marker { display: none; }
.notion-page details > summary::before {
content: "";
position: absolute;
left: 2px;
top: 50%;
width: 0;
height: 0;
border-left: 5px solid var(--notion-text-light);
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
transform: translateY(-50%);
transition: transform 120ms ease;
}
.notion-page details[open] > summary::before {
transform: translateY(-50%) rotate(90deg);
}
.notion-page details[open] > summary { margin-bottom: 4px; }
.notion-page details > *:not(summary) { padding-left: 22px; }
/* --------------------------------------------------------------------------
15. Tastatur-Eingabe
-------------------------------------------------------------------------- */
.notion-page kbd {
font-family: var(--notion-font-mono);
font-size: 0.85em;
padding: 2px 6px;
border-radius: 3px;
background: var(--notion-bg-gray);
border: 1px solid var(--notion-border);
box-shadow: inset 0 -1px 0 var(--notion-border);
color: var(--notion-text);
}
/* --------------------------------------------------------------------------
16. Auswahl-Highlight
-------------------------------------------------------------------------- */
.notion-page ::selection {
background: rgba(45, 170, 219, 0.3);
}
/* --------------------------------------------------------------------------
17. Druck
-------------------------------------------------------------------------- */
@media print {
.notion-page {
padding: 0;
max-width: 100%;
}
.notion-page a { text-decoration: none; }
.notion-page pre, .notion-page blockquote { page-break-inside: avoid; }
}