From b68f7736c87b0de9100915b071b8797108b13539 Mon Sep 17 00:00:00 2001
From: Robert Marshall <rob@robware.uk>
Date: Sat, 4 Jan 2020 12:33:18 +0000
Subject: [PATCH] Sort out blog images

---
 Website/Views/Blog/Entry.cshtml |  36 +++++-
 Website/wwwroot/css/blog.less   | 222 ++++++++++++++++----------------
 2 files changed, 147 insertions(+), 111 deletions(-)

diff --git a/Website/Views/Blog/Entry.cshtml b/Website/Views/Blog/Entry.cshtml
index 0868cf9..49fab79 100644
--- a/Website/Views/Blog/Entry.cshtml
+++ b/Website/Views/Blog/Entry.cshtml
@@ -4,6 +4,38 @@
 	ViewData["Title"] = Model.Title;
 }
 
-@Html.Raw(Model.ContentHtml)
+<article class="blog-post">
+	@Html.Raw(Model.ContentHtml)
+</article>
 
-<small>Posted on @Model.Timestamp</small>
\ No newline at end of file
+<small>Posted on @Model.Timestamp</small>
+
+<script type="text/javascript">
+	function adornImage(image, append) {
+		var parent = image.parentNode;
+		parent.removeChild(image);
+		image.className = "blog-post__image-container--image";
+
+		var tagLine = document.createElement("span");
+		tagLine.className = "blog-post__image-container--tagline";
+		tagLine.innerText = image.getAttribute("alt");
+
+		var container = document.createElement("div");
+		container.className = "blog-post__image-container";
+		container.appendChild(image);
+		container.appendChild(tagLine);
+
+		var containerContainer = document.createElement("div");
+		containerContainer.className = "blog-post__image-container--container";
+		containerContainer.appendChild(container);
+
+		if (append)
+			parent.appendChild(containerContainer);
+		else
+			parent.prepend(containerContainer);
+	}
+
+
+	document.querySelectorAll("p>img:only-child,p>img:first-child").forEach(image => adornImage(image, false));
+	document.querySelectorAll("p>img:last-child").forEach(image => adornImage(image, true));
+</script>
\ No newline at end of file
diff --git a/Website/wwwroot/css/blog.less b/Website/wwwroot/css/blog.less
index 29a885b..5014a06 100644
--- a/Website/wwwroot/css/blog.less
+++ b/Website/wwwroot/css/blog.less
@@ -1,29 +1,122 @@
 @import "colours.less";
 
-code {
-	background: #fff;
-	border-radius: 4px;
-	margin-bottom: 10px;
-	overflow: auto;
-	padding: 6px;
-	margin: 0;
-	tab-size: 4;
-	-moz-tab-size: 4;
-}
+.blog-post {
+	&__image-container {
+		max-width: 100%;
+		padding: 10px;
+		background: @Grey-200;
+		display: inline-block;
+		margin: auto;
+		text-align: center;
+		border-radius: 4px;
 
-.image {
-	padding: 5px;
-	background: @control2;
-	display: inline-block;
-	text-align: center;
-	max-width: 100%;
+		&--container{
+			text-align: center;
+		}
 
-	img {
-		display: block;
+		&--image {
+			max-width: 100%;
+		}
+
+		&--tagline {
+			margin-top: 10px;
+			display: block;
+		}
 	}
 
-	span {
-		font-size: 0.8em;
+	code {
+		border-radius: 4px;
+		margin-bottom: 10px;
+		overflow: auto;
+		padding: 6px;
+		margin: 0;
+		tab-size: 4;
+		-moz-tab-size: 4;
+
+		/**
+		 * Obsidian style
+		 * ported by Alexander Marenin (http://github.com/ioncreature)
+		 */
+		&.hljs {
+			display: block;
+			overflow-x: auto;
+			padding: 0.5em;
+			background: #282b2e;
+			color: #e0e2e4;
+		}
+
+		.hljs-keyword,
+		.hljs-selector-tag,
+		.hljs-literal,
+		.hljs-selector-id {
+			color: #93c763;
+		}
+
+		.hljs-number {
+			color: #ffcd22;
+		}
+
+		.hljs-attribute {
+			color: #668bb0;
+		}
+
+		.hljs-code,
+		.hljs-class .hljs-title,
+		.hljs-section {
+			color: white;
+		}
+
+		.hljs-regexp,
+		.hljs-link {
+			color: #d39745;
+		}
+
+		.hljs-meta {
+			color: #557182;
+		}
+
+		.hljs-tag,
+		.hljs-name,
+		.hljs-bullet,
+		.hljs-subst,
+		.hljs-emphasis,
+		.hljs-type,
+		.hljs-built_in,
+		.hljs-selector-attr,
+		.hljs-selector-pseudo,
+		.hljs-addition,
+		.hljs-variable,
+		.hljs-template-tag,
+		.hljs-template-variable {
+			color: #8cbbad;
+		}
+
+		.hljs-string,
+		.hljs-symbol {
+			color: #ec7600;
+		}
+
+		.hljs-comment,
+		.hljs-quote,
+		.hljs-deletion {
+			color: #818e96;
+		}
+
+		.hljs-selector-class {
+			color: #A082BD
+		}
+
+		.hljs-keyword,
+		.hljs-selector-tag,
+		.hljs-literal,
+		.hljs-doctag,
+		.hljs-title,
+		.hljs-section,
+		.hljs-type,
+		.hljs-name,
+		.hljs-strong {
+			font-weight: bold;
+		}
 	}
 }
 
@@ -58,92 +151,3 @@ code {
 		background: @Grey-300;
 	}
 }
-
-/**
- * Obsidian style
- * ported by Alexander Marenin (http://github.com/ioncreature)
- */
-
-.hljs {
-	display: block;
-	overflow-x: auto;
-	padding: 0.5em;
-	background: #282b2e;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-literal,
-.hljs-selector-id {
-	color: #93c763;
-}
-
-.hljs-number {
-	color: #ffcd22;
-}
-
-.hljs {
-	color: #e0e2e4;
-}
-
-.hljs-attribute {
-	color: #668bb0;
-}
-
-.hljs-code,
-.hljs-class .hljs-title,
-.hljs-section {
-	color: white;
-}
-
-.hljs-regexp,
-.hljs-link {
-	color: #d39745;
-}
-
-.hljs-meta {
-	color: #557182;
-}
-
-.hljs-tag,
-.hljs-name,
-.hljs-bullet,
-.hljs-subst,
-.hljs-emphasis,
-.hljs-type,
-.hljs-built_in,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-addition,
-.hljs-variable,
-.hljs-template-tag,
-.hljs-template-variable {
-	color: #8cbbad;
-}
-
-.hljs-string,
-.hljs-symbol {
-	color: #ec7600;
-}
-
-.hljs-comment,
-.hljs-quote,
-.hljs-deletion {
-	color: #818e96;
-}
-
-.hljs-selector-class {
-	color: #A082BD
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-literal,
-.hljs-doctag,
-.hljs-title,
-.hljs-section,
-.hljs-type,
-.hljs-name,
-.hljs-strong {
-	font-weight: bold;
-}