Podcast layout improvements.

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 */

templates/macros/podcast.html

@@ -13,16 +13,18 @@
                 </p>
             </div>
         </div>
-        <div class="content__box -columns">
+        <div class="content__half_box">
-            <div class="content__inner_box">
+            <div class="content__inner_half_box">
               {{ post.podcast_teaser }}
               {% if not from_index %}
                 {{ post.podcast_shownotes }}
               {% endif %}
+            </div>
 
             {% if from_index -%}
-                  <br/>
+              <div class="content__inner_half_box">
-                  <audio controls>
+                <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 %}
@@ -31,10 +33,12 @@
                     {%- endif %}
                       Your browser does not support the audio element.
                   </audio>
-                  <br/>
+                  <div class="pod_ctrl_box__button">
-                  <a href="{{ post|url }}" class="button">Podcastfolge durchst&ouml;bern</a>
+                    <a class="pod_ctrl_box__button_link" href="{{ post|url }}" >Podcastfolge durchst&ouml;bern</a>
-                  <br/>
+                  </div>
+                </div>
             {% else -%}
+              <div class="content__inner_half_box">
                 <audio controls>
                   {% if post.podcastogg -%}
                     <source src="{{ post.podcastogg|url }}" type="audio/ogg">
@@ -46,23 +50,26 @@
                 </audio>
                 <br/>
                 {% if post.podcastmp3 -%}
-                  <a class="button" href="{{ post.podcastmp3|url  }}" download>
+                  <a class="" href="{{ post.podcastmp3|url  }}" download>
                     {%- if post.podcasttitle -%}
                       {{ post.podcasttitle }}
                     {%- else -%}
                       Download Folge
                     {%- endif -%}
-                  {{ ' als MP3' }}</a>
+                    {{ ' als MP3' }}
+                  </a>
                 {% endif %}
                 {% if post.podcastogg -%}
-                  <a class="button special" href="{{ post.podcastogg|url  }}" download>
+                  <a class="" href="{{ post.podcastogg|url  }}" download>
                     {%- if post.podcasttitle -%}
                       {{ post.podcasttitle }}
                     {%- else -%}
                       Download Folge
                     {%- endif -%}
-                  {{ ' als OGG' }}</a>
+                    {{ ' als OGG' }}
+                  </a>
                 {% endif %}<br/>
+              </div>
             {% endif %}
           </div>
         </div>

templates/podcast.html

@@ -15,7 +15,6 @@
     {#
      Main body part for the podcast
     #}
-<section id="main" class="container">
         <div class="content__box">
             <div class="content__inner_box">
                 <h1>{{ this.title }}</h1>