From 1a0be1912e8ea9ffbfc3af345266a8dd87a92722 Mon Sep 17 00:00:00 2001 From: Ben Visness Date: Mon, 20 May 2024 21:37:28 -0500 Subject: [PATCH] Implement new header / footer (mostly) --- public/js/snippetedit.js | 42 +-- public/style.css | 98 ++++--- public/style.old.css | 12 +- src/rawdata/scss/header.css | 67 ++++- src/rawdata/scss/timeline.css | 18 +- src/rawdata/scss/vars.css | 3 +- src/templates/src/blog_index.html | 2 +- src/templates/src/blog_post.html | 4 +- src/templates/src/feed.html | 2 +- src/templates/src/include/footer-2024.html | 5 + src/templates/src/include/header-2024.html | 103 ++++++++ src/templates/src/include/header.html | 2 +- src/templates/src/include/project_card.html | 2 +- .../src/include/showcase_templates.html | 2 +- src/templates/src/include/snippet_edit.html | 2 +- .../src/include/thread_list_item.html | 4 +- src/templates/src/include/timeline_item.html | 2 +- src/templates/src/jam_2023_vj_recap.html | 2 +- src/templates/src/layouts/base-2024.html | 245 ++++++++++++++++++ .../src/layouts/jam_2023_visibility_base.html | 2 +- src/templates/src/project.css | 188 +++++++++++--- src/templates/src/project_homepage.html | 4 +- src/templates/src/project_index.html | 10 +- src/templates/types.go | 2 + src/website/base_data.go | 2 + todo-styles.md | 4 + 26 files changed, 693 insertions(+), 136 deletions(-) create mode 100644 src/templates/src/include/footer-2024.html create mode 100644 src/templates/src/include/header-2024.html create mode 100644 src/templates/src/layouts/base-2024.html diff --git a/public/js/snippetedit.js b/public/js/snippetedit.js index 896d44ba..4d4e9d4d 100644 --- a/public/js/snippetedit.js +++ b/public/js/snippetedit.js @@ -9,7 +9,7 @@ function readableByteSize(numBytes) { "gb" ]; let scale = 0; - while (numBytes > 1024 && scale < scales.length-1) { + while (numBytes > 1024 && scale < scales.length - 1) { numBytes /= 1024; scale++; } @@ -28,7 +28,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen snippetEdit.avatarLink.href = ownerUrl; snippetEdit.username.textContent = ownerName; snippetEdit.username.href = ownerUrl; - snippetEdit.date.textContent = new Intl.DateTimeFormat([], {month: "2-digit", day: "2-digit", year: "numeric"}).format(date); + snippetEdit.date.textContent = new Intl.DateTimeFormat([], { month: "2-digit", day: "2-digit", year: "numeric" }).format(date); snippetEdit.text.value = text; if (attachmentElement) { originalAttachment = attachmentElement.cloneNode(true); @@ -56,7 +56,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen updateProjectSelector(); if (originalSnippetEl) { - snippetEdit.cancelLink.addEventListener("click", function() { + snippetEdit.cancelLink.addEventListener("click", function () { cancel(); }); } else { @@ -78,7 +78,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen if (proj.id == stickyProjectId) { projEl.removeButton.remove(); } else { - projEl.removeButton.addEventListener("click", function(ev) { + projEl.removeButton.addEventListener("click", function (ev) { projEl.root.remove(); updateProjectSelector(); }); @@ -126,7 +126,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen option.textContent = remainingProjects[i].name; projectSelector.appendChild(option); } - projectSelector.addEventListener("change", function(ev) { + projectSelector.addEventListener("change", function (ev) { if (projectSelector.selectedOptions.length > 0) { let selected = projectSelector.selectedOptions[0]; if (selected.value != "") { @@ -237,33 +237,33 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen } } - snippetEdit.uploadLink.addEventListener("click", function() { + snippetEdit.uploadLink.addEventListener("click", function () { snippetEdit.file.click(); }); - snippetEdit.removeLink.addEventListener("click", function() { + snippetEdit.removeLink.addEventListener("click", function () { clearAttachment(false); }); - snippetEdit.replaceLink.addEventListener("click", function() { + snippetEdit.replaceLink.addEventListener("click", function () { snippetEdit.file.click(); }); - snippetEdit.resetLink.addEventListener("click", function() { + snippetEdit.resetLink.addEventListener("click", function () { clearAttachment(true); }); - snippetEdit.uploadResetLink.addEventListener("click", function() { + snippetEdit.uploadResetLink.addEventListener("click", function () { clearAttachment(true); }); - snippetEdit.file.addEventListener("change", function() { + snippetEdit.file.addEventListener("change", function () { if (snippetEdit.file.files.length > 0) { setFile(snippetEdit.file.files[0]); } }); - snippetEdit.root.addEventListener("dragover", function(ev) { + snippetEdit.root.addEventListener("dragover", function (ev) { let effect = "none"; for (let i = 0; i < ev.dataTransfer.items.length; ++i) { if (ev.dataTransfer.items[i].kind.toLowerCase() == "file") { @@ -277,7 +277,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen let enterCounter = 0; - snippetEdit.root.addEventListener("dragenter", function(ev) { + snippetEdit.root.addEventListener("dragenter", function (ev) { enterCounter++; let droppable = Array.from(ev.dataTransfer.items).some( item => item.kind.toLowerCase() === "file" @@ -287,14 +287,14 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen } }); - snippetEdit.root.addEventListener("dragleave", function(ev) { + snippetEdit.root.addEventListener("dragleave", function (ev) { enterCounter--; if (enterCounter == 0) { snippetEdit.root.classList.remove("drop"); } }); - snippetEdit.root.addEventListener("drop", function(ev) { + snippetEdit.root.addEventListener("drop", function (ev) { enterCounter = 0; snippetEdit.root.classList.remove("drop"); @@ -305,18 +305,18 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen ev.preventDefault(); }); - snippetEdit.text.addEventListener("paste", function(ev) { + snippetEdit.text.addEventListener("paste", function (ev) { const files = ev.clipboardData?.files ?? []; if (files.length > 0) { setFile(files[0]); } }); - snippetEdit.text.addEventListener("input", function(ev) { + snippetEdit.text.addEventListener("input", function (ev) { validate(); }); - snippetEdit.saveButton.addEventListener("click", function(ev) { + snippetEdit.saveButton.addEventListener("click", function (ev) { let projectsChanged = false; let projInputs = snippetEdit.projectList.querySelectorAll("input[name=project_id]"); let assignedIds = []; @@ -349,8 +349,8 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen cancel(); } }); - - snippetEdit.deleteButton.addEventListener("click", function(ev) { + + snippetEdit.deleteButton.addEventListener("click", function (ev) { if (!window.confirm("Are you sure you want to delete this snippet?")) { ev.preventDefault(); return; @@ -367,7 +367,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen function editTimelineSnippet(timelineItemEl, stickyProjectId) { let ownerName = timelineItemEl.querySelector(".user")?.textContent; let ownerUrl = timelineItemEl.querySelector(".user")?.href; - let ownerAvatar = timelineItemEl.querySelector(".avatar-icon")?.src; + let ownerAvatar = timelineItemEl.querySelector(".avatar")?.src; let creationDate = new Date(timelineItemEl.querySelector("time").dateTime); let rawDesc = timelineItemEl.querySelector(".rawdesc").textContent; let attachment = timelineItemEl.querySelector(".timeline-content-box")?.children?.[0]; diff --git a/public/style.css b/public/style.css index 48199779..82903c9e 100644 --- a/public/style.css +++ b/public/style.css @@ -7200,7 +7200,7 @@ code { --theme-color-light: #666; --main-background-color: #202020; --main-background-color-transparent: rgba(#202020, 0); - --card-background: #282828; + --card-background: #494949; --card-background-hover: #333; --dim-background: #252525; --dim-background-transparent: rgba(#252525, 0); @@ -8190,10 +8190,10 @@ pre, } /* src/rawdata/scss/header.css */ -header { +header.old { --logo-height: 3.75rem; } -header .hmn-logo { +header.old .hmn-logo { height: var(--logo-height); width: 100%; text-transform: uppercase; @@ -8205,12 +8205,12 @@ header .hmn-logo { color: white !important; } @media screen and (min-width: 35em) { - header .hmn-logo.big { + header.old .hmn-logo.big { width: 11.25rem; } } @media screen and (min-width: 35em) { - header .hmn-logo.small { + header.old .hmn-logo.small { width: var(--logo-height); padding: 0.8rem; text-align: justify; @@ -8222,36 +8222,36 @@ header .hmn-logo { align-items: stretch; } } -header .items { +header.old .items { position: relative; } @media screen and (min-width: 35em) { - header .root-item { + header.old .root-item { position: relative; height: var(--logo-height); } } -header .root-item:not(:hover):not(.clicked) > .submenu { +header.old .root-item:not(:hover):not(.clicked) > .submenu { display: none; } -header .root-item.clicked .svgicon { +header.old .root-item.clicked .svgicon { transform: rotate(180deg); } -header .root-item > a { +header.old .root-item > a { display: flex; justify-content: center; align-items: center; height: 100%; font-weight: bold; } -header .root-item .svgicon { +header.old .root-item .svgicon { font-size: 0.7em; } -header:not(.clicked) .root-item:not(:hover) > .submenu, -header.clicked .root-item:not(.clicked) > .submenu { +header.old:not(.clicked) .root-item:not(:hover) > .submenu, +header.old.clicked .root-item:not(.clicked) > .submenu { display: none; } -header .submenu { +header.old .submenu { display: flex; flex-direction: column; position: absolute; @@ -8263,7 +8263,7 @@ header .submenu { border-bottom-style: solid; } @media screen and (min-width: 35em) { - header .submenu { + header.old .submenu { border-top-style: none; border-left-style: solid; border-right-style: solid; @@ -8271,7 +8271,7 @@ header .submenu { right: initial; } } -header .submenu > a { +header.old .submenu > a { display: block; white-space: nowrap; z-index: 1; @@ -8279,10 +8279,57 @@ header .submenu > a { text-align: center; } @media screen and (min-width: 35em) { - header .submenu > a { + header.old .submenu > a { text-align: left; } } +header { + background-color: var(--card-background); +} +header .hmn-logo { + font-family: "MohaveHMN", sans-serif; + text-transform: uppercase; + font-size: 1.6rem; + padding: 0.6rem 0.8rem; + line-height: 1; +} +header .menu-chevron { + display: inline-block; + margin-left: var(--spacing-extra-small); + font-size: var(--font-size-7); +} +header .avatar { + width: 1.8rem; +} +header .header-nav > a, +header .header-nav > .root-item > a { + display: block; + padding: var(--spacing-medium); +} +header .header-nav .submenu { + display: flex; + flex-direction: column; + position: absolute; + z-index: 100; + min-width: 8rem; + background-color: var(--card-background); +} +header .header-nav .submenu > a { + padding: var(--spacing-small) var(--spacing-medium); + display: block; + white-space: nowrap; + z-index: 1; +} +header .header-nav .root-item:not(:hover):not(.clicked) > .submenu { + display: none; +} +header .header-nav .root-item.clicked .svgicon { + transform: rotate(180deg); +} +header:not(.clicked) .root-item:not(:hover) > .submenu, +header.clicked .root-item:not(.clicked) > .submenu { + display: none; +} /* src/rawdata/scss/icons.css */ @font-face { @@ -8470,28 +8517,13 @@ span.icon-rss::before { } /* src/rawdata/scss/timeline.css */ -.avatar-icon { +.avatar { object-fit: cover; border-radius: 100%; overflow: hidden; - object-fit: cover; background-color: var(--dimmest-color); - width: 2.5rem; - height: 2.5rem; - border: 2px solid; - border-color: var(--theme-color); flex-shrink: 0; } -.avatar-icon.big { - width: 3rem; - height: 3rem; -} -@media screen and (min-width: 35em) { - .avatar-icon.big { - width: 3.875rem; - height: 3.875rem; - } -} .timeline-item { background-color: var(--card-background); --fade-color: var(--card-background); diff --git a/public/style.old.css b/public/style.old.css index d77b0c80..2ce9d30c 100644 --- a/public/style.old.css +++ b/public/style.old.css @@ -12867,7 +12867,7 @@ input[type=submit].inline-button { width: 50px; } -.avatar-icon { +.avatar { width: 40px; height: 40px; flex-shrink: 0; @@ -13025,7 +13025,7 @@ input[type=submit].inline-button { background-color: transparent; } -.featured-post .meta .avatar-icon { +.featured-post .meta .avatar { left: -60px; bottom: -5px; } @@ -13943,7 +13943,7 @@ span.icon-rss::before { margin-right: 10px; } -.user_suggestions .user .avatar-icon { +.user_suggestions .user .avatar { left: -50px; bottom: 0px; border-radius: 50%; @@ -14017,19 +14017,19 @@ span.icon-rss::before { color: var(--main-color); } -.timeline-item .avatar-icon { +.timeline-item .avatar { border: 2px solid; border-color: #666; border-color: var(--theme-color); } -.timeline-item .avatar-icon.big { +.timeline-item .avatar.big { width: 3rem; height: 3rem; } @media screen and (min-width: 35em) { - .timeline-item .avatar-icon.big { + .timeline-item .avatar.big { width: 3.875rem; height: 3.875rem; } diff --git a/src/rawdata/scss/header.css b/src/rawdata/scss/header.css index 5f9b118a..5fdd5d33 100644 --- a/src/rawdata/scss/header.css +++ b/src/rawdata/scss/header.css @@ -1,4 +1,4 @@ -header { +header.old { --logo-height: 3.75rem; .hmn-logo { @@ -111,4 +111,69 @@ header { } } } +} + +header { + background-color: var(--card-background); + + .hmn-logo { + font-family: 'MohaveHMN', sans-serif; + text-transform: uppercase; + font-size: 1.6rem; + padding: 0.6rem 0.8rem; + line-height: 1; + } + + .menu-chevron { + /* ensure that it also has .svgicon */ + display: inline-block; + margin-left: var(--spacing-extra-small); + font-size: var(--font-size-7); + } + + .avatar { + width: 1.8rem; + } + + .header-nav { + + >a, + >.root-item>a { + display: block; + padding: var(--spacing-medium); + } + + .submenu { + display: flex; + flex-direction: column; + position: absolute; + z-index: 100; + min-width: 8rem; + background-color: var(--card-background); + + >a { + padding: var(--spacing-small) var(--spacing-medium); + display: block; + white-space: nowrap; + z-index: 1; + } + } + + .root-item { + &:not(:hover):not(.clicked)>.submenu { + display: none; + } + + &.clicked .svgicon { + transform: rotate(180deg); + } + } + } + + &:not(.clicked) .root-item:not(:hover), + &.clicked .root-item:not(.clicked) { + >.submenu { + display: none; + } + } } \ No newline at end of file diff --git a/src/rawdata/scss/timeline.css b/src/rawdata/scss/timeline.css index d6fae366..84b6b18d 100644 --- a/src/rawdata/scss/timeline.css +++ b/src/rawdata/scss/timeline.css @@ -1,25 +1,9 @@ -.avatar-icon { +.avatar { object-fit: cover; border-radius: 100%; overflow: hidden; - object-fit: cover; background-color: var(--dimmest-color); - - width: 2.5rem; - height: 2.5rem; - border: 2px solid; - border-color: var(--theme-color); flex-shrink: 0; - - &.big { - width: 3rem; - height: 3rem; - - @media screen and (min-width: 35em) { - width: 3.875rem; - height: 3.875rem; - } - } } .timeline-item { diff --git a/src/rawdata/scss/vars.css b/src/rawdata/scss/vars.css index 4cd6c20e..5e0f29da 100644 --- a/src/rawdata/scss/vars.css +++ b/src/rawdata/scss/vars.css @@ -70,7 +70,8 @@ $breakpoint-large: screen and (min-width: 60em) --main-background-color: #202020; --main-background-color-transparent: rgba(#202020, 0); - --card-background: #282828; + /* --card-background: #282828; */ + --card-background: #494949; --card-background-hover: #333; --dim-background: #252525; diff --git a/src/templates/src/blog_index.html b/src/templates/src/blog_index.html index 496199bd..2cbe14e7 100644 --- a/src/templates/src/blog_index.html +++ b/src/templates/src/blog_index.html @@ -14,7 +14,7 @@ {{ if .Posts }} {{ range .Posts }}
- +
{{ .Title }}
diff --git a/src/templates/src/blog_post.html b/src/templates/src/blog_post.html index 02fea84a..e49a975b 100644 --- a/src/templates/src/blog_post.html +++ b/src/templates/src/blog_post.html @@ -6,7 +6,7 @@ {{ with .MainPost }}
-
+
{{ .Author.Name }} @@ -54,7 +54,7 @@ {{ range .Comments }}
-
+
diff --git a/src/templates/src/feed.html b/src/templates/src/feed.html index c5c2baee..0c20605f 100644 --- a/src/templates/src/feed.html +++ b/src/templates/src/feed.html @@ -18,7 +18,7 @@
{{ range .Posts }}
- +
{{ template "breadcrumbs.html" .Breadcrumbs }}
{{ if .PostTypePrefix }}{{ .PostTypePrefix }}: {{ end }}{{ .Title }}
diff --git a/src/templates/src/include/footer-2024.html b/src/templates/src/include/footer-2024.html new file mode 100644 index 00000000..10d36ca9 --- /dev/null +++ b/src/templates/src/include/footer-2024.html @@ -0,0 +1,5 @@ + diff --git a/src/templates/src/include/header-2024.html b/src/templates/src/include/header-2024.html new file mode 100644 index 00000000..2ef47f60 --- /dev/null +++ b/src/templates/src/include/header-2024.html @@ -0,0 +1,103 @@ +
+ +
+
+ Projects + Jams +
+ + +
+
+ + +
+
+ + +
+
+ + + +
+ diff --git a/src/templates/src/include/header.html b/src/templates/src/include/header.html index df44e40c..e4d2c5be 100644 --- a/src/templates/src/include/header.html +++ b/src/templates/src/include/header.html @@ -1,4 +1,4 @@ -
+
Jump to Content
{{ if .User }} diff --git a/src/templates/src/include/project_card.html b/src/templates/src/include/project_card.html index ad0b8c13..ba9b9113 100644 --- a/src/templates/src/include/project_card.html +++ b/src/templates/src/include/project_card.html @@ -6,7 +6,7 @@
{{ end }}
-

{{ .Project.Name }}

+

{{ .Project.Name }}

{{ .Project.Blurb }}
{{ if .Project.LifecycleString }} diff --git a/src/templates/src/include/showcase_templates.html b/src/templates/src/include/showcase_templates.html index beb73827..1b438bcd 100644 --- a/src/templates/src/include/showcase_templates.html +++ b/src/templates/src/include/showcase_templates.html @@ -23,7 +23,7 @@
diff --git a/src/templates/src/include/snippet_edit.html b/src/templates/src/include/snippet_edit.html index 6c18c26e..ac9d9817 100644 --- a/src/templates/src/include/snippet_edit.html +++ b/src/templates/src/include/snippet_edit.html @@ -16,7 +16,7 @@
- +
Date diff --git a/src/templates/src/include/thread_list_item.html b/src/templates/src/include/thread_list_item.html index 6d270052..17a6f08b 100644 --- a/src/templates/src/include/thread_list_item.html +++ b/src/templates/src/include/thread_list_item.html @@ -5,7 +5,7 @@ It should be called with ThreadListItem. */}}
- +
{{ .Title }}
@@ -18,7 +18,7 @@ It should be called with ThreadListItem. {{ end }}
- +
Last post {{ timehtml (relativedate .LastDate) .LastDate }}
{{ .LastUser.Name }} diff --git a/src/templates/src/include/timeline_item.html b/src/templates/src/include/timeline_item.html index dd565019..108ecbaf 100644 --- a/src/templates/src/include/timeline_item.html +++ b/src/templates/src/include/timeline_item.html @@ -3,7 +3,7 @@
{{ if .OwnerAvatarUrl }} - + {{ end }} diff --git a/src/templates/src/jam_2023_vj_recap.html b/src/templates/src/jam_2023_vj_recap.html index 39eda543..8a3c4d08 100644 --- a/src/templates/src/jam_2023_vj_recap.html +++ b/src/templates/src/jam_2023_vj_recap.html @@ -22,7 +22,7 @@

Jam recap

-
+
{{ .Ben.Name }} diff --git a/src/templates/src/layouts/base-2024.html b/src/templates/src/layouts/base-2024.html new file mode 100644 index 00000000..922b2fa6 --- /dev/null +++ b/src/templates/src/layouts/base-2024.html @@ -0,0 +1,245 @@ +{{/* + This is a copy-paste from base.html because we want to preserve the unique + style of this page no matter what future changes we make to the base. + */}} + + + + + + + + + + {{ if .CanonicalLink }}{{ end }} + {{ range .OpenGraphItems }} + {{ if .Property }} + + {{ else }} + + {{ end }} + {{ end }} + {{ if .Title }} + {{ .Title }} | Handmade Network + {{ else }} + Handmade Network + {{ end }} + + + + + + + + + + + + + {{ template "extrahead" . }} + + + + {{ template "header-2024.html" . }} + +
+ {{ block "content" . }}{{ end }} +
+ {{ template "footer-2024.html" . }} + + + diff --git a/src/templates/src/layouts/jam_2023_visibility_base.html b/src/templates/src/layouts/jam_2023_visibility_base.html index d1e039a6..01c42002 100644 --- a/src/templates/src/layouts/jam_2023_visibility_base.html +++ b/src/templates/src/layouts/jam_2023_visibility_base.html @@ -337,7 +337,7 @@ background-color: rgba(0, 0, 0, 0.2); } - .avatar-icon { + .avatar { background-color: rgba(0, 0, 0, 0.2); } diff --git a/src/templates/src/project.css b/src/templates/src/project.css index 03dc6fbb..4a9867f7 100644 --- a/src/templates/src/project.css +++ b/src/templates/src/project.css @@ -1,39 +1,153 @@ -{{ $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 }}; +{ + { + $c : =hex2color .Color + } } -} -.unread .avatar-icon { - border: 2px solid var(--link-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); + } \ No newline at end of file diff --git a/src/templates/src/project_homepage.html b/src/templates/src/project_homepage.html index 3075045f..98f4a796 100644 --- a/src/templates/src/project_homepage.html +++ b/src/templates/src/project_homepage.html @@ -1,4 +1,4 @@ -{{ template "base.html" . }} +{{ template "base-2024.html" . }} {{ define "extrahead" }} {{ range .Screenshots }} @@ -27,7 +27,7 @@
{{ range $i, $owner := .Owners }}
- + {{ $owner.Name }}
{{ end }} diff --git a/src/templates/src/project_index.html b/src/templates/src/project_index.html index 40f1330d..7ea2e279 100644 --- a/src/templates/src/project_index.html +++ b/src/templates/src/project_index.html @@ -13,7 +13,7 @@
-

{{ $project.Name }}

+

{{ $project.Name }}
{{ $project.ParsedDescription }} @@ -46,7 +46,7 @@ {{ end }} {{ if .OfficialProjects }}
-

Official Projects

+

Official Projects

{{ range .OfficialProjects }} {{ template "project_card.html" projectcarddata . "" }} @@ -57,9 +57,9 @@ {{ end }} {{ if .PersonalProjects }}
-

Personal Projects

-

Many community members have projects of their own. Want to join them? Create your own.

-
+

Personal Projects

+
Many community members have projects of their own. Want to join them? Create your own.
+
{{ range .PersonalProjects }} {{ template "project_card.html" projectcarddata . "" }} {{ end }} diff --git a/src/templates/types.go b/src/templates/types.go index d91fa65b..617dba5b 100644 --- a/src/templates/types.go +++ b/src/templates/types.go @@ -58,6 +58,8 @@ type Header struct { JamsUrl string EducationUrl string CalendarUrl string + ManifestoUrl string + AboutUrl string Project *ProjectHeader } diff --git a/src/website/base_data.go b/src/website/base_data.go index 1ce92ab3..945a90a6 100644 --- a/src/website/base_data.go +++ b/src/website/base_data.go @@ -82,6 +82,8 @@ func getBaseData(c *RequestContext, title string, breadcrumbs []templates.Breadc JamsUrl: hmnurl.BuildJamsIndex(), EducationUrl: hmnurl.BuildEducationIndex(), CalendarUrl: hmnurl.BuildCalendarIndex(), + ManifestoUrl: hmnurl.BuildManifesto(), + AboutUrl: hmnurl.BuildAbout(), }, Footer: templates.Footer{ HomepageUrl: hmnurl.BuildHomepage(), diff --git a/todo-styles.md b/todo-styles.md index c01b9592..5e883b0b 100644 --- a/todo-styles.md +++ b/todo-styles.md @@ -43,3 +43,7 @@ nodemon --exec "esbuild src\rawdata\scss\style.css --bundle --loader:.ttf=file - - [ ] Remove all uses of .content-block - [ ] Figure out what's up with the projects on the jam pages - [ ] Determine if we actually need .project-carousel, or if our general carousel styles (?) are sufficient +- [ ] Rename `-2024` files +- [ ] Validate accessibility of navigation +- [ ] Make navigation work on mobile +- [ ] Clean up code TODOs