From f7623210afd0b100f09bffcbbf57f32142ba304b Mon Sep 17 00:00:00 2001
From: davegson <3080765+davegson@users.noreply.github.com>
Date: Wed, 13 May 2020 09:55:43 +0200
Subject: [PATCH] Style podcast episode pages with tailwind

---
 _layouts/page_container.html |  2 +-
 _layouts/podcast.html        | 57 +++++++++++++++---------------------
 _sass/_page_container.scss   | 28 +++++++++++++++++-
 3 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/_layouts/page_container.html b/_layouts/page_container.html
index a24d72f..0e49fda 100644
--- a/_layouts/page_container.html
+++ b/_layouts/page_container.html
@@ -2,7 +2,7 @@
 layout: page
 ---
 
-<section style="padding-top: 10rem; padding-bottom: 10rem;" id="page-container">
+<section id="page-container" class="{{ layout.container_class }}">
   <div class="items-center h-full">
     <div class="container mx-auto px-8 sm:px-0 flex">
       <div class="max-w-screen-lg mx-auto px-4 sm:px-6 lg:flex">
diff --git a/_layouts/podcast.html b/_layouts/podcast.html
index 2beea52..de3fbc2 100644
--- a/_layouts/podcast.html
+++ b/_layouts/podcast.html
@@ -1,40 +1,29 @@
 ---
-layout: page
+layout: page_container
 title: "The Safing Podcast"
 heading: "The Safing Podcast"
+container_class: "podcast"
 ---
 
-<section style="padding-top: 16rem; padding-bottom: 6rem;">
-  <div class="items-center h-full">
-    <div class="container mx-auto px-8 sm:px-0 flex">
-      <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex">
-        <div class="py-12 bg-white">
-          <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center pb-10">
-              {% assign title_length = page.title | size %}
-              <span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 ml-0 w-full left-0 text-center absolute bg-top">#{{ page.title | slice: 2, 2 }}</span>
-              <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">{{ page.title | slice: 7, title_length }}</h2>
-              <p class="opacity-50">{{ page.date | date: "%B %-d, %Y" }}</p>
-              <div class="flex mx-auto justify-center pt-5">
-                <a href="{{ site.twitter_url }}" class="opacity-50 hover:opacity-100 ease-in-out duration-150" target="_blank">
-                  <img style="height: 1.1rem; width: auto;" src="{{ site.img_url }}icons/twitter.svg">
-                </a>
-                <a href="{{ site.github_url }}" class="pl-4 pr-4  opacity-50 hover:opacity-100 ease-in-out duration-150" target="_blank">
-                  <img style="height: 1.19rem; width: auto;" src="{{ site.img_url }}icons/github.svg">
-                </a>
-                <a href="{{ site.reddit_url }}" class="opacity-50 hover:opacity-100 ease-in-out duration-150" target="_blank">
-                  <img style="height: 1.18rem; width: auto;" src="{{ site.img_url }}icons/reddit.svg">
-                </a>
-              </div>
-            </div>
-            {{ content | replace: '<!--break-->', '<a class="anchor" id="continue"></a>' }}
-            <div class="max-w-3xl mt-10">
-              <h3>Description</h3>
-              {{ page.summary }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+<div class="text-center">
+  {% assign title_length = page.title | size %}
+  <span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 ml-0 w-full left-0 text-center absolute bg-top">#{{ page.title | slice: 2, 2 }}</span>
+  <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">{{ page.title | slice: 7, title_length }}</h2>
+  <p class="opacity-50">{{ page.date | date: "%B %-d, %Y" }}</p>
+  <div class="flex mx-auto justify-center pt-5">
+    <a href="{{ site.twitter_url }}" class="opacity-50 hover:opacity-100 ease-in-out duration-150" target="_blank">
+      <img style="height: 1.1rem; width: auto;" src="{{ site.img_url }}icons/twitter.svg">
+    </a>
+    <a href="{{ site.github_url }}" class="pl-4 pr-4  opacity-50 hover:opacity-100 ease-in-out duration-150" target="_blank">
+      <img style="height: 1.19rem; width: auto;" src="{{ site.img_url }}icons/github.svg">
+    </a>
+    <a href="{{ site.reddit_url }}" class="opacity-50 hover:opacity-100 ease-in-out duration-150" target="_blank">
+      <img style="height: 1.18rem; width: auto;" src="{{ site.img_url }}icons/reddit.svg">
+    </a>
   </div>
-</section>
+</div>
+<div class="content">
+  {{ content | replace: '<!--break-->', '<a class="anchor" id="continue"></a>' }}
+  <h3>Description</h3>
+  {{ page.summary }}
+</div>
diff --git a/_sass/_page_container.scss b/_sass/_page_container.scss
index 8237c03..f1a5090 100644
--- a/_sass/_page_container.scss
+++ b/_sass/_page_container.scss
@@ -1,3 +1,12 @@
+#page-container {
+  padding: 10rem 0;
+
+  &.podcast {
+    padding-top: 16rem;
+    padding-bottom: 6rem;
+  }
+}
+
 #page-container content {
   p {
     padding-top: 1.8rem;
@@ -41,6 +50,12 @@
     font-weight: 800;
   }
 
+  h4 {
+    font-size: 1.1rem;
+    padding: 0.5rem 0;
+    font-weight: 500;
+  }
+
   ul {
     padding-top: 2rem;
   }
@@ -69,7 +84,7 @@
     }
 
     p {
-      padding-top: 1rem;
+      padding: 0.5rem 0;
     }
 
     p img {
@@ -90,5 +105,16 @@
       margin-bottom: 4rem;
       margin-top: 5rem;
     }
+
+    .podcast h2 {
+      padding-top: 1rem;
+      font-weight: 500;
+      font-size: 1rem;
+      padding-bottom: 0.5rem;
+    }
+
+    audio {
+      padding-bottom: 1.5rem;
+    }
   }
 }