From 98ea53074bf2b73a7dc69a1c9923de2f0502e6ce Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Fri, 8 Sep 2023 10:45:44 +0200 Subject: [PATCH] Category fixes --- src/css/base/variables.css | 2 +- src/css/sections/podcast.css | 24 ++++++++++++++++++++---- src/includes/mixins.pug | 13 +++++++------ tasks/fetch_feed.js | 3 ++- tasks/generate_pages.js | 1 + 5 files changed, 31 insertions(+), 12 deletions(-) diff --git a/src/css/base/variables.css b/src/css/base/variables.css index 530a518849b..d5555fb8f52 100644 --- a/src/css/base/variables.css +++ b/src/css/base/variables.css @@ -30,7 +30,7 @@ --color-accent: #f7931a; --color-accent-highlight: #dd7901; --color-derweg: #00B4CF; - --color-interview: #151515; + --color-special: #151515; --color-secondary: var(--color-neutral-50); --space-xs: .125rem; diff --git a/src/css/sections/podcast.css b/src/css/sections/podcast.css index 82f8ad68efd..b05f01c7eaf 100644 --- a/src/css/sections/podcast.css +++ b/src/css/sections/podcast.css @@ -4,12 +4,25 @@ flex-wrap: wrap; list-style: none; margin: var(--space-l) 0 var(--space-xl); + font-size: var(--font-size-s); & li { margin: 0 var(--space-m) var(--space-m) 0; } & a { + --category-accent-fg : var(--color-neutral-0); + --category-accent-bg : var(--color-accent); + + &.interviews, + &.on-tour, + &.verschiedenes { + --category-accent-bg : var(--color-special); + } + &.der-weg { + --category-accent-bg : var(--color-derweg); + } + display: inline-block; text-align: center; padding: var(--space-s) var(--space-l); @@ -20,16 +33,19 @@ &:hover { @media not all and (hover: none) { - color: var(--color-neutral-0); - background-color: var(--color-secondary); + color: var(--category-accent-fg); + border-color: var(--category-accent-bg); + background-color: var(--category-accent-bg); text-decoration: none; } } &.current { - color: var(--color-neutral-0); - background-color: var(--color-secondary); + color: var(--category-accent-fg); + border-color: var(--category-accent-bg); + background-color: var(--category-accent-bg); text-decoration: none; + font-weight: var(--font-weight-bold); } } } diff --git a/src/includes/mixins.pug b/src/includes/mixins.pug index fc282b5a2cc..3b10d0358e1 100644 --- a/src/includes/mixins.pug +++ b/src/includes/mixins.pug @@ -4,12 +4,13 @@ mixin sprite(id) mixin categories(current) ul.categories - li: a(href="/podcast/" class=(!current && 'current')) Alles - li: a(href="/podcast/news/" class=(current === 'News' && 'current')) News - li: a(href="/podcast/interviews/" class=(current === 'Interviews' && 'current')) Interviews - li: a(href="/podcast/lesestunde/" class=(current === 'Lesestunde' && 'current')) Lesestunde - li: a(href="/podcast/der-weg/" class=(current === 'Der Weg' && 'current')) Der Weg - li: a(href="/podcast/verschiedenes/" class=(current === 'Verschiedenes' && 'current')) Verschiedenes + li: a(href="/podcast/" class=(!current && 'current')).alles Alles + li: a(href="/podcast/news/" class=(current === 'News' && 'current')).news News + li: a(href="/podcast/interviews/" class=(current === 'Interviews' && 'current')).interviews Interviews + li: a(href="/podcast/lesestunde/" class=(current === 'Lesestunde' && 'current')).lesestunde Lesestunde + li: a(href="/podcast/der-weg/" class=(current === 'Der Weg' && 'current')).der-weg Der Weg + li: a(href="/podcast/on-tour/" class=(current === 'On Tour' && 'current')).on-tour On Tour + li: a(href="/podcast/verschiedenes/" class=(current === 'Verschiedenes' && 'current')).verschiedenes Verschiedenes mixin member(m) li.member(id=m.name) diff --git a/tasks/fetch_feed.js b/tasks/fetch_feed.js index 86ffcdeca5e..68194519c71 100644 --- a/tasks/fetch_feed.js +++ b/tasks/fetch_feed.js @@ -47,6 +47,7 @@ const parseEpisode = e => { ) || [, , , title] if (!number) categoryName = 'Verschiedenes' if (categoryName === 'Der-Weg') categoryName = 'Der Weg' + if (categoryName === 'On-Tour') categoryName = 'On Tour' if (categoryName === 'Buchclub') categoryName = 'Lesestunde' const firstLine = description.split('\n')[0] const blockMatch = firstLine.match(/Blockzeit\s(\d+)/) @@ -55,7 +56,7 @@ const parseEpisode = e => { const slug = slugify(`${categoryName} ${number || ''} ${titlePlain}`) const date = new Date(e.pubDate) const img = e['itunes:image'].__attr.href - const image = ['interview', 'lesestunde', 'verschiedenes'].includes(category) + const image = ['interview', 'lesestunde', 'on-tour', 'verschiedenes'].includes(category) ? img : `/img/cover/${category}.png` const duration = e['itunes:duration'] diff --git a/tasks/generate_pages.js b/tasks/generate_pages.js index 14c0dde6ddf..afc7d8217b0 100644 --- a/tasks/generate_pages.js +++ b/tasks/generate_pages.js @@ -53,5 +53,6 @@ renderPage('category', 'podcast/news', { navCurrent: 'podcast', category: 'news' renderPage('category', 'podcast/interviews', { navCurrent: 'podcast', category: 'interview', categoryName: 'Interviews', episodes: episodes.filter(e => e.category === 'interview') }) renderPage('category', 'podcast/lesestunde', { navCurrent: 'podcast', category: 'lesestunde', categoryName: 'Lesestunde', episodes: episodes.filter(e => e.category === 'lesestunde') }) renderPage('category', 'podcast/der-weg', { navCurrent: 'podcast', category: 'der-weg', categoryName: 'Der Weg', episodes: episodes.filter(e => e.category === 'der-weg') }) +renderPage('category', 'podcast/on-tour', { navCurrent: 'podcast', category: 'on-tour', categoryName: 'On Tour', episodes: episodes.filter(e => e.category === 'on-tour') }) renderPage('category', 'podcast/verschiedenes', { navCurrent: 'podcast', category: 'verschiedenes', categoryName: 'Verschiedenes', episodes: episodes.filter(e => e.category === 'verschiedenes') }) episodes.forEach(episode => renderPage('episode', `podcast/${episode.slug}`, { navCurrent: 'podcast', episode, team }))