diff --git a/content/posts/leopold.md b/content/posts/leopold.md index ca32c28..e6ed123 100644 --- a/content/posts/leopold.md +++ b/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" -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)." +src="/images/logos/vue.svg" +alt="The Vue logo." +class="icon-inline icon-right sm-order-rev svg" +caption="For the front end of this project, I went with [Vue.js](https:/etcvuejs.org) — 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. diff --git a/static/css/custom.css b/static/css/custom.css index 6057a05..63d2fcb 100644 --- a/static/css/custom.css +++ b/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; } diff --git a/static/images/logos/docker-vertical-monochromatic.png b/static/images/logos/docker-vertical-monochromatic.png new file mode 100644 index 0000000..d83e54a Binary files /dev/null and b/static/images/logos/docker-vertical-monochromatic.png differ