hmn
/
hmn
4
Fork 10
Code Issues 60 Pull Requests 1 Releases Activity

Lay out top section

This commit is contained in:
Ben Visness 2024-02-09 15:02:58 -06:00
parent b5d4fe9ba2
commit c5e458be8c
4 changed files with 137 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/learningjam2023/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

42
src/templates/src/jam_2024_lj_index.html
View File

@ -1,18 +1,41 @@
{{ template "jam_2024_learning_base.html" . }} {{ template "jam_2024_learning_base.html" . }}
{{ define "extrahead" }}
<style>
.jam-logo {
max-width: 24rem;
}
.jam-title {
/* align with the width of the logo */
font-size: 3.7rem;
font-weight: 700;
/* align with the text's actual bounding box */
line-height: 1.18;
margin-top: -0.18em;
margin-left: -0.03em;
margin-right: -0.03em;
}
</style>
{{ end }}
{{ define "content-top" }} {{ define "content-top" }}
<div class="flex flex-column items-center pa3 g3"> <div class="mw7 margin-center">
<img class="mw5" src="{{ static "visjam2023/logo.svg" }}"> <div class="flex flex-column pv4 tc">
<div class="f1 fw7">The Learning Jam</div> <img class="jam-logo margin-center" src="{{ static "learningjam2023/logo.svg" }}">
<div class="flex flex-row g5 lh-solid"> <div class="margin-center mv4">
<div class="jam-title mb3">Learning Jam</div>
<div class="flex flex-row justify-between lh-solid">
<div> <div>
<div class="fw7 f3">Learn</div> <div class="fw7 f3 mb1">Learn</div>
<div class="fw3 f4">March 15-17, 2024</div> <div class="fw3 f4">March 15-17, 2024</div>
</div> </div>
<div> <div>
<div class="fw7 f3">Teach</div> <div class="fw7 f3 mb1">Teach</div>
<div class="fw3 f4">March 22-24, 2024</div> <div class="fw3 f4">March 22-24, 2024</div>
</div> </div>
</div> </div>
</div>
{{ if lt .DaysUntilStart 0 }} {{ if lt .DaysUntilStart 0 }}
<div class="flex flex-row g3 mt2"> <div class="flex flex-row g3 mt2">
{{ if .SubmittedProjectUrl }} {{ if .SubmittedProjectUrl }}
@ -23,8 +46,9 @@
<a class="db ph3 pv2 f4 button-simple" href="{{ .JamFeedUrl }}">Recent activity</a> <a class="db ph3 pv2 f4 button-simple" href="{{ .JamFeedUrl }}">Recent activity</a>
</div> </div>
{{ end }} {{ end }}
<div class="mt2"> <div class="flex g3 justify-center">
<a href="{{ .DiscordInviteUrl }}" class="db ph2 pv1 button-simple">Join the Discord</a> <a href="{{ .DiscordInviteUrl }}" class="btn--jam">Join the Discord</a>
</div>
</div> </div>
</div> </div>
{{ end }} {{ end }}
@ -32,7 +56,7 @@
{{ define "content" }} {{ define "content" }}
<style> <style>
.participate-icon { .participate-icon {
--mask-url: url("{{ static "visjam2023/logo.svg" }}"); --mask-url: url("{{ static "learningjam2023/logo.svg" }}");
} }
</style> </style>
<div class="flex flex-column g3 items-center pa3"> <div class="flex flex-column g3 items-center pa3">

36
src/templates/src/layouts/jam_2024_learning_base.html
View File

@ -39,15 +39,26 @@
--theme-gradient-dark: linear-gradient(to bottom right, #003c83, #019AD2); --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, #2F69FF);
--white: #fff; --white: #fff;
--bg-button: #082F5766; --bg-button: rgba(255, 255, 255, 0);
--bg-button-hover: #082F5733; --bg-button-hover: rgba(255, 255, 255, 0.1);
--charcoal: #2F2F2F; --charcoal: #2F2F2F;
--gray: #CBCBCB; --gray: #CBCBCB;
--rich-gray: #494949; --rich-gray: #494949;
--spacing-0: 0;
--spacing-1: .25rem;
--spacing-2: .5rem;
--spacing-3: 1rem;
--spacing-4: 2rem;
--spacing-5: 4rem;
--spacing-6: 8rem;
--spacing-7: 16rem;
--border-radius-2: 0.25rem;
} }
body { body {
font-family: "Inter", "Fira Sans", sans-serif; font-family: "Inter", "Fira Sans", sans-serif;
font-size: 1rem;
} }
.bg--theme-gradient-dark { .bg--theme-gradient-dark {
@ -86,6 +97,18 @@
color: transparent; color: transparent;
} }
.btn--jam {
border: 1px solid var(--white);
border-radius: var(--border-radius-2);
padding: var(--spacing-2) var(--spacing-3);
background-color: var(--bg-button);
}
.btn--jam:hover {
background-color: var(--bg-button-hover);
}
.button-simple { .button-simple {
background: var(--bg-button); background: var(--bg-button);
border: 1px solid var(--white); border: 1px solid var(--white);
@ -118,12 +141,19 @@
.iframe-fill iframe { .iframe-fill iframe {
flex-grow: 1; flex-grow: 1;
} }
/* not small */
@media screen and (min-width: 35em) {
}
</style> </style>
{{ template "extrahead" . }}
</head> </head>
<body class="flex flex-column"> <body class="flex flex-column">
<div class="c-white bg--theme-gradient-dark"> <div class="c-white bg--theme-gradient-dark">
<div class="bb b--white pa1 mb3 flex flex-row g2 items-center"> <div class="bb b--white pa1 flex flex-row g2 items-center">
<a href="{{ .Header.HMNHomepageUrl }}" class="f3">HANDMADE</a> <a href="{{ .Header.HMNHomepageUrl }}" class="f3">HANDMADE</a>
<div class="flex-grow-1 flex-shrink-1"></div> <div class="flex-grow-1 flex-shrink-1"></div>
</div> </div>

2
src/website/routes.go
View File

@ -61,7 +61,7 @@ func NewWebsiteRoutes(conn *pgxpool.Pool) http.Handler {
hmnOnly.GET(hmnurl.RegexJamsIndex, JamsIndex) hmnOnly.GET(hmnurl.RegexJamsIndex, JamsIndex)
hmnOnly.GET(hmnurl.RegexJamIndex, func(c *RequestContext) ResponseData { hmnOnly.GET(hmnurl.RegexJamIndex, func(c *RequestContext) ResponseData {
return c.Redirect(hmnurl.BuildJamIndex2023(), http.StatusFound) return c.Redirect(hmnurl.BuildJamIndex2024_Learning(), http.StatusFound)
}) })
hmnOnly.GET(hmnurl.RegexJamIndex2021, JamIndex2021) hmnOnly.GET(hmnurl.RegexJamIndex2021, JamIndex2021)
hmnOnly.GET(hmnurl.RegexJamIndex2022, JamIndex2022) hmnOnly.GET(hmnurl.RegexJamIndex2022, JamIndex2022)