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.
 
@@ -17,10 +26,4 @@ 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.
+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">
+    {% if imgFeat %}
+      <div class="imgFeat">
+        <img src="{{imgFeat}}" alt="">
+      </div>
+    {% endif %}
+    
+    <section class="text {{url}}">
       {{ content | safe}}
-  </div>
+    </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;