fix distorted images at certain sizes

content/posts/leopold.md

@@ -19,7 +19,13 @@ Aside from the portfolio items, we just need some brief background information a
 
 ## The Front End
 
-For the front end of this project, I decided to use [Vue.js](https:/etcvuejs.org).
+{{<
+figure
+src="/images/logos/october-icon.png"
+alt="The October Content Management System's icon."
+class="icon-inline sm-order-rev"
+caption="For the front end of this project, I decided to use [Vue.js](https:/etcvuejs.org)."
+>}}
 
 The site's content will mainly consist of examples of Marc's portfolio in the form of images that are organised into a number of galleries.
 The main task of a user will be the browsing and viewing of these images.

static/css/custom.css

@@ -12,18 +12,6 @@ body.colorscheme-light .avatar img {
   }
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  text-align: center;
-}
-.content article header {
-  text-align: center;
-}
-
 .content figure.svg > img {
   height: 100%;
 }
@@ -35,7 +23,6 @@ h6 {
 .content figure.icon-inline {
   display: flex;
   flex-direction: column;
-  justify-content: center;
 }
 
 .content figure.icon-inline > figcaption p {
@@ -46,7 +33,11 @@ h6 {
 }
 
 .content figure.icon-inline > img {
-  height: 6em;
+  display: block;
+  height: auto;
+  width: auto;
+  max-width: 6em;
+  margin: 0 auto;
 }
 
 @media (max-width: 500px) {
@@ -77,6 +68,7 @@ h6 {
 
   .content figure.icon-inline > img {
     height: 4em;
+    margin: 0;
   }
 
   .content figure.icon-inline.icon-right > img {