content/posts/leopold.md

@@ -19,13 +19,7 @@ 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,6 +12,18 @@ 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%;
 }
@@ -23,6 +35,7 @@ body.colorscheme-light .avatar img {
 .content figure.icon-inline {
   display: flex;
   flex-direction: column;
+  justify-content: center;
 }
 
 .content figure.icon-inline > figcaption p {
@@ -33,11 +46,7 @@ body.colorscheme-light .avatar img {
 }
 
 .content figure.icon-inline > img {
-  display: block;
+  height: 6em;
-  height: auto;
-  width: auto;
-  max-width: 6em;
-  margin: 0 auto;
 }
 
 @media (max-width: 500px) {
@@ -68,7 +77,6 @@ body.colorscheme-light .avatar img {
 
   .content figure.icon-inline > img {
     height: 4em;
-    margin: 0;
   }
 
   .content figure.icon-inline.icon-right > img {