diff --git a/public/js/snippetedit.js b/public/js/snippetedit.js index 896d44b..4d4e9d4 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 3a1f591..541c4bd 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); @@ -8144,10 +8144,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; @@ -8159,12 +8159,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; @@ -8176,36 +8176,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; @@ -8217,7 +8217,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; @@ -8225,7 +8225,7 @@ header .submenu { right: initial; } } -header .submenu > a { +header.old .submenu > a { display: block; white-space: nowrap; z-index: 1; @@ -8233,10 +8233,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 { @@ -8424,28 +8471,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 d77b0c8..2ce9d30 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 5f9b118..5fdd5d3 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 d6fae36..84b6b18 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 4cd6c20..5e0f29d 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 496199b..2cbe14e 100644 --- a/src/templates/src/blog_index.html +++ b/src/templates/src/blog_index.html @@ -14,7 +14,7 @@ {{ if .Posts }} {{ range .Posts }}
- +
diff --git a/src/templates/src/blog_post.html b/src/templates/src/blog_post.html index d980e5f..cf93363 100644 --- a/src/templates/src/blog_post.html +++ b/src/templates/src/blog_post.html @@ -6,7 +6,7 @@ {{ with .MainPost }}
-
+
{{ .Author.Name }} @@ -50,7 +50,7 @@ {{ range .Comments }}
-
+
diff --git a/src/templates/src/feed.html b/src/templates/src/feed.html index c5c2bae..0c20605 100644 --- a/src/templates/src/feed.html +++ b/src/templates/src/feed.html @@ -18,7 +18,7 @@
{{ range .Posts }}
- +
{{ template "breadcrumbs.html" .Breadcrumbs }} diff --git a/src/templates/src/include/footer-2024.html b/src/templates/src/include/footer-2024.html new file mode 100644 index 0000000..10d36ca --- /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 0000000..2ef47f6 --- /dev/null +++ b/src/templates/src/include/header-2024.html @@ -0,0 +1,103 @@ + + diff --git a/src/templates/src/include/header.html b/src/templates/src/include/header.html index df44e40..e4d2c5b 100644 --- a/src/templates/src/include/header.html +++ b/src/templates/src/include/header.html @@ -1,4 +1,4 @@ -