Update conference page design / copy

public/style.css

@@ -7497,6 +7497,24 @@ article code {
 .cg5 {
   column-gap: 4rem; }
 
+.g0 {
+  gap: 0; }
+
+.g1 {
+  gap: 0.25rem; }
+
+.g2 {
+  gap: 0.5rem; }
+
+.g3 {
+  gap: 1rem; }
+
+.g4 {
+  gap: 2rem; }
+
+.g5 {
+  gap: 4rem; }
+
 @media screen and (min-width: 30em) {
   .bi-avoid-ns {
     break-inside: avoid; }

src/hmnurl/hmnurl_test.go

@@ -368,6 +368,10 @@ func TestDiscordShowcaseBacklog(t *testing.T) {
 	AssertRegexMatch(t, BuildDiscordShowcaseBacklog(), RegexDiscordShowcaseBacklog, nil)
 }
 
+func TestConferences(t *testing.T) {
+	AssertRegexMatch(t, BuildConferences(), RegexConferences, nil)
+}
+
 func AssertSubdomain(t *testing.T, fullUrl string, expectedSubdomain string) {
 	t.Helper()
 

src/rawdata/scss/_core.scss

@@ -349,6 +349,13 @@ article code {
 .cg4 { column-gap: $spacing-large; }
 .cg5 { column-gap: $spacing-extra-large; }
 
+.g0 { gap: $spacing-none; }
+.g1 { gap: $spacing-extra-small; }
+.g2 { gap: $spacing-small; }
+.g3 { gap: $spacing-medium; }
+.g4 { gap: $spacing-large; }
+.g5 { gap: $spacing-extra-large; }
+
 @media #{$breakpoint-not-small} {
   .bi-avoid-ns { break-inside: avoid; }
   .cc-auto-ns { column-count: auto; }

src/templates/src/conferences.html

@@ -1,18 +1,25 @@
 {{ template "base.html" . }}
 
 {{ define "content" }}
-<div class="center-layout mw7 mv3 ph3 ph0-ns post-content">
-	<div class="bg--card pa3 mb2 br3">
+{{ $bannerclass := "overflow-hidden br2 mt2 h4 h5-ns cover bg-center" }}
+<div class="center-layout mw7 ph3 ph0-ns post-content flex flex-column g3">
+	<div class="fronke">
 		<a href="https://handmadehero.org/conference">
 			<h2>HandmadeCon</h2>
-			<p>The original Handmade Conference ran by Casey Muratori</p>
 		</a>
+		<div class="{{ $bannerclass }}" style="background-image: url('{{ static "hms/handmadecon.png" }}')"></div>
+		<p>In 2015 and 2016, Casey Muratori ran HandmadeCon, inviting many amazing programmers to come talk about what they do. You probably already know that Casey is a fantastic interviewer, and the talks are loaded with amazing insights.</p>
+		<p>The annotated talks can all be viewed via the <a href="https://guide.handmadehero.org/hmcon/">Handmade Hero episode guide</a>. Alternatively, the talks can be found in <a href="https://www.youtube.com/playlist?list=PLEMXAbCVnmY6HE0bxUHeLLP5QbBE2zhJi">this playlist</a> on the <a href="https://mollyrocket.com/">Molly Rocket</a> YouTube channel.</p>
 	</div>
-    <div class="bg--card pa3 mb2 br3">
+
+	<div>
 		<a href="https://handmade-seattle.com/">
 			<h2>Handmade Seattle</h2>
-			<p>The spirtual successor of Handmade Con. An Independing Systems Programming Conference ran by Abner Coimbre</p>
 		</a>
+		<div class="{{ $bannerclass }}" style="background-image: url('{{ static "hms/banner_tall.jpg" }}')"></div>
+		<p>The spiritual successor to HandmadeCon, Handmade Seattle was started in 2019 by Abner Coimbre, the founder of Handmade Network. From the start, Handmade Seattle has been an independent conference, free from corporate sponsorships. The conferences are hybrid online/offline, so you can participate no matter where in the world you live.</p>
+		<p>Tickets can be purchased at <a href="https://handmade-seattle.com/">the conference website</a>.</p>
+		<p><a href="https://media.handmade-seattle.com/tag/talks/">Talks</a> and <a href="https://media.handmade-seattle.com/tag/demos/">demos</a> can be viewed on the conference's media site.</p>
 	</div>
 </div>
 {{ end }}

src/templates/src/include/header.html

@@ -72,10 +72,10 @@
                     <div class="root-item">
                         <a>Media <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div></a>
                         <div class="submenu b--theme-dark">
+                            <a href="{{ .Header.ConferencesUrl }}">Conferences</a>
                             <a href="{{ .Header.PodcastUrl }}">Podcast</a>
                             <a href="{{ .Header.FishbowlUrl }}">Fishbowls</a>
                             <a href="https://handmadedev.show/" target="_blank">Handmade Dev Show</a>
-                            <a href="{{ .Header.ConferencesUrl }}">Conferences</a>
                         </div>
                     </div>
                     <div class="root-item">