Initial commit

templates/_handleiding_stijl.html

@@ -0,0 +1,30 @@
+<style>
+    /* Opmaak van de inhoud van een handleiding (lezen én editor) */
+    .hl-inhoud { line-height: 1.65; font-size: 15px; color: var(--text); max-width: 860px; }
+    .hl-inhoud h2 { font-size: 1.25rem; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--primary-light);
+                    color: var(--primary-color); scroll-margin-top: 80px; }
+    .hl-inhoud h3 { font-size: 1.08rem; margin: 20px 0 8px; scroll-margin-top: 80px; }
+    .hl-inhoud h4 { font-size: 1rem; margin: 16px 0 6px; }
+    .hl-inhoud p { margin: 0 0 12px; }
+    .hl-inhoud ol, .hl-inhoud ul { margin: 0 0 14px; padding-left: 26px; }
+    .hl-inhoud li { margin: 4px 0; }
+    .hl-inhoud ol > li::marker { font-weight: 700; color: var(--primary-color); }
+    .hl-inhoud code, .hl-inhoud kbd { background: var(--surface-muted); border: 1px solid var(--border); border-radius: 4px;
+                                       padding: 1px 5px; font-size: .88em; word-break: break-all; }
+    .hl-inhoud pre { background: #0f172a; color: #e2e8f0; padding: 12px 14px; border-radius: 8px; overflow-x: auto;
+                     white-space: pre-wrap; word-break: break-all; }
+    .hl-inhoud pre code { background: none; border: 0; color: inherit; padding: 0; }
+    .hl-inhoud img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; margin: 6px 0;
+                     box-shadow: var(--shadow-sm); }
+    .hl-inhoud a { color: var(--primary-color); }
+    .hl-inhoud blockquote { margin: 0 0 12px; padding: 6px 14px; border-left: 4px solid var(--border-strong); color: var(--text-muted); }
+    .hl-inhoud table { border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: .93em; }
+    .hl-inhoud th, .hl-inhoud td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
+    .hl-inhoud th { background: var(--surface-muted); }
+    .hl-inhoud mark { background: #fef08a; padding: 0 2px; }
+    .hl-inhoud .tip, .hl-inhoud .let-op, .hl-inhoud .info { padding: 10px 14px; border-radius: 8px; margin: 0 0 14px; border-left: 4px solid; }
+    .hl-inhoud .tip { background: var(--success-bg); border-color: var(--success); color: var(--success-text); }
+    .hl-inhoud .let-op { background: var(--warning-bg); border-color: var(--warning); color: var(--warning-text); }
+    .hl-inhoud .info { background: var(--info-bg); border-color: var(--info); color: var(--info-text); }
+    .hl-inhoud .tip > :last-child, .hl-inhoud .let-op > :last-child, .hl-inhoud .info > :last-child { margin-bottom: 0; }
+</style>