Media and Floating blocks

_includes/blocks/_base.liquid

@@ -1,3 +1,3 @@
-<div class="block block-{{ include.type }} {% if include.float %}float float-{{ include.float }}{% else %}float-clear{% endif %}">
+<div class="block block-{{ include.type }} {% if include.float %}float float-{{ include.float }}{% elsif include.float == "clear" %}float-clear{% endif %}">
 	{{ include.content }}
 </div>

_includes/blocks/column.liquid

@@ -3,4 +3,4 @@
 	{{ include.content }}
 </div>
 {% endcapture %}
-{% include blocks/_base.liquid type="column" content=content %}
+{% include blocks/_base.liquid type="column" content=content float=include.float %}

_includes/blocks/columns.liquid

@@ -3,4 +3,4 @@
 	{{ include.content }}
 </div>
 {% endcapture %}
-{% include blocks/_base.liquid type="columns" content=content %}
+{% include blocks/_base.liquid type="columns" content=content float=include.float %}

_includes/blocks/heading.liquid

@@ -3,4 +3,4 @@
 	{{ include.content }}
 </p>
 {% endcapture %}
-{% include blocks/_base.liquid type="heading" content=content %}
+{% include blocks/_base.liquid type="heading" content=content float=include.float %}

_includes/blocks/list.liquid

@@ -11,4 +11,4 @@
 </ul>
 {% endif %}
 {% endcapture %}
-{% include blocks/_base.liquid type="list" content=content %}
+{% include blocks/_base.liquid type="list" content=content float=include.float %}

_includes/blocks/media.liquid

@@ -0,0 +1,37 @@
+{% capture content %}
+{% if include.type == "image" %}
+<picture
+	{% if include.width %}width="{{ include.width }}"{% endif %}
+	{% if include.height %}height="{{ include.height }}"{% endif %}>
+	<img src="{{ include.url | absolute_url }}"
+		{% if include.alt %}alt="{{ include.alt }}"{% endif %}
+		{% if include.width %}width="{{ include.width }}"{% endif %}
+		{% if include.height %}height="{{ include.height }}"{% endif %}>
+</picture>
+{% elsif include.type == "video" %}
+<video controls
+	{% 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 %}>
+	<source src="{{ include.url | absolute_url }}">
+</video>
+{% elsif include.type == "audio" %}
+<audio controls
+	{% 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 %}>
+	<source src="{{ include.url | absolute_url }}">
+</audio>
+{% endif %}
+{% if include.caption %}
+<figcaption>{{ include.caption }}</figcaption>
+{% endif %}
+{% endcapture %}
+{% include blocks/_base.liquid type="media" content=content float=include.float %}

_includes/blocks/paragraph.liquid

@@ -3,4 +3,4 @@
 	{{ include.content }}
 </p>
 {% endcapture %}
-{% include blocks/_base.liquid type="paragraph" content=content %}
+{% include blocks/_base.liquid type="paragraph" content=content float=include.float %}

_posts/1993/1993-07-21-lorem-ipsum.html

@@ -18,17 +18,21 @@ Mauris ac efficitur massa, sit amet molestie felis. Proin eget efficitur elit, e
 {% capture content %}
 Vestibulum euismod egestas dapibus. Sed ut mollis purus. Sed scelerisque vulputate nisl, eget fringilla magna aliquam non. Nam id arcu rhoncus, hendrerit felis cursus, suscipit metus. Fusce pretium tortor eget tellus convallis sodales. Aenean at aliquet urna, et pulvinar tortor. Nulla malesuada vel tellus vel feugiat.
 {% endcapture %}{% include blocks/paragraph.liquid content=content %}
+{% capture content %}
+Morbi in pulvinar mi. Nam dignissim ut augue sed placerat. Vestibulum ipsum odio, fringilla et molestie at, laoreet tristique ipsum. Proin lacinia lectus est, ut gravida ipsum aliquam sit amet. Donec pulvinar rutrum risus, eget posuere ipsum tempor id. Nullam quis nisi nec mauris interdum bibendum non eget magna. Pellentesque accumsan egestas cursus. Donec vestibulum pulvinar est. Etiam eleifend in quam non hendrerit. Cras felis sem, eleifend at luctus id, iaculis vulputate elit. Vivamus porttitor rutrum metus. Proin turpis ante, ultrices consequat libero id, placerat pellentesque ante. Vestibulum eget luctus elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tempus suscipit felis, ut egestas erat varius at.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}
 {% endcapture %}{% include blocks/column.liquid content=column %}
 {% capture column %}
+{% include blocks/media.liquid type="image" float="left" url="http://localhost:4000/assets/logo.svg" height="80px" %}
 {% capture content %}
 Vestibulum euismod egestas dapibus. Sed ut mollis purus. Sed scelerisque vulputate nisl, eget fringilla magna aliquam non. Nam id arcu rhoncus, hendrerit felis cursus, suscipit metus. Fusce pretium tortor eget tellus convallis sodales. Aenean at aliquet urna, et pulvinar tortor. Nulla malesuada vel tellus vel feugiat.
 {% endcapture %}{% include blocks/paragraph.liquid content=content %}
+{% capture content %}
+Morbi in pulvinar mi. Nam dignissim ut augue sed placerat. Vestibulum ipsum odio, fringilla et molestie at, laoreet tristique ipsum. Proin lacinia lectus est, ut gravida ipsum aliquam sit amet. Donec pulvinar rutrum risus, eget posuere ipsum tempor id. Nullam quis nisi nec mauris interdum bibendum non eget magna. Pellentesque accumsan egestas cursus. Donec vestibulum pulvinar est. Etiam eleifend in quam non hendrerit. Cras felis sem, eleifend at luctus id, iaculis vulputate elit. Vivamus porttitor rutrum metus. Proin turpis ante, ultrices consequat libero id, placerat pellentesque ante. Vestibulum eget luctus elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tempus suscipit felis, ut egestas erat varius at.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}
 {% endcapture %}{% include blocks/column.liquid content=column %}
 {% endcapture %}{% include blocks/columns.liquid content=columns columns=2 %}
 
-{% capture content %}
-Morbi in pulvinar mi. Nam dignissim ut augue sed placerat. Vestibulum ipsum odio, fringilla et molestie at, laoreet tristique ipsum. Proin lacinia lectus est, ut gravida ipsum aliquam sit amet. Donec pulvinar rutrum risus, eget posuere ipsum tempor id. Nullam quis nisi nec mauris interdum bibendum non eget magna. Pellentesque accumsan egestas cursus. Donec vestibulum pulvinar est. Etiam eleifend in quam non hendrerit. Cras felis sem, eleifend at luctus id, iaculis vulputate elit. Vivamus porttitor rutrum metus. Proin turpis ante, ultrices consequat libero id, placerat pellentesque ante. Vestibulum eget luctus elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tempus suscipit felis, ut egestas erat varius at.
-{% endcapture %}{% include blocks/paragraph.liquid content=content %}
 
 {% capture content %}
 Etiam tellus dolor, pretium eu metus vel, venenatis dictum justo. Mauris urna nunc, euismod eget mattis ac, posuere sit amet nunc. Donec sollicitudin enim et ligula commodo, at tempor lacus rhoncus. Suspendisse rhoncus metus ut metus pellentesque sagittis. Phasellus commodo tortor metus, sed rutrum leo eleifend vitae. Curabitur convallis sollicitudin nisl eget malesuada. Fusce dapibus felis nec ipsum rutrum, sit amet sagittis sem ornare. Nulla quam lorem, vestibulum sed sapien id, cursus dapibus dolor. Nullam interdum massa et tellus varius, vel placerat quam eleifend.

_sass/_blocks.scss

@@ -7,7 +7,9 @@
 .block ~ .block {
 	margin-top: 1.25em;
 }
-
+.block.float + .block {
+	margin-top: 0;
+}
 .block.float {
 	margin-top: 0;
 }
@@ -24,7 +26,6 @@
 .float-right {
 	float: right;
 }
-
 .float-clear {
 	clear: both;
 }