Improve shortcodes, change to cover_image

Author: gamingrobot

content/posts/c64-puzzle/index.md

@@ -4,7 +4,7 @@ description = "A fun Commodore 64 Puzzle"
 date = 2020-02-27
 slug = "c64-puzzle"
 [extra]
-image = "problem.webp"
+cover_image = "problem.webp"
 +++
 
 My college professor posted this image with the question

content/posts/home-assistant-dashboard-tablet/index.md

@@ -6,7 +6,7 @@ slug = "home-assistant-dashboard-tablet"
 [taxonomies]
 tags = ["Linux", "Home Assistant"]
 [extra]
-image = "tablet_small.webp"
+cover_image = "tablet_small.webp"
 +++
 
 Turning an Intel Atom based Lenovo Tablet 10 (20E4) into a Home Assistant dashboard and voice assistant. Most tutorials for dashboard displays are using Android tablets, but I had this old tablet laying around and figured out how to use it with Home Assistant.

themes/doingstuff-zola/sass/doingstuff/_base.scss

@@ -87,6 +87,15 @@ img {
 	border-radius: 5px;
 }
 
+video {
+	display: block;
+	max-width: 100%;
+	height: auto;
+	margin: 0 auto 1rem;
+	border-radius: 5px;
+}
+
+
 table {
 	margin-bottom: 1rem;
 	width: 100%;

themes/doingstuff-zola/sass/doingstuff/_list.scss

@@ -9,7 +9,7 @@
 }
 
 .post-list-item {
-	margin-bottom: 2em;
+	margin-bottom: 1.5em;
 }
 
 .item-title-big {
@@ -30,8 +30,8 @@
 	margin-top: .2rem;
 }
 
-.item-summary {
-	p {
-		margin-bottom: 0;
-	}
-}
+// .item-summary {
+// 	p {
+// 		margin-bottom: 0;
+// 	}
+// }

themes/doingstuff-zola/sass/doingstuff/_post.scss

@@ -1,6 +1,7 @@
 .page,
 .post {
   margin-bottom: 4em;
+  margin-top: 1em;
 
   li + li {
     margin-top: .25rem;

themes/doingstuff-zola/sass/doingstuff/_shortcodes.scss

@@ -44,8 +44,4 @@
 .danger-icon {
 	color: #df3c30;
 	@extend %noteicon;
-}
-
-video {
-    max-width: 100%;
 }

themes/doingstuff-zola/templates/base.html

@@ -25,15 +25,15 @@
             <meta content="{{ config.title }}" property="og:site_name"/>
             <meta content="{{ config.base_url | safe }}" property="og:url"/>
             <meta content="{{ config.base_url | safe }}" property="twitter:url"/>
-            {% if section.title %}
+            {%- if section.title %}
                 <meta content="{{ section.title }}" property="og:title"/>
                 <meta content="{{ section.title }}" property="twitter:title"/>
-            {% endif %}
-            {% if section.description %}
+            {%- endif %}
+            {%- if section.description %}
                 <meta content="{{ section.description }}" property="og:description"/>
                 <meta content="{{ section.description }}" property="description"/>
                 <meta content="{{ section.description }}" property="twitter:description"/>
-            {% endif %}
+            {%- endif %}
         {% endblock metadata %}
         {# CSS #}
         {% block css %}

themes/doingstuff-zola/templates/page.html

@@ -18,9 +18,9 @@
         <meta content="{{ page.description }}" property="description"/>
         <meta content="{{ page.description }}" property="twitter:description"/>
     {% endif %}
-    {% if page.extra.image %}
-        <meta content="{{ get_url(path=page.colocated_path ~ page.extra.image) }}" property="og:image"/>
-        <meta content="{{ get_url(path=page.colocated_path ~ page.extra.image) }}" property="twitter:image"/>
+    {% if page.extra.cover_image %}
+        <meta content="{{ get_url(path=page.colocated_path ~ page.extra.cover_image) }}" property="og:image"/>
+        <meta content="{{ get_url(path=page.colocated_path ~ page.extra.cover_image) }}" property="twitter:image"/>
     {% endif %}
 {% endblock metadata %}
 

themes/doingstuff-zola/templates/shortcodes/img.html

@@ -1,4 +1,4 @@
-<figure {% if align %}class="{{ align }}"{% endif %}>
+<figure {% if align %}class="{{ align }}"{% else %}class="center"{% endif %}>
   {% if link %}<a href="{{ link }}">{% endif %}
   {%- set image_path = page.colocated_path ~ src %}
   {%- set image_meta = get_image_metadata(path=image_path) %}