add custom css for about page

assets/css/_about.scss

@@ -0,0 +1,29 @@
+.page.about {
+  .content {
+    text-align: center;
+  }
+
+  ul {
+    padding-left: 0;
+    list-style: none;
+  }
+
+  article > p,
+  article > ul {
+    font-size: 1.1em;
+  }
+
+  article > p {
+    margin: 3rem;
+  }
+
+  li {
+    margin: 2rem 0;
+  }
+
+  h2 {
+    font-size: 2.2rem;
+    line-height: 2.6rem;
+  }
+}
+

assets/css/main.scss

@@ -1,15 +1,5 @@
 @import "mixins";
-
+@import "about";
-.page.about {
-  .content {
-    text-align: center;
-  }
-
-  ul {
-    padding-left: 0;
-    list-style: none;
-  }
-}
 
 .navigation .navigation-title {
   text-transform: none;
@@ -166,40 +156,41 @@
   }
 }
 
-/* TODO do this properly using a shortcode */
+// TODO do this properly using a shortcode to add the class to the list
+// (see contentposts/leopold.md)
 .cheat-october-list {
   display: none;
-}
 
-.cheat-october-list + ul {
+  + ul {
-  margin-top: 0;
+    margin-top: 0;
-  margin-bottom: 0;
+    margin-bottom: 0;
-  padding-left: 0;
+    padding-left: 0;
-}
+  }
 
-.cheat-october-list + ul > li {
+  + ul > li {
-  list-style: none;
+    list-style: none;
-}
+  }
 
-.cheat-october-list + ul > li > p:first-child {
+  + ul > li > p:first-child {
-  position: relative;
+    position: relative;
-  margin-top: 0;
+    margin-top: 0;
-  padding-left: 40px;
+    padding-left: 40px;
-}
+  }
 
-.cheat-october-list + ul > li > p:not(:first-child) {
+  + ul > li > p:not(:first-child) {
-  padding-left: 40px;
+    padding-left: 40px;
-}
+  }
 
-.cheat-october-list + ul > li > p:first-child::before {
+  + ul > li > p:first-child::before {
-  content: "";
+    content: "";
-  position: absolute;
+    position: absolute;
-  display: block;
+    display: block;
-  top: 0.2em;
+    top: 0.2em;
-  bottom: 0.2em;
+    bottom: 0.2em;
-  left: 0;
+    left: 0;
-  right: 0;
+    right: 0;
-  background-size: contain;
+    background-size: contain;
-  background-repeat: no-repeat;
+    background-repeat: no-repeat;
-  background-image: url(../images/logos/october-icon.png);
+    background-image: url(../images/logos/october-icon.png);
+  }
 }

content/posts/flowmm.md

@@ -3,7 +3,7 @@ title: "Flow Model Management"
 date: 2020-02-08T12:27:18Z
 description: "Developing a portfolio website using Nuxt.js."
 categories: ["Portfolio"]
-tags: ["Vue", "Nuxt"]
+tags: ["Vue", "Nuxt", "CMS"]
 featured_image: "/images/flowmm/flowmm-home.jpg"
 series: ["Portfolio"]
 draft: false

content/posts/giana.md

@@ -3,7 +3,7 @@ draft = false
 date = 2019-12-29T18:55:07Z
 title = "Giana Boutique"
 description = "Developing an ecommerce website using WordPress and WooCommerce."
-tags = ["WordPress", "WooCommerce"]
+tags = ["WordPress", "WooCommerce", "CMS"]
 categories = ["Portfolio"]
 featured_image = "/images/giana/large-1.jpg"
 externalLink = ""

content/posts/leopold.md

@@ -3,7 +3,7 @@ draft = false
 date = 2020-02-01T18:54:46Z
 title = "Marc Leopold Photography"
 description = "Developing a portfolio website using October CMS and Vue.js."
-tags = ["October CMS", "Vue"]
+tags = ["October CMS", "Vue", "CMS"]
 categories = ["Portfolio"]
 featured_image = "/images/leopold/large-1.jpg"
 series = ["Portfolio"]