feat: 1. Version des Card grids auf der Seite Aktuelles.

This commit is contained in:
muli 2023-05-11 11:37:16 +02:00
parent 0676d046f9
commit 952f8031f7
4 changed files with 155 additions and 50 deletions

View File

@ -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;

View 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

View 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

View File

@ -8,56 +8,66 @@
{%- endif -%} {%- endif -%}
{%- endblock -%} {%- endblock -%}
{% block body %} {% block body %}
<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>
</div>
</div>
<section class="content -odd">
<div class="content__box">
<div class="content__inner_box">
{{ this.body }}
</div>
</div>
</section>
<section class="card_grid -no_pad">
{% set blog_posts = site.get('/blog').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">&ensp;{{ post.author }}</p>
<p class="card__date">{{ post.pub_date|dateformat('long') }}</p>
</div>
</div> </div>
</div> <div class="card__body">
<section class="content -odd"> <div>
<div class="content__box"> <p>{{ post.meta_description }}</p>
<div class="content__inner_box"> </div>
{{ this.body }} <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 %}
<div class="card_grid__card">
<div class="card__header card__header--podcast">
<h2 class="card__heading">{{ episode.title }}</h2>
<div class="card__info">
<p class="card__credits"><img src="../images/microphone.svg" alt="geschrieben von">&ensp;{{ episode.authors }}</p>
<p class="card__date">{{ episode.pub_date|dateformat('long') }}</p>
</div> </div>
</div>
<div class="card__body">
<div>
<p>{{ episode.podcast_teaser }} {{ loop.index }}</p>
</div>
<div class="card__link">
<p><a href="{{ episode.path|url }}">Zur Episode mit Shownotes …</a></a></p>
</div>
</div>
</div> </div>
</section> {% endfor %}
{% endfor %}
<section class="content -no_pad"> </section>
{% 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) %}
{% for episode in episodes %}
<div class="content__inner_aggregate_box">
<h3 class="content__aggregate_heading">
<a class="content__blog_link -odd" href="{{ episode.path|url }}">
<img class="content__podcast_logo_heading" src="{{ '/images/podcast_logo.svg'|asseturl }}" alt="Podcast Logo"> {{ episode.title }}
</a>
</h3>
<hr class="-odd">
<p class="content__meat">
<i>aufgenommen von {{ episode.authors }}, veröffentlicht am {{ episode.pub_date }}</i>
</p>
<p>
{{ episode.podcast_teaser }}
</p>
</div>
{% endfor %}
</div>
</section>
{% endblock %} {% endblock %}