add docker logo

content/posts/leopold.md

@@ -21,10 +21,10 @@ Aside from the portfolio items, we just need some brief background information a
 
 {{<
 figure
-src="/images/logos/october-icon.png"
+src="/images/logos/vue.svg"
-alt="The October Content Management System's icon."
+alt="The Vue logo."
-class="icon-inline sm-order-rev"
+class="icon-inline icon-right sm-order-rev svg"
-caption="For the front end of this project, I decided to use [Vue.js](https:/etcvuejs.org)."
+caption="For the front end of this project, I went with [Vue.js](https:/etcvuejs.org) &mdash; a fast, modern JavaScript framework used to create web interfaces."
 >}}
 
 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.
@@ -37,7 +37,13 @@ Instead, we can dynamically update page components to create a fast, responsive
 
 ## The Back End
 
-For the backend I decided to use [October](https://octobercms.com/), a Content Management System, based on the [Laravel](https://laravel.com/) framework, which is a popular, open source, PHP based framework.
+{{<
+figure
+src="/images/logos/october-icon.png"
+alt="The October Content Management System's icon."
+class="icon-inline sm-order-rev"
+caption="For the backend I decided to use [October](https://octobercms.com/), a Content Management System, based on the [Laravel](https://laravel.com/) framework, which is a popular, open source, PHP based framework."
+>}}
 
 The major requirements of a backend for this type of project is simply to store and organise images.
 
@@ -116,6 +122,13 @@ This is to draw the attention of visitors to the full colour photographs that ar
 
 ## The Deployment
 
+{{<
+figure
+src="/images/logos/docker-vertical-monochromatic.png"
+alt="The Docker logo."
+class="logo large"
+>}}
+
 The website is hosted on a Virtual Private Server using [Docker](https://www.docker.com/).
 
 The main advantage of using Docker containers in this case, is in how it simplifies development and deployment.

static/css/custom.css

@@ -36,7 +36,6 @@ body.colorscheme-light .avatar img {
   display: block;
   height: auto;
   width: auto;
-  max-width: 6em;
   margin: 0 auto;
 }
 
@@ -46,6 +45,10 @@ body.colorscheme-light .avatar img {
     margin-top: -2rem;
   }
 
+  .content figure.icon-inline > img {
+    max-width: 6em;
+  }
+
   .content figure.icon-inline.sm-order-rev > img {
     order: 2;
   }
@@ -71,6 +74,10 @@ body.colorscheme-light .avatar img {
     margin: 0;
   }
 
+  .content figure.icon-inline.large > img {
+    height: 6em;
+  }
+
   .content figure.icon-inline.icon-right > img {
     order: 2;
   }
@@ -100,6 +107,10 @@ body.colorscheme-light .avatar img {
   margin: 4rem 0;
 }
 
+.content figure.logo.large {
+  height: 7em;
+}
+
 .content figure.logo > img {
   display: block;
   height: 100%;
@@ -111,6 +122,10 @@ body.colorscheme-light .avatar img {
     height: 2.6em;
   }
 
+  .content figure.logo.large {
+    height: 8em;
+  }
+
   .content figure.logo.nuxt {
     height: 1.6em;
   }