From dde256091f0d199e2d981300fce8bbfae0497ebb Mon Sep 17 00:00:00 2001
From: Stephan <spamonia@gmail.com>
Date: Tue, 6 Apr 2021 18:24:25 +0200
Subject: [PATCH] Podcast layout improvements.

---
 assets/css/style.css          | 53 +++++++++++++++++-----
 templates/macros/podcast.html | 85 +++++++++++++++++++----------------
 templates/podcast.html        | 73 +++++++++++++++---------------
 3 files changed, 125 insertions(+), 86 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index b2864fae..159d1bc5 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -227,7 +227,8 @@ header {
 
 .header__button,
 .content__button,
-.claim__button {
+.claim__button,
+.pod_ctrl_box__button {
     height: 3rem;
     margin: 1.5rem 1rem 0rem 0;
     padding: 0.5rem 2rem 0.5rem 2rem;
@@ -238,6 +239,16 @@ header {
     border-radius: 2rem;
 }
 
+.pod_ctrl_box__button {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    margin: 1.5rem 0 0 0;
+    max-width: 20rem;
+}
+
 .content__button {
     width: 70%;
     margin-top: 0;
@@ -434,20 +445,23 @@ header {
 }
 
 .content__inner_third_button_link,
-.claim__button_link {
+.claim__button_link,
+.pod_ctrl_box__button_link {
     color: var(--wtf-nearly-white) !important;
-    font-family: 'Lato Bold';
+    font-family: 'Lato Bold' !important;
 }
 
 .header__button_link,
 .content__inner_third_button_link,
-.claim__button_link {
+.claim__button_link,
+.pod_ctrl_box__button_link {
     text-decoration: none !important;
 }
 
 .header__button_link:hover,
 .content__inner_third_button_link:hover,
-.claim__button_link:hover {
+.claim__button_link:hover,
+.pod_ctrl_box__button_link:hover {
     text-decoration: underline !important;
 }
 /* header - Ende */
@@ -675,7 +689,7 @@ hr.-even {
     width: 100%;
 }
 
-.content__button {
+.content__button, {
     display: block;
     margin: 0 auto 0 auto;
 }
@@ -702,15 +716,21 @@ hr.-even {
     hyphens: auto;
 }
 
-.content__box a, .pagination__anchor {
+.content__box a,
+.pagination__anchor,
+.content__half_box a {
     color: var(--wtf-orange);
 }
 
-.content__box a:hover, .pagination__anchor:hover {
+.content__box a:hover,
+.pagination__anchor:hover,
+.content__half_box a:hover  {
     color: var(--wtf-light-blue);
 }
 
-.content__box a:visited, .pagination__anchor:visited {
+.content__box a:visited,
+.pagination__anchor:visited,
+.content__half_box a:visited {
     color: var(--wtf-dark-blue);
 }
 
@@ -730,7 +750,6 @@ hr.-even {
     text-align: center;
 }
 
-
 .content__pagination.-even {
     color: var(--wtf-light-grey);
 }
@@ -819,6 +838,12 @@ hr.-even {
     background-color: var(--wtf-night-blue);
     color: var(--wtf-light-grey);
 }
+
+.pod_ctrl_box {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
 /* main - Ende */
 
 /* footer - Start */
@@ -1299,6 +1324,10 @@ footer {
         max-width: 250px;
     }
     /* homepage - end */
+
+    .pod_ctrl_box {
+        margin-top: 1.5rem;
+    }
 }
 
 @media screen and (max-width: 595px) {
@@ -1559,6 +1588,10 @@ footer {
     .content__teaser {
         font-size: 1rem;
     }
+
+    .pod_ctrl_box {
+        margin-top: 1.5rem;
+    }
     /* content - end */
 
     /* footer - start */
diff --git a/templates/macros/podcast.html b/templates/macros/podcast.html
index 6e6abd15..9e78eb3b 100644
--- a/templates/macros/podcast.html
+++ b/templates/macros/podcast.html
@@ -13,29 +13,33 @@
                 </p>
             </div>
         </div>
-        <div class="content__box -columns">
-            <div class="content__inner_box">
-                {{ post.podcast_teaser }}
-                {% if not from_index %}
-                  {{ post.podcast_shownotes }}
-                {% endif %}
+        <div class="content__half_box">
+            <div class="content__inner_half_box">
+              {{ post.podcast_teaser }}
+              {% if not from_index %}
+                {{ post.podcast_shownotes }}
+              {% endif %}
+            </div>
 
-                {% if from_index -%}
-                  <br/>
-                  <audio controls>
-                  {% if post.podcastogg -%}
-                    <source src="{{ post|url}}{{ post.podcastogg }}" type="audio/ogg">
-                  {%- endif %}
-                  {% if post.podcastmp3 -%}
-                    <source src="{{  post|url }}{{ post.podcastmp3 }}" type="audio/mpeg">
-                  {%- endif %}
-                    Your browser does not support the audio element.
+            {% if from_index -%}
+              <div class="content__inner_half_box">
+                <div class="pod_ctrl_box">
+                  <audio controls class="pod_ctrl_box__audio_controls">
+                    {% if post.podcastogg -%}
+                      <source src="{{ post|url}}{{ post.podcastogg }}" type="audio/ogg">
+                    {%- endif %}
+                    {% if post.podcastmp3 -%}
+                      <source src="{{  post|url }}{{ post.podcastmp3 }}" type="audio/mpeg">
+                    {%- endif %}
+                      Your browser does not support the audio element.
                   </audio>
-                  <br/>
-                  <a href="{{ post|url }}" class="button">Podcastfolge durchst&ouml;bern</a>
-                  <br/>
-                {% else -%}
-                  <audio controls>
+                  <div class="pod_ctrl_box__button">
+                    <a class="pod_ctrl_box__button_link" href="{{ post|url }}" >Podcastfolge durchst&ouml;bern</a>
+                  </div>
+                </div>
+            {% else -%}
+              <div class="content__inner_half_box">
+                <audio controls>
                   {% if post.podcastogg -%}
                     <source src="{{ post.podcastogg|url }}" type="audio/ogg">
                   {%- endif %}
@@ -43,28 +47,31 @@
                     <source src="{{ post.podcastmp3|url }}" type="audio/mpeg">
                   {%- endif %}
                     Your browser does not support the audio element.
-                  </audio>
-                  <br/>
+                </audio>
+                <br/>
                 {% if post.podcastmp3 -%}
-                  <a class="button" href="{{ post.podcastmp3|url  }}" download>
-                  {%- if post.podcasttitle -%}
-                    {{ post.podcasttitle }}
-                  {%- else -%}
-                    Download Folge
-                  {%- endif -%}
-                  {{ ' als MP3' }}</a>
+                  <a class="" href="{{ post.podcastmp3|url  }}" download>
+                    {%- if post.podcasttitle -%}
+                      {{ post.podcasttitle }}
+                    {%- else -%}
+                      Download Folge
+                    {%- endif -%}
+                    {{ ' als MP3' }}
+                  </a>
                 {% endif %}
                 {% if post.podcastogg -%}
-                  <a class="button special" href="{{ post.podcastogg|url  }}" download>
-                  {%- if post.podcasttitle -%}
-                    {{ post.podcasttitle }}
-                  {%- else -%}
-                    Download Folge
-                  {%- endif -%}
-                  {{ ' als OGG' }}</a>
+                  <a class="" href="{{ post.podcastogg|url  }}" download>
+                    {%- if post.podcasttitle -%}
+                      {{ post.podcasttitle }}
+                    {%- else -%}
+                      Download Folge
+                    {%- endif -%}
+                    {{ ' als OGG' }}
+                  </a>
                 {% endif %}<br/>
-              {% endif %}
-            </div>
+              </div>
+            {% endif %}
+          </div>
         </div>
     </section>
 {% endmacro %}
diff --git a/templates/podcast.html b/templates/podcast.html
index ea31956e..23a1c566 100644
--- a/templates/podcast.html
+++ b/templates/podcast.html
@@ -4,48 +4,47 @@
 
 {%- block title -%}{{ this.title }}{%- endblock -%}
 {%- block meta_description -%}
-  {%- if this.meta_description is defined and this.meta_description != "" -%}
-    {{ this.meta_description }}
-  {%- else -%}
-    Werkkooperative der Technikfreundinnen eG
-  {%- endif -%}
+    {%- if this.meta_description is defined and this.meta_description != "" -%}
+        {{ this.meta_description }}
+    {%- else -%}
+        Werkkooperative der Technikfreundinnen eG
+    {%- endif -%}
 {%- endblock -%}
 
 {% block body %}
-{#
- Main body part for the podcast
-#}
-<section id="main" class="container">
-   <div class="content__box">
-      <div class="content__inner_box">
-        <h1>{{ this.title }}</h1>
-        {{ this.description }}
-      </div>
-    </div>
-
-    <section class="content -odd -columns">
-      <div class="content__box">
-        <div class="content__inner_box">
-          {{ this.body }}
-          {% if this.enable or this.enable2 -%}
-            {% if this.enable -%}
-              <a class="button special" href="{{ this.link|url }}"> {{ this.spruch }}</a>
-            {%- endif %}
-            {% if this.enable2 -%}
-              <a class="button special" href="{{ this.link2|url }}"> {{ this.spruch2 }}</a>
-            {%- endif %}
-          {% endif -%}
+    {#
+     Main body part for the podcast
+    #}
+        <div class="content__box">
+            <div class="content__inner_box">
+                <h1>{{ this.title }}</h1>
+                {{ this.description }}
+            </div>
         </div>
-      </div>
-    </section>
 
-{#-  Die Podcast Folgen werden aus dem blog template importiert :P -#}
+        <section class="content -odd -columns">
+            <div class="content__box">
+                <div class="content__inner_box">
+                    {{ this.body }}
+                    {% if this.enable or this.enable2 -%}
+                        {% if this.enable -%}
+                            <a class="button special" href="{{ this.link|url }}"> {{ this.spruch }}</a>
+                        {%- endif %}
+                        {% if this.enable2 -%}
+                            <a class="button special" href="{{ this.link2|url }}"> {{ this.spruch2 }}</a>
+                        {%- endif %}
+                    {% endif -%}
+                </div>
+            </div>
+        </section>
+
+        {#-  Die Podcast Folgen werden aus dem blog template importiert :P -#}
 
 
-    {% for blog_post in this.pagination.items %}
-        {{ render_blog_post(blog_post, from_index=true, section_class=loop.cycle('-odd', '-even')) }}
-    {% endfor %}
-    <section>
-        {{ render_pagination(this.pagination, true) }}
-    </section>
+        {% for blog_post in this.pagination.items %}
+                {{ render_blog_post(blog_post, from_index=true, section_class=loop.cycle('-odd', '-even')) }}
+        {% endfor %}
+        <section>
+            {{ render_pagination(this.pagination, true) }}
+        </section>
 {% endblock %}