From 952f8031f770363e4d4234174ee0ce0542256a06 Mon Sep 17 00:00:00 2001 From: muli Date: Thu, 11 May 2023 11:37:16 +0200 Subject: [PATCH] feat: 1. Version des Card grids auf der Seite Aktuelles. --- assets/css/style.css | 78 ++++++++++++++++++++++- assets/images/microphone.svg | 7 +++ assets/images/pencil_square.svg | 12 ++++ templates/aggregator_page.html | 108 +++++++++++++++++--------------- 4 files changed, 155 insertions(+), 50 deletions(-) create mode 100644 assets/images/microphone.svg create mode 100644 assets/images/pencil_square.svg diff --git a/assets/css/style.css b/assets/css/style.css index beb5db5..ea21176 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -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; diff --git a/assets/images/microphone.svg b/assets/images/microphone.svg new file mode 100644 index 0000000..a0b290b --- /dev/null +++ b/assets/images/microphone.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/images/pencil_square.svg b/assets/images/pencil_square.svg new file mode 100644 index 0000000..022b632 --- /dev/null +++ b/assets/images/pencil_square.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/templates/aggregator_page.html b/templates/aggregator_page.html index cf03d97..d1e0c53 100644 --- a/templates/aggregator_page.html +++ b/templates/aggregator_page.html @@ -8,56 +8,66 @@ {%- endif -%} {%- endblock -%} {% block body %} -
-
-

{{ this.title }}

+
+
+

{{ this.title }}

+
+
+
+
+
+ {{ this.body }} +
+
+
+ +
+ {% 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 %} +
+
+

{{ post.title }}

+
+

geschrieben von {{ post.author }}

+

{{ post.pub_date|dateformat('long') }}

+
-
-
-
-
- {{ this.body }} +
+
+

{{ post.meta_description }}

+
+
+

Zum vollständigen Post …

+
+
+
+ + {# + 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 %} +
+
+

{{ episode.title }}

+
+

geschrieben von {{ episode.authors }}

+

{{ episode.pub_date|dateformat('long') }}

+
+
+
+

{{ episode.podcast_teaser }} {{ loop.index }}

+
+
+

Zur Episode mit Shownotes …

+
+
-
- -
- {% set blog_posts = site.get('/blog').children.order_by('-pub_date').limit(3) %} -
- {% for post in blog_posts %} -
-

- - RSS Logo {{ post.title }} - -

-
-

- geschrieben von {{ post.author }} am {{ post.pub_date }} -

-

- {{ post.meta_description }} -

-
- {% endfor %} - - {% set episodes = site.get('/podcast').children.order_by('-pub_date').limit(3) %} - {% for episode in episodes %} -
-

- - Podcast Logo {{ episode.title }} - -

-
-

- aufgenommen von {{ episode.authors }}, veröffentlicht am {{ episode.pub_date }} -

-

- {{ episode.podcast_teaser }} -

-
- {% endfor %} -
-
+ {% endfor %} + {% endfor %} +
{% endblock %}