major overhaul, uses less images to save bandwidth & increase loading times.

layouts/_default/list.html

@@ -14,18 +14,10 @@
             {{if .Content}}
             {{.Content}}
             {{end}}
-            {{ template "_internal/pagination.html" .}}
-            <div class="gallery">
-                {{ if .Pages }}
-                {{range (.Paginate .Pages).Pages}}
-                {{partial "item" .}}
-                {{end}}
-                {{end}}
-            </div>
-
-            {{ template "_internal/pagination.html" .}}
-
         </section>
+        {{partial "item-list" .}}
+
+
     </main>
     <hr>
     {{partial "footer" .}}

layouts/index.html

@@ -9,11 +9,8 @@
     {{partial "header" .}}
     {{partial "banner" .}}
     <main>
-        <article>
-            {{.Content}}
-        </article>
+        {{.Content}}
     </main>
-    <hr>
     {{ partial "footer" .}}
     {{partial "spritesheet" .}}
 </body>

layouts/partials/audio-episode.html

@@ -0,0 +1,8 @@
+<div style="width:100%;flex-direction:column;min-width:400px;width:100%;max-width:40vw;margin:1rem;">
+    <a href="{{.Permalink}}"><h3>{{.Title}}</h3></a>
+    <p>{{.Date | time.Format "Jan 02 2006"}}</p>
+    <audio controls preload="none" style="width:100%;">
+        <source src="{{.Params.audio}}">
+    </audio>
+    <div class="item-tags">{{if .GetTerms "tags"}}{{ range (.GetTerms "tags")}}<a class ="item-tag" href="{{.RelPermalink}}">{{.LinkTitle}}</a>{{end}} {{end}}</div>
+</div>

layouts/partials/item-audio.html

@@ -0,0 +1,4 @@
+
+<audio preload="none" controls>
+    <source src="{{.Params.audio}}">
+</audio>

layouts/partials/item-list-paginate.html

@@ -0,0 +1,9 @@
+{{ template "_internal/pagination.html" .}}
+            <div class="item-list">
+                {{ if .Pages }}
+                {{range (.Paginate .Pages).Pages}}
+                {{partial "list-item" .}}
+                {{end}}
+                {{end}}
+            </div>
+{{ template "_internal/pagination.html" .}}

layouts/partials/item-list.html

@@ -0,0 +1,5 @@
+<div class="item-list">
+    {{range .Pages}}
+    {{partial "list-item" .}}
+    {{end}}
+</div>

layouts/partials/list-item.html

@@ -0,0 +1,13 @@
+<div class="list-item">
+    <div>
+        <a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
+        {{if .Params.audio}}
+        {{partial "item-audio" .}}
+        {{end}}
+        {{$author := index .Site.Data.details.staff (.Params.author | default "default")}}
+        <p>{{if .Date }}{{.Date | time.Format "Jan 02 2006"}}{{end}} {{$author.name}} </p>
+        <p>{{.Summary}}</p>
+        <div class="item-tags">{{if .GetTerms "tags"}}{{ range (.GetTerms "tags")}}<a class ="item-tag" href="{{.RelPermalink}}">{{.LinkTitle}}</a>{{end}} {{end}}</div>
+    </div>
+
+</div>

layouts/partials/recent-audio.html

@@ -0,0 +1,11 @@
+<div style="flex-wrap:wrap;width:100%;display:flex;align-items: center;justify-content: center;">
+{{$counter := 0 }}
+{{  range .Site.RegularPages }} 
+{{if .Params.audio}}
+    {{ $counter = add $counter 1}}
+        {{if le $counter 5}}
+    {{partial "audio-episode" .}}
+        {{end}}
+    {{end}} 
+{{end}}
+</div>

layouts/partials/related.html

@@ -1,5 +1,5 @@
-<div class="gallery">
+<div class="item-list">
         {{range .Site.RegularPages.Related . | first 3 }}
-        {{partial "item" .}}
+        {{partial "list-item" .}}
         {{end}}
-    </div>
+</div>

layouts/shortcodes

@@ -1 +1 @@
-Subproject commit 07e4d56f7e42205c761deac89fcb7a0cb41e9371
+Subproject commit 1e39872a80920b9295df36807376e3e11496ffe0

static/css/theme.css

@@ -2,6 +2,7 @@ body {
     --theme-color-primary: black;
     --theme-color-secondary: white;
     --theme-accent: gold;
+    --hero-color:rgb(11, 66, 153);
     font-size: 20px;
     line-height: 26px;
     width: 100vw;
@@ -18,6 +19,10 @@ body {
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 }
 
+main{
+    width:100vw;
+}
+
 .background-photo {
     position: fixed;
     top: 40vh;
@@ -518,7 +523,6 @@ video {
         max-height: 60vh;
     }
 
-    *,
     main,
     section {
         color: black;
@@ -526,7 +530,6 @@ video {
         border: none;
         box-shadow: none;
         padding: 0;
-        max-width: 90vw;
     }
 }
 
@@ -815,4 +818,96 @@ article a[href^="https"]:where(:not([href*="{{.Site.BaseURL}}"]))::after {
     align-items: center;
     border-radius: 25px;
     padding: 0px;
+}
+
+.list-item{
+    display:flex;
+    flex-direction: row;
+    background-color:rgba(128, 128, 128, 0.15);
+    margin:1.5rem;
+    border-radius:25px;
+    padding:25px;
+    width:80rem;
+    max-width:80vw;
+    justify-content: center;
+    align-items: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    backdrop-filter:opacity(0.15);
+    font-size:18px;
+
+}
+
+@media screen and (orientation:portrait) {
+    .list-item{
+        font-size:14px;
+    }
+    .list-item p{
+        font-size:13px;
+        line-height: 13px;
+    }
+}
+
+.list-item * {
+}
+.list-item {
+    text-decoration: none;
+    line-height: 150%;
+}
+.list-item p {
+    color:var(--theme-color-secondary);
+}
+.list-item img {
+    max-width:10vw;
+    height:min-content;
+}
+.list-item>div {
+    flex-direction: column;
+    align-items: flex-start;
+}
+.item-tags{
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+}
+.item-tag{
+    margin:0.15rem;
+    background-color:rgba(128, 128, 128, 0.25);
+    padding:0.5rem;
+    border-radius:0.5rem;
+    
+}
+.item-list{
+    max-width:90vw;
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.hero {
+    color:var(--theme-color-secondary);
+    background-color: var(--hero-color);
+    background:linear-gradient(45deg, var(--theme-color-primary) 0%, var(--hero-color) 45%,var(--hero-color) 55%, var(--theme-color-primary) 100%);
+    background-position: center center;
+    background-repeat: no-repeat;
+    font-size:22px;
+    align-items: center;
+    padding-top:1rem;
+}
+.hero img{
+    max-width:25rem;
+    max-height:10vh;
+}
+.hero button{
+    background-color:var(--theme-color-secondary);
+    padding:1rem;
+    border-radius:0.5rem;
+    font-size:24px;
+    font-weight: bold;
+    color:var(--theme-color-primary);
+    border:0px;
 }