support for subtitles

_layouts/post.html

@@ -7,10 +7,15 @@ pagestyle: posts
 		<a href="{{ site.base-url }}{{ page.url }}">
 			{{ page.title }}
 		</a>
+	</h1>
 	<time datetime="{{ page.date | date_to_xmlschema }}" class="post-date">
 		{{ page.date | date: "%B %e, %Y" }}
 	</time>
-	</h1>
+	{% if page.subtitle %}
+	<h2>
+		{{ page.subtitle }}
+	</h2>
+	{% endif %}
 	{% if page.tags.size > 0 %}
 	<ol class="tags-list">
 		{% for page_tag in page.tags %}
@@ -33,12 +38,12 @@ pagestyle: posts
 <nav class="page-links section">
 {% if page.previous %}
 <a class="page-prev" href="{{ site.base-url }}{{ page.previous.url }}" title="{{ page.previous.title }}">
-	<span class="prev"></span>{{ page.previous.title | truncate: 25 }}
+	<span class="prev"></span>{{ page.previous.title | truncate: 30 }}
 </a>
 {% endif %}
 {% if page.next %}
 <a class="page-next" href="{{ site.base-url }}{{ page.next.url }}" title="{{ page.next.title }}">
-	{{ page.next.title | truncate: 25 }}<span class="next"></span>
+	{{ page.next.title | truncate: 30 }}<span class="next"></span>
 </a>
 {% endif %}
 </nav>

css/posts.scss

@@ -17,18 +17,35 @@ kbd {
 	color: black;
 }
 
+blockquote {
+	border-left: 0.4em solid darkgreen;
+	margin: 0;
+	padding: 0.2em 1em;
+	background: #061616;
+}
+
 aside {
 	background-color: #003535; /*darkcyan;*/
 	padding: 0.5em;
 }
 
+aside:not(:last-child) {
+	border-left: 0.2em solid darkgreen;
+	float: right;
+	width: 40%;
+	margin: 1em;
+	margin-right: initial;
+	padding: 0.2em 0.5em;
+	text-align: left;
+}
+
 aside>blockquote {
-	padding: 0em 0.5em;
+	padding: 0.1em 0.5em;
 	margin: 0;
 	text-align: left;
 }
 
-aside>p {
+aside> blockquote + p {
 	text-align: right;
 }
 
@@ -59,9 +76,27 @@ ol.tags-list li {
 	display: inline-block;
 }
 
+.danger {
+	border-left: 0.3em solid darkred;
+	margin: 0;
+	padding: 0.5em 1em;
+	background: #061616;
+	border-radius: 0.2em;
+}
+
+.danger::before {
+	content: "Warning!";
+	font-weight: bold;
+	text-transform: uppercase;
+	color: crimson;
+	padding-right: 1em;
+	display: block;
+	letter-spacing: 0.2em;
+}
+
 /*
 From http://drewsilcock.co.uk/proper-linenumbers/
- */
+*/
 
 .highlight {
 	margin: 0;
@@ -75,11 +110,11 @@ From http://drewsilcock.co.uk/proper-linenumbers/
 	margin: 0;
 }
 
-.highlight .code, .highlight .gutter {
+.highlight .code, .highlight .gutter, .rouge-gutter, .rouge-code {
 	padding: 0.5em;
 }
 
-.highlight .gutter {
+.highlight .gutter, .rouge-gutter {
 	opacity: 0.4;
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
@@ -88,6 +123,7 @@ From http://drewsilcock.co.uk/proper-linenumbers/
 	-ms-user-select: none;
 	user-select: none;
 	background-color: #454545;
+	text-align: right;
 }
 
 .comments {
@@ -147,7 +183,7 @@ right: 0;
 height: 100%;
 width: 100%;
 }
- */
+*/
 
 .footnotes li {
 	padding: 0;
@@ -159,18 +195,36 @@ header>h1>a:link, header>h1>a:visited {
 }
 
 @media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) {
-	.post-title h1 {
+	.post-title {
 		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+	}
+	.post-title h1 {
 		margin: 0;
 		margin-bottom: 0.5em;
 		padding: 0;
+		flex-basis: 75%;
 	}
 	.post-title h1>a {
-		flex: 2;
+		line-height: 1.2em;
 	}
 	.post-date {
 		border-left: solid 0.2em silver;
 		padding-left: 0.5em;
+		margin: auto 0;
+	}
+
+	.post-title>h2 {
+		flex-basis: 50%;
+		margin: auto 0;
+	}
+
+	.post-title>ol.tags-list {
+		flex-basis: 50%;
+		text-align: right;
+		flex-flow: row-reverse;
+		margin-left: auto;
 	}
 	a.page-prev {
 		float: left;