diff --git a/public/js/countdown.js b/public/js/countdown.js new file mode 100644 index 00000000..ba9f2f66 --- /dev/null +++ b/public/js/countdown.js @@ -0,0 +1,33 @@ +document.addEventListener("DOMContentLoaded", () => { + for (const countdown of document.querySelectorAll(".countdown")) { + const deadline = countdown.getAttribute("data-deadline"); + const deadlineDate = new Date(parseInt(deadline, 10) * 1000); + + function updateCountdown() { + const remainingMs = deadlineDate.getTime() - new Date().getTime(); + const remainingMinutes = remainingMs / 1000 / 60; + const remainingHours = remainingMinutes / 60; + const remainingDays = remainingHours / 24; // no daylight savings transitions during the jam mmkay + + let str = "imminently"; + if (remainingMinutes < 60) { + str = `in ${Math.ceil(remainingMinutes)} ${ + remainingMinutes === 1 ? "minute" : "minutes" + }`; + } else if (remainingHours < 24) { + str = `in ${Math.ceil(remainingHours)} ${ + remainingHours === 1 ? "hour" : "hours" + }`; + } else { + str = `in ${Math.ceil(remainingDays)} ${ + remainingDays === 1 ? "day" : "days" + }`; + } + + countdown.innerText = str; + } + + updateCountdown(); + setInterval(updateCountdown, 1000 * 60); + } +}); diff --git a/public/style.css b/public/style.css index ebeff171..8e31abb5 100644 --- a/public/style.css +++ b/public/style.css @@ -7157,8 +7157,8 @@ code { :root { --c1: #fafafa; --c2: #f3f3f3; - --c3: #cbcbcb; - --c4: #595959; + --c3: #dbdbdb; + --c4: #c1c1c1; --c-transparent-background: #fffffff3; --red: #c61d24; --color: #000; @@ -7167,6 +7167,7 @@ code { --border-color: var(--c4); --border-color-focused: #4e55ff; --border-color-error: #ff3a3a; + --button-color: var(--c3); --button-color-primary: #ee84ff; --notice-hiatus-color: #aa7d30; --notice-dead-color: #b42222; @@ -7272,9 +7273,13 @@ br { border-style: none; } hr { + margin: 0; border: none; border-bottom: 1px solid var(--border-color); } +video { + max-width: 100%; +} .m-center { margin-left: auto; margin-right: auto; @@ -7307,11 +7312,14 @@ hr { .c-normal { color: var(--color); } -.c--inherit { +.c-white { + --color: #fff; +} +.c-inherit { color: inherit; } -.c--inherit:hover, -.c--inherit:active { +.c-inherit:hover, +.c-inherit:active { color: inherit; } .bg1 { @@ -7995,23 +8003,6 @@ hr { .hmn-form textarea { resize: vertical; } -.hmn-form button, -.hmn-form input[type=submit] { - color: var(--color); - background-color: var(--c3); - cursor: pointer; - font-weight: 500; - line-height: 1.5rem; - border: none; -} -.hmn-form button.btn-primary, -.hmn-form input[type=submit].btn-primary { - background-color: var(--button-color-primary); -} -.hmn-form button:not(.no-padding), -.hmn-form input[type=submit]:not(.no-padding) { - padding: 0.5rem 1.5rem; -} .hmn-form label { font-weight: 600; } @@ -8041,6 +8032,26 @@ hr { .hmn-form legend:not(:last-child) { border-bottom: 1px solid var(--border-color); } +button, +input[type=submit], +.btn { + color: var(--color); + background-color: var(--button-color); + cursor: pointer; + font-weight: 500; + line-height: 1.5rem; + border: none; +} +button.btn-primary, +input[type=submit].btn-primary, +.btn.btn-primary { + background-color: var(--button-color-primary); +} +button:not(.no-padding), +input[type=submit]:not(.no-padding), +.btn:not(.no-padding) { + padding: 0.5rem 1.5rem; +} /* src/rawdata/scss/forum.css */ .thread-list-item .latestpost { @@ -8274,9 +8285,11 @@ header.old .submenu > a { } } header { - background-color: var(--c3); + --bg-header: var(--c3); + --border-header: 1px; + background-color: var(--bg-header); border-bottom-style: solid; - border-bottom-width: 1px; + border-bottom-width: var(--border-header); } header .hmn-logo { font-family: "MohaveHMN", sans-serif; @@ -8298,16 +8311,20 @@ header .header-nav > .root-item > a { display: block; padding: var(--spacing-3); } +header .root-item { + position: relative; +} header .submenu { display: flex; flex-direction: column; position: absolute; z-index: 100; min-width: 8rem; - background-color: var(--c3); + background-color: var(--bg-header); border-style: solid; - border-width: 1px; + border-width: var(--border-header); border-top-width: 0; + top: 100%; } header .submenu > a { padding: var(--spacing-2) var(--spacing-3); @@ -8325,6 +8342,11 @@ header:not(.clicked) .root-item:not(:hover) > .submenu, header.clicked .root-item:not(.clicked) > .submenu { display: none; } +.header-transparent header { + --bg-header: rgba(0, 0, 0, 0.4); + --border-header: 0; + --color: #fff; +} /* src/rawdata/scss/icons.css */ @font-face { diff --git a/public/visjam2024/escapeartist.png b/public/visjam2024/escapeartist.png new file mode 100644 index 00000000..4d197889 Binary files /dev/null and b/public/visjam2024/escapeartist.png differ diff --git a/public/visjam2024/logo.svg b/public/visjam2024/logo.svg new file mode 100644 index 00000000..201bc760 --- /dev/null +++ b/public/visjam2024/logo.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/visjam2024/npmgraph.png b/public/visjam2024/npmgraph.png new file mode 100644 index 00000000..9a906b93 Binary files /dev/null and b/public/visjam2024/npmgraph.png differ diff --git a/src/hmndata/jams.go b/src/hmndata/jams.go index 90a72166..94cfc2af 100644 --- a/src/hmndata/jams.go +++ b/src/hmndata/jams.go @@ -64,14 +64,27 @@ var WRJ2023 = Jam{ var LJ2024 = Jam{ Event: Event{ - StartTime: time.Date(2024, 3, 15, 17, 0, 0, 0, time.UTC), - EndTime: time.Date(2024, 3, 25, 0, 0, 0, 0, time.UTC), + StartTime: time.Date(2024, 8, 15, 17, 0, 0, 0, time.UTC), + EndTime: time.Date(2024, 8, 25, 0, 0, 0, 0, time.UTC), }, Name: "Learning Jam 2024", Slug: "LJ2024", UrlSlug: "learning-2024", } +var VJ2024 = Jam{ + // Trying looser times this year. + // Start: 6am Seattle / 8am Minneapolis / 1pm UTC / 2pm London / 4pm Jerusalem + // End: 10pm Seattle / 12am Minneapolis / 5am UTC / 6am London / 8am Jerusalem + Event: Event{ + StartTime: time.Date(2024, 7, 19, 13, 0, 0, 0, time.UTC), + EndTime: time.Date(2024, 7, 22, 5, 0, 0, 0, time.UTC), + }, + Name: "Visibility Jam 2024", + Slug: "VJ2024", + UrlSlug: "visibility-2024", +} + // Conferences var HMS2022 = Event{ StartTime: time.Date(2022, 11, 16, 0, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))), @@ -98,7 +111,7 @@ var HMBoston2024 = Event{ EndTime: time.Date(2024, 8, 10, 0, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))), } -var AllJams = []Jam{WRJ2021, WRJ2022, VJ2023, WRJ2023, LJ2024} +var AllJams = []Jam{WRJ2021, WRJ2022, VJ2023, WRJ2023, LJ2024, VJ2024} func CurrentJam() *Jam { now := time.Now() diff --git a/src/hmnurl/urls.go b/src/hmnurl/urls.go index d3bc00d7..09ffe9fa 100644 --- a/src/hmnurl/urls.go +++ b/src/hmnurl/urls.go @@ -119,6 +119,13 @@ func BuildJamGuidelines2024_Learning() string { return Url("/jam/learning-2024/guidelines", nil) } +var RegexJamIndex2024_Visibility = regexp.MustCompile("^/jam/visibility-2024$") + +func BuildJamIndex2024_Visibility() string { + defer CatchPanic() + return Url("/jam/visibility-2024", nil) +} + var RegexJamSaveTheDate = regexp.MustCompile("^/jam/upcoming$") func BuildJamSaveTheDate() string { diff --git a/src/rawdata/scss/core.css b/src/rawdata/scss/core.css index 913a905d..4a776e18 100644 --- a/src/rawdata/scss/core.css +++ b/src/rawdata/scss/core.css @@ -60,10 +60,15 @@ br { } hr { + margin: 0; border: none; border-bottom: 1px solid var(--border-color); } +video { + max-width: 100%; +} + /* Utility */ .m-center { @@ -105,7 +110,11 @@ hr { color: var(--color); } -.c--inherit { +.c-white { + --color: #fff; +} + +.c-inherit { color: inherit; &:hover, diff --git a/src/rawdata/scss/form.css b/src/rawdata/scss/form.css index dade37ab..9b9293e6 100644 --- a/src/rawdata/scss/form.css +++ b/src/rawdata/scss/form.css @@ -37,24 +37,6 @@ resize: vertical; } - button, - input[type=submit] { - color: var(--color); - background-color: var(--c3); - cursor: pointer; - font-weight: 500; - line-height: 1.5rem; - border: none; - - &.btn-primary { - background-color: var(--button-color-primary); - } - - &:not(.no-padding) { - padding: 0.5rem 1.5rem; - } - } - label { font-weight: 600; } @@ -89,4 +71,23 @@ border-bottom: 1px solid var(--border-color); } } +} + +button, +input[type=submit], +.btn { + color: var(--color); + background-color: var(--button-color); + cursor: pointer; + font-weight: 500; + line-height: 1.5rem; + border: none; + + &.btn-primary { + background-color: var(--button-color-primary); + } + + &:not(.no-padding) { + padding: 0.5rem 1.5rem; + } } \ No newline at end of file diff --git a/src/rawdata/scss/header.css b/src/rawdata/scss/header.css index 68faacbb..b2a57251 100644 --- a/src/rawdata/scss/header.css +++ b/src/rawdata/scss/header.css @@ -114,9 +114,12 @@ header.old { } header { - background-color: var(--c3); + --bg-header: var(--c3); + --border-header: 1px; + + background-color: var(--bg-header); border-bottom-style: solid; - border-bottom-width: 1px; + border-bottom-width: var(--border-header); .hmn-logo { font-family: 'MohaveHMN', sans-serif; @@ -146,16 +149,21 @@ header { } } + .root-item { + position: relative; + } + .submenu { display: flex; flex-direction: column; position: absolute; z-index: 100; min-width: 8rem; - background-color: var(--c3); + background-color: var(--bg-header); border-style: solid; - border-width: 1px; + border-width: var(--border-header); border-top-width: 0; + top: 100%; >a { padding: var(--spacing-2) var(--spacing-3); @@ -181,4 +189,12 @@ header { display: none; } } +} + +.header-transparent { + header { + --bg-header: rgba(0, 0, 0, 0.4); + --border-header: 0; + --color: #fff; + } } \ No newline at end of file diff --git a/src/rawdata/scss/vars.css b/src/rawdata/scss/vars.css index 1524f52d..312f84dc 100644 --- a/src/rawdata/scss/vars.css +++ b/src/rawdata/scss/vars.css @@ -26,9 +26,8 @@ $breakpoint-large: screen and (min-width: 60em) /* TODO(redesign): Probably not the right color for Soft Gray. Check with Jes. */ --c1: #fafafa; --c2: #f3f3f3; - --c3: #cbcbcb; - /* TODO(redesign): Probably way too dark. Check with Jes. */ - --c4: #595959; + --c3: #dbdbdb; + --c4: #c1c1c1; /* TODO(redesign): Need a --c5. */ --c-transparent-background: #fffffff3; @@ -44,6 +43,7 @@ $breakpoint-large: screen and (min-width: 60em) --border-color-focused: #4e55ff; --border-color-error: #ff3a3a; + --button-color: var(--c3); --button-color-primary: #ee84ff; /* TODO(redesign): Audit these colors. */ diff --git a/src/templates/src/education_index.html b/src/templates/src/education_index.html index db68f7ec..8118f8d4 100644 --- a/src/templates/src/education_index.html +++ b/src/templates/src/education_index.html @@ -7,7 +7,7 @@

Dive into one of these topics and start learning.

- +

Compilers

@@ -16,7 +16,7 @@
- +

Networking

@@ -25,7 +25,7 @@
- +

Time

diff --git a/src/templates/src/include/header-2024.html b/src/templates/src/include/header-2024.html index 801ea574..a92ab908 100644 --- a/src/templates/src/include/header-2024.html +++ b/src/templates/src/include/header-2024.html @@ -1,4 +1,4 @@ -