feat: 1. Version des Card grids auf der Seite Aktuelles.
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
94cfc60bd6
commit
ab1b64ef69
@ -811,6 +811,81 @@ hr.-even {
|
|||||||
}
|
}
|
||||||
/* Contact form on homepage - end */
|
/* Contact form on homepage - end */
|
||||||
|
|
||||||
|
/* card_grid - start */
|
||||||
|
.card_grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
row-gap: 1.5rem;
|
||||||
|
column-gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card_grid__card {
|
||||||
|
/* RESET VALUES FROM OTHER CARD CLASS - START */
|
||||||
|
margin: 0;
|
||||||
|
max-width: max-content;
|
||||||
|
display: block;
|
||||||
|
/* RESET VALUES FROM OTHER CARD CLASS - END */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__header {
|
||||||
|
background-color: #0990A9;
|
||||||
|
background-image: url("../images/rss_logo.svg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top 1rem right 1rem;
|
||||||
|
background-size: 2.25rem;
|
||||||
|
color: var(--wtf-nearly-white);
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__header--podcast {
|
||||||
|
background-color: #2560f4ff;
|
||||||
|
background-image: url("../images/podcast_logo.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__header img {
|
||||||
|
position: relative;
|
||||||
|
top: 0.15rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__heading {
|
||||||
|
font-family: "Noto Serif";
|
||||||
|
font-size: 1.75rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
color: var(--wtf-nearly-white);
|
||||||
|
margin: 0.5rem 0 1rem 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__info p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__body {
|
||||||
|
background-color: var(--wtf-nearly-white);
|
||||||
|
padding: 1rem;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-shadow: 0px -0.25rem 0.5rem -0.25rem var(--wtf-nearly-black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__link p {
|
||||||
|
text-align: right;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/* card_grid - end */
|
||||||
|
|
||||||
.content__box p, .content__box li {
|
.content__box p, .content__box li {
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
}
|
}
|
||||||
@ -872,7 +947,8 @@ hr.-even {
|
|||||||
.content__half_box,
|
.content__half_box,
|
||||||
.footer__wrapper,
|
.footer__wrapper,
|
||||||
.content__third_box,
|
.content__third_box,
|
||||||
.content__aggregate_box {
|
.content__aggregate_box,
|
||||||
|
.card_grid {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
orphans: 3;
|
orphans: 3;
|
||||||
|
|||||||
7
assets/images/microphone.svg
Normal file
7
assets/images/microphone.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 10 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g transform="matrix(1.16667,0,0,1.16667,-0.0538462,0)">
|
||||||
|
<path d="M8.354,5.077L8.354,6C8.354,7.063 7.999,7.987 7.29,8.773C6.581,9.559 5.705,10.01 4.662,10.125L4.662,11.077L6.508,11.077C6.633,11.077 6.741,11.123 6.832,11.214C6.924,11.305 6.969,11.413 6.969,11.538C6.969,11.663 6.924,11.772 6.832,11.863C6.741,11.954 6.633,12 6.508,12L1.892,12C1.767,12 1.659,11.954 1.568,11.863C1.476,11.772 1.431,11.663 1.431,11.538C1.431,11.413 1.476,11.305 1.568,11.214C1.659,11.123 1.767,11.077 1.892,11.077L3.738,11.077L3.738,10.125C2.695,10.01 1.819,9.559 1.11,8.773C0.401,7.987 0.046,7.063 0.046,6L0.046,5.077C0.046,4.952 0.092,4.844 0.183,4.752C0.275,4.661 0.383,4.615 0.508,4.615C0.633,4.615 0.741,4.661 0.832,4.752C0.924,4.844 0.969,4.952 0.969,5.077L0.969,6C0.969,6.889 1.285,7.65 1.918,8.282C2.55,8.915 3.311,9.231 4.2,9.231C5.089,9.231 5.85,8.915 6.482,8.282C7.115,7.65 7.431,6.889 7.431,6L7.431,5.077C7.431,4.952 7.476,4.844 7.568,4.752C7.659,4.661 7.767,4.615 7.892,4.615C8.017,4.615 8.125,4.661 8.217,4.752C8.308,4.844 8.354,4.952 8.354,5.077ZM6.508,2.308L6.508,6C6.508,6.635 6.282,7.178 5.83,7.63C5.378,8.082 4.835,8.308 4.2,8.308C3.565,8.308 3.022,8.082 2.57,7.63C2.118,7.178 1.892,6.635 1.892,6L1.892,2.308C1.892,1.673 2.118,1.13 2.57,0.678C3.022,0.226 3.565,0 4.2,0C4.835,0 5.378,0.226 5.83,0.678C6.282,1.13 6.508,1.673 6.508,2.308Z" style="fill:white;fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
12
assets/images/pencil_square.svg
Normal file
12
assets/images/pencil_square.svg
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 14 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g id="pencil-square" transform="matrix(0.954901,0,0,0.993964,314.162,69.0799)">
|
||||||
|
<g transform="matrix(1,0,0,1,-330,-70)">
|
||||||
|
<path d="M15.502,1.94C15.695,2.134 15.695,2.452 15.502,2.646L14.459,3.69L12.459,1.69L13.502,0.646C13.696,0.452 14.015,0.452 14.209,0.646L15.502,1.939L15.502,1.94ZM13.752,4.396L11.752,2.396L4.939,9.21C4.884,9.265 4.843,9.332 4.818,9.406L4.013,11.82C4.005,11.845 4,11.872 4,11.899C4,12.036 4.113,12.149 4.25,12.149C4.277,12.149 4.304,12.144 4.329,12.136L6.743,11.331C6.817,11.307 6.884,11.266 6.939,11.211L13.752,4.397L13.752,4.396Z" style="fill:white;fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1,0,0,1,-330,-70)">
|
||||||
|
<path d="M1,13.5C1,14.323 1.677,15 2.5,15L13.5,15C14.323,15 15,14.323 15,13.5L15,7.5C15,7.226 14.774,7 14.5,7C14.226,7 14,7.226 14,7.5L14,13.5C14,13.774 13.774,14 13.5,14L2.5,14C2.226,14 2,13.774 2,13.5L2,2.5C2,2.226 2.226,2 2.5,2L9,2C9.274,2 9.5,1.774 9.5,1.5C9.5,1.226 9.274,1 9,1L2.5,1C1.677,1 1,1.677 1,2.5L1,13.5Z" style="fill:white;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -21,43 +21,53 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="content -no_pad">
|
<section class="card_grid -no_pad">
|
||||||
{% set blog_posts = site.get('/blog').children.order_by('-pub_date').limit(3) %}
|
{% set blog_posts = site.get('/blog').children.order_by('-pub_date').limit(3) %}
|
||||||
<div class="content__aggregate_box">
|
|
||||||
{% for post in blog_posts %}
|
|
||||||
<div class="content__inner_aggregate_box">
|
|
||||||
<h3 class="content__aggregate_heading">
|
|
||||||
<a class="content__blog_link -odd" href="{{ post.path|url }}">
|
|
||||||
<img class="content__rss_logo_heading" src="{{ '/images/rss_logo.svg'|asseturl }}" alt="RSS Logo"> {{ post.title }}
|
|
||||||
</a>
|
|
||||||
</h3>
|
|
||||||
<hr class="-odd">
|
|
||||||
<p class="content__meat">
|
|
||||||
<i>geschrieben von {{ post.author }} am {{ post.pub_date }}</i>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
{{ post.meta_description }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
{% set episodes = site.get('/podcast').children.order_by('-pub_date').limit(3) %}
|
{% set episodes = site.get('/podcast').children.order_by('-pub_date').limit(3) %}
|
||||||
|
{% for post in blog_posts %}
|
||||||
|
<div class="card_grid__card">
|
||||||
|
<div class="card__header">
|
||||||
|
<h2 class="card__heading">{{ post.title }}</h2>
|
||||||
|
<div class="card__info">
|
||||||
|
<p class="card__credits"><img src="../images/pencil_square.svg" alt="geschrieben von"> {{ post.author }}</p>
|
||||||
|
<p class="card__date">{{ post.pub_date|dateformat('long') }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__body">
|
||||||
|
<div>
|
||||||
|
<p>{{ post.meta_description }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="card__link">
|
||||||
|
<p><a href="{{ post.path|url }}">Zum vollständigen Post …</a></a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#
|
||||||
|
Ist ein wenige hässlich, aber ich habe keine Möglichkeit gefunden ohne Schleife
|
||||||
|
auf eine Episode zuzugreifen. Ziel war abwechseln einen Blogpost und eine Episode
|
||||||
|
des Podcasts zu rendern.
|
||||||
|
#}
|
||||||
|
{% set episodes = site.get('/podcast').children.order_by('-pub_date').offset(loop.index - 1).limit(1) %}
|
||||||
{% for episode in episodes %}
|
{% for episode in episodes %}
|
||||||
<div class="content__inner_aggregate_box">
|
<div class="card_grid__card">
|
||||||
<h3 class="content__aggregate_heading">
|
<div class="card__header card__header--podcast">
|
||||||
<a class="content__blog_link -odd" href="{{ episode.path|url }}">
|
<h2 class="card__heading">{{ episode.title }}</h2>
|
||||||
<img class="content__podcast_logo_heading" src="{{ '/images/podcast_logo.svg'|asseturl }}" alt="Podcast Logo"> {{ episode.title }}
|
<div class="card__info">
|
||||||
</a>
|
<p class="card__credits"><img src="../images/microphone.svg" alt="geschrieben von"> {{ episode.authors }}</p>
|
||||||
</h3>
|
<p class="card__date">{{ episode.pub_date|dateformat('long') }}</p>
|
||||||
<hr class="-odd">
|
</div>
|
||||||
<p class="content__meat">
|
</div>
|
||||||
<i>aufgenommen von {{ episode.authors }}, veröffentlicht am {{ episode.pub_date }}</i>
|
<div class="card__body">
|
||||||
</p>
|
<div>
|
||||||
<p>
|
<p>{{ episode.podcast_teaser }} {{ loop.index }}</p>
|
||||||
{{ episode.podcast_teaser }}
|
</div>
|
||||||
</p>
|
<div class="card__link">
|
||||||
|
<p><a href="{{ episode.path|url }}">Zur Episode mit Shownotes …</a></a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
{% endfor %}
|
||||||
</section>
|
</section>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user