Podcast layout improvements.
This commit is contained in:
Stephan
parent
6c806ecf18
commit
dde256091f
@ -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 */
|
||||
|
||||
@ -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öbern</a>
|
||||
<br/>
|
||||
{% else -%}
|
||||
<audio controls>
|
||||
<div class="pod_ctrl_box__button">
|
||||
<a class="pod_ctrl_box__button_link" href="{{ post|url }}" >Podcastfolge durchstö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 %}
|
||||
|
||||
@ -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 %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user