hmn
/
hmn
4
Fork 10
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" . }} {{ 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> <div class="jam-title mb3">Learning Jam</div>
<div class="fw7 f3">Learn</div> <div class="flex flex-row justify-between lh-solid">
<div class="fw3 f4">March 15-17, 2024</div> <div>
</div> <div class="fw7 f3 mb1">Learn</div>
<div> <div class="fw3 f4">March 15-17, 2024</div>
<div class="fw7 f3">Teach</div> </div>
<div class="fw3 f4">March 22-24, 2024</div> <div>
<div class="fw7 f3 mb1">Teach</div>
<div class="fw3 f4">March 22-24, 2024</div>
</div>
</div> </div>
</div> </div>
{{ if lt .DaysUntilStart 0 }} {{ if lt .DaysUntilStart 0 }}
@ -23,16 +46,17 @@
<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 }}
{{ 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">

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" }}"> <link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">
<style> <style>
:root { :root {
--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;
}
body { --spacing-0: 0;
font-family: "Inter", "Fira Sans", sans-serif; --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 { body {
background: var(--theme-gradient-dark); font-family: "Inter", "Fira Sans", sans-serif;
} font-size: 1rem;
}
.bg--theme-gradient-light { .bg--theme-gradient-dark {
background: var(--theme-gradient-light); background: var(--theme-gradient-dark);
} }
.bg--charcoal { .bg--theme-gradient-light {
background: var(--charcoal); background: var(--theme-gradient-light);
} }
.bg--rich-gray { .bg--charcoal {
background: var(--rich-gray); background: var(--charcoal);
} }
.bg--gray { .bg--rich-gray {
background: var(--gray); background: var(--rich-gray);
} }
.b--rich-gray { .bg--gray {
border-color: var(--rich-gray); background: var(--gray);
} }
.c--theme-gradient-dark { .b--rich-gray {
background: var(--theme-gradient-dark); border-color: var(--rich-gray);
background-clip: text; }
color: transparent;
}
.c--theme-gradient-light { .c--theme-gradient-dark {
background: var(--theme-gradient-light); background: var(--theme-gradient-dark);
background-clip: text; background-clip: text;
color: transparent; color: transparent;
} }
.button-simple { .c--theme-gradient-light {
background: var(--bg-button); background: var(--theme-gradient-light);
border: 1px solid var(--white); background-clip: text;
} color: transparent;
}
.button-simple:hover { .btn--jam {
background: var(--bg-button-hover); border: 1px solid var(--white);
} border-radius: var(--border-radius-2);
padding: var(--spacing-2) var(--spacing-3);
.c-white { background-color: var(--bg-button);
color: var(--white); }
}
.invisible { .btn--jam:hover {
visibility: hidden; background-color: var(--bg-button-hover);
} }
.svg-mask { .button-simple {
mask: var(--mask-url); background: var(--bg-button);
} border: 1px solid var(--white);
}
.square { .button-simple:hover {
aspect-ratio: 1 / 1; background: var(--bg-button-hover);
} }
.wide-screen { .c-white {
aspect-ratio: 16 / 9; color: var(--white);
} }
.iframe-fill iframe { .invisible {
flex-grow: 1; 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> </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)