updated page layout and added lowercase njk filter

.eleventy.js

@@ -5,6 +5,14 @@ module.exports = (config) => {
     return collection.getFilteredByGlob("**/*.md");
   })
 
+  // custom filters
+  config.addFilter("makeLowercase", (value) => {
+    if (typeof value === 'string' || value instanceof String) {
+      value = value.toLowerCase()
+    }
+    return value
+  })
+
   // added passthrough for global assets
   config.addPassthroughCopy("assets")
   // added passthrough for images in their respective folders

_content/audio/post-toast.md

@@ -1,12 +1,13 @@
 ---
 title: post toast
 layout: page.njk
+imgFeat: /audio/images/postoast/FOMORADIO_PostToast.jpg
+gallery: 
+  - /audio/images/postoast/redlightradio.jpg
 ---
 
 # post toast
 
-![](/audio/images/postoast/FOMORADIO_PostToast.jpg)
-
 <iframe width="100%" height="120" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&light=1&feed=%2FRedLightRadio%2Fpost-toast-red-light-radio-04-30-2018%2F" frameborder="0" ></iframe>
 
 Post Toast is an electronic duo currently playing a live meld of hypnotic improvised electronica, techno, hip-hop neo-classical music and down-tempo dystopian futurism. Meeting during our Master's studies Ryan Cherewaty and I found intersecting interests in musical tastes and instrumentation and decided to join forces in our living room.

_content/audio/solo.md

@@ -1,8 +1,9 @@
 ---
 title: solo
 layout: page.njk
-images:
+imgFeat: /audio/images/anomolous/thumb-_DSC5695.jpg
-  - /audio/images/anomolous/patch.jpg
+gallery:
+  - /audio/images/anomolous/patch.png
   - /audio/images/anomolous/thumb-_DSC5654.jpg
 ---
 

_content/work/euclid.md

@@ -1,9 +1,18 @@
 ---
 title: euclid
 layout: page.njk
+gallery:
+  - /work/images/tetra/tetra.jpg
+  - /work/images/tetra/playingTetra.jpg
+  - /work/images/tetra/euclidianGenerator_mk2.png
 ---
 
-# euclid
+<div style="padding:56.25% 0 0 0;position:relative;">
+  <iframe src="https://player.vimeo.com/video/213907704?color=ffffff&amp;byline=0&amp;portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0"></iframe>
+</div>
+<script src="https://player.vimeo.com/api/player.js"></script>
+
+# Euclid
 
 Tetra Gamma Circulaire 3 was a collaborative work between De Player and the Experimental Publishing Master's path at the Piet Zwart Institute.
 
@@ -18,9 +27,3 @@ The instrument is controlled via a series of touch conductive points. These poin
 The end result was an interactive, improvisational, chaotic music machine. Its score, a mash of software and numbers, humanly unintelligible, and musically irreproducible.
 
 This project was the catalyst for my Master's thesis, final project and now forms the base of my current practice and research.
-
-![](/work/images/tetra/tetra.jpg)
-
-![](/work/images/tetra/playingTetra.jpg)
-
-![](/work/images/tetra/euclidianGenerator_mk2.png)

_includes/nav.njk

@@ -13,7 +13,7 @@
       {% for p in collections.pages %}
         {% if (p.data.category == c) %}
           <li>
-            <a href="{{p.url}}">{{p.data.title or p.fileSlug}}</a>
+            <a href="{{p.url}}">{{p.data.title | makeLowercase or p.fileSlug | makeLowercase}}</a>
           </li>
         {% endif %}
       {% endfor %}

_includes/page.njk

@@ -1,10 +1,25 @@
 {% extends "base.njk" %}
 
 {% block content %}
-  <div id="content">
+  <section class="page">
-      {{ content | safe}}
+    {% if imgFeat %}
+      <div class="imgFeat">
+        <img src="{{imgFeat}}" alt="">
       </div>
+    {% endif %}
+    
+    <section class="text {{url}}">
+      {{ content | safe}}
+    </section>
+
+    {% if gallery %}
+      <section class="imgs">
+        {% for img in gallery %}
+          <img src="{{img}}" alt="">
+        {% endfor %}
+      </section class="imgs">
+    {% endif %}
+  </section>
 {% endblock %}
 
-{% block footer %}
+{% block footer %}{% endblock %}
-{% endblock %}

assets/css/master.css

@@ -95,6 +95,7 @@ nav#primary>span.active::after {
 nav#sub {
   max-height: 0px;
   margin-left: 1.5em;
+  padding-bottom: 0.5em;
   overflow: hidden;
   transition: max-height 0.5s ease;
 }
@@ -199,21 +200,6 @@ div#wrapper {
   margin: 0 auto;
 }
 
-section.content {
-  margin: 0;
-  padding: 0;
-  opacity: 0;
-  max-height: 0px;
-  overflow: hidden;
-  transition: opacity 0.3s ease;
-}
-
-section.content.visible {
-  opacity: 1;
-  height: inherit;
-  overflow: inherit;
-}
-
 nav#sub > ul {
   margin: 0;
   padding: 0;
@@ -241,7 +227,7 @@ nav#sub > ul > li > a {
 }
 
 /* --> SUBCONTENT CONSTRUCTION <-- */
-section.content.page {
+section.page {
   display: grid;
 }
 
@@ -273,43 +259,40 @@ section.page h1 {
   }
 
   /* --> MAINPAGE CONSTRUCTION <-- */
-  section.content.visible {
+  section ul.subMenu {
-    margin: 20px 65px;
-  }
-
-  section.content ul.subMenu {
     font-size: 1.5em;
   }
 
   /* --> SUBCONTENT CONSTRUCTION <-- */
-  section.content.page {
+  section.page {
     max-width: 1960px;
     grid-template-columns: repeat(5, 1fr);
-    grid-template-rows: repeat(16, 1fr);
+    gap: 24px;
-    grid-gap: 24px;
   }
 
   section.page h1 {
+    margin-top: 0.25em;
+    margin-bottom: 0.4em;
     font-size: 6em;
     line-height: 0.95em;
   }
 
-  section.content.page div.imgFeat {
+  section.page div.imgFeat {
-    grid-column: span 5;
+    grid-column: span 4;
-    grid-row: 1 / 4;
   }
 
-  section.content.page section.imgs {
+  section.page section.imgs {
     grid-column: 4 / span 2;
     grid-row: 2;
   }
 
-  section.content.page section.imgs>img {
+  section.page section.imgs>img {
     max-width: 100%;
+    margin-bottom: 24px;
     height: auto;
   }
 
-  section.content.page section.text {
+  section.page section.text {
     grid-column: 1 / span 3;
     grid-row: 2;
   }
@@ -338,43 +321,39 @@ section.page h1 {
   }
 
   /* --> MAINPAGE CONSTRUCTION <-- */
-  section.content.visible {
+  section ul.subMenu {
-    margin: 20px 65px;
-  }
-
-  section.content ul.subMenu {
     font-size: 1.5em;
   }
 
   /* --> SUBCONTENT CONSTRUCTION <-- */
-  section.content.page {
+  section.page {
     max-width: 1960px;
     grid-template-columns: repeat(5, 1fr);
-    grid-template-rows: repeat(16, 1fr);
+    gap: 24px;
-    grid-gap: 24px;
   }
 
   section.page h1 {
+    margin-top: 0.25em;
+    margin-bottom: 0.5em;
     font-size: 4em;
     line-height: 0.95em;
   }
 
-  section.content.page div.imgFeat {
+  section.page div.imgFeat {
-    grid-column: span 5;
+    grid-column: span 4;
-    grid-row: 1 / 4
   }
 
-  section.content.page section.imgs {
+  section.page section.imgs {
     grid-column: 4 / span 2;
     grid-row: 2
   }
 
-  section.content.page section.imgs>img {
+  section.page section.imgs>img {
     max-width: 100%;
     height: auto;
   }
 
-  section.content.page section.text {
+  section.page section.text {
     grid-column: 1 / span 3;
     grid-row: 2;
   }
@@ -405,18 +384,17 @@ section.page h1 {
   }
 
   /* --> MAINPAGE CONSTRUCTION <-- */
-  section.content.visible {
-    margin: 32px 8px;
-  }
 
   /* --> SUBCONTENT CONSTRUCTION <-- */
-  section.content.page {
+  section.page {
     display: inherit;
     max-width: 650px;
     grid-gap: 24px;
   }
 
   section.page h1 {
+    margin-top: 0.35em;
+    margin-bottom: 0.5em;
     font-size: 3em;
     line-height: 0.95em;
     margin: 24px 0 32px;