hmn
/
hmn
4
Fork 9
Code Issues 59 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

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

@ -1,16 +1,39 @@
{{ 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" }}
<div class="flex flex-column items-center pa3 g3">
<img class="mw5" src="{{ static "visjam2023/logo.svg" }}">
<div class="f1 fw7">The Learning Jam</div>
<div class="flex flex-row g5 lh-solid">
<div>
<div class="fw7 f3">Learn</div>
<div class="fw3 f4">March 15-17, 2024</div>
</div>
<div>
<div class="fw7 f3">Teach</div>
<div class="fw3 f4">March 22-24, 2024</div>
<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">
<div class="jam-title mb3">Learning Jam</div>
<div class="flex flex-row justify-between lh-solid">
<div>
<div class="fw7 f3 mb1">Learn</div>
<div class="fw3 f4">March 15-17, 2024</div>
</div>
<div>
<div class="fw7 f3 mb1">Teach</div>
<div class="fw3 f4">March 22-24, 2024</div>
</div>
</div>
</div>
{{ if lt .DaysUntilStart 0 }}
@ -23,16 +46,17 @@
<a class="db ph3 pv2 f4 button-simple" href="{{ .JamFeedUrl }}">Recent activity</a>
</div>
{{ end }}
<div class="mt2">
<a href="{{ .DiscordInviteUrl }}" class="db ph2 pv1 button-simple">Join the Discord</a>
<div class="flex g3 justify-center">
<a href="{{ .DiscordInviteUrl }}" class="btn--jam">Join the Discord</a>
</div>
</div>
</div>
{{ end }}
{{ define "content" }}
<style>
.participate-icon {
--mask-url: url("{{ static "visjam2023/logo.svg" }}");
--mask-url: url("{{ static "learningjam2023/logo.svg" }}");
}
</style>
<div class="flex flex-column g3 items-center pa3">

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

@ -35,95 +35,125 @@
<link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">
<style>
:root {
--theme-gradient-dark: linear-gradient(to bottom right, #003c83, #019AD2);
--theme-gradient-light: linear-gradient(to bottom right, #8BD5FF, #2F69FF);
--white: #fff;
--bg-button: #082F5766;
--bg-button-hover: #082F5733;
--charcoal: #2F2F2F;
--gray: #CBCBCB;
--rich-gray: #494949;
}
:root {
--theme-gradient-dark: linear-gradient(to bottom right, #003c83, #019AD2);
--theme-gradient-light: linear-gradient(to bottom right, #8BD5FF, #2F69FF);
--white: #fff;
--bg-button: rgba(255, 255, 255, 0);
--bg-button-hover: rgba(255, 255, 255, 0.1);
--charcoal: #2F2F2F;
--gray: #CBCBCB;
--rich-gray: #494949;
body {
font-family: "Inter", "Fira Sans", sans-serif;
}
--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;
}
.bg--theme-gradient-dark {
background: var(--theme-gradient-dark);
}
body {
font-family: "Inter", "Fira Sans", sans-serif;
font-size: 1rem;
}
.bg--theme-gradient-light {
background: var(--theme-gradient-light);
}
.bg--theme-gradient-dark {
background: var(--theme-gradient-dark);
}
.bg--charcoal {
background: var(--charcoal);
}
.bg--theme-gradient-light {
background: var(--theme-gradient-light);
}
.bg--rich-gray {
background: var(--rich-gray);
}
.bg--charcoal {
background: var(--charcoal);
}
.bg--gray {
background: var(--gray);
}
.bg--rich-gray {
background: var(--rich-gray);
}
.b--rich-gray {
border-color: var(--rich-gray);
}
.bg--gray {
background: var(--gray);
}
.c--theme-gradient-dark {
background: var(--theme-gradient-dark);
background-clip: text;
color: transparent;
}
.b--rich-gray {
border-color: var(--rich-gray);
}
.c--theme-gradient-light {
background: var(--theme-gradient-light);
background-clip: text;
color: transparent;
}
.c--theme-gradient-dark {
background: var(--theme-gradient-dark);
background-clip: text;
color: transparent;
}
.button-simple {
background: var(--bg-button);
border: 1px solid var(--white);
}
.c--theme-gradient-light {
background: var(--theme-gradient-light);
background-clip: text;
color: transparent;
}
.button-simple:hover {
background: var(--bg-button-hover);
}
.btn--jam {
border: 1px solid var(--white);
border-radius: var(--border-radius-2);
padding: var(--spacing-2) var(--spacing-3);
.c-white {
color: var(--white);
}
background-color: var(--bg-button);
}
.invisible {
visibility: hidden;
}
.btn--jam:hover {
background-color: var(--bg-button-hover);
}
.svg-mask {
mask: var(--mask-url);
}
.button-simple {
background: var(--bg-button);
border: 1px solid var(--white);
}
.square {
aspect-ratio: 1 / 1;
}
.button-simple:hover {
background: var(--bg-button-hover);
}
.wide-screen {
aspect-ratio: 16 / 9;
}
.c-white {
color: var(--white);
}
.iframe-fill iframe {
flex-grow: 1;
}
.invisible {
visibility: hidden;
}
.svg-mask {
mask: var(--mask-url);
}
.square {
aspect-ratio: 1 / 1;
}
.wide-screen {
aspect-ratio: 16 / 9;
}
.iframe-fill iframe {
flex-grow: 1;
}
/* not small */
@media screen and (min-width: 35em) {
}
</style>
{{ template "extrahead" . }}
</head>
<body class="flex flex-column">
<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>
<div class="flex-grow-1 flex-shrink-1"></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.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.RegexJamIndex2022, JamIndex2022)