Add Markdown-style decorations to articles

site/css/main.scss

@@ -43,17 +43,65 @@ article {
 	margin-bottom: 75px;
 	color: var(--content-text-color);
 
+	h1::before { content: "#"; }
+	h2::before { content: "##"; }
+	h3::before { content: "###"; }
+	h1::before, h2::before, h3::before {
+		font-family: $monospace;
+		color: var(--accent-color);
+		margin-right: 10px;
+	}
+	@media (min-width: 768px) {
+		a::before { content: "["; }
+		a::after { content: "](" attr(href) ")"; word-wrap: break-word; }
+		a::before, a::after {
+			color: var(--secondary-ui-text-color);
+			font-family: $monospace;
+			font-size: 14px;
+			text-decoration: none !important;
+		}
+		a { text-decoration: none; }
+	}
+	code::before, code::after {
+		content: "`";
+		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;
+		}
+	}
+	strong::before, strong::after {
+		content: "**";
+		font-family: $monospace;
+		color: var(--secondary-ui-text-color);
+	}
+	em::before, em::after {
+		content: "_";
+		font-family: $monospace;
+		color: var(--secondary-ui-text-color);
+	}
+
 	&::after {
 		content: "";
 		width: calc(100% - 2 * 30px); // account for .container padding, don't overflow
 		height: 1px;
-		background-image: linear-gradient(to right, var(--accent-color), var(--shadow-color));
+		background-color: var(--accent-color);
 		position: absolute;
 	}
 
 	.article-title {
 		margin-top: 20px;
 		margin-bottom: 0;
+		font-size: 2rem;
 
 		> a {
 			color: var(--content-text-color);
@@ -63,6 +111,9 @@ article {
 			&:hover {
 				color: var(--accent-color);
 			}
+			&::before, &::after {
+				content: "";
+			}
 		}
 	}
 
@@ -164,6 +215,7 @@ article {
 
 a {
 	color: var(--accent-color);
+	text-decoration: underline;
 
 	&.fancy-link {
 		position: relative;

site/css/syntax-highlighting.css

@@ -8,7 +8,12 @@ Modified to use colors from CSS vars, defined in theme.scss
 	overflow-x: auto;
 	padding: 0.5em;
 	color: var(--atom-mono-1);
+	
+}
+
+.hljs > code {
 	background: var(--atom-base);
+	display: block;
 }
 
 .hljs-comment,

site/index.html.ejs

@@ -6,9 +6,7 @@ metadata.layout = "default.html.ejs"
 <div class="main">
 	<% for (const post of posts) { %>
 		<article itemscope itemtype="https://schema.org/BlogPosting">
-			<h2 class="article-title" itemprop="headline">
-				<%- fancyLink(post.metadata.title, post.metadata.permalink, `itemprop="url mainEntityOfPage"`) %>
-			</h2>
+			<h1 class="article-title" itemprop="headline"><a href="<%= post.metadata.permalink %>" itemprop="url mainEntityOfPage"><%= post.metadata.title %></a></h1>
 			<%- include("includes/article-meta.html.ejs", { metadata: post.metadata }) %>
 			<div class="article-content" itemprop="description">
 				<%- post.metadata.excerpt %>