Sort out blog images

This commit is contained in:
Robert Marshall 2020-01-04 12:33:18 +00:00
parent e77298ae54
commit b68f7736c8
2 changed files with 147 additions and 111 deletions

View file

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

View file

@ -1,7 +1,30 @@
@import "colours.less"; @import "colours.less";
code { .blog-post {
background: #fff; &__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 {
border-radius: 4px; border-radius: 4px;
margin-bottom: 10px; margin-bottom: 10px;
overflow: auto; overflow: auto;
@ -9,21 +32,91 @@ code {
margin: 0; margin: 0;
tab-size: 4; tab-size: 4;
-moz-tab-size: 4; -moz-tab-size: 4;
}
.image { /**
padding: 5px; * Obsidian style
background: @control2; * ported by Alexander Marenin (http://github.com/ioncreature)
display: inline-block; */
text-align: center; &.hljs {
max-width: 100%;
img {
display: block; display: block;
overflow-x: auto;
padding: 0.5em;
background: #282b2e;
color: #e0e2e4;
} }
span { .hljs-keyword,
font-size: 0.8em; .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; 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;
}