Prefer HTML over Liquid Templates

While Liquid is powerful, it is completely unreadable for many things, and actively makes documents harder to read. So instead of relying on it for everything, why not just use HTML5 for the page?

The change reduces the parsing overhead for browser by about 30% through reducing the number of useless <div> elements. Additionally the CSS became easier to read as well.

_includes/blocks/code.liquid

@@ -1 +1 @@
-{% capture content %}<code class="content">{{ include.content }}</code>{% endcapture %}{% include blocks/_base.liquid type="code" content=content float=include.float align=include.align %}
+<code class="block {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}">{{ include.content }}</code>

_includes/blocks/details.liquid

@@ -1 +1 @@
-{% capture content %}<details class="content {% if include.align %}{{ include.align }}{% endif %}" {% if include.open %}open{% endif %}><summary data-heading="{{ include.level | default: 0 }}">{{ include.title }}</summary>{{ include.content }}</details>{% endcapture %}{% include blocks/_base.liquid type="details" content=content float=include.float align=include.align %}
+<details class="block {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}" {% if include.open %}open{% endif %}><summary data-heading="{{include.level}}"><h{{include.level}}>{{ include.title }}</h{{include.level}}></summary>{{ include.content }}</details>

_includes/blocks/heading.liquid

@@ -1 +1 @@
-{% capture content %}<h{{ include.level | default: 1 }} class="content {% if include.align %}{{ include.align }}{% endif %}">{{ include.content }}</h{{ include.level | default: 1}}>{% endcapture %}{% include blocks/_base.liquid type="heading" content=content float=include.float align=include.align %}
+<h{{ include.level | default: 1 }} class="block {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}">{{ include.content }}</h{{ include.level | default: 1 }}>

_includes/blocks/list.liquid

@@ -1 +1 @@
-{% capture content %}{% if include.ordered %}<ol>{% else %}<ul>{% endif %}{{ include.content }}{% if include.ordered %}</ol>{% else %}</ul>{% endif %}{% endcapture %}{% include blocks/_base.liquid type="list" content=content float=include.float align=include.align %}
+<{% if include.ordered %}ol{% else %}ul{% endif %} class="block {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}">{{ include.content }}{% if include.ordered %}</ol>{% else %}</ul>{% endif %}

_includes/blocks/media.liquid

@@ -1,5 +1,5 @@
 {% assign file_info = site.static_files | where: "path", include.url %}
-{% capture content %}
+<media class="block {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %} {% if include.player %}player{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}">
 	{% if include.player %}
 	<div class="top">
 		<select class="variant"></select>
@@ -76,6 +76,4 @@
 	{% endif %}
 	{% if include.link %}</a>{% endif %}
 	{% if include.caption %}<figcaption>{{ include.caption }}</figcaption>{% endif %}
-{% endcapture %}
+</media>
-{% if include.player %}{% assign class = include.type | append: " player" %}{% else %}{% assign class = include.type %}{% endif %}
-{% include blocks/_base.liquid type="media" class=class content=content float=include.float align=include.align id=include.id %}

_includes/blocks/paragraph.liquid

@@ -1 +1 @@
-{% capture content %}<p class="content">{{ include.content }}</p>{% endcapture %}{% include blocks/_base.liquid type="paragraph" content=content float=include.float align=include.align %}
+<p class="block {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}">{{ include.content }}</p>

_includes/blocks/table.liquid

@@ -1 +1 @@
-{% capture content %}<table class="content">{{ include.content }}</table>{% if include.caption %}<figcaption>{{ include.caption }}</figcaption>{% endif %}{% endcapture %}{% include blocks/_base.liquid type="table" content=content float=include.float align=include.align %}
+<div class="block block-table {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}""><table>{{ include.content }}</table>{% if include.caption %}<figcaption>{{ include.caption }}</figcaption>{% endif %}</div>

_includes/inline/code.liquid

@@ -1 +1 @@
-<code class="inline inline-code">{{ include.content }}</code>
+<code>{{ include.content }}</code>

_sass/_article.scss

@@ -115,3 +115,7 @@ article > .meta > .tags > .tag:not(:last-child):after {
 	margin: 0;
 	padding: 0;
 }
+
+article {
+@import "_blocks.scss";
+}

_sass/_block-code.scss

@@ -1,11 +1,8 @@
 // --------------------------------------------------------------------------------
 // Block: Code
 // --------------------------------------------------------------------------------
-.block-code {
+code.block {
 	background: $theme-code-background;
-}
-
-.block-code > .content {
 	display: block;
 	padding: .25rem;
 	max-height: 10em;
@@ -19,9 +16,9 @@
 // --------------------------------------------------------------------------------
 // Inline: Code
 // --------------------------------------------------------------------------------
-.inline-code {
+code {
 	margin: 0;
-	padding: 0;
+	padding: .05rem .25em;
 	background: $theme-code-background;
 	font-family: monospace;
 	font-size: 1em;

_sass/_block-details.scss

@@ -1,19 +1,14 @@
 // --------------------------------------------------------------------------------
 // Details
 // --------------------------------------------------------------------------------
-.block-details {
+details.block {
 	margin: 0;
 	margin-left: -0.75rem;
 	margin-right: -0.75rem;
-	padding: 0;
-}
-
-.block-details > .content {
-	margin: 0;
 	padding: 0.75rem;
 }
 
-.block-details > .content > summary {
+details.block > summary {
 	margin-top: -0.75rem;
 	margin-left: -0.75rem;
 	margin-right: -0.75rem;
@@ -21,38 +16,68 @@
 	cursor: pointer;
 }
 
-.block-details > .content > summary[data-heading] {
+details.block > summary:has(h1),
+details.block > summary:has(h2),
+details.block > summary:has(h3),
+details.block > summary:has(h4),
+details.block > summary:has(h5),
+details.block > summary:has(h6),
+details.block > summary[data-heading] {
+	width: 100%;
 	font-variant: small-caps;
 	font-weight: bold;
 	padding: 0.5rem 0.75rem;
 }
 
-.block-details > .content > summary[data-heading="1"] {
+details.block > summary:has(h1),
+details.block > summary[data-heading="1"] {
 	font-size: 2.0rem;
 	background: $theme-article-heading-h1-background;
 }
 
-.block-details > .content > summary[data-heading="2"] {
+details.block > summary:has(h2),
+details.block > summary[data-heading="2"] {
 	font-size: 1.8rem;
 	background: $theme-article-heading-h2-background;
 }
 
-.block-details > .content > summary[data-heading="3"] {
+details.block > summary:has(h3),
+details.block > summary[data-heading="3"] {
 	font-size: 1.6667rem;
 	background: $theme-article-heading-h3-background;
 }
 
-.block-details > .content > summary[data-heading="4"] {
+details.block > summary:has(h4),
+details.block > summary[data-heading="4"] {
 	font-size: 1.45rem;
 	background: $theme-article-heading-h4-background;
 }
 
-.block-details > .content > summary[data-heading="5"] {
+details.block > summary:has(h5),
+details.block > summary[data-heading="5"] {
 	font-size: 1.3333rem;
 	background: $theme-article-heading-h5-background;
 }
 
-.block-details > .content > summary[data-heading="6"] {
+details.block > summary:has(h6),
+details.block > summary[data-heading="6"] {
 	font-size: 1.2rem;
 	background: $theme-article-heading-h6-background;
 }
+
+details.block > summary > h1,
+details.block > summary > h2,
+details.block > summary > h3,
+details.block > summary > h4,
+details.block > summary > h5,
+details.block > summary > h6 {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+	font-size: inherit;
+	font-weight: inherit;
+	font-variant: inherit;
+	font-style: inherit;
+	color: inherit;
+	background-color: transparent;
+}

_sass/_block-heading.scss

@@ -1,50 +1,74 @@
-.block + .block-heading {
+// --------------------------------------------------------------------------------
+// Block: Heading
+// --------------------------------------------------------------------------------
+.block + h1.block,
+.block + h2.block,
+.block + h3.block,
+.block + h4.block,
+.block + h5.block,
+.block + h6.block {
 	margin-top: 2rem;
 }
 
-.block-heading {
+h1.block,
+h2.block,
+h3.block,
+h4.block,
+h5.block,
+h6.block {
 	margin: 0;
 	margin-left: -0.75rem;
 	margin-right: -0.75rem;
 	padding: 0;
-}
-
-.block-heading > .content {
 	font-variant: small-caps;
 	font-weight: bold;
 	padding: 0.5rem 0.75rem;
 }
 
-.block-heading > h1.content {
+h1.block > a,
+h2.block > a,
+h3.block > a,
+h4.block > a,
+h5.block > a,
+h6.block > a {
+	color: inherit !important;
+}
+
+h1.block {
 	font-size: 2.0rem;
 	background: $theme-article-heading-h1-background;
 }
 
-.block-heading > h2.content {
+h2.block {
 	font-size: 1.8rem;
 	background: $theme-article-heading-h2-background;
 }
 
-.block-heading > h3.content {
+h3.block {
 	font-size: 1.6667rem;
 	background: $theme-article-heading-h3-background;
 }
 
-.block-heading > h4.content {
+h4.block {
 	font-size: 1.45rem;
 	background: $theme-article-heading-h4-background;
 }
 
-.block-heading > h5.content {
+h5.block {
 	font-size: 1.3333rem;
 	background: $theme-article-heading-h5-background;
 }
 
-.block-heading > h6.content {
+h6.block {
 	font-size: 1.2rem;
 	background: $theme-article-heading-h6-background;
 }
 
-.block-heading + .block {
+h1.block + .block,
+h2.block + .block,
+h3.block + .block,
+h4.block + .block,
+h5.block + .block,
+h6.block + .block {
 	margin-top: .5rem;
 }

_sass/_block-list.scss

@@ -0,0 +1,23 @@
+// --------------------------------------------------------------------------------
+// Block: List
+// --------------------------------------------------------------------------------
+ul.block,
+ol.block {
+	overflow: hidden;
+}
+
+ul.block,
+ol.block {
+	margin: 0;
+	padding: 0 0 0 2em;
+}
+
+ul.block > li,
+ol.block > li {
+	padding: 0 0 0 0;
+}
+
+ul.block > li + li
+ol.block > li + li {
+	padding: .2em 0 0 0;
+}

_sass/_block-media.scss

@@ -1,20 +1,21 @@
 // --------------------------------------------------------------------------------
 // Block: Media
 // --------------------------------------------------------------------------------
-.block-media {
+media.block {
+	display: block;
 	position: relative;
 	overflow: hidden;
 }
 
-.block-media > a > .content,
+media.block > a > .content,
-.block-media > .content {
+media.block > .content {
 	width: 100%;
 	height: 100%;
 	object-fit: contain;
 	object-position: center center;
 }
 
-.block-media > figcaption {
+media.block > figcaption {
 	display: block;
 	margin: 0;
 	padding: .25em .5em;
@@ -28,19 +29,19 @@
 // --------------------------------------------------------------------------------
 $media-player-button-size: 1.5rem;
 
-.block-media.hide {
+media.block.hide {
 	cursor: none;
 }
 
-.block-media > .top,
+media.block > .top,
-.block-media > .bottom {
+media.block > .bottom {
 	display: block;
 	margin: 0;
 	padding: 0.2rem 0.5rem;
 	z-index: 1;
 }
 
-.block-media > .top {
+media.block > .top {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -62,17 +63,17 @@ $media-player-button-size: 1.5rem;
 	user-select: none;
 }
 
-.block-media.hide > .top {
+media.block.hide > .top {
 	top: -100%;
 	opacity: 0.0;
 	transition: top ease-in-out 500ms, opacity ease-in-out 500s;
 }
 
-.block-media > .top > .variant {
+media.block > .top > .variant {
 	flex-grow: 1;
 }
 
-.block-media > .bottom {
+media.block > .bottom {
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -94,13 +95,13 @@ $media-player-button-size: 1.5rem;
 	user-select: none;
 }
 
-.block-media.hide > .bottom {
+media.block.hide > .bottom {
 	bottom: -100%;
 	opacity: 0.0;
 	transition: top ease-in-out 500ms, opacity ease-in-out 500s;
 }
 
-.block-media > .bottom > .play {
+media.block > .bottom > .play {
 	display: block;
 	flex-grow: 0;
 	margin: 0;
@@ -113,10 +114,10 @@ $media-player-button-size: 1.5rem;
 	text-align: center;
 	user-select: none;
 }
-.block-media > .bottom > .play.playing {
+media.block > .bottom > .play.playing {
 }
 
-.block-media > .bottom > .time {
+media.block > .bottom > .time {
 	display: block;
 	margin: 0;
 	padding: 0;
@@ -131,7 +132,7 @@ $media-player-button-size: 1.5rem;
 	user-select: auto;
 }
 
-.block-media > .bottom > .progress {
+media.block > .bottom > .progress {
 	margin: 0;
 	padding: 0;
 	width: auto;
@@ -143,7 +144,7 @@ $media-player-button-size: 1.5rem;
 	display: block;
 	user-select: none;
 }
-.block-media > .bottom > .mute {
+media.block > .bottom > .mute {
 	display: block;
 	margin: 0;
 	padding: 0;
@@ -158,10 +159,10 @@ $media-player-button-size: 1.5rem;
 	text-align: center;
 	user-select: none;
 }
-.block-media > .bottom > .mute.muted {
+media.block > .bottom > .mute.muted {
 }
 
-.block-media > .bottom > .volume {
+media.block > .bottom > .volume {
 	display: block;
 	margin: 0;
 	padding: 0;
@@ -176,7 +177,7 @@ $media-player-button-size: 1.5rem;
 	user-select: none;
 }
 
-.block-media > .bottom > .fullscreen {
+media.block > .bottom > .fullscreen {
 	display: block;
 	margin: 0;
 	padding: 0;
@@ -193,19 +194,19 @@ $media-player-button-size: 1.5rem;
 }
 
 @media (max-width: 500px) {
-	.block-media > .bottom > .time {
+	media.block > .bottom > .time {
 		display: none;
 	}
 }
 @media (max-width: 350px) {
-	.block-media > .bottom > .volume {
+	media.block > .bottom > .volume {
 		display: none;
 	}
 }
 @media (max-width: 250px) {
-	.block-media > .bottom > .play,
+	media.block > .bottom > .play,
-	.block-media > .bottom > .mute,
+	media.block > .bottom > .mute,
-	.block-media > .bottom > .fullscreen {
+	media.block > .bottom > .fullscreen {
 		display: none;
 	}
 }
@@ -217,8 +218,8 @@ $media-player-button-size: 1.5rem;
 // --------------------------------------------------------------------------------
 // Block: Media > Video
 // --------------------------------------------------------------------------------
-.block-media > a > video,
+media.block > a > video,
-.block-media > video {
+media.block > video {
 	display: block;
 	width: 100%;
 	object-fit: contain;
@@ -228,8 +229,8 @@ $media-player-button-size: 1.5rem;
 // --------------------------------------------------------------------------------
 // Block: Media > Picture
 // --------------------------------------------------------------------------------
-.block-media > a > .content > img,
+media.block > a > img,
-.block-media > .content > img {
+media.block > img {
 	display: block;
 	width: 100%;
 }

_sass/_block-table.scss

@@ -1,6 +1,9 @@
 // --------------------------------------------------------------------------------
 // Block: Table
 // --------------------------------------------------------------------------------
+.block-table {
+}
+
 .block-table > table {
 	margin: 0;
 	padding: 0;
@@ -51,7 +54,7 @@
 	border-bottom: none;
 }
 
-.block-table > figcaption {
+.block-table > table + figcaption {
 	display: block;
 	margin: 0;
 	padding: .25em .5em;

_sass/_blocks.scss

@@ -41,11 +41,9 @@
 	clear: both;
 }
 
-.block.float + .block {
+.float + .block {
 	margin-top: 0em;
 }
-.block.float {
-}
 
 // --------------------------------------------------------------------------------
 // Align
@@ -74,32 +72,6 @@
 	text-align: center;
 }
 
-// --------------------------------------------------------------------------------
-// Block: Paragraph
-// --------------------------------------------------------------------------------
-
-// --------------------------------------------------------------------------------
-// Block: List
-// --------------------------------------------------------------------------------
-.block-list {
-	overflow: hidden;
-}
-
-.block-list > ul,
-.block-list > ol {
-	margin: 0;
-	padding: 0 0 0 2em;
-}
-
-.block-list > ul > li,
-.block-list > ol > li {
-	padding: 0 0 0 0;
-}
-.block-list > ul > li + li,
-.block-list > ol > li + li {
-	padding: .2em 0 0 0;
-}
-
 // --------------------------------------------------------------------------------
 // Specialized Blocks
 // --------------------------------------------------------------------------------
@@ -107,5 +79,6 @@
 @import "_block-columns.scss";
 @import "_block-details.scss";
 @import "_block-heading.scss";
+@import "_block-list.scss";
 @import "_block-media.scss";
 @import "_block-table.scss";

_sass/_content.scss

@@ -8,7 +8,6 @@ body > .content {
 
 @import "_breadcrumbs.scss";
 @import "_article.scss";
-@import "_blocks.scss";
 @import "_comments.scss";
 @import "_index.scss";
 @import "_pagination.scss";

assets/site.js

@@ -408,7 +408,7 @@ async function xmr_initialize_player(el) {
 
 async function xmr_initialize_players() {
 	// Figure out what to initialize.
-	let elements = document.querySelectorAll(".block-media.player");
+	let elements = document.querySelectorAll("media.player");
 	let stack = Array.from(elements);
 	console.debug("Initializing " + stack.length + " players...");