Move towards pure HTML5+CSS

_includes/blocks/column.liquid

@@ -1 +1 @@
-{% capture content %}<div class="content">{{ include.content }}</div>{% endcapture %}{% include blocks/_base.liquid type="column" content=content float=include.float align=include.align width=include.width %}
+<column>{{ include.content }}</column>

_includes/blocks/columns.liquid

@@ -1 +1,3 @@
-{% capture content %}<div class="content {% if include.valign %}valign-{{include.valign}}{% else %}valign-stretch{% endif %} {% if include.halign %}halign-{{include.halign}}{% else %}halign-stretch{% endif %}" style="{% if include.columns %}grid-template-columns: repeat({{ include.columns | default: 1 }}, 1fr);{% endif %}">{{ include.content }}</div>{% endcapture %}{% include blocks/_base.liquid type="columns" content=content float=include.float align=include.align %}
+<columns class="block {% if include.valign %}valign-{{include.valign}}{% else %}valign-stretch{% endif %} {% if include.halign %}halign-{{include.halign}}{% else %}halign-stretch{% endif %} {% 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 %}" count="{{ include.columns | default: 1 }}">
+{{ include.content }}
+</columns>

_includes/blocks/media.liquid

@@ -1,5 +1,5 @@
 {% assign file_info = site.static_files | where: "path", include.url %}
-<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 %}">
+<figure class="block block-media {% 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>
@@ -16,7 +16,6 @@
 	{% if include.link %}<a href="{% if include.link == true %}{{ include.url }}{% else %}{{ include.link }}{% endif %}" {% if include.caption %}alt="{{ include.caption }}"{% endif %} target="_blank">{% endif %}
 	{% if include.type == "image" %}
 		<picture
-			class="content"
 			{% if include.width %}width="{{ include.width }}"{% endif %}
 			{% if include.height %}height="{{ include.height }}"{% endif %}
 			{% if include.lazyload %}data-lazyload=""{% endif %}
@@ -33,7 +32,6 @@
 	{% elsif include.type == "video" %}
 		<video
 			{% if include.player %}{% else %}controls{% endif %}
-			class="content"
 
 			{% if include.width %}width="{{ include.width }}"{% endif %}
 			{% if include.height %}height="{{ include.height }}"{% endif %}
@@ -55,7 +53,6 @@
 	{% elsif include.type == "audio" %}
 		<audio
 			{% if include.player %}{% else %}controls{% endif %}
-			class="content"
 
 			{% if include.width %}width="{{ include.width }}"{% endif %}
 			{% if include.height %}height="{{ include.height }}"{% endif %}
@@ -76,4 +73,4 @@
 	{% endif %}
 	{% if include.link %}</a>{% endif %}
 	{% if include.caption %}<figcaption>{{ include.caption }}</figcaption>{% endif %}
-</media>
+</figure>

_sass/_block-columns.scss

@@ -1,80 +1,94 @@
 // --------------------------------------------------------------------------------
 // Columns
 // --------------------------------------------------------------------------------
-.block-columns {
+columns {
-}
-.block-columns > .content {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 3 - 5rem), 1fr));
 	grid-column-gap: 0.75rem;
 	grid-row-gap: 0.75rem;
 }
 
+columns[count="2"] {
+	grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 2 - 5rem), 1fr));
+}
+
+columns[count="3"] {
+	grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 3 - 5rem), 1fr));
+}
+
+columns[count="4"] {
+	grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 4 - 5rem), 1fr));
+}
+
 // Columns: Horizontal Alignment
-.block-columns > .content.halign-start,
+columns.halign-start,
-.block-columns > .content.halign-left {
+columns.halign-left {
 	align-items: start;
 }
 
-.block-columns > .content.halign-end,
+columns.halign-end,
-.block-columns > .content.halign-right {
+columns.halign-right {
 	align-items: end;
 }
 
-.block-columns > .content.halign-center,
+columns.halign-center,
-.block-columns > .content.halign-middle {
+columns.halign-middle {
 	align-items: center;
 }
 
-.block-columns > .content.halign-baseline,
+columns.halign-baseline,
-.block-columns > .content.halign-text {
+columns.halign-text {
 	align-items: baseline;
 }
 
-.block-columns > .content.halign-stretch,
+columns.halign-stretch,
-.block-columns > .content.halign-fill {
+columns.halign-fill {
 	align-items: stretch;
 }
 
-.block-columns > .content.valign-start,
+columns.valign-start,
-.block-columns > .content.valign-left {
+columns.valign-left {
 	justify-items: start;
 }
 
-.block-columns > .content.valign-end,
+columns.valign-end,
-.block-columns > .content.valign-right {
+columns.valign-right {
 	justify-items: end;
 }
 
-.block-columns > .content.valign-center,
+columns.valign-center,
-.block-columns > .content.valign-middle {
+columns.valign-middle {
 	justify-items: center;
 }
 
-.block-columns > .content.valign-baseline,
+columns.valign-baseline,
-.block-columns > .content.valign-text {
+columns.valign-text {
 	justify-items: baseline;
 }
 
-.block-columns > .content.valign-stretch,
+columns.valign-stretch,
-.block-columns > .content.valign-fill {
+columns.valign-fill {
 	justify-items: stretch;
 }
 
 // --------------------------------------------------------------------------------
 // Individual Column
 // --------------------------------------------------------------------------------
-.block-column {
+column {
 	padding: 0 0;
 }
 
-.block-column ~ .block-column {
+column ~ column {
 	margin-top: 0;
 }
 
 // --------------------------------------------------------------------------------
 // Fix Headings inside Columns
 // --------------------------------------------------------------------------------
-.block-column > .content > .block-heading {
+column > h1,
+column > h2,
+column > h3,
+column > h4,
+column > h5,
+column > h6 {
 	margin: 0;
 }

_sass/_block-media.scss

@@ -1,21 +1,24 @@
 // --------------------------------------------------------------------------------
 // Block: Media
 // --------------------------------------------------------------------------------
-media.block {
+figure.block-media {
 	display: block;
 	position: relative;
 	overflow: hidden;
 }
 
-media.block > a > .content,
+figure.block-media picture,
-media.block > .content {
+figure.block-media picture > img,
+figure.block-media video,
+figure.block-media audio {
+	display: block;
 	width: 100%;
-	height: 100%;
+	height: auto;
 	object-fit: contain;
 	object-position: center center;
 }
 
-media.block > figcaption {
+figure.block-media > figcaption {
 	display: block;
 	margin: 0;
 	padding: .25em .5em;
@@ -29,19 +32,19 @@ media.block > figcaption {
 // --------------------------------------------------------------------------------
 $media-player-button-size: 1.5rem;
 
-media.block.hide {
+figure.block-media.hide {
 	cursor: none;
 }
 
-media.block > .top,
+figure.block-media > .top,
-media.block > .bottom {
+figure.block-media > .bottom {
 	display: block;
 	margin: 0;
 	padding: 0.2rem 0.5rem;
 	z-index: 1;
 }
 
-media.block > .top {
+figure.block-media > .top {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -63,17 +66,17 @@ media.block > .top {
 	user-select: none;
 }
 
-media.block.hide > .top {
+figure.block-media.hide > .top {
 	top: -100%;
 	opacity: 0.0;
 	transition: top ease-in-out 500ms, opacity ease-in-out 500s;
 }
 
-media.block > .top > .variant {
+figure.block-media > .top > .variant {
 	flex-grow: 1;
 }
 
-media.block > .bottom {
+figure.block-media > .bottom {
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -95,13 +98,13 @@ media.block > .bottom {
 	user-select: none;
 }
 
-media.block.hide > .bottom {
+figure.block-media.hide > .bottom {
 	bottom: -100%;
 	opacity: 0.0;
 	transition: top ease-in-out 500ms, opacity ease-in-out 500s;
 }
 
-media.block > .bottom > .play {
+figure.block-media > .bottom > .play {
 	display: block;
 	flex-grow: 0;
 	margin: 0;
@@ -114,10 +117,10 @@ media.block > .bottom > .play {
 	text-align: center;
 	user-select: none;
 }
-media.block > .bottom > .play.playing {
+figure.block-media > .bottom > .play.playing {
 }
 
-media.block > .bottom > .time {
+figure.block-media > .bottom > .time {
 	display: block;
 	margin: 0;
 	padding: 0;
@@ -132,7 +135,7 @@ media.block > .bottom > .time {
 	user-select: auto;
 }
 
-media.block > .bottom > .progress {
+figure.block-media > .bottom > .progress {
 	margin: 0;
 	padding: 0;
 	width: auto;
@@ -144,7 +147,7 @@ media.block > .bottom > .progress {
 	display: block;
 	user-select: none;
 }
-media.block > .bottom > .mute {
+figure.block-media > .bottom > .mute {
 	display: block;
 	margin: 0;
 	padding: 0;
@@ -159,10 +162,10 @@ media.block > .bottom > .mute {
 	text-align: center;
 	user-select: none;
 }
-media.block > .bottom > .mute.muted {
+figure.block-media > .bottom > .mute.muted {
 }
 
-media.block > .bottom > .volume {
+figure.block-media > .bottom > .volume {
 	display: block;
 	margin: 0;
 	padding: 0;
@@ -177,7 +180,7 @@ media.block > .bottom > .volume {
 	user-select: none;
 }
 
-media.block > .bottom > .fullscreen {
+figure.block-media > .bottom > .fullscreen {
 	display: block;
 	margin: 0;
 	padding: 0;
@@ -194,43 +197,19 @@ media.block > .bottom > .fullscreen {
 }
 
 @media (max-width: 500px) {
-	media.block > .bottom > .time {
+	figure.block-media > .bottom > .time {
 		display: none;
 	}
 }
 @media (max-width: 350px) {
-	media.block > .bottom > .volume {
+	figure.block-media > .bottom > .volume {
 		display: none;
 	}
 }
 @media (max-width: 250px) {
-	media.block > .bottom > .play,
+	figure.block-media > .bottom > .play,
-	media.block > .bottom > .mute,
+	figure.block-media > .bottom > .mute,
-	media.block > .bottom > .fullscreen {
+	figure.block-media > .bottom > .fullscreen {
 		display: none;
 	}
 }
-
-// --------------------------------------------------------------------------------
-// Block: Media > Audio
-// --------------------------------------------------------------------------------
-
-// --------------------------------------------------------------------------------
-// Block: Media > Video
-// --------------------------------------------------------------------------------
-media.block > a > video,
-media.block > video {
-	display: block;
-	width: 100%;
-	object-fit: contain;
-	object-position: center;
-}
-
-// --------------------------------------------------------------------------------
-// Block: Media > Picture
-// --------------------------------------------------------------------------------
-media.block > a > img,
-media.block > img {
-	display: block;
-	width: 100%;
-}

_sass/_block-table.scss

@@ -1,10 +1,8 @@
 // --------------------------------------------------------------------------------
 // Block: Table
 // --------------------------------------------------------------------------------
-.block-table {
-}
 
-.block-table > table {
+figure.block-table > table {
 	margin: 0;
 	padding: 0;
 	display: table;
@@ -13,27 +11,27 @@
 	border-collapse: collapse;
 }
 
-.block-table > table > thead > tr,
+figure.block-table > table > thead > tr,
-.block-table > table > tbody > tr {
+figure.block-table > table > tbody > tr {
 	margin: 0;
 	padding: 0;
 	vertical-align: top;
 }
 
-.block-table > table > thead > tr {
+figure.block-table > table > thead > tr {
 	background: $theme-article-table-head-background;
 }
 
-.block-table > table > tbody > tr {
+figure.block-table > table > tbody > tr {
 	background: $theme-article-table-body-background;
 }
 
-.block-table > table > tbody > tr:nth-child(2n) {
+figure.block-table > table > tbody > tr:nth-child(2n) {
 	background: $theme-article-table-body-background-alt;
 }
 
-.block-table > table > thead > tr > th,
+figure.block-table > table > thead > tr > th,
-.block-table > table > tbody > tr > th {
+figure.block-table > table > tbody > tr > th {
 	margin: 0;
 	padding: 0.75rem 1.5rem;
 	font-weight: bold;
@@ -45,8 +43,8 @@
 	border-bottom: none;
 }
 
-.block-table > table > thead > tr > td,
+figure.block-table > table > thead > tr > td,
-.block-table > table > tbody > tr > td {
+figure.block-table > table > tbody > tr > td {
 	margin: 0;
 	padding: 0.5rem 0.75rem;
 	border: 1px solid rgba(0, 0, 0, 0.5);
@@ -54,7 +52,7 @@
 	border-bottom: none;
 }
 
-.block-table > table + figcaption {
+figure.block-table > figcaption {
 	display: block;
 	margin: 0;
 	padding: .25em .5em;