Gro/webseite
0
0
Fork 0
forked from ag_kommunikation/webseite
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Podcast layout improvements.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
assets/css/style.css
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 */

85
templates/macros/podcast.html
View File

@ -13,29 +13,33 @@
</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">
{% if post.podcastogg -%} <audio controls class="pod_ctrl_box__audio_controls">
<source src="{{ post|url}}{{ post.podcastogg }}" type="audio/ogg"> {% if post.podcastogg -%}
{%- endif %} <source src="{{ post|url}}{{ post.podcastogg }}" type="audio/ogg">
{% if post.podcastmp3 -%} {%- endif %}
<source src="{{ post|url }}{{ post.podcastmp3 }}" type="audio/mpeg"> {% if post.podcastmp3 -%}
{%- endif %} <source src="{{ post|url }}{{ post.podcastmp3 }}" type="audio/mpeg">
Your browser does not support the audio element. {%- endif %}
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>
{% else -%} </div>
<audio controls> {% else -%}
<div class="content__inner_half_box">
<audio controls>
{% if post.podcastogg -%} {% if post.podcastogg -%}
<source src="{{ post.podcastogg|url }}" type="audio/ogg"> <source src="{{ post.podcastogg|url }}" type="audio/ogg">
{%- endif %} {%- endif %}
@ -43,28 +47,31 @@
<source src="{{ post.podcastmp3|url }}" type="audio/mpeg"> <source src="{{ post.podcastmp3|url }}" type="audio/mpeg">
{%- endif %} {%- endif %}
Your browser does not support the audio element. Your browser does not support the audio element.
</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/>
{% endif %} </div>
</div> {% endif %}
</div>
</div> </div>
</section> </section>
{% endmacro %} {% endmacro %}

73
templates/podcast.html
View File

@ -4,48 +4,47 @@
{%- block title -%}{{ this.title }}{%- endblock -%} {%- block title -%}{{ this.title }}{%- endblock -%}
{%- block meta_description -%} {%- block meta_description -%}
{%- if this.meta_description is defined and this.meta_description != "" -%} {%- if this.meta_description is defined and this.meta_description != "" -%}
{{ this.meta_description }} {{ this.meta_description }}
{%- else -%} {%- else -%}
Werkkooperative der Technikfreundinnen eG Werkkooperative der Technikfreundinnen eG
{%- endif -%} {%- endif -%}
{%- 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> {{ this.description }}
{{ this.description }} </div>
</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 -%}
</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 %} {% for blog_post in this.pagination.items %}
{{ render_blog_post(blog_post, from_index=true, section_class=loop.cycle('-odd', '-even')) }} {{ render_blog_post(blog_post, from_index=true, section_class=loop.cycle('-odd', '-even')) }}
{% endfor %} {% endfor %}
<section> <section>
{{ render_pagination(this.pagination, true) }} {{ render_pagination(this.pagination, true) }}
</section> </section>
{% endblock %} {% endblock %}