diff --git a/src/includes/header.njk b/src/includes/header.njk index 42a7f9aad..7c903dcd5 100644 --- a/src/includes/header.njk +++ b/src/includes/header.njk @@ -1,8 +1,9 @@ -{% if page.url != '/' %} +{% set isMainPage = (page.url == '/') %} +{% if not isMainPage %} {% set path = '/../../' %} {% set mainLinkPath = 'href="/"' %} {% endif %} -{% if page.url == '/' %} +{% if isMainPage %} {% set headerMod = 'header--index' %} {% set menuMod = 'menu--index' %} {% set logoMod = 'logo--index' %} @@ -42,4 +43,20 @@ {% include 'menu.njk' %} + {% if isMainPage and lastPodcastEpisode %} + + + + {{- lastPodcastEpisode.episode -}} + + + {{ lastPodcastEpisode.title }} + + + {% endif %} diff --git a/src/pages/index.11tydata.js b/src/pages/index.11tydata.js new file mode 100644 index 000000000..9d31eca54 --- /dev/null +++ b/src/pages/index.11tydata.js @@ -0,0 +1,15 @@ +module.exports = { + eleventyComputed: { + lastPodcastEpisode: function(data) { + const { episodes } = data.collections; + + if (!episodes || episodes.length === 0) { + return; + } + + const lastEpisode = episodes.at(-1); + + return lastEpisode; + }, + }, +}; diff --git a/src/styles/blocks/header.css b/src/styles/blocks/header.css index 7edfc09a1..b1c1aeaa7 100644 --- a/src/styles/blocks/header.css +++ b/src/styles/blocks/header.css @@ -16,7 +16,9 @@ } .header--index { - grid-template-columns: 1fr; + grid-template-rows: auto auto; + grid-template-columns: 3fr 1fr; + padding-bottom: 48px; } } @@ -42,8 +44,7 @@ } .header--index .header__logo { - order: 1; - padding: 16px 0 47px; + padding: 16px 0; } } @@ -64,7 +65,22 @@ } .header--index .header__menu { + grid-row: 1; + grid-column: 1 / -1; padding-bottom: 13px; border-bottom: 1px solid var(--color-grey-lighter); } } + +@media (max-width: 735px) { + .header__informers { + margin-top: 16px; + margin-bottom: 32px; + } +} + +@media (min-width: 736px) { + .header__informers { + margin-top: 18px; + } +} diff --git a/src/styles/blocks/informer.css b/src/styles/blocks/informer.css index 1f57e9b2a..9983cf4cf 100644 --- a/src/styles/blocks/informer.css +++ b/src/styles/blocks/informer.css @@ -1,306 +1,79 @@ -/* Informer */ - .informer { + --informer-icon-size: 32px; position: relative; - margin: 0; - padding: 0; - overflow-x: hidden; - white-space: nowrap; - list-style: none; -} - -@media (min-width: 375px) { - .informer { - white-space: normal; - } + color: inherit; + font-size: 14px; + line-height: 1.3; + text-decoration: none; } -@media (min-width: 568px) { +@media (max-width: 735px) { .informer { - display: grid; - grid-template-columns: 1fr 1fr; - grid-column-gap: 20px; + padding-top: 5px; + padding-left: calc(var(--informer-icon-size) + 8px); } } -@media (min-width: 1024px) { +@media (min-width: 736px) { .informer { - grid-column-gap: 49px; - } -} - -.informer::after { - position: absolute; - top: 0; - right: 0; - width: 20%; - height: 100%; - background-image: linear-gradient( - to left, - white, #ffffff00 - ); - pointer-events: none; - content: ''; -} - -@media (min-width: 375px) { - .informer::after { - display: none; - } -} - -/* Item */ - -.informer__item { - padding-left: 40px; -} - -@media (min-width: 375px) { - .informer__item { - padding-left: 0; - } -} - -@media (min-width: 769px) { - .informer__item { - padding-left: 0; - } -} - -.informer__item:not(:last-child) { - margin-bottom: 18px; -} - -@media (min-width: 375px) { - .informer__item:not(:last-child) { - margin-bottom: 26px; - } -} - -@media (min-width: 769px) { - .informer__item:not(:last-child) { - margin-bottom: 0; - } -} - -/* Link */ - -.informer__link { - position: relative; - display: flex; - color: black; - text-decoration: none; - transition: color 0.2s linear; -} - -@media (hover: hover) and (pointer: fine) { - .informer__link:hover { - color: var(--color-turquoise); + display: flex; + flex-wrap: wrap; + align-items: center; + row-gap: 4px; + column-gap: 8px; } } -.informer__link:active { - color: var(--color-turquoise); -} - @media (hover: hover) and (pointer: fine) { - .informer__link:hover .informer__icon { - fill: var(--color-turquoise); - } -} - -.informer__link:active .informer__icon { - fill: var(--color-turquoise); -} - -@media (min-width: 375px) { - .informer__link { - flex-direction: column; - } -} - -/* Meta */ - -.informer__meta { - margin-right: 8px; - line-height: 1.5; - letter-spacing: -0.03em; -} - -@media (min-width: 375px) { - .informer__meta { - margin-right: 0; - margin-bottom: 8px; - padding-left: 40px; - font-size: 21px; - line-height: 1.2; - letter-spacing: 0.03em; - } -} - -@media (min-width: 568px) { - .informer__meta { - margin-bottom: 8px; - font-size: 28px; - letter-spacing: 0.02em; - } -} - -@media (min-width: 1024px) { - .informer__meta { - padding-left: 46px; - font-size: 38px; + .informer:hover { + color: var(--color-special-neutral); } } -@media (min-width: 1200px) { - .informer__meta { - font-size: 48px; - } -} - -/* Text */ - -.informer__text { - margin: 0; - line-height: 1.5; -} - -.informer__text::first-letter { - text-transform: capitalize; -} - -@media (min-width: 375px) { - .informer__text { - padding-left: 40px; - font-size: 14px; - line-height: 1.3; - letter-spacing: -0.03em; - } -} - -@media (min-width: 568px) { - .informer__text { - letter-spacing: normal; - } -} - -@media (min-width: 630px) { - .informer__text { - font-size: 16px; - } -} - -@media (min-width: 769px) { - .informer__text { - padding-left: 0; - } -} - -/* Icon */ - .informer__icon { - position: absolute; - top: 0; - left: -40px; - transition: fill 0.2s linear; + width: var(--informer-icon-size); + height: auto; + aspect-ratio: 1; } -@media (min-width: 375px) { +@media (max-width: 735px) { .informer__icon { + position: absolute; + top: 0; left: 0; } - - .informer__icon--calendar { - top: 2px; - } -} - -@media (min-width: 568px) { - .informer__icon, - .informer__icon--calendar { - top: 5px; - } } -@media (min-width: 1024px) { - .informer__icon { - top: 9px; - } - - .informer__icon--wave { - width: 38px; - height: 30px; - } - - .informer__icon--calendar { - width: 38px; - height: 27px; - } -} - -@media (min-width: 1200px) { - .informer__icon { - top: 15px; +@media (min-width: 736px) and (max-width: 1007px) { + .informer { + --informer-icon-size: 24px; } } -/* Animate */ - -.informer__icon-wave, -.informer__icon-calendar { - animation-duration: 0.8s; -} - -/* Wave */ - -.informer__icon-wave { - transform-origin: 50% 50%; -} - -@keyframes wave-sides { - 50% { transform: scaleY(1.2); } -} - -@keyframes wave-center { - 50% { transform: scaleY(0.5); } +.informer__meta { + font-weight: 700; } -@media (hover: hover) and (pointer: fine) { - .informer__link:hover .informer__icon-wave-left, - .informer__link:hover .informer__icon-wave-right { - animation-name: wave-sides; +@media (max-width: 735px) { + .informer__meta::after { + content: '.'; } } -@media (hover: hover) and (pointer: fine) { - .informer__link:hover .informer__icon-wave-center { - animation-name: wave-center; +@media (min-width: 736px) { + .informer__meta { + font-size: 24px; } } -/* Calendar */ - -.informer__icon-calendar { - transform-origin: 50% 100%; -} - -@keyframes calendar-top { - 50% { transform: translateX(-18px); } -} - -@keyframes calendar-bottom { - 50% { transform: translateX(9px); } -} - -@media (hover: hover) and (pointer: fine) { - .informer__link:hover .informer__icon-calendar-top { - animation-name: calendar-top; +@media (min-width: 1008px) { + .informer__meta { + font-size: 36px; } } -@media (hover: hover) and (pointer: fine) { - .informer__link:hover .informer__icon-calendar-bottom { - animation-name: calendar-bottom; +@media (min-width: 736px) { + .informer__title { + flex: 1 1 100%; } } diff --git a/src/styles/styles.css b/src/styles/styles.css index 2c684f1c4..9a16200ce 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -34,6 +34,7 @@ @import 'blocks/podcast-feature-grid.css'; @import 'blocks/podcasts-block.css'; @import 'blocks/podcast-page.css'; +@import 'blocks/informer.css'; /* Globals */