From 805f7ae3180436efb32ffc2deafcbac3f7230286 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 8 Jun 2026 22:24:28 +0200
Subject: [PATCH] Headings with lines to divide the page

---
 static/css/markdown.css       | 37 +++++++++++++++++++++++++++++------
 static/js/marked_position.mjs |  7 ++++++-
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/static/css/markdown.css b/static/css/markdown.css
index e29ec9e..bd68c7b 100644
--- a/static/css/markdown.css
+++ b/static/css/markdown.css
@@ -1,11 +1,27 @@
 .el-node-markdown {
 	padding-top: 16px;
 
-	h1 {
-		border-bottom: 1px solid #ccc;
+	.heading-container {
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		grid-gap: 16px;
+		white-space: nowrap;
+		align-items: center;
 		margin-top: 32px;
 		margin-bottom: 8px;
 
+		&:first-child {
+			margin-top: 32px;
+		}
+
+		.line {
+			border-bottom: 1px solid var(--line-color);
+		}
+	}
+
+	h1 {
+		border-bottom: 1px solid #ccc;
+
 		display: inline-block;
 		font-size: 1.25em;
 
@@ -14,24 +30,33 @@
 		background-color: var(--color1);
 		padding: 4px 12px;
 
-		&:first-child {
-			margin-top: 32px;
-		}
+		margin-top: 0px;
+		margin-bottom: 0px;
+
 	}
 
 	h2 {
 		font-size: 1.25em;
-		margin-top: 32px;
+		margin-top: 0px;
 		margin-bottom: 0px;
 		color: var(--color1);
 	}
 
+	h2+.line,
+	h3+.line {
+		border-bottom: none !important;
+	}
+
 	h3:before {
 		font-size: 1.0em;
 		content: "> ";
 		color: var(--color1);
 	}
 
+	a {
+		color: var(--color1);
+	}
+
 	p {
 		line-height: 150%;
 	}
diff --git a/static/js/marked_position.mjs b/static/js/marked_position.mjs
index 62a6996..175f490 100644
--- a/static/js/marked_position.mjs
+++ b/static/js/marked_position.mjs
@@ -114,7 +114,12 @@ export class MarkedPosition {
 			renderer: {
 				heading(token) {
 					const content = this.parser.parseInline(token.tokens)
-					return `<h${token.depth} ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${content}</h${token.depth}>\n`
+					return `
+						<div class="heading-container">
+							<h${token.depth} ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${content}</h${token.depth}>\n
+							<div class="line"></div>\n
+						</div>
+					`
 				},
 
 				paragraph(token) {