Improve Media, Column, Heading blocks

_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 %}

_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 %}>

_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;

_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

_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
+// --------------------------------------------------------------------------------

_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";

workspace.code-workspace

@@ -5,6 +5,7 @@
 		}
 	],
 	"settings": {
-		"files.trimTrailingWhitespace": true
+		"files.trimTrailingWhitespace": true,
+		"editor.autoIndent": "keep"
 	}
 }