From 64cfc04a2288a27b24a135975c1174000b402cc7 Mon Sep 17 00:00:00 2001
From: Michael Fabian 'Xaymar' Dirks <info@xaymar.com>
Date: Sat, 25 Dec 2021 11:01:32 +0100
Subject: [PATCH] Improve Media, Column, Heading blocks

---
 _includes/blocks/heading.liquid |  4 +--
 _includes/blocks/media.liquid   | 11 +++---
 _sass/_base.scss                |  3 +-
 _sass/_block-columns.scss       |  3 ++
 _sass/_block-media.scss         | 28 +++++++++++++++
 _sass/_blocks.scss              | 63 +++++++++++++++++++++++++++++----
 workspace.code-workspace        |  3 +-
 7 files changed, 101 insertions(+), 14 deletions(-)
 create mode 100644 _sass/_block-media.scss

diff --git a/_includes/blocks/heading.liquid b/_includes/blocks/heading.liquid
index 0677ead..ab25cbe 100644
--- a/_includes/blocks/heading.liquid
+++ b/_includes/blocks/heading.liquid
@@ -1,6 +1,6 @@
 {% capture content %}
-<h{{ include.level }} class="content {% if include.align %}{{ include.align }}{% endif %}">
+<h{{ include.level | default: 1 }} class="content {% if include.align %}{{ include.align }}{% endif %}">
 	{{ include.content }}
-</p>
+</h{{ include.level | default: 1}}>
 {% endcapture %}
 {% include blocks/_base.liquid type="heading" content=content float=include.float %}
diff --git a/_includes/blocks/media.liquid b/_includes/blocks/media.liquid
index 8a0a6a6..3dc0b81 100644
--- a/_includes/blocks/media.liquid
+++ b/_includes/blocks/media.liquid
@@ -1,6 +1,7 @@
 {% capture content %}
 {% if include.type == "image" %}
 <picture
+	src="{{ include.url | absolute_url }}"
 	{% if include.width %}width="{{ include.width }}"{% endif %}
 	{% if include.height %}height="{{ include.height }}"{% endif %}>
 	<img src="{{ include.url | absolute_url }}"
@@ -10,20 +11,22 @@
 </picture>
 {% elsif include.type == "video" %}
 <video controls
+	{% if include.poster %}poster="{{ include.poster | absolute_url }}"{% endif %}
+	{% if include.preload %}preload="{{ include.preload }}"{% endif %}
+	src="{{ include.url | absolute_url }}"
 	{% if include.width %}width="{{ include.width }}"{% endif %}
 	{% if include.height %}height="{{ include.height }}"{% endif %}
-	{% if include.preload %}preload="{{ include.preload }}"{% endif %}
 	{% if include.autoplay %}autoplay="true"{% endif %}
 	{% if include.muted %}muted="true"{% endif %}
-	{% if include.loop %}loop="true"{% endif %}
-	{% if include.poster %}poster="{{ include.poster | absolute_url }}"{% endif %}>
+	{% if include.loop %}loop="true"{% endif %}>
 	<source src="{{ include.url | absolute_url }}">
 </video>
 {% elsif include.type == "audio" %}
 <audio controls
+	{% if include.preload %}preload="{{ include.preload }}"{% endif %}
+	src="{{ include.url | absolute_url }}"
 	{% if include.width %}width="{{ include.width }}"{% endif %}
 	{% if include.height %}height="{{ include.height }}"{% endif %}
-	{% if include.preload %}preload="{{ include.preload }}"{% endif %}
 	{% if include.autoplay %}autoplay="true"{% endif %}
 	{% if include.muted %}muted="true"{% endif %}
 	{% if include.loop %}loop="true"{% endif %}>
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 2fc4f25..8718c4c 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -1,5 +1,6 @@
 $theme-width: 1280px;
 $theme-width-sidebar: 250px;
+$theme-index-column-width: 384px;
 $theme-hue: 215;
 $theme-content-background: hsl($theme-hue, 33%, 20%);
 $theme-content-color: hsl($theme-hue, 0%, 90%);
@@ -31,7 +32,7 @@ $theme-breadcrumbs-link-color: hsl($theme-hue, 100%, 75%);
 $theme-breadcrumbs-link-color-active: hsl($theme-hue, 100%, 85%);
 $theme-footer-background: hsl($theme-hue, 33%, 10.0%);
 $theme-footer-color: hsl($theme-hue, 0%, 80%);
-$theme-index-column-width: 384px;
+$theme-code-background: hsl($theme-hue, 50%, 5%);
 
 * {
 	box-sizing: border-box;
diff --git a/_sass/_block-columns.scss b/_sass/_block-columns.scss
index 0e232b3..98ad2d5 100644
--- a/_sass/_block-columns.scss
+++ b/_sass/_block-columns.scss
@@ -5,6 +5,9 @@
 }
 .block-columns > .content {
 	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 2 - 5rem), 1fr));
+	grid-column-gap: 1rem;
+	grid-row-gap: 1rem;
 }
 
 // Columns: Horizontal Alignment
diff --git a/_sass/_block-media.scss b/_sass/_block-media.scss
new file mode 100644
index 0000000..3252a92
--- /dev/null
+++ b/_sass/_block-media.scss
@@ -0,0 +1,28 @@
+// --------------------------------------------------------------------------------
+// Block: Media
+// --------------------------------------------------------------------------------
+.block-media > figcaption {
+	display: block;
+	margin: 0;
+	padding: .25em .5em;
+	text-align: center;
+	background: rgba(0, 0, 0, 0.5);
+}
+
+// --------------------------------------------------------------------------------
+// Block: Media > Audio
+// --------------------------------------------------------------------------------
+
+// --------------------------------------------------------------------------------
+// Block: Media > Video
+// --------------------------------------------------------------------------------
+.block-media > video {
+	display: block;
+	width: 100%;
+	object-fit: contain;
+	object-position: center;
+}
+
+// --------------------------------------------------------------------------------
+// Block: Media > Picture
+// --------------------------------------------------------------------------------
diff --git a/_sass/_blocks.scss b/_sass/_blocks.scss
index 74bf5dd..dcd1b3f 100644
--- a/_sass/_blocks.scss
+++ b/_sass/_blocks.scss
@@ -7,18 +7,15 @@
 .block ~ .block {
 	margin-top: 1.25em;
 }
-.block.float + .block {
-	margin-top: 0;
-}
-.block.float {
-	margin-top: 0;
-}
 
 .block > .content {
 	padding: 0;
 	margin: 0;
 }
 
+// --------------------------------------------------------------------------------
+// Float
+// --------------------------------------------------------------------------------
 .float {}
 .float-left {
 	float: left;
@@ -30,4 +27,58 @@
 	clear: both;
 }
 
+.block.float + .block {
+	margin-top: 0;
+}
+.block.float {
+	margin-top: 0;
+}
+
+// --------------------------------------------------------------------------------
+// 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;
+}
+
+// --------------------------------------------------------------------------------
+// Block: Code
+// --------------------------------------------------------------------------------
+.block-code {
+	padding: .2rem;
+	background: $theme-code-background;
+	font-size: 0.9em;
+}
+
+.inline-code {
+	margin: 0;
+	padding: 0;
+	background: $theme-code-background;
+	font-size: 0.9em;
+}
+
+
+// --------------------------------------------------------------------------------
+// Specialized Blocks
+// --------------------------------------------------------------------------------
 @import "_block-columns.scss";
+@import "_block-media.scss";
diff --git a/workspace.code-workspace b/workspace.code-workspace
index 4e8eb88..9478298 100644
--- a/workspace.code-workspace
+++ b/workspace.code-workspace
@@ -5,6 +5,7 @@
 		}
 	],
 	"settings": {
-		"files.trimTrailingWhitespace": true
+		"files.trimTrailingWhitespace": true,
+		"editor.autoIndent": "keep"
 	}
 }