CSS tweaks to make things less spaced out

_includes/postheader.html

@@ -1,4 +1,4 @@
-{% if include.post.title == page.title %}<h1>{% else %}<h2><a href="{{ include.post.url }}">{% endif %}
+{% if include.post.title == page.title %}<h1 class="blogpost">{% else %}<h2 class="bloglist"><a href="{{ include.post.url }}">{% endif %}
 {{ include.post.title }}
 {% if include.post.title == page.title %}</h1><span>{% else %}</a></h2><small>{% endif %}
 {{ include.post.date | date: "%B %-d, %Y" }}

_layouts/post.html

@@ -2,7 +2,7 @@
 {% include header.html %}
 		<main>
 			{% include postheader.html post=page %}
-			<p></p>
+			<p class="blogspacer"></p>
 			{{ content }}
 		</main>
 {% include footer.html %}

_posts/2022-02-16-86box-v3-2.md

@@ -40,7 +40,7 @@ The **Windows version** will remain on the existing Win32 user interface for now
 ### User interface
 
 * Added a **toolbar** with quick commands as well as emulation status
-* Added translations: 🇵🇱 **Polish** by [Fanta-Shokata](https://github.com/Fanta-Shokata), 🇺🇦 **Ukrainian** by **Олександр#9368** and [Danik2343](https://github.com/Danik2343)
+* Added translations: <span class="emoji">🇵🇱</span> **Polish** by [Fanta-Shokata](https://github.com/Fanta-Shokata), <span class="emoji">🇺🇦</span> **Ukrainian** by **Олександр#9368** and [Danik2343](https://github.com/Danik2343)
 * Added **API** for graceful shutdown without confirmation (WM_SHUTDOWN/0x8893 with WPARAM=1)
 * Changed **file selection windows** to pause emulation while they're open
 * Changed **title bar** to only contain the emulated machine name and 86Box version (emulation speed and mouse status are now on the toolbar)

_posts/2022-03-21-why-not-p3.md

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: "Why Not Pentium III?"
-description: "When does 'preservation' in emulation become impractical?"
+description: "When does “preservation” in emulation become impractical?"
 authors: ["richardg867"]
 image: "/assets/images/whynotp3/hero.png"
 ---

assets/css/style-print.css

@@ -36,6 +36,9 @@ a, a:visited {
 }
 
 /* Blog */
+p, ul, ol {
+	margin: 0.65em 0;
+}
 .image {
 	text-align: center;
 }
@@ -56,6 +59,16 @@ hr {
 	border-color: #808080;
 	width: 100%;
 }
+h1.blogpost, h2, h3 {
+	margin-bottom: 0.5em;
+}
+h2.bloglist {
+	margin: 0.5em 0.33em 0 0;
+	margin-bottom: 0.33em;
+}
+span.emoji {
+	font-family: Tweemoji Mozilla; /* work around Windows' lack of flags where supported (Firefox) */
+}
 table {
 	border: 1px solid #808080;
 }

assets/css/style-reduced.css

@@ -23,11 +23,11 @@ img {
 }
 img#icon, img#logo {
 	height: 70px;
-	margin-right: 20pt;
+	margin-right: 18pt;
 }
 a.navlink {
 	font-size: 15pt;
-	margin: 6pt;
+	margin: 4pt;
 }
 nav { /* requires JS on IE6 */
 	display: inline;
@@ -93,6 +93,16 @@ hr {
 	border-color: #808080;
 	width: 100%;
 }
+h1.blogpost, h2, h3 {
+	margin-bottom: 0.5em;
+}
+h2.bloglist {
+	margin: 0.5em 0.33em 0 0;
+	margin-bottom: 0.33em;
+}
+p.blogspacer {
+	margin-bottom: 0.5em;
+}
 span.emoji {
 	display: none;
 }

assets/css/style.css

@@ -39,7 +39,7 @@ body {
 body > header {
 	/* background-color: #8ca0ff; */
 	grid-area: head;
-	padding: 30pt 30pt;
+	padding: 28pt 28pt;
 }
 img#icon {
 	max-height: 75px;
@@ -52,10 +52,10 @@ body > nav {
 	align-items: center;
 	justify-content: right;
 	font-size: 15pt;
-	padding: 30pt 30pt;
+	padding: 28pt 28pt;
 }
 body > nav > a {
-	margin: 0 20pt;
+	margin: 0 15pt;
 }
 @media (max-width: 768px) {
 	body > header {
@@ -150,6 +150,9 @@ div#socialold {
 }
 
 /* Blog */
+p, ul, ol {
+	margin: 0.65em 0;
+}
 .image {
 	text-align: center;
 }
@@ -173,12 +176,23 @@ div.imagecaption {
 	display: inline;
 }
 div.imagecaption > p {
-	margin: 0px;
+	margin-top: 0.5em;
+	margin-bottom: 0px;
 }
 hr {
 	border-color: #808080;
 	width: 100%;
 }
+h1.blogpost, h2, h3 {
+	margin-bottom: 0.5em;
+}
+h2.bloglist {
+	margin: 0.5em 0.33em 0 0;
+	margin-bottom: 0.33em;
+}
+p.blogspacer {
+	margin-bottom: 0.5em;
+}
 span.emoji {
 	font-family: Tweemoji Mozilla; /* work around Windows' lack of flags where supported (Firefox) */
 }

assets/js/style-reduced.js

@@ -6,14 +6,14 @@ function getNaturalWidth(img) {
 	if (img.naturalWidth) {
 		return img.naturalWidth;
 	} else {
-		/* Cache images through src to avoid memory waste. */
-		var img2 = imgCache[img.src];
-		if (!img2) {
-			img2 = new Image();
-			img2.src = img.src;
-			imgCache[img.src] = img2;
+		/* Cache images by src to avoid wasting memory. */
+		var imgObj = imgCache[img.src];
+		if (!imgObj) {
+			imgObj = new Image();
+			imgObj.src = img.src;
+			imgCache[img.src] = imgObj;
 		}
-		return img2.width;
+		return imgObj.width;
 	}
 }
 
@@ -34,7 +34,8 @@ function fixPngs() {
 	/* Fix icon and logo. */
 	for (var i = 0; i < Math.min(2, document.images.length); i++) {
 		var img = document.images[i];
-		img.style.paddingRight = 0; /* padding counts as space for AlphaImageLoader so swap it for margin */
+		var oldpad = img.style.paddingRight; /* padding counts as space for AlphaImageLoader so swap it for margin */
+		img.style.paddingRight = 0;
 		var oldsrc = img.src;
 		var oldw = img.clientWidth;
 		var oldh = img.clientHeight;
@@ -42,7 +43,7 @@ function fixPngs() {
 		img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + oldsrc + "', sizingMethod='scale')";
 		img.style.width = oldw + 'px';
 		img.style.height = oldh + 'px';
-		img.style.marginRight = '20pt';
+		img.style.marginRight = oldpad;
 	}
 }
 if (document.all && /MSIE (5\.5|6)/.test(navigator.userAgent))

blog.md

@@ -6,12 +6,12 @@ title: "Blog"
 # The 86Box Blog
 
 {% for post in site.posts %}
-<div>
+<div class="bloglist">
 	{% include postheader.html post=post %}
 	<p>{{ post.description }}</p>
+</div>
 {% if forloop.last %}
 {% else %}
-	<hr/>
+<hr/>
 {% endif %}
-</div>
 {% endfor %}