add logos

content/posts/flowmm.md

@@ -7,7 +7,7 @@ featured_image: "/images/flowmm/flowmm-home.jpg"
 draft: true
 ---
 
-**Flow Model Management** are a fictitious modelling agency.
+**Flow Model Management** is a fictitious modelling agency.
 They were created solely for the purpose of giving me an excuse to create their [website](https://flowmm.rayelliott.dev).
 
 However, despite being imaginary, the owners of Flow Model Management felt that it was about time their business should have an internet presence.
@@ -19,7 +19,13 @@ Essential to this, would be to provide a simple process for users to submit an a
 
 ## The Front End
 
-For this project I wanted to build a **Single Page Application** using [Nuxt.js](https://nuxtjs.org/), which is an open source framework based on [Vue.js](https://vuejs.org/).
+{{<
+figure
+src="/images/logos/nuxtjs-icon.svg"
+alt="The Nuxt icon."
+class="icon-inline sm-order-rev svg"
+caption="For this project I wanted to build a **Single Page Application** using [Nuxt.js](https://nuxtjs.org/), which is an open source framework based on Vue.js."
+>}}
 
 One advantage of an SPA is speed.
 SPAs are fast.
@@ -30,7 +36,14 @@ So, once the initial page is loaded, the amount of data that needs to be transmi
 This also has the benefit of an improved user experience.
 Navigation and updates to the state of the site appear to be almost instant, similar to a native application, rather than more lengthy page reloads typically associated with websites.
 
-**Vue.js** is a modern JavaScript framework for creating web interfaces. It makes use of the virtual DOM, is small and fast, and is an ideal foundation for an SPA.
+{{<
+figure
+src="/images/logos/vue.svg"
+alt="The Vue logo."
+class="icon-inline icon-right svg"
+caption="**[Vue.js](https://vuejs.org/)** is a modern JavaScript framework for creating web interfaces. It makes use of the virtual DOM, is small and fast, and is an ideal foundation for an SPA."
+>}}
+
 
 However, Vue along with other SPA frameworks do have some disadvantages.
 
@@ -53,6 +66,14 @@ To name a few:
 * there are many threats of security vulnerabilities and exploits,
 * although browser standards have improved over time, there are still a number of differences in behaviour between the many devices and browsers in use.
 
+{{<
+figure
+src="/images/logos/nuxtjs-logo.svg"
+alt="The Nuxt logo."
+class="nuxt logo svg"
+caption=""
+>}}
+
 This is where a framework such as **Nuxt.js** comes in.
 A lot of the tedious scaffolding is taken care of and being a fully tested, mature framework, we can be confident that many common, and not so common, issues have already been solved and tested for.
 
@@ -90,9 +111,23 @@ The project is hosted on a **Virtual Private Server**, using [Dokku](http://dokk
 
 **Dokku** is a [Docker](https://www.docker.com/) based, open source, Platform as a Service in which Heroku compatible applications can be deployed to and hosted upon.
 
+{{<
+figure
+src="/images/logos/docker-horizontal-monochromatic.png"
+alt="The Docker logo."
+class="logo"
+>}}
+
 Using Docker during development has many advantages.
 When using Docker, the application is encapsulated within a consistent environment.
 This brings many advantages.
 One such advantage being the development environment can exactly match the deployed environment, ensuring there will be no compatibility issues after deployment.
 
+{{<
+figure
+src="/images/logos/git-orange.png"
+alt="The Git logo."
+class="git logo"
+>}}
+
 Combining Docker with Dokku also allows for simple deployment, which can be done with just a [Git](https://git-scm.com/) push.

static/css/custom.css

@@ -11,3 +11,100 @@ body.colorscheme-light .avatar img {
     border-radius: 31%;
   }
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-align: center;
+}
+.content article header {
+  text-align: center;
+}
+
+.content figure.svg > img {
+  height: 100%;
+}
+
+/*
+* icons
+*/
+
+.content figure.icon-inline {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.content figure.icon-inline > figcaption p {
+  margin: 2rem 0;
+  text-align: inherit;
+  font-style: inherit;
+  font-size: inherit;
+}
+
+.content figure.icon-inline > img {
+  height: 6em;
+}
+
+@media (max-width: 500px) {
+  .content figure.icon-inline.sm-order-rev > figcaption {
+    order: 1;
+    margin-top: -2rem;
+  }
+
+  .content figure.icon-inline.sm-order-rev > img {
+    order: 2;
+  }
+}
+
+@media (min-width: 500px) {
+  .content figure.icon-inline {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .content figure.icon-inline > figcaption p {
+    margin: 0 0 0 2rem;
+  }
+
+  .content figure.icon-inline.icon-right > figcaption p {
+    order: 1;
+    margin: 0 2rem 0 0;
+  }
+
+  .content figure.icon-inline > img {
+    height: 4em;
+  }
+
+  .content figure.icon-inline.icon-right > img {
+    order: 2;
+  }
+}
+
+/*
+ * logos
+*/
+
+.content figure.logo {
+  height: 1.6em;
+  margin: 4rem 0;
+}
+
+.content figure.logo > img {
+  display: block;
+  height: 100%;
+  margin: 0 auto;
+}
+
+@media (min-width: 500px) {
+  .content figure.logo {
+    height: 2.6em;
+  }
+
+  .content figure.logo.nuxt {
+    height: 1.6em;
+  }
+}