Further move towards clean HTML5+CSS

_includes/blocks/media.liquid

@@ -1,5 +1,5 @@
 {% assign file_info = site.static_files | where: "path", include.url %}
-<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 %}">
+<figure 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>

_includes/blocks/table.liquid

@@ -1 +1 @@
-<figure 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 %}</figure>
+<figure 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 %}""><table>{{ include.content }}</table>{% if include.caption %}<figcaption>{{ include.caption }}</figcaption>{% endif %}</figure>

_sass/_block-figure.scss

@@ -0,0 +1,88 @@
+// --------------------------------------------------------------------------------
+// Block: Figure
+// --------------------------------------------------------------------------------
+figure.block {
+	display: block;
+	position: relative;
+	overflow: hidden;
+}
+
+figure.block > figcaption {
+	display: block;
+	margin: 0;
+	padding: .25em .5em;
+	text-align: center;
+	font-size: 0.9em;
+	background: rgba(0, 0, 0, 0.5);
+}
+
+// --------------------------------------------------------------------------------
+// Block: Figure > Media
+// --------------------------------------------------------------------------------
+figure.block > picture,
+figure.block > picture > img,
+figure.block > video,
+figure.block > audio {
+	display: block;
+	max-width: 100%;
+	width: auto;
+	max-height: 1005;
+	height: auto;
+	object-fit: contain;
+	object-position: center center;
+}
+
+@import "_block-figure-player.scss"
+
+// --------------------------------------------------------------------------------
+// Block: Figure > Table
+// --------------------------------------------------------------------------------
+figure.block > table {
+	margin: 0;
+	padding: 0;
+	display: table;
+	width: 100%;
+	table-layout: auto;
+	border-collapse: collapse;
+}
+
+figure.block > table > thead > tr,
+figure.block > table > tbody > tr {
+	margin: 0;
+	padding: 0;
+	vertical-align: top;
+}
+
+figure.block > table > thead > tr {
+	background: $theme-article-table-head-background;
+}
+
+figure.block > table > tbody > tr {
+	background: $theme-article-table-body-background;
+}
+
+figure.block > table > tbody > tr:nth-child(2n) {
+	background: $theme-article-table-body-background-alt;
+}
+
+figure.block > table > thead > tr > th,
+figure.block > table > tbody > tr > th {
+	margin: 0;
+	padding: 0.75rem 1.5rem;
+	font-weight: bold;
+	font-variant: small-caps;
+	text-align: start;
+	vertical-align: top;
+	border: 1px solid rgba(0, 0, 0, 0.5);
+	border-top: none;
+	border-bottom: none;
+}
+
+figure.block > table > thead > tr > td,
+figure.block > table > tbody > tr > td {
+	margin: 0;
+	padding: 0.5rem 0.75rem;
+	border: 1px solid rgba(0, 0, 0, 0.5);
+	border-top: none;
+	border-bottom: none;
+}

_sass/_block-heading.scss

@@ -1,59 +1,40 @@
 // --------------------------------------------------------------------------------
 // Block: Heading
 // --------------------------------------------------------------------------------
-.block + h1.block,
+h1,
-.block + h2.block,
+h2,
-.block + h3.block,
+h3,
-.block + h4.block,
+h4,
-.block + h5.block,
+h5,
-.block + h6.block {
+h6 {
-	margin-top: 2rem;
+	.block+&.block {
-}
+		margin-top: 2rem;
+	}
 
-h1.block,
+	&.block {
-h2.block,
+		margin: 0;
-h3.block,
+		margin-left: -0.75rem;
-h4.block,
+		margin-right: -0.75rem;
-h5.block,
+		padding: 0;
-h6.block {
+		font-variant: small-caps;
-	margin: 0;
+		font-weight: bold;
-	margin-left: -0.75rem;
+		line-height: 1.333em;
-	margin-right: -0.75rem;
+		padding: 0.5rem 0.75rem;
-	padding: 0;
+	}
-	font-variant: small-caps;
-	font-weight: bold;
-	line-height: 1.333em;
-	padding: 0.5rem 0.75rem;
-}
 
-h1.block > a,
+	&.block>a {
-h2.block > a,
+		color: $theme-article-heading-link-color;
-h3.block > a,
+	}
-h4.block > a,
-h5.block > a,
-h6.block > a {
-	color: $theme-article-heading-link-color;
-}
 
-h1.block > a:active,
+	&.block>a:active,
-h2.block > a:active,
+	&.block>a:focus,
-h3.block > a:active,
+	&.block>a:hover {
-h4.block > a:active,
+		color: $theme-article-heading-link-color-active;
-h5.block > a:active,
+	}
-h6.block > a:active,
+
-h1.block > a:focus,
+	&.block+.block {
-h2.block > a:focus,
+		margin-top: .5rem;
-h3.block > a:focus,
+	}
-h4.block > a:focus,
-h5.block > a:focus,
-h6.block > a:focus,
-h1.block > a:hover,
-h2.block > a:hover,
-h3.block > a:hover,
-h4.block > a:hover,
-h5.block > a:hover,
-h6.block > a:hover {
-	color: $theme-article-heading-link-color-active;
 }
 
 h1.block {
@@ -85,12 +66,3 @@ h6.block {
 	font-size: 1.2rem;
 	background: $theme-article-heading-h6-background;
 }
-
-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

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

_sass/_block-table.scss

@@ -1,62 +0,0 @@
-// --------------------------------------------------------------------------------
-// Block: Table
-// --------------------------------------------------------------------------------
-
-figure.block-table > table {
-	margin: 0;
-	padding: 0;
-	display: table;
-	width: 100%;
-	table-layout: auto;
-	border-collapse: collapse;
-}
-
-figure.block-table > table > thead > tr,
-figure.block-table > table > tbody > tr {
-	margin: 0;
-	padding: 0;
-	vertical-align: top;
-}
-
-figure.block-table > table > thead > tr {
-	background: $theme-article-table-head-background;
-}
-
-figure.block-table > table > tbody > tr {
-	background: $theme-article-table-body-background;
-}
-
-figure.block-table > table > tbody > tr:nth-child(2n) {
-	background: $theme-article-table-body-background-alt;
-}
-
-figure.block-table > table > thead > tr > th,
-figure.block-table > table > tbody > tr > th {
-	margin: 0;
-	padding: 0.75rem 1.5rem;
-	font-weight: bold;
-	font-variant: small-caps;
-	text-align: start;
-	vertical-align: top;
-	border: 1px solid rgba(0, 0, 0, 0.5);
-	border-top: none;
-	border-bottom: none;
-}
-
-figure.block-table > table > thead > 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);
-	border-top: none;
-	border-bottom: none;
-}
-
-figure.block-table > figcaption {
-	display: block;
-	margin: 0;
-	padding: .25em .5em;
-	text-align: center;
-	font-size: 0.9em;
-	background: rgba(0, 0, 0, 0.5);
-}

_sass/_block_figure-player.scss

@@ -1,32 +1,3 @@
-// --------------------------------------------------------------------------------
-// Block: Media
-// --------------------------------------------------------------------------------
-figure.block-media {
-	display: block;
-	position: relative;
-	overflow: hidden;
-}
-
-figure.block-media picture,
-figure.block-media picture > img,
-figure.block-media video,
-figure.block-media audio {
-	display: block;
-	width: 100%;
-	height: auto;
-	object-fit: contain;
-	object-position: center center;
-}
-
-figure.block-media > figcaption {
-	display: block;
-	margin: 0;
-	padding: .25em .5em;
-	text-align: center;
-	font-size: 0.9em;
-	background: rgba(0, 0, 0, 0.5);
-}
-
 // --------------------------------------------------------------------------------
 // Block: Media Player
 // --------------------------------------------------------------------------------

_sass/_blocks.scss

@@ -81,7 +81,6 @@
 @import "_block-code.scss";
 @import "_block-columns.scss";
 @import "_block-details.scss";
+@import "_block-figure.scss";
 @import "_block-heading.scss";
 @import "_block-list.scss";
-@import "_block-media.scss";
-@import "_block-table.scss";