From ad6b0c6f5a3afe1dbf8b54ac5dea49f7fd5c2758 Mon Sep 17 00:00:00 2001 From: Hikari Date: Tue, 31 Mar 2026 18:04:10 -0700 Subject: [PATCH] fix: web client styling and nav updates (#21) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary - Aligns the client with the NHCarrigan style guide (witch palette, Griffy/Kalam fonts, shared stylesheet) - Fixes sanctions page to sort by case number descending - Updates all Hikari image URLs to `cdn.nhcarrigan.com/hikari.png` - Adds Support link to nav (https://support.nhcarrigan.com) - Fixes Chat nav link to point to https://chat.nhcarrigan.com ✨ This issue was created with help from Hikari~ 🌸 Reviewed-on: https://git.nhcarrigan.com/nhcarrigan/hikari/pulls/21 Co-authored-by: Hikari Co-committed-by: Hikari --- .../src/app/announcements/announcements.css | 13 +-- client/src/app/home/home.css | 89 ++++++++--------- client/src/app/home/home.html | 3 +- client/src/app/nav/nav.css | 7 +- client/src/app/nav/nav.html | 4 +- client/src/app/products/products.css | 44 +++++---- client/src/app/products/products.html | 3 +- client/src/app/sanctions/sanctions.css | 9 +- client/src/app/sanctions/sanctions.ts | 4 +- client/src/app/soon/soon.css | 20 ++-- client/src/app/soon/soon.html | 3 +- client/src/index.html | 6 -- client/src/styles.css | 98 +------------------ 13 files changed, 109 insertions(+), 194 deletions(-) diff --git a/client/src/app/announcements/announcements.css b/client/src/app/announcements/announcements.css index fafbb3e..dbcc49d 100644 --- a/client/src/app/announcements/announcements.css +++ b/client/src/app/announcements/announcements.css @@ -1,11 +1,11 @@ hr { width: 100%; border: none; - border-top: 1px solid var(--foreground); + border-top: 1px solid var(--border); margin: 0; } -:host ::ng-deep ul{ +:host ::ng-deep ul { list-style-type: disc; list-style-position: inside; } @@ -15,6 +15,7 @@ hr { margin-bottom: 1em; width: 90%; } + .tag { display: inline-block; padding: 0 0.5em; @@ -23,13 +24,13 @@ hr { } .products { - background-color: #e0f7fa; - color: #006064; + background-color: var(--witch-plum); + color: var(--witch-moon); } .community { - background-color: #e8f5e9; - color: #1b5e20; + background-color: var(--witch-rose); + color: var(--witch-moon); } .date { diff --git a/client/src/app/home/home.css b/client/src/app/home/home.css index 4fc11aa..e80f12f 100644 --- a/client/src/app/home/home.css +++ b/client/src/app/home/home.css @@ -1,99 +1,96 @@ ul { - list-style: none; - padding: 0; - margin: 0; + list-style: none; + padding: 0; + margin: 0; } -::ng-deep main{ +::ng-deep main { overflow: hidden !important; max-width: 100%; } #one { - transform: translateY(-200vh); - animation: slide-down 2s forwards; - font-size: 1.3rem; + transform: translateY(-200vh); + animation: slide-down 2s forwards; + font-size: 1.3rem; } #two { - transform: translateY(200vh); - animation: slide-up 2s forwards 2s; + transform: translateY(200vh); + animation: slide-up 2s forwards 2s; } #three { - transform: translateX(-200vw); - animation: slide-left 2s forwards 4s; + transform: translateX(-200vw); + animation: slide-left 2s forwards 4s; } #four { - transform: translateX(200vw); - animation: slide-right 2s forwards 6s; + transform: translateX(200vw); + animation: slide-right 2s forwards 6s; } #five { - transform: translateX(-200vw); - animation: slide-left 2s forwards 8s; + transform: translateX(-200vw); + animation: slide-left 2s forwards 8s; } #six { - transform: translateX(200vw); - animation: slide-right 2s forwards 10s; + transform: translateX(200vw); + animation: slide-right 2s forwards 10s; } #seven { - transform: translateX(-200vw); - animation: slide-left 2s forwards 12s; + transform: translateX(-200vw); + animation: slide-left 2s forwards 12s; } #fade { - opacity: 0; - animation: fade-in 2s forwards 14s; - display: flex; - flex-direction: row; - justify-content: space-evenly; - align-items: center; - flex-wrap: wrap; + opacity: 0; + animation: fade-in 2s forwards 14s; + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + flex-wrap: wrap; + gap: 10px; + margin-top: 1em; } .btn { - display: inline-block; - padding: 10px 20px; - background-color: var(--foreground); - color: var(--background); - text-decoration: none; - border-radius: 50px; - border: 2px solid white; + display: inline-block; + padding: 10px 20px; + background-color: var(--accent); + color: var(--witch-moon); + text-decoration: none; + border-radius: 50px; + border: 2px solid var(--border); } .btn:hover { - background-color: var(--background); - color: var(--foreground); - transition: background-color 0.3s, color 0.3s; + background-color: var(--highlight); + color: var(--foreground); + transition: background-color 0.3s, color 0.3s; } @keyframes slide-left { - 100% { transform: translateX(0%); } + 100% { transform: translateX(0%); } } @keyframes slide-right { - 100% { transform: translateX(0%); } + 100% { transform: translateX(0%); } } @keyframes slide-up { - 100% { transform: translateY(0%); } + 100% { transform: translateY(0%); } } @keyframes slide-down { - 100% { transform: translateY(0%); } + 100% { transform: translateY(0%); } } @keyframes fade-in { - 100% { opacity: 1; } -} - -@keyframes background-color { - 0% { background-color: var(--foreground); } - 100% { background-color: var(--background); } + 100% { opacity: 1; } } @media screen and (prefers-reduced-motion: reduce) { diff --git a/client/src/app/home/home.html b/client/src/app/home/home.html index d458a8f..ecc3e6c 100644 --- a/client/src/app/home/home.html +++ b/client/src/app/home/home.html @@ -1,8 +1,9 @@

Hi there, I'm Hikari~!

Hikari

How may I help you today?

I can assist you with:

diff --git a/client/src/app/nav/nav.css b/client/src/app/nav/nav.css index 2bb2a1b..d5ca17f 100644 --- a/client/src/app/nav/nav.css +++ b/client/src/app/nav/nav.css @@ -6,11 +6,13 @@ nav { height: 40px; color: var(--foreground); background-color: var(--background); + border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding-left: 15px; padding-right: 15px; + z-index: 100; } nav a:not(#logo) { @@ -34,7 +36,7 @@ img { hr { width: 100%; border: none; - border-top: 1px solid var(--foreground); + border-top: 1px solid var(--border); margin: 0; } @@ -50,7 +52,7 @@ hr { top: 40px; background-color: var(--background); color: var(--foreground); - border: 1px solid var(--foreground); + border: 1px solid var(--border); border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } @@ -59,7 +61,6 @@ hr { display: flex; align-items: center; justify-content: center; - cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer; text-decoration: none; font-size: 2rem; } diff --git a/client/src/app/nav/nav.html b/client/src/app/nav/nav.html index 1536924..6e6bd91 100644 --- a/client/src/app/nav/nav.html +++ b/client/src/app/nav/nav.html @@ -15,7 +15,9 @@
Settings
- Chat + Chat +
+ Support
diff --git a/client/src/app/products/products.css b/client/src/app/products/products.css index 3c78adc..4733dba 100644 --- a/client/src/app/products/products.css +++ b/client/src/app/products/products.css @@ -3,44 +3,44 @@ a.product { } a.product:hover { - background-color: var(--background); + background-color: var(--highlight); color: var(--foreground); } .product:not(a) { cursor: default; - border: 2px dashed grey; + border: 2px dashed var(--witch-silver); } .btn { - display: inline-block; - padding: 10px 20px; - background-color: var(--foreground); - color: var(--background); - text-decoration: none; - border-radius: 50px; - border: 2px solid white; - font-family: 'OpenDyslexic', monospace; + display: inline-block; + padding: 10px 20px; + background-color: var(--accent); + color: var(--witch-moon); + text-decoration: none; + border-radius: 50px; + border: 2px solid var(--border); } .btn:disabled { - background-color: var(--background); - color: var(--foreground); + background-color: var(--witch-plum); + color: var(--witch-moon); + opacity: 0.6; } .btn:hover { - background-color: var(--background); - color: var(--foreground); - transition: background-color 0.3s, color 0.3s; + background-color: var(--highlight); + color: var(--foreground); + transition: background-color 0.3s, color 0.3s; } .product { display: grid; grid-template-areas: "logo title icon" "logo description icon"; grid-template-columns: 100px 1fr auto; - background-color: var(--foreground); - color: var(--background); - border: 2px solid white; + background-color: var(--witch-plum); + color: var(--witch-moon); + border: 2px solid var(--border); border-radius: 50px; margin-left: 10px; margin-right: 10px; @@ -49,6 +49,14 @@ a.product:hover { align-items: center; } +.title { + color: var(--witch-moon); +} + +.description { + color: var(--witch-moon); +} + .icons { grid-area: icon; font-size: 2rem; diff --git a/client/src/app/products/products.html b/client/src/app/products/products.html index 6dfa7b0..312eb7d 100644 --- a/client/src/app/products/products.html +++ b/client/src/app/products/products.html @@ -1,8 +1,9 @@

Products

Hikari

Excellent! What sort of product are you looking for?

diff --git a/client/src/app/sanctions/sanctions.css b/client/src/app/sanctions/sanctions.css index 002525b..dbe3ca2 100644 --- a/client/src/app/sanctions/sanctions.css +++ b/client/src/app/sanctions/sanctions.css @@ -1,11 +1,11 @@ hr { width: 100%; border: none; - border-top: 1px solid var(--foreground); + border-top: 1px solid var(--border); margin: 0; } -:host ::ng-deep ul{ +:host ::ng-deep ul { list-style-type: disc; list-style-position: inside; } @@ -15,13 +15,14 @@ hr { margin-bottom: 1em; width: 90%; } + .tag { display: inline-block; padding: 0 0.5em; border-radius: 50px; font-size: 0.8em; - background-color: #e0f7fa; - color: #006064; + background-color: var(--witch-plum); + color: var(--witch-moon); } .date { diff --git a/client/src/app/sanctions/sanctions.ts b/client/src/app/sanctions/sanctions.ts index 1611a3d..cf6c333 100644 --- a/client/src/app/sanctions/sanctions.ts +++ b/client/src/app/sanctions/sanctions.ts @@ -32,9 +32,7 @@ export class Sanctions { private async loadSanctions(): Promise { const sanctions = await this.sanctionsService.getSanctions(); this.sanctions = sanctions.sort((a, b) => { - return b.createdAt > a.createdAt - ? 1 - : -1; + return b.number - a.number; }); } } diff --git a/client/src/app/soon/soon.css b/client/src/app/soon/soon.css index fb675d8..32ab36c 100644 --- a/client/src/app/soon/soon.css +++ b/client/src/app/soon/soon.css @@ -1,15 +1,15 @@ .btn { - display: inline-block; - padding: 10px 20px; - background-color: var(--foreground); - color: var(--background); - text-decoration: none; - border-radius: 50px; - border: 2px solid white; + display: inline-block; + padding: 10px 20px; + background-color: var(--accent); + color: var(--witch-moon); + text-decoration: none; + border-radius: 50px; + border: 2px solid var(--border); } .btn:hover { - background-color: var(--background); - color: var(--foreground); - transition: background-color 0.3s, color 0.3s; + background-color: var(--highlight); + color: var(--foreground); + transition: background-color 0.3s, color 0.3s; } diff --git a/client/src/app/soon/soon.html b/client/src/app/soon/soon.html index c83961b..3b8cdd8 100644 --- a/client/src/app/soon/soon.html +++ b/client/src/app/soon/soon.html @@ -1,8 +1,9 @@

Oh dear~!

Hikari

You appear to have become lost!

diff --git a/client/src/index.html b/client/src/index.html index 3ab1cd9..96e3275 100644 --- a/client/src/index.html +++ b/client/src/index.html @@ -15,10 +15,4 @@ - diff --git a/client/src/styles.css b/client/src/styles.css index 21629fc..e653b8e 100644 --- a/client/src/styles.css +++ b/client/src/styles.css @@ -1,102 +1,12 @@ -@font-face { - font-family: 'Vampyr'; - src: url('https://cdn.nhcarrigan.com/fonts/vampyr.ttf') format('truetype'); -} - -:root { - --foreground: #8F2447; - --background: #E1F6F9DC; -} - -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -html { - font-family: 'Vampyr', monospace; - cursor: url('https://cdn.nhcarrigan.com/cursors/cursor.cur'), auto; - min-height: 100vh; - min-width: 100vw; -} -body::before { - background: url(https://cdn.nhcarrigan.com/background.png); - background-size: cover; - background-position: center; - width: 100%; - height: 100%; - z-index: -1; - content: ""; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 1; - pointer-events: none; -} +/* Account for the fixed navigation bar */ main { - color: var(--foreground); - background-color: var(--background); - text-align: center; - border-radius: 10px; - width: 100vw; - margin-bottom: 85px; margin-top: 50px; - min-height: calc(100vh - 85px - 50px); -} -footer { - width: 100%; - color: var(--foreground); - background-color: var(--background); - position: fixed; - bottom: 0; - height: 75px; - padding: 0 10px; -} -#footer-inner-container { - display: flex; - align-items: center; - justify-content: space-between; - height: 75px; -} -#footer-badge-container { - display: grid; - grid-template-columns: repeat(8, 1fr); - align-items: center; - justify-content: space-around; -} -#audio-theme-button, #theme-select-button { - background: none; - border: none; - cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer; - color: var(--foreground); -} -a { - color: unset; - cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer; -} -.btn:not(:disabled) { - cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer; -} -#tree-nation-offset-website { - display: flex; - align-items: center; -} -.is-dark { - --foreground: #E1F6F9; - --background: #8F2447bb; + min-height: calc(100vh - 50px - 85px); } + @media screen and (max-width: 625px) { - #tree-nation-offset-website { - display: none; - } - footer, #footer-inner-container { - height: 50px; - justify-content: space-around; - } main { margin-bottom: 60px; + min-height: calc(100vh - 50px - 60px); } }