forked from ag_kommunikation/webseite
feat: 1. Version des Card grids auf der Seite Aktuelles.
This commit is contained in:
parent
0676d046f9
commit
952f8031f7
@ -811,6 +811,81 @@ hr.-even {
|
||||
}
|
||||
/* 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 {
|
||||
hyphens: auto;
|
||||
}
|
||||
@ -872,7 +947,8 @@ hr.-even {
|
||||
.content__half_box,
|
||||
.footer__wrapper,
|
||||
.content__third_box,
|
||||
.content__aggregate_box {
|
||||
.content__aggregate_box,
|
||||
.card_grid {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
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 |
@ -8,56 +8,66 @@
|
||||
{%- endif -%}
|
||||
{%- endblock -%}
|
||||
{% block body %}
|
||||
<div class="content__box">
|
||||
<div class="content__inner_box">
|
||||
<h1>{{ this.title }}</h1>
|
||||
<div class="content__box">
|
||||
<div class="content__inner_box">
|
||||
<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"> {{ post.author }}</p>
|
||||
<p class="card__date">{{ post.pub_date|dateformat('long') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="content -odd">
|
||||
<div class="content__box">
|
||||
<div class="content__inner_box">
|
||||
{{ this.body }}
|
||||
<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 %}
|
||||
<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"> {{ episode.authors }}</p>
|
||||
<p class="card__date">{{ episode.pub_date|dateformat('long') }}</p>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<section class="content -no_pad">
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user