Various project and login improvements

This commit is contained in:
Ben Visness 2024-06-29 11:39:18 -05:00
parent 1b97bbb2d9
commit a6cfeb9c95
46 changed files with 151 additions and 340 deletions

View File

@ -7231,6 +7231,7 @@ body {
font-family: "Inter", sans-serif;
min-height: 100vh;
box-sizing: border-box;
line-height: 1.2;
}
a,
.link {
@ -7274,7 +7275,7 @@ hr {
border: none;
border-bottom: 1px solid var(--border-color);
}
.m--center {
.m-center {
margin-left: auto;
margin-right: auto;
}
@ -7625,7 +7626,6 @@ hr {
align-items: center;
border-style: dashed;
border-width: 0 0 1px;
border-color: var(--bg-3);
}
@media screen and (min-width: 35em) {
.optionbar {
@ -7693,7 +7693,7 @@ hr {
transition: all 100ms ease-in-out;
}
.carousel-container .carousel-button:hover {
background-color: var(--bg-3);
background-color: var(--c3);
}
.carousel-container .carousel-button.active {
border-color: var(--theme-color);
@ -7778,7 +7778,7 @@ hr {
border: 1px solid var(--border-color);
}
.post-content code {
background-color: var(--bg-3);
background-color: var(--c1);
padding: .2em 0;
white-space: nowrap;
}
@ -7790,12 +7790,11 @@ hr {
}
.post-content pre > code,
.post-content pre.hmn-code {
background-color: var(--bg-3);
background-color: var(--c1);
padding: 0.7em;
overflow-x: auto;
}
.post-content blockquote {
border-color: var(--bg-3);
margin-left: var(--spacing-2);
padding-left: var(--spacing-2);
margin-right: 0;
@ -7938,7 +7937,6 @@ hr {
height: var(--height);
border-width: 0 0 1px 1px;
border-style: solid;
border-color: var(--bg-3);
left: -1.5rem;
top: calc(1rem - var(--height));
border-bottom-left-radius: 0.5rem;
@ -8694,7 +8692,7 @@ code .ss,
.avatar {
object-fit: cover;
overflow: hidden;
background-color: var(--bg-3);
background-color: var(--c4);
flex-shrink: 0;
border: none;
width: var(--avatar-size-normal);

View File

@ -324,10 +324,6 @@ func TestAssetUpload(t *testing.T) {
AssertSubdomain(t, hero.BuildAssetUpload(), "hero")
}
func TestProjectCSS(t *testing.T) {
AssertRegexMatch(t, BuildProjectCSS("000000"), RegexProjectCSS, nil)
}
func TestMarkdownWorkerJS(t *testing.T) {
AssertRegexMatch(t, BuildMarkdownWorkerJS(), RegexMarkdownWorkerJS, nil)
}

View File

@ -963,13 +963,6 @@ func (c *UrlContext) BuildAssetUpload() string {
* Assets
*/
var RegexProjectCSS = regexp.MustCompile("^/assets/project.css$")
func BuildProjectCSS(color string) string {
defer CatchPanic()
return Url("/assets/project.css", []Q{{"color", color}})
}
var RegexMarkdownWorkerJS = regexp.MustCompile("^/assets/markdown_worker.js$")
func BuildMarkdownWorkerJS() string {

View File

@ -20,7 +20,7 @@
transition: all 100ms ease-in-out;
&:hover {
background-color: var(--bg-3);
background-color: var(--c3);
}
&.active {

View File

@ -91,7 +91,7 @@
}
code {
background-color: var(--bg-3);
background-color: var(--c1);
padding: .2em 0;
white-space: nowrap;
@ -106,14 +106,13 @@
pre>code,
pre.hmn-code {
background-color: var(--bg-3);
background-color: var(--c1);
padding: 0.7em;
overflow-x: auto;
}
blockquote {
border-color: var(--bg-3);
margin-left: var(--spacing-2);
padding-left: var(--spacing-2);
margin-right: 0;

View File

@ -10,6 +10,7 @@ body {
font-family: "Inter", sans-serif;
min-height: 100vh;
box-sizing: border-box;
line-height: 1.2;
}
a,
@ -65,7 +66,7 @@ hr {
/* Utility */
.m--center {
.m-center {
margin-left: auto;
margin-right: auto;
}
@ -529,7 +530,6 @@ on our SVGs to ensure that they naturally render at the right size.)
align-items: center;
border-style: dashed;
border-width: 0 0 1px;
border-color: var(--bg-3);
@media screen and (min-width: 35em) {
flex-direction: row;

View File

@ -18,7 +18,6 @@
height: var(--height);
border-width: 0 0 1px 1px;
border-style: solid;
border-color: var(--bg-3);
left: -1.5rem;
top: calc(1rem - var(--height));
border-bottom-left-radius: 0.5rem;

View File

@ -1,7 +1,7 @@
.avatar {
object-fit: cover;
overflow: hidden;
background-color: var(--bg-3);
background-color: var(--c4);
flex-shrink: 0;
border: none;

View File

@ -1,40 +1,46 @@
{{ template "base-2024.html" . }}
{{ define "content" }}
<div class="mw5 pv3 center">
<h1 class="mb2">Log in</h1>
<form method="POST" class="flex flex-column g2 hmn-form">
<input type="hidden" name="redirect" value="{{ .RedirectUrl }}" />
<input class="db w-100 w5-ns"
name="username"
type="text"
minlength="3" maxlength="30"
placeholder="Username"
required
/>
<div class="mw5-ns ph3 ph0-ns pt3 m-center">
<div class="flex flex-column g4">
<form method="POST" class="flex flex-column g3 hmn-form">
<h1>Log In</h1>
<input class="db w-100 w5-ns"
name="password"
type="password"
minlength="8"
placeholder="Password"
required
/>
<a href="{{ .ForgotPasswordUrl }}" tabindex="-1">Forgot your password?</a>
<div class="mt3">
<input class="btn-primary w-100" type="submit" value="Log in" />
</div>
<input type="hidden" name="redirect" value="{{ .RedirectUrl }}" />
<div class="flex flex-column g2">
<input class="db w-100 w5-ns"
name="username"
type="text"
minlength="3" maxlength="30"
placeholder="Username"
required
/>
<div class="tc pa3">
Need an account? <a href="{{ .RegisterUrl }}">Sign up.</a>
</div>
<div class="flex flex-column g1">
<input class="db w-100 w5-ns"
name="password"
type="password"
minlength="8"
placeholder="Password"
required
/>
<a class="f7" href="{{ .ForgotPasswordUrl }}" tabindex="-1">Forgot your password?</a>
</div>
</div>
<div class="flex flex-column g2">
<input class="btn-primary w-100" type="submit" value="Log in" />
<div class="tc f6">
Need an account? <a href="{{ .RegisterUrl }}">Sign up.</a>
</div>
</div>
</form>
<div class="mt3 tc">
<div class="b mb1">Third-party login</div>
<div class="flex flex-column g2">
<div class="b">Third-party login</div>
<div class="flex flex-column g1">
<a href="{{ .LoginWithDiscordUrl }}" class="db br2 overflow-hidden flex" title="Log in with Discord">
<a href="{{ .LoginWithDiscordUrl }}" class="db overflow-hidden flex" title="Log in with Discord">
<img
src="{{ static "discord-login.svg" }}"
alt="Log in with Discord"
@ -42,6 +48,6 @@
</a>
</div>
</div>
</form>
</div>
</div>
{{ end }}

View File

@ -1,14 +1,15 @@
{{ template "base-2024.html" . }}
{{ define "content" }}
<div class="flex ph3 justify-center">
<div class="w-100 w-auto-ns pv3">
<h1 class="mb2">Sign up</h1>
<form method="POST" class="flex flex-column g2 hmn-form">
{{/* NOTE(asaf): No CSRF on register. We don't have a user session yet and I don't think we would gain anything from a pre-login session here */}}
<input type="hidden" name="destination" value="{{ .DestinationURL }}" />
<div class="mw5-ns pt3 ph3 ph0-ns m-center">
<form method="POST" class="flex flex-column g3 hmn-form">
<h1>Create Account</h1>
{{/* NOTE(asaf): No CSRF on register. We don't have a user session yet and I don't think we would gain anything from a pre-login session here */}}
<input type="hidden" name="destination" value="{{ .DestinationURL }}" />
<div class="flex flex-column g2">
<input class="db w-100 w5-ns"
name="username"
type="text"
@ -17,20 +18,17 @@
placeholder="Username"
required
/>
<input class="db w-100 w5-ns"
name="displayname"
placeholder="Display name (optional)"
type="text"
/>
<input class="db w-100 w5-ns"
name="email"
type="email"
placeholder="Email"
required
/>
<input class="db w-100 w5-ns"
name="password"
type="password"
@ -38,13 +36,11 @@
placeholder="Password"
required
/>
{{/* TODO(asaf): Consider adding some bot-mitigation thing here */}}
</div>
<div class="mt3">
<input class="w-100 btn-primary" type="submit" value="Register" />
</div>
</form>
</div>
{{/* TODO(asaf): Consider adding some bot-mitigation thing here */}}
<input class="w-100 btn-primary" type="submit" value="Register" />
</form>
</div>
{{ end }}

View File

@ -1,7 +1,7 @@
{{ template "base.html" . }}
{{ define "content" }}
<div class="mw7 m--center tl post ph3 ph0-ns">
<div class="mw7 m-center tl post ph3 ph0-ns">
<h1>{{ .Thread.Title }}</h1>
{{ with .MainPost }}
<div class="flex justify-between items-center mt2 mb3">

View File

@ -1,7 +1,7 @@
{{ template "base.html" . }}
{{ define "content" }}
<div class="mw7 m--center">
<div class="mw7 m-center">
<h3 class="mb3">Are you sure you want to delete this post?</h3>
{{ template "forum_post_standalone.html" .Post }}
<form action="{{ .SubmitUrl }}" method="POST" class="pv3 flex justify-end">

View File

@ -1,7 +1,7 @@
{{ template "base.html" . }}
{{ define "content" }}
<div class="mw7 m--center">
<div class="mw7 m-center">
<h3 class="mb3">Are you sure you want to delete this article?</h3>
<div class="bg2 pa3 br3 tl post-content">
<h1>{{ .Article.Title }}</h1>

View File

@ -1,7 +1,7 @@
{{ template "base.html" . }}
{{ define "content" }}
<div class="mw7 m--center">
<div class="mw7 m-center">
<h3 class="mb3">Are you sure you want to delete this post?</h3>
{{ template "forum_post_standalone.html" .Post }}
<form action="{{ .SubmitUrl }}" method="POST" class="pv3 flex justify-end">

View File

@ -1,7 +1,7 @@
{{ template "base.html" . }}
{{ define "content" }}
<div class="post-content mw7 ph3 ph0-ns m--center">
<div class="post-content mw7 ph3 ph0-ns m-center">
<h1>Handmade Software Foundation</h1>
<!-- <div> -->
</div>

View File

@ -39,11 +39,11 @@
</div>
</div>
</div>
<a class="db ph3 pv2 flex" href="{{ or .Header.UserProfileUrl .LoginPageUrl }}">
<a class="db pa3 lh-solid flex f6 {{ if not .User }}bl{{ end }}" href="{{ or .Header.UserProfileUrl .LoginPageUrl }}">
{{ with .User }}
<img class="avatar avatar-user" src="{{ .AvatarUrl }}">
{{ else }}
<div class="avatar avatar-user"></div>
Log In
{{ end }}
</a>
</header>

View File

@ -1,6 +1,8 @@
<a class="bg3 c-normal flex g3 br2 overflow-hidden pa3" href="{{ .Url }}">
<a class="bg3 c-normal flex items-start g3 br2 overflow-hidden pa3" href="{{ .Url }}">
{{ with .Logo }}
<img class="project-card-logo" src="{{ . }}" alt="Project Logo">
<div class="bg4 flex-shrink-0 flex">
<img class="project-card-logo" src="{{ . }}" alt="Project Logo">
</div>
{{ end }}
<div class="details flex-grow-1">
<h3 class="b mb2 f4">{{ .Name }}</h3>

View File

@ -237,7 +237,7 @@
<body>
<div class="white">
<div class="mt4-ns mw8 m--center ph3-m ph4-l">
<div class="mt4-ns mw8 m-center ph3-m ph4-l">
{{ template "header.html" . }}
</div>
@ -254,7 +254,7 @@
</div>
</div>
<div class="section mw8 m--center ph3 ph4-l mv4">
<div class="section mw8 m-center ph3 ph4-l mv4">
<p>
The <strong>Wheel Reinvention Jam</strong> is a one-week-long jam where you create a replacement for a program that frustrates you.
</p>
@ -267,16 +267,16 @@
</div>
<div id="showcase-outer-container" class="bg-black-20 pt4 pb3 pb4-ns">
<div class="section mw8 m--center ph3 ph4-l">
<div class="section mw8 m-center ph3 ph4-l">
<h2>Showcase</h2>
<p>
These screenshots and videos were shared in #jam-showcase on our <a href="https://discord.gg/hmn" target="_blank">Discord</a>. Join us!
</p>
<div id="showcase-container" class="mw8 m--center mh2 mh0-ns"></div>
<div id="showcase-container" class="mw8 m-center mh2 mh0-ns"></div>
</div>
</div>
<div class="section flex-fair mw8 m--center ph3 ph4-l mv4">
<div class="section flex-fair mw8 m-center ph3 ph4-l mv4">
<h2>Why reinvent the wheel?</h2>
<p>
How can you reinvent something that's never been invented?
@ -293,7 +293,7 @@
</div>
<div class="bg-black-20 pt4 pb3 pb4-ns">
<div class="section mw8 m--center ph3 ph4-l">
<div class="section mw8 m-center ph3 ph4-l">
<h2>Details</h2>
<p>
The jam takes place from Monday, September 27 through Sunday, October 3. Here's how you can participate:
@ -344,7 +344,7 @@
</div>
</div>
<div class="flex-ns flex-row-ns mw8 m--center ph3 ph4-l mv4">
<div class="flex-ns flex-row-ns mw8 m-center ph3 ph4-l mv4">
<div class="section flex-fair mb4 mb0-ns">
<h2>Make it by hand.</h2>
<p>
@ -368,7 +368,7 @@
</div>
</div>
<div class="mw8 m--center ph3-m ph4-l">
<div class="mw8 m-center ph3-m ph4-l">
{{ template "footer.html" . }}
</div>
</div>

View File

@ -21,7 +21,7 @@
</div>
<div class="section bg-black-20 pt4 pb3 pb4-ns">
<div class="mw8 m--center ph3 ph4-l flex flex-column flex-row-ns g3">
<div class="mw8 m-center ph3 ph4-l flex flex-column flex-row-ns g3">
<div class="flex-grow-1 overflow-hidden">
{{ if eq .DaysUntilEnd 0 }}
<h3 class="mt0 mb3">Project updates</h3>

View File

@ -50,7 +50,7 @@
</div>
</div>
<div class="section mw8 m--center ph3 ph4-l mv4">
<div class="section mw8 m-center ph3 ph4-l mv4">
<p>
The <strong>Wheel Reinvention Jam</strong> is a one-week-long jam where we turn a fresh eye to "solved problems".
</p>
@ -67,7 +67,7 @@
{{ if eq .DaysUntilEnd 0 }}
<div class="section bg-black-20 pv4 overflow-hidden">
<div class="mw8 m--center ph3 ph4-l">
<div class="mw8 m-center ph3 ph4-l">
<h2>Submitted projects</h2>
<div class="mt3 projects g3 back-to-normal">
{{ range .JamProjects }}
@ -81,7 +81,7 @@
</div>
{{ else if and (eq .DaysUntilStart 0) (not (eq .ShowcaseJson "[]")) }}
<div id="showcase-outer-container" class="bg-black-20 pt4 pb3 pb4-ns">
<div class="section mw8 m--center ph3 ph4-l">
<div class="section mw8 m-center ph3 ph4-l">
{{ if gt .DaysUntilEnd 0 }}
<h2>Recent updates</h2>
<p>
@ -93,7 +93,7 @@
These screenshots and videos were shared by jam participants in <b>#project-showcase</b> on our <a href="https://discord.gg/hmn" target="_blank">Discord</a> during the jam. Join us and chat about your favorites!
</p>
{{ end }}
<div id="showcase-container" class="mw8 m--center mh2 mh0-ns"></div>
<div id="showcase-container" class="mw8 m-center mh2 mh0-ns"></div>
<div class="actions flex justify-center">
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3" target="_blank" href="{{ .ShowcaseFeedUrl }}">See all</a>
</div>
@ -205,7 +205,7 @@
</script>
{{ else }}
<div class="section bg-black-20 pv4 overflow-hidden">
<div class="mw8 m--center ph3 ph4-l">
<div class="mw8 m-center ph3 ph4-l">
<h2>Last year's entries</h2>
<p>
We had many incredible entries last year. Here are a few of our favorites:
@ -263,7 +263,7 @@
{{ end }}
<div class="pt4 pb3 pb4-ns">
<div class="section mw8 m--center ph3 ph4-l">
<div class="section mw8 m-center ph3 ph4-l">
<h2>How to participate</h2>
<p>
The jam takes place from Monday, August 15 through Sunday, August 21. Here's how you can participate:
@ -307,7 +307,7 @@
</div>
<div class="bg-black-20 pt4 pb3 pb4-ns">
<div class="section mw8 m--center ph3 ph4-l">
<div class="section mw8 m-center ph3 ph4-l">
<h2>Rules</h2>
<ul>
<li>Any tech is allowed, but we encourage you to use only use what you really need. If you want some lightweight templates to get you started, check out our <a href="https://github.com/HandmadeNetwork/jam_templates" target="_blank">app templates</a>.</li>
@ -338,7 +338,7 @@
</div>
<div class="pt4">
<div class="flex-ns flex-row-ns mw8 m--center ph3 ph4-l">
<div class="flex-ns flex-row-ns mw8 m-center ph3 ph4-l">
<div class="section flex-fair mb4 mb0-ns">
<h2>Make it by hand.</h2>
<p>

View File

@ -17,7 +17,7 @@
</div>
<div class="section pt4 pb3 pb4-ns">
<div class="mw8 m--center ph3 ph4-l flex flex-column flex-row-ns g3">
<div class="mw8 m-center ph3 ph4-l flex flex-column flex-row-ns g3">
<div class="flex-grow-1 overflow-hidden">
{{ if eq .DaysUntilEnd 0 }}
<h3 class="mt0 mb3">Project updates</h3>

View File

@ -72,7 +72,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
</div>
</div>
<div class="section mw8 m--center ph3 ph4-l mv4">
<div class="section mw8 m-center ph3 ph4-l mv4">
<p>
Too many things in computing are <b>invisible</b>.
</p>
@ -86,7 +86,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
</div>
<div class="section pv4">
<div class="mw8 m--center ph3 ph4-l">
<div class="mw8 m-center ph3 ph4-l">
<h2>Read the recap</h2>
<p>Now that the jam is over, see which projects stood out. <a class="b" href="{{ .RecapUrl }}">Full post ➜</a></p>
</div>
@ -94,7 +94,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
{{ if eq .DaysUntilEnd 0 }}
<div class="section pv4 overflow-hidden">
<div class="mw8 m--center ph3 ph4-l">
<div class="mw8 m-center ph3 ph4-l">
<h2>Submitted projects</h2>
<div class="mt3 projects g3 back-to-normal">
{{ range .JamProjects }} {{ template "project_card.html" . }} {{ end }}
@ -110,7 +110,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
</div>
{{ else if and (eq .DaysUntilStart 0) (not (eq .ShowcaseJson "[]")) }}
<div id="showcase-outer-container" class="pt4 pb3 pb4-ns">
<div class="section mw8 m--center ph3 ph4-l">
<div class="section mw8 m-center ph3 ph4-l">
{{ if gt .DaysUntilEnd 0 }}
<h2>Recent updates</h2>
<p>
@ -129,7 +129,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
jam. Join us and chat about your favorites!
</p>
{{ end }}
<div id="showcase-container" class="mw8 m--center mh2 mh0-ns"></div>
<div id="showcase-container" class="mw8 m-center mh2 mh0-ns"></div>
<div class="actions flex justify-center">
<a
class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3"
@ -249,7 +249,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
{{ end }}
<div id="inspiration" class="pt4">
<div class="section mw8 m--center ph3 ph4-l">
<div class="section mw8 m-center ph3 ph4-l">
<h2>Inspiration</h2>
</div>
<div class="inspiration flex flex-column flex-wrap g3 ph3 ph4-l pt3 pt4-ns pb4 overflow-x-scroll">
@ -331,7 +331,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
</style>
<div class="pt4 pb3 pb4-ns">
<div class="section mw8 m--center ph3 ph4-l">
<div class="section mw8 m-center ph3 ph4-l">
<h2>How to participate</h2>
<p>
The jam takes place from Friday, April 14 through Sunday, April 16. Here's
@ -384,7 +384,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
</div>
<div class="pt4 pb3 pb4-ns">
<div class="section mw8 m--center ph3 ph4-l">
<div class="section mw8 m-center ph3 ph4-l">
<h2>Rules</h2>
<ul>
<li>Any tech is allowed.</li>

View File

@ -19,7 +19,7 @@
</div>
<div class="section pt4 pb3 pb4-ns">
<div class="mw8 m--center ph3 ph4-l">
<div class="mw8 m-center ph3 ph4-l">
<h2 class="mb2">Jam recap</h2>
<div class="mb4 flex items-center">
<div class="avatar contain bg-center" style="background-image:url('{{ .Ben.AvatarUrl }}');"></div>

View File

@ -21,7 +21,7 @@
</div>
<div class="section bg-black-20 pt4 pb3 pb4-ns">
<div class="mw8 m--center ph3 ph4-l flex flex-column flex-row-ns g3">
<div class="mw8 m-center ph3 ph4-l flex flex-column flex-row-ns g3">
<div class="flex-grow-1 overflow-hidden">
{{ if eq .DaysUntilEnd 0 }}
<h3 class="mt0 mb3">Project updates</h3>

View File

@ -23,7 +23,7 @@
</style>
{{ if .TwitchEmbedUrl }}
<div class="section mw8 m--center ph3 ph4-l mv4" style="aspect-ratio: 16 / 9;">
<div class="section mw8 m-center ph3 ph4-l mv4" style="aspect-ratio: 16 / 9;">
<iframe src="{{ .TwitchEmbedUrl }}" allowfullscreen width="100%" height="100%"></iframe>
</div>
{{ end }}
@ -60,7 +60,7 @@
</div>
</div>
<div class="section mw8 m--center ph3 ph4-l mv4">
<div class="section mw8 m-center ph3 ph4-l mv4">
<p>
The <b>Wheel Reinvention Jam</b> is a one-week jam where we build software from&nbsp;scratch.
</p>
@ -77,7 +77,7 @@
{{ if eq .DaysUntilEnd 0 }}
<div class="section bg-black-20-alternate pv4">
<div class="mw8 m--center ph3 ph4-l">
<div class="mw8 m-center ph3 ph4-l">
<h2>Recap show</h2>
<p>Watch the livestream celebrating this year's submissions:</p>
<div class="aspect-ratio aspect-ratio--16x9">
@ -86,7 +86,7 @@
</div>
</div>
<div class="section bg-black-20-alternate pv4 overflow-hidden">
<div class="mw8 m--center ph3 ph4-l">
<div class="mw8 m-center ph3 ph4-l">
<h2>Submitted projects</h2>
<div class="mt3 projects g3 back-to-normal">
{{ range .JamProjects }}
@ -100,7 +100,7 @@
</div>
{{ else if and (eq .DaysUntilStart 0) (not (eq .ShowcaseJson "[]")) }}
<div id="showcase-outer-container" class="bg-black-20-alternate pt4 pb3 pb4-ns">
<div class="section mw8 m--center ph3 ph4-l">
<div class="section mw8 m-center ph3 ph4-l">
{{ if gt .DaysUntilEnd 0 }}
<h2>Recent updates</h2>
<p>
@ -112,7 +112,7 @@
These screenshots and videos were shared by jam participants in <b>#project-showcase</b> on our <a href="https://discord.gg/hmn" target="_blank">Discord</a> during the jam. Join us and chat about your favorites!
</p>
{{ end }}
<div id="showcase-container" class="mw8 m--center mh2 mh0-ns"></div>
<div id="showcase-container" class="mw8 m-center mh2 mh0-ns"></div>
<div class="actions flex justify-center">
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3" target="_blank" href="{{ .ShowcaseFeedUrl }}">See all</a>
</div>
@ -224,7 +224,7 @@
</script>
{{ else }}
<div class="section bg-black-20-alternate pv4 overflow-hidden">
<div class="mw8 m--center ph3 ph4-l">
<div class="mw8 m-center ph3 ph4-l">
<h2>Last year's entries</h2>
<p>
We had 28 incredible entries <a href="https://handmade.network/jam/2022">last year</a>. Here are a few of our favorites:
@ -306,7 +306,7 @@
{{ end }}
<div class="bg-black-20-alternate pt4 pb3 pb4-ns">
<div class="flex-ns flex-row-ns mw8 m--center ph3 ph4-l">
<div class="flex-ns flex-row-ns mw8 m-center ph3 ph4-l">
<div class="section flex-fair mb4 mb0-ns">
<h2>Why reinvent the wheel?</h2>
<p>
@ -340,7 +340,7 @@
</div>
<div class="bg-black-20-alternate pt4 pb3 pb4-ns">
<div class="section mw8 m--center ph3 ph4-l">
<div class="section mw8 m-center ph3 ph4-l">
<h2>How to participate</h2>
<p>
The jam takes place from Monday, September 25 through Sunday, October 1. Here's how you can participate:
@ -384,7 +384,7 @@
</div>
<div class="bg-black-20-alternate pv4">
<div class="section mw8 m--center ph3 ph4-l">
<div class="section mw8 m-center ph3 ph4-l">
<h2>Rules</h2>
<ul>
<li>Any tech is allowed. Popular tech choices in the community are <a href="https://www.raylib.com/">Raylib</a>, <a href="https://www.libsdl.org/">SDL</a>, <a href="https://github.com/ocornut/imgui">Dear ImGui</a>, and <a href="https://github.com/rxi/microui">microui</a>. Or if you're feeling ambitious, you can even use our new app platform, <a href="https://orca-app.dev/">Orca</a>!</li>

View File

@ -17,31 +17,31 @@
<div class="jam-grid g3">
<a href="{{ .LJ2024Url }}">
<div class="br2 overflow-hidden flex">
<div class="overflow-hidden flex">
<img src="{{ static "learningjam2024/2024LJTwitterCard.png" }}">
</div>
</a>
<a href="{{ .WRJ2023Url }}">
<div class="br2 overflow-hidden flex">
<div class="overflow-hidden flex">
<img src="{{ static "wheeljam2023/TwitterCard.png" }}">
</div>
</a>
<a href="{{ .VJ2023Url }}">
<div class="br2 overflow-hidden flex">
<div class="overflow-hidden flex">
<img src="{{ static "visjam2023/TwitterCard.png" }}">
</div>
</a>
<a href="{{ .WRJ2022Url }}">
<div class="br2 overflow-hidden flex">
<div class="overflow-hidden flex">
<img src="{{ static "wheeljam2022/TwitterCard.png" }}">
</div>
</a>
<a href="{{ .WRJ2021Url }}">
<div class="br2 overflow-hidden flex">
<div class="overflow-hidden flex">
<img src="{{ static "wheeljam2021/TwitterCard.png" }}">
</div>
</a>
<a href="{{ .LispJamUrl }}" class="br2 overflow-hidden relative aspect-ratio--2x1 bg3">
<a href="{{ .LispJamUrl }}" class="overflow-hidden relative aspect-ratio--2x1 bg3">
<div class="aspect-ratio--object flex flex-column flex justify-center items-center f3 c--dim">
<h3>LISP Jam</h3>
</div>

View File

@ -67,7 +67,7 @@
<div id="welcome-logo" class="h4 mb3 mb4-ns">
{{ svg "hmn_circuit" }}
</div>
<div id="welcome-content" class="m--center" style="max-width: 51rem">
<div id="welcome-content" class="m-center" style="max-width: 51rem">
<p class="b">We are working to correct the course of the software industry.</p>
<p>We are a community of low-level programmers with high-level goals. Originally inspired by Casey Muratori's <a href="https://handmadehero.org/" target="_blank">Handmade Hero</a>, we dig deep into our systems and learn how to do things from scratch. We're not satisfied by the latest popular language or the framework of the month. Instead we care about how computers <b>actually&nbsp;work.</b></p>
<p>Software quality is declining, and modern development practices are making it worse. We need to change course. <b>Help us get the software industry back on track.</b></p>

View File

@ -22,7 +22,7 @@
<link href='https://fonts.googleapis.com/css?family=Fira+Mono:300,400,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="{{ static "style.css" }}" />
<link rel="stylesheet" href="{{ .ProjectCSSUrl }}" />
{{/* <link rel="stylesheet" href="{{ .ProjectCSSUrl }}" /> */}}
<link rel="apple-touch-icon" sizes="400x400" href="{{ static "logo.png" }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ static "favicon-16x16.png" }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ static "favicon-32x32.png" }}">
@ -75,7 +75,7 @@
</head>
<body class="{{ join " " .BodyClasses }}">
<div class="m--center mw-site ph3-m ph4-l">
<div class="m-center mw-site ph3-m ph4-l">
{{ template "header.html" . }}
<div class="notice notice-warn mt3 mb2 white ph3 pv2 br2-ns">
We are currently in the process of converting the website to the new design. Some pages, like this one, are still broken. We appreciate your patience.

View File

@ -348,7 +348,7 @@
<body>
<div class="white">
<div class="mt4-ns mw8 m--center ph3-m ph4-l">
<div class="mt4-ns mw8 m-center ph3-m ph4-l">
{{ template "header.html" . }}
</div>
@ -356,7 +356,7 @@
{{ block "content" . }}{{ end }}
</div>
<div class="mw8 m--center ph3-m ph4-l">
<div class="mw8 m-center ph3-m ph4-l">
{{ template "footer.html" . }}
</div>
</div>

View File

@ -1,7 +1,7 @@
{{ template "base.html" . }}
{{ define "content" }}
<div class="post-content mw7 ph3 ph0-ns m--center">
<div class="post-content mw7 ph3 ph0-ns m-center">
<h1>{{ .Role.Name }}</h1>
{{ block "role content" . }}{{ end }}

View File

@ -198,12 +198,12 @@
<body>
<div class="white">
<div class="mt4-ns mw7 m--center ph3-ns">
<div class="mt4-ns mw7 m-center ph3-ns">
{{ template "header.html" . }}
</div>
<div class="jam-sections">
<div class="m--center content mw7 ph3 flex flex-column g3">
<div class="m-center content mw7 ph3 flex flex-column g3">
{{ with .Breadcrumbs }}
<div class="mt2 tc tl-ns ph2 ph0-ns">
{{ range $i, $e := . -}}
@ -217,7 +217,7 @@
</div>
{{ block "content" . }}{{ end }}
<div class="mw8 m--center ph3-ns">
<div class="mw8 m-center ph3-ns">
{{ template "footer.html" . }}
</div>
</div>

View File

@ -341,13 +341,13 @@
<body>
<div class="white">
<div class="mt4-ns mw8 m--center ph3-m ph4-l">
<div class="mt4-ns mw8 m-center ph3-m ph4-l">
{{ template "header.html" . }}
</div>
{{ block "content" . }}{{ end }}
<div class="mw8 m--center ph3-m ph4-l">
<div class="mw8 m-center ph3-m ph4-l">
{{ template "footer.html" . }}
</div>
</div>

View File

@ -344,13 +344,13 @@
<body>
<div class="white">
<div class="mt4-ns mw8 m--center ph3-m ph4-l">
<div class="mt4-ns mw8 m-center ph3-m ph4-l">
{{ template "header.html" . }}
</div>
{{ block "content" . }}{{ end }}
<div class="mw8 m--center ph3-m ph4-l">
<div class="mw8 m-center ph3-m ph4-l">
{{ template "footer.html" . }}
</div>
</div>

View File

@ -1,7 +1,7 @@
{{ template "base-2024.html" . }}
{{ define "content" }}
<div class="mw-site pa3 post-content center">
<div class="mw-site-narrow pa3 post-content center">
<h2>Computers are amazing.</h2>
<p>Computing has changed our lives for the better. Computers allow us to learn, connect with each other, and express ourselves in amazing new ways. And every year our devices get more powerful, less expensive, and more accessible - computers today can do things we hardly dreamed of twenty years ago.</p>

View File

@ -1,153 +0,0 @@
{
{
$c : =hex2color .Color
}
}
:root {
--theme-color: {
{
$c | color2css
}
}
;
--theme-color-dim: {
{
lightness 0.75 $c | color2css
}
}
;
--theme-color-dimmer: {
{
lightness 0.8 $c | color2css
}
}
;
--theme-color-dimmest: {
{
lightness 0.85 $c | color2css
}
}
;
--theme-color-dark: {
{
lightness 0.35 $c | color2css
}
}
;
--theme-color-light: {
{
lightness 0.55 $c | color2css
}
}
;
--link-color: {
{
lightness 0.35 $c | color2css
}
}
;
--link-hover-color: {
{
lightness 0.45 $c | color2css
}
}
;
--background-even-background: {
{
lightness 0.95 $c | color2css
}
}
;
--input-lite-border: var(--link-color);
}
@media (prefers-color-scheme: dark) {
:root {
--theme-color-dim: {
{
lightness 0.35 $c | color2css
}
}
;
--theme-color-dimmer: {
{
lightness 0.3 $c | color2css
}
}
;
--theme-color-dimmest: {
{
lightness 0.2 $c | color2css
}
}
;
--theme-color-dark: {
{
lightness 0.30 $c | color2css
}
}
;
--theme-color-light: {
{
lightness 0.55 $c | color2css
}
}
;
--link-color: {
{
lightness 0.55 $c | color2css
}
}
;
--link-hover-color: {
{
lightness 0.65 $c | color2css
}
}
;
--background-even-background: {
{
lightness 0.15 $c | color2css
}
}
;
}
}
.unread .avatar {
border: 2px solid var(--link-color);
}

View File

@ -2,17 +2,16 @@
{{ define "content" }}
<div class="flex justify-center">
<div class="mw-site flex flex-column g3">
{{ if .OfficialProjects }}
<div class="ph3 pt3 bg2 br2 flex flex-column">
<h2 class="f3 mb2">Official Projects</h2>
<div class="grid grid-1 grid-2-ns g3">
{{ range .OfficialProjects }}
{{ template "project_card.html" . }}
{{ end }}
</div>
</div>
{{ end }}
<div class="pv3 mw-site flex flex-column g3">
<h2 class="f3">Featured Projects</h2>
<div class="post-content">
<p>Inspired by Handmade Hero, the Handmade Network community has produced a wide variety of fantastic projects, including apps, debuggers, editors, libraries, and even programming languages.</p>
</div>
<div class="grid grid-1 grid-2-ns g3">
{{ range .OfficialProjects }}
{{ template "project_card.html" . }}
{{ end }}
</div>
</div>
</div>
{{ end }}

View File

@ -133,6 +133,10 @@ int main() {
</tr>
</tfoot>
</table>
<blockquote>
<p>Don't believe everything you read on the internet.</p>
<p>-Abraham Lincoln</p>
</blockquote>
</div>
<h1 class="mt3 mb2">Form styles</h1>

View File

@ -2,7 +2,7 @@
{{ define "content" }}
<div class="m--center content mw7 ph3 flex flex-column g3">
<div class="m-center content mw7 ph3 flex flex-column g3">
<div>
<div class="mv5 flex justify-center">
<img

View File

@ -5,7 +5,7 @@
{{ end }}
{{ define "content" }}
<div class="m--center content mw7 ph3 flex flex-column g3">
<div class="m-center content mw7 ph3 flex flex-column g3">
<div>
<div class="mv4 mv5-ns flex justify-center">
<div class="frame mw6">

View File

@ -8,8 +8,8 @@
{{ end }}
{{ define "content" }}
<div class="m--center content mw7 ph3 flex flex-column g3">
<div class="frame mv3 mv4-ns mw6 m--center">
<div class="m-center content mw7 ph3 flex flex-column g3">
<div class="frame mv3 mv4-ns mw6 m-center">
{{ template "frame title" "Submit A Video" }}
<form class="post-content" action="" method="POST">
{{ csrftoken .Session }}

View File

@ -8,7 +8,7 @@
{{ end }}
{{ define "content" }}
<div class="m--center content mw7 ph3 flex flex-column g3">
<div class="m-center content mw7 ph3 flex flex-column g3">
<div class="mv5 flex justify-center">
<div class="frame mw6">
{{ template "frame title" "Submission Complete" }}

View File

@ -18,7 +18,6 @@ type BaseData struct {
CurrentUrl string
CurrentProjectUrl string
LoginPageUrl string
ProjectCSSUrl string
DiscordInviteUrl string
NewsletterSignupUrl string

View File

@ -50,7 +50,6 @@ func getBaseData(c *RequestContext, title string, breadcrumbs []templates.Breadc
CurrentUrl: c.FullUrl(),
CurrentProjectUrl: c.UrlContext.BuildHomepage(),
LoginPageUrl: hmnurl.BuildLoginPage(c.FullUrl()),
ProjectCSSUrl: hmnurl.BuildProjectCSS(project.Color1),
DiscordInviteUrl: "https://discord.gg/hmn",
NewsletterSignupUrl: hmnurl.BuildAPINewsletterSignup(),

View File

@ -30,32 +30,6 @@ import (
const maxPersonalProjects = 10
const maxProjectOwners = 5
func ProjectCSS(c *RequestContext) ResponseData {
color := c.URL().Query().Get("color")
if color == "" {
return c.ErrorResponse(http.StatusBadRequest, NewSafeError(nil, "You must provide a 'color' parameter.\n"))
}
baseData := getBaseData(c, "", nil)
templateData := struct {
templates.BaseData
Color string
}{
BaseData: baseData,
Color: color,
}
var res ResponseData
res.Header().Add("Content-Type", "text/css")
err := res.WriteTemplate("project.css", templateData, c.Perf)
if err != nil {
return c.ErrorResponse(http.StatusInternalServerError, oops.New(err, "failed to generate project CSS"))
}
return res
}
type ProjectTemplateData struct {
templates.BaseData

View File

@ -302,7 +302,6 @@ func NewWebsiteRoutes(conn *pgxpool.Pool) http.Handler {
anyProject.GET(hmnurl.RegexEpisode, Episode)
anyProject.GET(hmnurl.RegexCineraIndex, CineraIndex)
anyProject.GET(hmnurl.RegexProjectCSS, ProjectCSS)
anyProject.GET(hmnurl.RegexMarkdownWorkerJS, func(c *RequestContext) ResponseData {
var res ResponseData
res.MustWriteTemplate("markdown_worker.js", nil, c.Perf)

View File

@ -60,6 +60,7 @@
- [ ] Make snippet descriptions partially collapse by default
- [ ] Make the home page remember which tab you were on
- [ ] Resolve TODO(redesign) comments
- [ ] Audit all project lifecycles on HMN - probably remove "complete", replace with stuff like "alpha", "beta", maybe other stuff that makes sense for other types of projects.
stack!