Sort out blog images

Website/Views/Blog/Entry.cshtml

@@ -4,6 +4,38 @@
 	ViewData["Title"] = Model.Title;
 }
 
+<article class="blog-post">
 	@Html.Raw(Model.ContentHtml)
+</article>
 
 <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>

Website/wwwroot/css/blog.less

@@ -1,7 +1,30 @@
 @import "colours.less";
 
+.blog-post {
+	&__image-container {
+		max-width: 100%;
+		padding: 10px;
+		background: @Grey-200;
+		display: inline-block;
+		margin: auto;
+		text-align: center;
+		border-radius: 4px;
+
+		&--container{
+			text-align: center;
+		}
+
+		&--image {
+			max-width: 100%;
+		}
+
+		&--tagline {
+			margin-top: 10px;
+			display: block;
+		}
+	}
+
 	code {
-	background: #fff;
 		border-radius: 4px;
 		margin-bottom: 10px;
 		overflow: auto;
@@ -9,66 +32,17 @@ code {
 		margin: 0;
 		tab-size: 4;
 		-moz-tab-size: 4;
-}
-
-.image {
-	padding: 5px;
-	background: @control2;
-	display: inline-block;
-	text-align: center;
-	max-width: 100%;
-
-	img {
-		display: block;
-	}
-
-	span {
-		font-size: 0.8em;
-	}
-}
-
-.blog-navigation {
-	display: flex;
-	justify-content: space-between;
-
-	&__next {
-		margin-left: auto;
-	}
-}
-
-.edit-form {
-	&__title {
-		display: flex;
-
-		&__label {
-			flex: 0 0 auto;
-			margin-right: 5px;
-		}
-
-		&__input {
-			flex: 1 1 auto;
-		}
-	}
-}
-
-.post-list {
-	border-collapse: collapse;
-
-	&__post:hover {
-		background: @Grey-300;
-	}
-}
 
 		/**
 		 * Obsidian style
 		 * ported by Alexander Marenin (http://github.com/ioncreature)
 		 */
-
-.hljs {
+		&.hljs {
 			display: block;
 			overflow-x: auto;
 			padding: 0.5em;
 			background: #282b2e;
+			color: #e0e2e4;
 		}
 
 		.hljs-keyword,
@@ -82,10 +56,6 @@ code {
 			color: #ffcd22;
 		}
 
-.hljs {
-	color: #e0e2e4;
-}
-
 		.hljs-attribute {
 			color: #668bb0;
 		}
@@ -147,3 +117,37 @@ code {
 		.hljs-strong {
 			font-weight: bold;
 		}
+	}
+}
+
+.blog-navigation {
+	display: flex;
+	justify-content: space-between;
+
+	&__next {
+		margin-left: auto;
+	}
+}
+
+.edit-form {
+	&__title {
+		display: flex;
+
+		&__label {
+			flex: 0 0 auto;
+			margin-right: 5px;
+		}
+
+		&__input {
+			flex: 1 1 auto;
+		}
+	}
+}
+
+.post-list {
+	border-collapse: collapse;
+
+	&__post:hover {
+		background: @Grey-300;
+	}
+}