Set role=presentation for header anchor links

lib/markdown.ts

@@ -32,7 +32,8 @@ md.core.ruler.push("anchor", (state) => {
 					attrs: [
 						["class", "header-anchor"],
 						["href", "#" + slug],
-						["aria-hidden", "true"]
+						["aria-hidden", "true"],
+						["role", "presentation"]
 					]
 				}),
 				Object.assign(new state.Token("html_block", "", 0), { content: token.markup }),
@@ -46,4 +47,4 @@ md.core.ruler.push("anchor", (state) => {
 
 export function render(text: string): string {
 	return md.render(text);
-}
+}

site/css/main.scss

@@ -4,7 +4,7 @@
 // Fonts
 $sansSerif: Avenir, Lucida Grande, Arial, sans-serif;
 $serif: Charter, Georgia, serif;
-$monospace: SF Mono, Courier New, monospace;
+$monospace: SF Mono, monospace;
 
 // General
 body {
@@ -91,7 +91,9 @@ article {
 				font-family: $monospace;
 				color: var(--accent-color);
 				user-select: none;
+				text-decoration: none;
 
+				// hide link destination for header anchor links
 				&::before, &::after { content: ""; }
 			}
 		}
@@ -114,17 +116,11 @@ article {
 			font-family: $monospace;
 			color: var(--secondary-ui-text-color);
 		}
-		pre {
-			&::before, &::after {
-				content: "```";
-				display: block;
-				background: none;
-				color: var(--secondary-ui-text-color);
-			}
-			code::before, code::after {
-				content: "";
-				display: none;
-			}
+		pre code::before,
+		pre code::after {
+			// we don't show the decorations for pre blocks, because it can interfere with scrolling horizontally
+			content: "";
+			display: none;
 		}
 		strong::before, strong::after {
 			content: "**";
@@ -285,8 +281,8 @@ a {
 }
 
 pre {
-	overflow: scroll;
-	
+	overflow-x: scroll;
+
 	-moz-tab-size: 4;
 	-o-tab-size: 4;
 	tab-size: 4;

site/css/syntax-highlighting.css

@@ -8,11 +8,10 @@ Modified to use colors from CSS vars, defined in theme.scss
 	overflow-x: auto;
 	padding: 0.5em;
 	color: var(--atom-mono-1);
-	
+	background: var(--atom-base);
 }
 
 .hljs > code {
-	background: var(--atom-base);
 	display: block;
 }
 
@@ -83,4 +82,4 @@ Modified to use colors from CSS vars, defined in theme.scss
 
 .hljs-link {
 	text-decoration: underline;
-}
+}

site/js/comments.js

@@ -1,4 +1,12 @@
-fetchComments();
+let commentsLoaded = false;
+const details = document.getElementById("comments-container");
+details.addEventListener("toggle", (even) => {
+	if (details.open && !commentsLoaded) {
+		fetchComments().then(() => {
+			commentsLoaded = true;
+		});
+	}
+});
 
 async function fetchComments() {
 	const res = await fetch(`/comments?id=${permalink}`);