nhcarrigan/hikari
9
0
Fork 0
generated from nhcarrigan/template
Code Issues 2 Pull Requests 3 Actions Releases Activity

style: align client with NHCarrigan style guide

Browse Source 
- Remove shared stylesheet stripping; let headers/index.js apply the
  witch palette, Griffy/Kalam fonts, and mystical backgrounds
- Replace custom CSS vars and Vampyr font with style guide tokens
- Update all component CSS to use witch palette variables
- Fix sanctions sort to descending by case number
- Update Hikari image URLs to cdn.nhcarrigan.com/hikari.png
This commit is contained in:
Hikari
2026-03-31 17:42:23 -07:00
committed by Naomi Carrigan
parent ee796b6e57
commit a074449d0f
12 changed files with 106 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/app/announcements/announcements.css
+7 -6
View File
@@ -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 {
client/src/app/home/home.css
+43 -46
View File
@@ -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) {
client/src/app/home/home.html
+2 -1
View File
@@ -1,8 +1,9 @@
<h1>Hi there, I'm Hikari~!</h1>
<img
src="https://cdn.nhcarrigan.com/new-avatars/hikari-full.png"
src="https://cdn.nhcarrigan.com/hikari.png"
alt="Hikari"
height="250"
style="display: block; margin: auto;"
/>
<p id="one">How may I help you today?</p>
<p id="two">I can assist you with:</p>
client/src/app/nav/nav.css
+4 -3
View File
@@ -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;
}
client/src/app/products/products.css
+26 -18
View File
@@ -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;
client/src/app/products/products.html
+2 -1
View File
@@ -1,8 +1,9 @@
<h1>Products</h1>
<img
src="https://cdn.nhcarrigan.com/new-avatars/hikari-thinking-full.png"
src="https://cdn.nhcarrigan.com/hikari.png"
alt="Hikari"
height="250"
style="display: block; margin: auto;"
/>
<p>Excellent! What sort of product are you looking for?</p>
<div class="row">
client/src/app/sanctions/sanctions.css
+5 -4
View File
@@ -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 {
client/src/app/sanctions/sanctions.ts
+1 -5
View File
@@ -31,10 +31,6 @@ export class Sanctions {
private async loadSanctions(): Promise<void> {
const sanctions = await this.sanctionsService.getSanctions();
this.sanctions = sanctions.sort((a, b) => {
return b.createdAt > a.createdAt
? 1
: -1;
});
this.sanctions = sanctions.sort((a, b) => b.number - a.number);
}
}
client/src/app/soon/soon.css
+10 -10
View File
@@ -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;
}
client/src/app/soon/soon.html
+2 -1
View File
@@ -1,8 +1,9 @@
<h1>Oh dear~!</h1>
<img
src="https://cdn.nhcarrigan.com/new-avatars/hikari-cry-full.png"
src="https://cdn.nhcarrigan.com/hikari.png"
alt="Hikari"
height="250"
style="display: block; margin: auto;"
/>
<p>You appear to have become lost!</p>
<p>
client/src/index.html
-6
View File
@@ -15,10 +15,4 @@
<app-root></app-root>
</body>
<script src="https://cdn.nhcarrigan.com/headers/index.js"></script>
<script>
const styleElement = document.getElementById("nhcarrigan-global-styles");
if (styleElement) {
styleElement.remove();
}
</script>
</html>
client/src/styles.css
+4 -94
View File
@@ -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);
}
}