Podcast layout improvements.

This commit is contained in:
Stephan 2021-04-06 18:24:25 +02:00
parent 6c806ecf18
commit dde256091f
3 changed files with 125 additions and 86 deletions

View File

@ -227,7 +227,8 @@ header {
.header__button, .header__button,
.content__button, .content__button,
.claim__button { .claim__button,
.pod_ctrl_box__button {
height: 3rem; height: 3rem;
margin: 1.5rem 1rem 0rem 0; margin: 1.5rem 1rem 0rem 0;
padding: 0.5rem 2rem 0.5rem 2rem; padding: 0.5rem 2rem 0.5rem 2rem;
@ -238,6 +239,16 @@ header {
border-radius: 2rem; 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 { .content__button {
width: 70%; width: 70%;
margin-top: 0; margin-top: 0;
@ -434,20 +445,23 @@ header {
} }
.content__inner_third_button_link, .content__inner_third_button_link,
.claim__button_link { .claim__button_link,
.pod_ctrl_box__button_link {
color: var(--wtf-nearly-white) !important; color: var(--wtf-nearly-white) !important;
font-family: 'Lato Bold'; font-family: 'Lato Bold' !important;
} }
.header__button_link, .header__button_link,
.content__inner_third_button_link, .content__inner_third_button_link,
.claim__button_link { .claim__button_link,
.pod_ctrl_box__button_link {
text-decoration: none !important; text-decoration: none !important;
} }
.header__button_link:hover, .header__button_link:hover,
.content__inner_third_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; text-decoration: underline !important;
} }
/* header - Ende */ /* header - Ende */
@ -675,7 +689,7 @@ hr.-even {
width: 100%; width: 100%;
} }
.content__button { .content__button, {
display: block; display: block;
margin: 0 auto 0 auto; margin: 0 auto 0 auto;
} }
@ -702,15 +716,21 @@ hr.-even {
hyphens: auto; hyphens: auto;
} }
.content__box a, .pagination__anchor { .content__box a,
.pagination__anchor,
.content__half_box a {
color: var(--wtf-orange); 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); 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); color: var(--wtf-dark-blue);
} }
@ -730,7 +750,6 @@ hr.-even {
text-align: center; text-align: center;
} }
.content__pagination.-even { .content__pagination.-even {
color: var(--wtf-light-grey); color: var(--wtf-light-grey);
} }
@ -819,6 +838,12 @@ hr.-even {
background-color: var(--wtf-night-blue); background-color: var(--wtf-night-blue);
color: var(--wtf-light-grey); color: var(--wtf-light-grey);
} }
.pod_ctrl_box {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* main - Ende */ /* main - Ende */
/* footer - Start */ /* footer - Start */
@ -1299,6 +1324,10 @@ footer {
max-width: 250px; max-width: 250px;
} }
/* homepage - end */ /* homepage - end */
.pod_ctrl_box {
margin-top: 1.5rem;
}
} }
@media screen and (max-width: 595px) { @media screen and (max-width: 595px) {
@ -1559,6 +1588,10 @@ footer {
.content__teaser { .content__teaser {
font-size: 1rem; font-size: 1rem;
} }
.pod_ctrl_box {
margin-top: 1.5rem;
}
/* content - end */ /* content - end */
/* footer - start */ /* footer - start */

View File

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

View File

@ -12,10 +12,9 @@
{%- endblock -%} {%- endblock -%}
{% block body %} {% block body %}
{# {#
Main body part for the podcast Main body part for the podcast
#} #}
<section id="main" class="container">
<div class="content__box"> <div class="content__box">
<div class="content__inner_box"> <div class="content__inner_box">
<h1>{{ this.title }}</h1> <h1>{{ this.title }}</h1>
@ -39,7 +38,7 @@
</div> </div>
</section> </section>
{#- Die Podcast Folgen werden aus dem blog template importiert :P -#} {#- Die Podcast Folgen werden aus dem blog template importiert :P -#}
{% for blog_post in this.pagination.items %} {% for blog_post in this.pagination.items %}