Skip to content

Commit 7c3d262

Browse files
nomeatanomeata
committed
Mildy restyle podcast page
* Use same black box for intro text as the projects page. I don't find it very pretty, but it's consistent. * Use separate grey boxes for each episode. Makes it easier to visually find the episodes. * On wide screens, allow two episodes next to each other. We don't have that much text there, but a narrow list of links, so this looks better. * Don't say “Episode” in the title for the box. It’s rather repetitive and distracts from the important information (the guest’s name). So now it’s just “*2* – Lennart Augustsson” * Consistently indented the HTML template file * Changed “selected links” to “related links” It seems that `assets/css/main.css` is a generated file, so I did not make tweaks that requires editing the CSS.
1 parent e1d2e68 commit 7c3d262

File tree

2 files changed

+73
-72
lines changed

2 files changed

+73
-72
lines changed

‎podcast/1.markdown

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ published: 2021-08-09
1515
* [ghcup](https://gitlab.haskell.org/haskell/ghcup-hs)
1616
* [Chocolatey GHC packages](https://community.chocolatey.org/profiles/Phyx)
1717
* [Haskell Foundation on the Haskell Discourse](https://discourse.haskell.org/c/haskell-foundation/)
18-
* [Contact page of the Haskell Foundation including Slack invite link](https://haskell.foundation/contact/)
18+
* [Contact page of the Haskell Foundation](https://haskell.foundation/contact/) (including Slack invite link)
1919
* [YourKit](https://www.yourkit.com/)
2020
* [Wingman tactics plugin for Haskell Language Server](https://haskellwingman.dev/)
2121
* [Simple Haskell Initiative](https://simplehaskell.org/)

‎templates/podcast/list.html

Lines changed: 72 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,93 @@
1-
2-
3-
4-
<div class="max-w-screen-xl mx-auto py-16 md:py-24">
5-
<div class="sm:px-6 lg:px-16">
6-
<div class="relative">
7-
<div class="absolute top-0 left-0 border-t border-l border-purple-50 h-10 md:h-20 w-10 md:w-20">
8-
<div class="absolute top-1 md:top-2 left-1 md:left-2 border-t border-l border-purple-100 h-10 md:h-20 w-10 md:w-20">
9-
<div class="absolute top-1 md:top-2 left-1 md:left-2 border-t border-l border-purple-200 h-10 md:h-20 w-10 md:w-20">
10-
<div class="absolute top-1 md:top-2 left-1 md:left-2 border-t border-l border-purple-300 h-10 md:h-20 w-10 md:w-20">
11-
<div class="absolute top-1 md:top-2 left-1 md:left-2 border-t border-l border-purple-400 h-10 md:h-20 w-10 md:w-20">
12-
<div class="absolute top-1 md:top-2 left-1 md:left-2 border-t border-l border-purple-500 h-10 md:h-20 w-10 md:w-20"></div>
1+
<div class="max-w-screen-xl mx-auto py-16 md:py-24">
2+
<div class="sm:px-6 lg:px-16">
3+
<div class="relative">
4+
<div class="absolute top-0 left-0 border-t border-l border-purple-50 h-10 md:h-20 w-10 md:w-20">
5+
<div
6+
class="absolute top-1 md:top-2 left-1 md:left-2 border-t border-l border-purple-100 h-10 md:h-20 w-10 md:w-20">
7+
<div
8+
class="absolute top-1 md:top-2 left-1 md:left-2 border-t border-l border-purple-200 h-10 md:h-20 w-10 md:w-20">
9+
<div
10+
class="absolute top-1 md:top-2 left-1 md:left-2 border-t border-l border-purple-300 h-10 md:h-20 w-10 md:w-20">
11+
<div
12+
class="absolute top-1 md:top-2 left-1 md:left-2 border-t border-l border-purple-400 h-10 md:h-20 w-10 md:w-20">
13+
<div
14+
class="absolute top-1 md:top-2 left-1 md:left-2 border-t border-l border-purple-500 h-10 md:h-20 w-10 md:w-20">
15+
</div>
16+
</div>
17+
</div>
1318
</div>
1419
</div>
1520
</div>
16-
</div>
17-
</div>
18-
<div class="absolute top-0 right-0 border-t border-r border-purple-50 h-10 md:h-20 w-10 md:w-20">
19-
<div class="absolute top-1 md:top-2 right-1 md:right-2 border-t border-r border-purple-100 h-10 md:h-20 w-10 md:w-20">
20-
<div class="absolute top-1 md:top-2 right-1 md:right-2 border-t border-r border-purple-200 h-10 md:h-20 w-10 md:w-20">
21-
<div class="absolute top-1 md:top-2 right-1 md:right-2 border-t border-r border-purple-300 h-10 md:h-20 w-10 md:w-20">
22-
<div class="absolute top-1 md:top-2 right-1 md:right-2 border-t border-r border-purple-400 h-10 md:h-20 w-10 md:w-20">
23-
<div class="absolute top-1 md:top-2 right-1 md:right-2 border-t border-r border-purple-500 h-10 md:h-20 w-10 md:w-20"></div>
21+
<div class="absolute top-0 right-0 border-t border-r border-purple-50 h-10 md:h-20 w-10 md:w-20">
22+
<div
23+
class="absolute top-1 md:top-2 right-1 md:right-2 border-t border-r border-purple-100 h-10 md:h-20 w-10 md:w-20">
24+
<div
25+
class="absolute top-1 md:top-2 right-1 md:right-2 border-t border-r border-purple-200 h-10 md:h-20 w-10 md:w-20">
26+
<div
27+
class="absolute top-1 md:top-2 right-1 md:right-2 border-t border-r border-purple-300 h-10 md:h-20 w-10 md:w-20">
28+
<div
29+
class="absolute top-1 md:top-2 right-1 md:right-2 border-t border-r border-purple-400 h-10 md:h-20 w-10 md:w-20">
30+
<div
31+
class="absolute top-1 md:top-2 right-1 md:right-2 border-t border-r border-purple-500 h-10 md:h-20 w-10 md:w-20">
32+
</div>
33+
</div>
34+
</div>
2435
</div>
2536
</div>
2637
</div>
2738
</div>
2839
</div>
29-
</div>
30-
31-
</div>
3240

33-
<div class="text-center pt-12 md:pt-20 px-12 sm:px-16 md:px-24 lg:px-36 ">
34-
<h1 class="text-2xl-5xl">The Haskell Interlude</h1>
35-
</div>
36-
</div>
41+
<div class="text-center pt-12 md:pt-20 px-12 sm:px-16 md:px-24 lg:px-36 ">
42+
<h1 class="text-2xl-5xl">The Haskell Interlude</h1>
43+
</div>
3744

38-
<div class="max-w-screen-xl mx-auto">
39-
<div class="bg-gray-100 px-6 sm:px-12 lg:px-16 py-12 lg:py-24">
40-
<div class="mt-8 space-y-8 max-w-2xl mx-auto">
41-
<p>
42-
The Haskell Interlude is Haskell-focused podcast where we interview guests from the Haskell community. The hosts are Niki Vazou, Joachim Breitner, Andres Löh, Alejandro Serrano and Wouter Swierstra.
43-
</p>
44-
<div class="mt-4">
45-
<a class="arrow-link" href="https://feeds.buzzsprout.com/1817535.rss">>> RSS feed</a>
45+
<div class="mt-16 md:mt-24">
46+
<div class="xl:max-w-screen-xl mx-auto md:px-12 lg:px-16">
47+
<div class="bg-gray-800 shadow-lg shadow-xl shadow-md shadow-sm px-6 sm:px-12 md:px-12 lg:px-16 py-16 md:py-20">
48+
<p class="mt-10 lg:text-xl text-gray-300 leading-relaxed text-center">
49+
The Haskell Interlude is Haskell-focused podcast where we interview guests from the Haskell community. The hosts are Niki Vazou, Joachim Breitner, Andres Löh, Alejandro Serrano and Wouter Swierstra.
50+
</p>
4651
</div>
4752
</div>
4853
</div>
4954

50-
$for(episodes)$
51-
<div class="bg-gray-100 px-6 sm:px-12 lg:px-16 py-12 lg:py-24">
52-
<h2 class="text-center text-2xl-4xl font-normal">Episode $episode$: $title$</h2>
53-
<div class="mt-8 space-y-8 max-w-2xl mx-auto">
54-
$if(recorded)$
55-
<p>
56-
<em>Recorded $recorded$. Published $published$.</em>
57-
</p>
58-
$endif$
59-
<p>
60-
$description$
61-
</p>
62-
<div id="buzzsprout-player-$buzzsproutId$"></div>
63-
<script src="https://www.buzzsprout.com/1817535/$buzzsproutId$-$buzzsproudName$.js?container_id=buzzsprout-player-$buzzsproutId$&player=small" type="text/javascript" charset="utf-8"></script>
64-
<div class="mt-4">
65-
<a class="arrow-link" href="/podcast/$episode$/transcript/">>> Full transcript</a>
66-
</div>
67-
<div class="uppercase font-medium text-gray-500 pt-4">Selected links</div>
68-
$body$
55+
<div class="mt-16 md:mt-24">
56+
<div class="max-w-screen-xl mx-auto grid gap-8 lg:grid-cols-2 md:px-12">
57+
$for(episodes)$
58+
<div class="bg-gray-100 px-6 sm:px-12 lg:px-16 py-12 lg:py-24">
59+
<h2 class="text-center text-2xl-4xl font-normal"><b>$episode$</b> – $title$</h2>
60+
<div class="mt-8 space-y-8 max-w-2xl mx-auto">
61+
$if(recorded)$
62+
<p><em>Recorded $recorded$. Published $published$.</em></p>
63+
$endif$
64+
<p>$description$</p>
65+
<div id="buzzsprout-player-$buzzsproutId$"></div>
66+
<script src="https://www.buzzsprout.com/1817535/$buzzsproutId$-$buzzsproudName$.js?container_id=buzzsprout-player-$buzzsproutId$&player=small" type="text/javascript" charset="utf-8"></script>
67+
<div class="mt-4">
68+
<a class="arrow-link" href="/podcast/$episode$/transcript/">>> Full transcript</a>
69+
</div>
70+
<div class="uppercase font-medium text-gray-500 pt-4">Selected links</div>
71+
$body$
72+
</div>
73+
</div>
74+
$endfor$
6975
</div>
7076
</div>
71-
$endfor$
72-
73-
</div>
7477

75-
<div class="mt-16 md:mt-24">
76-
77-
<div class="xl:max-w-screen-xl mx-auto md:px-12 lg:px-16">
78-
<div class="bg-gray-800 shadow-lg shadow-xl shadow-md shadow-sm px-6 sm:px-12 md:px-12 lg:px-16 py-16 md:py-20">
79-
<h2 class="text-gray-50 font-normal text-3xl-4xl text-center">Acknowledgements</h2>
80-
<p class="mt-10 lg:text-xl text-gray-300 leading-relaxed text-center">
81-
The music used is "Blue Lambda" by <a href="https://www.donyaquick.com/">Donya Quick</a>.<br/>
82-
Many thanks to Donya for giving us permission to use this track for our podcast.
83-
</p>
84-
<p class="mt-10 lg:text-xl text-gray-300 leading-relaxed text-center">
85-
We are very grateful to Alp Mestanogullar for his help with editing the episodes.
86-
</p>
78+
<div class="mt-16 md:mt-24">
79+
<div class="xl:max-w-screen-xl mx-auto md:px-12 lg:px-16">
80+
<div class="bg-gray-800 shadow-lg shadow-xl shadow-md shadow-sm px-6 sm:px-12 md:px-12 lg:px-16 py-16 md:py-20">
81+
<h2 class="text-gray-50 font-normal text-3xl-4xl text-center">Acknowledgements</h2>
82+
<p class="mt-10 lg:text-xl text-gray-300 leading-relaxed text-center">
83+
The music used is "Blue Lambda" by <a href="https://www.donyaquick.com/">Donya Quick</a>.<br/>
84+
Many thanks to Donya for giving us permission to use this track for our podcast.
85+
</p>
86+
<p class="mt-10 lg:text-xl text-gray-300 leading-relaxed text-center">
87+
We are very grateful to Alp Mestanogullar for his help with editing the episodes.
88+
</p>
89+
</div>
8790
</div>
8891
</div>
8992

9093
</div>
91-
92-
</div>

0 commit comments

Comments
 (0)