From 97e6c74c52fab76fd7c5cbc6dbd0832493cf8634 Mon Sep 17 00:00:00 2001
From: Ben Visness <ben@bvisness.me>
Date: Sat, 10 Feb 2024 20:54:13 -0600
Subject: [PATCH] Many change for great good yes

---
 .../logo.svg                                  |   0
 src/templates/src/jam_2024_lj_index.html      | 128 ++++++++++++------
 .../src/layouts/jam_2024_learning_base.html   |  49 ++++++-
 src/website/jam.go                            |  25 ++--
 4 files changed, 141 insertions(+), 61 deletions(-)
 rename public/{learningjam2023 => learningjam2024}/logo.svg (100%)

diff --git a/public/learningjam2023/logo.svg b/public/learningjam2024/logo.svg
similarity index 100%
rename from public/learningjam2023/logo.svg
rename to public/learningjam2024/logo.svg
diff --git a/src/templates/src/jam_2024_lj_index.html b/src/templates/src/jam_2024_lj_index.html
index 6a0a6f8..30dbc60 100644
--- a/src/templates/src/jam_2024_lj_index.html
+++ b/src/templates/src/jam_2024_lj_index.html
@@ -3,12 +3,12 @@
 {{ define "extrahead" }}
 <style>
 	.jam-logo {
-		max-width: 24rem;
+		max-width: 18rem;
 	}
 
 	.jam-title {
 		/* align with the width of the logo */
-		font-size: 3.7rem;
+		font-size: 2.76rem;
 		font-weight: 700;
 		/* align with the text's actual bounding box */
 		line-height: 1.18;
@@ -16,16 +16,27 @@
 		margin-left: -0.03em;
 		margin-right: -0.03em;
 	}
+
+	/* not small */
+	@media screen and (min-width: 35em) {
+		.jam-logo {
+			max-width: 24rem;
+		}
+
+		.jam-title {
+			font-size: 3.7rem;
+		}
+	}
 </style>
 {{ end }}
 
 {{ define "content-top" }}
 <div class="mw7 margin-center">
     <div class="flex flex-column pv4 tc">
-		<img class="jam-logo margin-center" src="{{ static "learningjam2023/logo.svg" }}">
-		<div class="margin-center mv4">
+		<img class="jam-logo margin-center" src="{{ static "learningjam2024/logo.svg" }}">
+		<div class="margin-center mt3 mt4-ns mb4">
 			<div class="jam-title mb3">Learning Jam</div>
-			<div class="flex flex-row justify-between lh-solid">
+			<div class="flex flex-column flex-row-ns justify-between lh-solid g3 g0-ns">
 				<div>
 					<div class="fw7 f3 mb1">Learn</div>
 					<div class="fw3 f4">March 15-17, 2024</div>
@@ -56,61 +67,88 @@
 {{ define "content" }}
 <style>
 	.participate-icon {
-		--mask-url: url("{{ static "learningjam2023/logo.svg" }}");
+		--mask-url: url("{{ static "learningjam2024/logo.svg" }}");
 	}
 </style>
-<div class="flex flex-column g3 items-center pa3">
-	<div class="w6">
-		<h2 class="c--theme-gradient-light">How to participate</h2>
-		<div class="flex flex-column g2 pa3">
-			<div class="flex flex-row g3 items-center bg--rich-gray pa2">
-				<div class="svg-mask participate-icon bg--theme-gradient-light">
-					<img class="w4 invisible" src="{{ static "visjam2023/logo.svg" }}" />
+<div class="mw7 margin-center flex flex-column">
+	<div class="ph3 pv4 bb b--rich-gray">
+		<h2 class="dib c--theme-gradient-light">What is a Learning Jam?</h2>
+		<div class="post-content">
+			<p>
+				The <b class="c--theme-gradient-light">Learning Jam</b> is an opportunity for you to learn something new.
+			</p>
+			<p>
+				Unlike traditional game jams, and unlike our previous programming jams, the goal of the <b class="c--theme-gradient-light">Learning Jam</b> is <em>knowledge</em>. It's an opportunity to throw yourself at a topic and learn everything you can about it—and then, to turn around and teach it to others.
+			</p>
+			<p>
+				The jam takes place over <b>two weekends</b>. On the first weekend, you'll learn as much as you can about your topic of choice. On the second, you'll teach it to others in whatever form you like—writeup, video, Minecraft mod, whatever.
+			</p>
+		</div>
+	</div>
+	<div class="ph3 pv4 bb b--rich-gray">
+		<h2 class="mb3 dib c--theme-gradient-light">How to participate</h2>
+		<div class="flex flex-column g2">
+			<div class="pa3 flex flex-column flex-row-ns g3 items-center bg--rich-gray">
+				<div class="flex-shrink-0 svg-mask participate-icon bg--theme-gradient-light">
+					<img class="w4 invisible" src="{{ static "learningjam2024/logo.svg" }}" />
 				</div>
-				<div class="flex flex-column g2">
-					<div class="f4 fw7">Pick a project and form a team</div>
-					<div>Find a project idea that excites you etc...</div>
+				<div class="post-content">
+					<h3 class="f4">Choose a topic.</h3>
+					<p>
+						Decide what you'll spend your weekend learning about. Maybe there's an area of programming you've been meaning to dig into, or maybe there's a specialization in your field that you've been curious about. Maybe you just need a reason to read papers for a weekend.
+					</p>
+					<p>
+						You're welcome to work in teams or work solo.
+					</p>
 				</div>
 			</div>
-			<div class="flex flex-row g3 items-center bg--rich-gray pa2">
-				<div class="svg-mask participate-icon bg--theme-gradient-light">
-					<img class="w4 invisible" src="{{ static "visjam2023/logo.svg" }}" />
+			<div class="pa3 flex flex-column flex-row-ns g3 items-center bg--rich-gray">
+				<div class="flex-shrink-0 svg-mask participate-icon bg--theme-gradient-light">
+					<img class="w4 invisible" src="{{ static "learningjam2024/logo.svg" }}" />
 				</div>
-				<div class="flex flex-column g2">
-					<div class="f4 fw7">Pick a project and form a team</div>
-					<div>Find a project idea that excites you etc...</div>
+				<div class="post-content">
+					<h3 class="f4">Mar 15-17: Learn!</h3>
+					<p>
+						Create a Handmade Network project to track your progress. Then go down the rabbit hole. Absorb as much information as you can in a weekend.
+					</p>
+					<p>
+						As you learn, we encourage you to share updates on Discord using the <b>!til</b> command. These updates will be published as part of your submission.
+					</p>
 				</div>
 			</div>
-			<div class="flex flex-row g3 items-center bg--rich-gray pa2">
-				<div class="svg-mask participate-icon bg--theme-gradient-light">
-					<img class="w4 invisible" src="{{ static "visjam2023/logo.svg" }}" />
+			<div class="pa3 flex flex-column flex-row-ns g3 items-center bg--rich-gray">
+				<div class="flex-shrink-0 svg-mask participate-icon bg--theme-gradient-light">
+				<img class="w4 invisible" src="{{ static "learningjam2024/logo.svg" }}" />
 				</div>
-				<div class="flex flex-column g2">
-					<div class="f4 fw7">Pick a project and form a team</div>
-					<div>Find a project idea that excites you etc...</div>
+				<div class="post-content">
+					<h3 class="f4">Mar 22-24: Teach!</h3>
+					<p>
+						Share what you learned with the rest of the community. You can present the information in any form you like—whatever helps you communicate most effectively.
+					</p>
+					<p>
+						Your Handmade Network project is your final submission. Make sure the description gives adequate context, and either attach or link to your final presentation.
+					</p>
 				</div>
 			</div>
 		</div>
 	</div>
-	<div class="w7 center bb b--rich-gray"></div>
-	<div class="w6">
-		<h2 class="c--theme-gradient-light">March 15 - 17, 2024</h2>
-		<div>
-			Do things
+	<div class="ph3 pv4 bb b--rich-gray">
+		<h2 class="dib c--theme-gradient-light">Why?</h2>
+		<div class="post-content">
+			<p>
+				The Handmade Network's goal is to change the software industry by building back up from new foundations. But in order to do that, we need to understand those foundations.
+			</p>
+			<p>
+				Our other programming jams are great opportunities to try building new things. But what should those new things be? We want to give the community a chance to focus just on learning and research, to gather information and share it with others, to boost the entire community's knowledge on a topic.
+			</p>
+			<p>
+				We hope that the results of the <b class="c--theme-gradient-light">Learning Jam</b> inspire new ideas for the community to explore in the Visibility and Wheel Reinvention jams later in the year. There is so much bad software out in the world, and this is the first step toward reinventing it.
+			</p>
 		</div>
 	</div>
-	<div class="w7 center bb b--rich-gray"></div>
-	<div class="w6">
-		<h2 class="c--theme-gradient-light">March 22 - 24, 2024</h2>
-		<div>
-			Do more things
-		</div>
-	</div>
-	<div class="w7 center bb b--rich-gray"></div>
-	<div class="w6">
-		<h2 class="c--theme-gradient-light">Rules</h2>
-		<div>
-			Do more things
+	<div>
+		<div class="mv5 h3 fill-current">
+			<a href="{{ .Header.HMNHomepageUrl }}">{{ svg "hmn_circuit" }}</a>
 		</div>
 	</div>
 </div>
diff --git a/src/templates/src/layouts/jam_2024_learning_base.html b/src/templates/src/layouts/jam_2024_learning_base.html
index d7f7267..4a2ac77 100644
--- a/src/templates/src/layouts/jam_2024_learning_base.html
+++ b/src/templates/src/layouts/jam_2024_learning_base.html
@@ -37,7 +37,7 @@
 	<style>
 		:root {
 			--theme-gradient-dark: linear-gradient(to bottom right, #003c83, #019AD2);
-			--theme-gradient-light: linear-gradient(to bottom right, #8BD5FF, #2F69FF);
+			--theme-gradient-light: linear-gradient(to bottom right, #8BD5FF, #5899FF);
 			--white: #fff;
 			--bg-button: rgba(255, 255, 255, 0);
 			--bg-button-hover: rgba(255, 255, 255, 0.1);
@@ -58,7 +58,16 @@
 
 		body {
 			font-family: "Inter", "Fira Sans", sans-serif;
-			font-size: 1rem;
+			font-size: 1rem; /* remove this override when base stylesheet is less dumb */
+		}
+
+		h1, h2, h3, h4, h5, h6 {
+			font-weight: 700;
+		}
+
+		.post-content p {
+			/* stupid override, should be done by .post-content instead of .content */
+			margin: 0.6rem 0;
 		}
 
 		.bg--theme-gradient-dark {
@@ -130,6 +139,10 @@
 			mask: var(--mask-url);
 		}
 
+		.fill-current {
+			fill: currentColor;
+		}
+
 		.square {
 			aspect-ratio: 1 / 1;
 		}
@@ -142,6 +155,23 @@
 			flex-grow: 1;
 		}
 
+		.hmn-logo {
+			font-family: 'MohaveHMN', sans-serif;
+			text-transform: uppercase;
+			font-size: 1.6rem;
+			padding: 0.2rem 0.8rem;
+		}
+
+		.header-nav {
+			padding-right: 0.6rem;
+		}
+
+		.user-avatar-header {
+			width: 1.8rem;
+			border-radius: 999px;
+			background-color: rgba(0, 0, 0, 0.4);
+		}
+
 		/* not small */
 		@media screen and (min-width: 35em) {
 
@@ -151,11 +181,20 @@
 	{{ template "extrahead" . }}
 </head>
 
-<body class="flex flex-column">
+<body class="bg--charcoal flex flex-column">
 	<div class="c-white bg--theme-gradient-dark">
-		<div class="bb b--white pa1 flex flex-row g2 items-center">
-			<a href="{{ .Header.HMNHomepageUrl }}" class="f3">HANDMADE</a>
+		<div class="bg-black-20 flex flex-row items-center">
+			<a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0">
+				Handmade
+			</a>
 			<div class="flex-grow-1 flex-shrink-1"></div>
+			<div class="header-nav flex flex-row items-center g3 lh-solid f6">
+				<a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
+				<a href="{{ .Header.JamsUrl }}">Jams</a>
+				<a class="db" href="{{ or .Header.UserProfileUrl .LoginPageUrl }}">
+					<img class="user-avatar-header" src="{{ .UserAvatarUrl }}">
+				</a>
+			</div>
 		</div>
 		{{ block "content-top" . }}{{ end }}
 	</div>
diff --git a/src/website/jam.go b/src/website/jam.go
index e0259cb..e7b976d 100644
--- a/src/website/jam.go
+++ b/src/website/jam.go
@@ -60,6 +60,7 @@ func JamIndex2024_Learning(c *RequestContext) ResponseData {
 
 	type JamPageData struct {
 		templates.BaseData
+		UserAvatarUrl                string
 		DaysUntilStart, DaysUntilEnd int
 		TwitchEmbedUrl               string
 		ProjectSubmissionUrl         string
@@ -85,9 +86,19 @@ func JamIndex2024_Learning(c *RequestContext) ResponseData {
 		}
 	}
 
-	submittedProjectUrl := ""
+	tmpl := JamPageData{
+		BaseData:             baseData,
+		UserAvatarUrl:        templates.UserAvatarDefaultUrl("dark"),
+		DaysUntilStart:       daysUntilStart,
+		DaysUntilEnd:         daysUntilEnd,
+		ProjectSubmissionUrl: hmnurl.BuildProjectNewJam(),
+		SubmittedProjectUrl:  "",
+		JamFeedUrl:           hmnurl.BuildJamFeed2024_Learning(),
+		TwitchEmbedUrl:       twitchEmbedUrl,
+	}
 
 	if c.CurrentUser != nil {
+		tmpl.UserAvatarUrl = templates.UserAvatarUrl(c.CurrentUser, "dark")
 		projects, err := hmndata.FetchProjects(c, c.Conn, c.CurrentUser, hmndata.ProjectsQuery{
 			OwnerIDs: []int{c.CurrentUser.ID},
 			JamSlugs: []string{hmndata.WRJ2023.Slug},
@@ -98,19 +109,11 @@ func JamIndex2024_Learning(c *RequestContext) ResponseData {
 		}
 		if len(projects) > 0 {
 			urlContext := hmndata.UrlContextForProject(&projects[0].Project)
-			submittedProjectUrl = urlContext.BuildHomepage()
+			tmpl.SubmittedProjectUrl = urlContext.BuildHomepage()
 		}
 	}
 
-	res.MustWriteTemplate("jam_2024_lj_index.html", JamPageData{
-		BaseData:             baseData,
-		DaysUntilStart:       daysUntilStart,
-		DaysUntilEnd:         daysUntilEnd,
-		ProjectSubmissionUrl: hmnurl.BuildProjectNewJam(),
-		SubmittedProjectUrl:  submittedProjectUrl,
-		JamFeedUrl:           hmnurl.BuildJamFeed2024_Learning(),
-		TwitchEmbedUrl:       twitchEmbedUrl,
-	}, c.Perf)
+	res.MustWriteTemplate("jam_2024_lj_index.html", tmpl, c.Perf)
 	return res
 }