generated from nhcarrigan/template
hikari
fc835ab983
Security Scan and Upload / Security & DefectDojo Upload (push) Successful in 2m41s
1382 lines
45 KiB
HTML
1382 lines
45 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>NHCarrigan Style Guide</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta
|
|
name="description"
|
|
content="Brand and style guidelines for NHCarrigan."
|
|
/>
|
|
<script
|
|
src="https://cdn.nhcarrigan.com/headers/index.js"
|
|
async
|
|
defer
|
|
></script>
|
|
<style>
|
|
.guide-section {
|
|
margin: 2em 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.guide-section > h2 {
|
|
border-bottom: 2px solid var(--witch-plum);
|
|
padding-bottom: 0.5em;
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
.audience-badge {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-family: 'Kalam', cursive;
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
margin: 0 4px 1em 0;
|
|
}
|
|
|
|
.badge-brand {
|
|
background: var(--witch-rose);
|
|
color: var(--witch-moon);
|
|
}
|
|
|
|
.badge-dev {
|
|
background: var(--witch-plum);
|
|
color: var(--witch-moon);
|
|
}
|
|
|
|
/* Asset display */
|
|
.asset-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2em;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.asset-card {
|
|
background: rgba(212, 165, 199, 0.1);
|
|
border: 1px solid var(--witch-plum);
|
|
border-radius: 15px;
|
|
padding: 1.5em;
|
|
text-align: center;
|
|
}
|
|
|
|
.asset-card img {
|
|
max-width: 256px;
|
|
width: 100%;
|
|
height: auto;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.asset-card h3 {
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
.asset-card p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Rules lists */
|
|
.rule-list {
|
|
list-style: none;
|
|
margin-left: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.rule-list li {
|
|
padding: 0.5em 0 0.5em 2em;
|
|
position: relative;
|
|
border-bottom: 1px solid rgba(212, 165, 199, 0.2);
|
|
}
|
|
|
|
.rule-list li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.rule-list li::before {
|
|
position: absolute;
|
|
left: 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.rule-list.do li::before { content: "✓"; color: #338833; }
|
|
.rule-list.dont li::before { content: "✗"; color: #cc3333; }
|
|
|
|
/* Misuse examples */
|
|
.misuse-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: 1.5em;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.misuse-card {
|
|
border-radius: 12px;
|
|
padding: 1em;
|
|
text-align: center;
|
|
background: rgba(255, 80, 80, 0.05);
|
|
border: 2px solid rgba(200, 60, 60, 0.35);
|
|
}
|
|
|
|
.misuse-label {
|
|
font-family: 'Griffy', cursive;
|
|
font-size: 1.05rem;
|
|
color: #cc3333;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.misuse-card img {
|
|
width: 100px;
|
|
height: 100px;
|
|
object-fit: contain;
|
|
margin: 0.5em auto;
|
|
display: block;
|
|
}
|
|
|
|
.misuse-card p {
|
|
font-size: 0.82rem;
|
|
margin-bottom: 0;
|
|
color: var(--witch-purple);
|
|
}
|
|
|
|
/* Colour swatches */
|
|
.colour-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 1em;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.colour-swatch {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--witch-plum);
|
|
}
|
|
|
|
.swatch-preview {
|
|
height: 80px;
|
|
width: 100%;
|
|
}
|
|
|
|
.swatch-info {
|
|
padding: 0.75em;
|
|
background: rgba(245, 245, 245, 0.85);
|
|
}
|
|
|
|
.swatch-name {
|
|
font-family: 'Griffy', cursive;
|
|
font-size: 0.95rem;
|
|
color: var(--witch-purple);
|
|
display: block;
|
|
}
|
|
|
|
.swatch-hex {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.82rem;
|
|
color: var(--witch-plum);
|
|
display: block;
|
|
}
|
|
|
|
.swatch-var {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.72rem;
|
|
color: var(--witch-rose);
|
|
display: block;
|
|
}
|
|
|
|
/* Typography samples */
|
|
.font-sample {
|
|
background: rgba(212, 165, 199, 0.08);
|
|
border: 1px solid var(--witch-plum);
|
|
border-radius: 12px;
|
|
padding: 1.25em 1.5em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.font-meta {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.78rem;
|
|
color: var(--witch-rose);
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.font-usage {
|
|
font-size: 0.85rem;
|
|
color: var(--witch-plum);
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Component demos */
|
|
.component-demo {
|
|
background: rgba(212, 165, 199, 0.08);
|
|
border: 1px solid var(--witch-plum);
|
|
border-radius: 12px;
|
|
padding: 1.5em;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
.component-demo > h3 {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.demo-area {
|
|
padding: 1.25em;
|
|
background: rgba(245, 245, 245, 0.6);
|
|
border-radius: 8px;
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
.demo-area > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.code-snippet {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.78rem;
|
|
background: rgba(43, 27, 61, 0.06);
|
|
border: 1px solid var(--witch-plum);
|
|
border-radius: 8px;
|
|
padding: 1em;
|
|
overflow-x: auto;
|
|
color: var(--witch-purple);
|
|
white-space: pre;
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Cursor cards */
|
|
.cursor-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 1em;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.cursor-card {
|
|
background: rgba(212, 165, 199, 0.08);
|
|
border: 1px solid var(--witch-plum);
|
|
border-radius: 12px;
|
|
padding: 1.25em;
|
|
}
|
|
|
|
.cursor-card-name {
|
|
font-family: 'Griffy', cursive;
|
|
font-size: 1.1rem;
|
|
color: var(--witch-purple);
|
|
margin-bottom: 0.4em;
|
|
}
|
|
|
|
.cursor-card p {
|
|
font-size: 0.85rem;
|
|
margin-bottom: 0.4em;
|
|
color: var(--witch-plum);
|
|
}
|
|
|
|
.cursor-card p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Layout diagram */
|
|
.layout-diagram {
|
|
border: 2px dashed var(--witch-plum);
|
|
border-radius: 12px;
|
|
padding: 1em;
|
|
margin: 1em 0;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.diagram-layer {
|
|
border-radius: 8px;
|
|
padding: 0.6em 1em;
|
|
margin-bottom: 0.5em;
|
|
text-align: center;
|
|
}
|
|
|
|
.diagram-layer:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.diagram-bg {
|
|
border: 2px dashed rgba(168, 87, 126, 0.5);
|
|
color: var(--witch-rose);
|
|
}
|
|
|
|
.diagram-overlay {
|
|
border: 2px dashed rgba(212, 165, 199, 0.6);
|
|
color: var(--witch-mauve);
|
|
}
|
|
|
|
.diagram-main {
|
|
border: 2px solid var(--witch-rose);
|
|
background: rgba(168, 87, 126, 0.05);
|
|
color: var(--witch-purple);
|
|
}
|
|
|
|
.diagram-footer {
|
|
border: 2px solid var(--witch-mauve);
|
|
background: rgba(43, 27, 61, 0.08);
|
|
color: var(--witch-plum);
|
|
}
|
|
|
|
/* Theme previews */
|
|
.light-preview {
|
|
background: linear-gradient(135deg,
|
|
rgba(245, 245, 245, 0.95) 0%,
|
|
rgba(232, 213, 232, 0.9) 100%
|
|
);
|
|
border: 2px solid var(--witch-plum);
|
|
border-radius: 12px;
|
|
padding: 1.5em;
|
|
color: var(--witch-purple);
|
|
box-shadow:
|
|
0 0 60px rgba(168, 87, 126, 0.4),
|
|
0 10px 40px rgba(10, 0, 9, 0.7);
|
|
}
|
|
|
|
.light-preview h3 {
|
|
color: var(--witch-purple);
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
.light-preview a { color: var(--witch-rose); }
|
|
|
|
.light-preview p { margin-bottom: 0.5em; }
|
|
.light-preview p:last-child { margin-bottom: 0; }
|
|
|
|
.dark-preview {
|
|
background: linear-gradient(135deg,
|
|
rgba(10, 0, 9, 0.95) 0%,
|
|
rgba(43, 27, 61, 0.9) 100%
|
|
);
|
|
border: 2px solid var(--witch-rose);
|
|
border-radius: 12px;
|
|
padding: 1.5em;
|
|
color: var(--witch-lavender);
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.dark-preview h3 {
|
|
color: var(--witch-mauve);
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
.dark-preview a {
|
|
color: var(--witch-mauve);
|
|
}
|
|
|
|
.dark-preview p {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.dark-preview p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Nav */
|
|
#guide-nav {
|
|
background: rgba(212, 165, 199, 0.1);
|
|
border: 1px solid var(--witch-plum);
|
|
border-radius: 12px;
|
|
padding: 1.25em 1.5em;
|
|
margin-bottom: 2em;
|
|
text-align: left;
|
|
}
|
|
|
|
#guide-nav h3 {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
#guide-nav ol {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@media screen and (max-width: 625px) {
|
|
.asset-grid { grid-template-columns: 1fr; }
|
|
.misuse-grid { grid-template-columns: 1fr 1fr; }
|
|
#theme-preview-grid { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<h1>NHCarrigan Style Guide</h1>
|
|
<p>
|
|
This is the authoritative reference for NHCarrigan brand and design
|
|
standards. It serves two audiences:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<strong>Brand users</strong> — Anyone featuring our logo or mascot in
|
|
advertisements, shoutouts, fan content, or other external materials.
|
|
</li>
|
|
<li>
|
|
<strong>Developers</strong> — Anyone building new web applications or
|
|
contributing to existing ones within the NHCarrigan ecosystem.
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
Each section is labelled with the audience it applies to. All use of
|
|
NHCarrigan brand assets must comply with our
|
|
<a
|
|
href="https://docs.nhcarrigan.com/community/coc/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>Code of Conduct</a
|
|
>.
|
|
</p>
|
|
|
|
<nav id="guide-nav" aria-label="Style guide sections">
|
|
<h3>Contents</h3>
|
|
<ol>
|
|
<li><a href="#brand-assets">Brand Assets</a></li>
|
|
<li><a href="#colours">Colour Palette</a></li>
|
|
<li><a href="#typography">Typography</a></li>
|
|
<li><a href="#icons">Icons</a></li>
|
|
<li><a href="#layout">Layout</a></li>
|
|
<li><a href="#cursors">Custom Cursors</a></li>
|
|
<li><a href="#components">Components</a></li>
|
|
<li><a href="#special-classes">Special Classes</a></li>
|
|
<li><a href="#dark-mode">Dark Mode</a></li>
|
|
<li><a href="#details">Scrollbar & Selection</a></li>
|
|
<li><a href="#animations">Animations</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- ═══════════════════════════════════════ BRAND ASSETS -->
|
|
<section class="guide-section" id="brand-assets">
|
|
<h2>Brand Assets</h2>
|
|
<span class="audience-badge badge-brand">Brand Use</span>
|
|
<span class="audience-badge badge-dev">Developers</span>
|
|
|
|
<p>
|
|
NHCarrigan has two primary brand assets: our <strong>logo</strong> and
|
|
our <strong>mascot, Hikari</strong>. Both are available for use under
|
|
the rules below. Any use must comply with our
|
|
<a
|
|
href="https://docs.nhcarrigan.com/community/coc/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>Code of Conduct</a
|
|
>.
|
|
</p>
|
|
|
|
<div class="asset-grid">
|
|
<div class="asset-card">
|
|
<img
|
|
src="https://cdn.nhcarrigan.com/logo.png"
|
|
alt="NHCarrigan Logo"
|
|
/>
|
|
<h3>Logo</h3>
|
|
<p>
|
|
<a
|
|
href="https://cdn.nhcarrigan.com/logo.png"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>Download</a
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="asset-card">
|
|
<img
|
|
src="https://cdn.nhcarrigan.com/hikari.png"
|
|
alt="Hikari, the NHCarrigan mascot"
|
|
/>
|
|
<h3>Hikari (Mascot)</h3>
|
|
<p>
|
|
<a
|
|
href="https://cdn.nhcarrigan.com/hikari.png"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>Download</a
|
|
>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Usage Rules</h3>
|
|
<ul class="rule-list do">
|
|
<li>Both assets may be placed on any background colour.</li>
|
|
<li>
|
|
Both assets must be displayed at a minimum size of 512×512
|
|
pixels.
|
|
</li>
|
|
<li>
|
|
Both assets must link back to
|
|
<a href="https://nhcarrigan.com">nhcarrigan.com</a> whenever used.
|
|
</li>
|
|
<li>
|
|
Hikari may only be used when the NHCarrigan logo is also present and
|
|
visible in the same area.
|
|
</li>
|
|
<li>
|
|
All use must comply with our
|
|
<a
|
|
href="https://docs.nhcarrigan.com/community/coc/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>Code of Conduct</a
|
|
>.
|
|
</li>
|
|
</ul>
|
|
|
|
<h3>Prohibited Uses</h3>
|
|
<p>
|
|
Both assets must be used exactly as provided.
|
|
<strong>No modifications of any kind are permitted.</strong> The
|
|
following examples illustrate common prohibited alterations:
|
|
</p>
|
|
|
|
<div class="misuse-grid">
|
|
<div class="misuse-card">
|
|
<p class="misuse-label">✗ Do not recolour</p>
|
|
<img
|
|
src="https://cdn.nhcarrigan.com/logo.png"
|
|
alt="Example of prohibited recolouring"
|
|
style="filter: hue-rotate(120deg) saturate(1.5);"
|
|
/>
|
|
<p>
|
|
Do not apply colour filters, tints, or overlays to either asset.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="misuse-card">
|
|
<p class="misuse-label">✗ Do not rotate</p>
|
|
<img
|
|
src="https://cdn.nhcarrigan.com/logo.png"
|
|
alt="Example of prohibited rotation"
|
|
style="transform: rotate(45deg);"
|
|
/>
|
|
<p>Do not rotate either asset at any angle.</p>
|
|
</div>
|
|
|
|
<div class="misuse-card">
|
|
<p class="misuse-label">✗ Do not stretch</p>
|
|
<img
|
|
src="https://cdn.nhcarrigan.com/logo.png"
|
|
alt="Example of prohibited stretching"
|
|
style="transform: scaleX(1.7); transform-origin: center;"
|
|
/>
|
|
<p>
|
|
Do not stretch, squash, or distort the proportions of either
|
|
asset.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="misuse-card">
|
|
<p class="misuse-label">✗ Do not crop</p>
|
|
<img
|
|
src="https://cdn.nhcarrigan.com/logo.png"
|
|
alt="Example of prohibited cropping"
|
|
style="clip-path: inset(20% 20% 20% 20%);"
|
|
/>
|
|
<p>Do not crop, clip, or partially obscure either asset.</p>
|
|
</div>
|
|
|
|
<div class="misuse-card">
|
|
<p class="misuse-label">✗ Do not invert</p>
|
|
<img
|
|
src="https://cdn.nhcarrigan.com/logo.png"
|
|
alt="Example of prohibited inversion"
|
|
style="filter: invert(1);"
|
|
/>
|
|
<p>
|
|
Do not invert, desaturate, or otherwise alter the colours of
|
|
either asset.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="misuse-card">
|
|
<p class="misuse-label">✗ Hikari without logo</p>
|
|
<img
|
|
src="https://cdn.nhcarrigan.com/hikari.png"
|
|
alt="Example of Hikari used without the logo"
|
|
/>
|
|
<p>
|
|
Do not use Hikari unless the NHCarrigan logo is also visible in
|
|
the same area.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════ COLOUR PALETTE -->
|
|
<section class="guide-section" id="colours">
|
|
<h2>Colour Palette</h2>
|
|
<span class="audience-badge badge-brand">Brand Use</span>
|
|
<span class="audience-badge badge-dev">Developers</span>
|
|
|
|
<p>
|
|
These are the official NHCarrigan brand colours. Use them for any
|
|
NHCarrigan-adjacent content to maintain visual consistency. Developers
|
|
should reference the CSS custom property names rather than hardcoding
|
|
hex values, so that dark mode works correctly.
|
|
</p>
|
|
|
|
<div class="colour-grid">
|
|
<div class="colour-swatch">
|
|
<div class="swatch-preview" style="background: #2B1B3D;"></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Witch Purple</span>
|
|
<span class="swatch-hex">#2B1B3D</span>
|
|
<span class="swatch-var">--witch-purple</span>
|
|
</div>
|
|
</div>
|
|
<div class="colour-swatch">
|
|
<div class="swatch-preview" style="background: #44275A;"></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Witch Plum</span>
|
|
<span class="swatch-hex">#44275A</span>
|
|
<span class="swatch-var">--witch-plum</span>
|
|
</div>
|
|
</div>
|
|
<div class="colour-swatch">
|
|
<div class="swatch-preview" style="background: #A8577E;"></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Witch Rose</span>
|
|
<span class="swatch-hex">#A8577E</span>
|
|
<span class="swatch-var">--witch-rose</span>
|
|
</div>
|
|
</div>
|
|
<div class="colour-swatch">
|
|
<div class="swatch-preview" style="background: #D4A5C7;"></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Witch Mauve</span>
|
|
<span class="swatch-hex">#D4A5C7</span>
|
|
<span class="swatch-var">--witch-mauve</span>
|
|
</div>
|
|
</div>
|
|
<div class="colour-swatch">
|
|
<div class="swatch-preview" style="background: #E8D5E8;"></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Witch Lavender</span>
|
|
<span class="swatch-hex">#E8D5E8</span>
|
|
<span class="swatch-var">--witch-lavender</span>
|
|
</div>
|
|
</div>
|
|
<div class="colour-swatch">
|
|
<div
|
|
class="swatch-preview"
|
|
style="background: #0A0009; border-bottom: 1px solid #44275A;"
|
|
></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Witch Black</span>
|
|
<span class="swatch-hex">#0A0009</span>
|
|
<span class="swatch-var">--witch-black</span>
|
|
</div>
|
|
</div>
|
|
<div class="colour-swatch">
|
|
<div class="swatch-preview" style="background: #C0C0C0;"></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Witch Silver</span>
|
|
<span class="swatch-hex">#C0C0C0</span>
|
|
<span class="swatch-var">--witch-silver</span>
|
|
</div>
|
|
</div>
|
|
<div class="colour-swatch">
|
|
<div
|
|
class="swatch-preview"
|
|
style="background: #F5F5F5; border-bottom: 1px solid #E8D5E8;"
|
|
></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Witch Moon</span>
|
|
<span class="swatch-hex">#F5F5F5</span>
|
|
<span class="swatch-var">--witch-moon</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Semantic Theme Variables</h3>
|
|
<p>
|
|
Developers should use these semantic variables in preference to the
|
|
raw palette colours. They automatically remap in dark mode.
|
|
</p>
|
|
<div class="code-snippet">:root {
|
|
--foreground: var(--witch-purple); /* Primary text */
|
|
--background: var(--witch-moon); /* Page background */
|
|
--accent: var(--witch-rose); /* Links and highlights */
|
|
--border: var(--witch-plum); /* Borders and dividers */
|
|
--highlight: var(--witch-mauve); /* Hover states */
|
|
}</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════ TYPOGRAPHY -->
|
|
<section class="guide-section" id="typography">
|
|
<h2>Typography</h2>
|
|
<span class="audience-badge badge-dev">Developers</span>
|
|
|
|
<p>
|
|
NHCarrigan web applications use four typefaces, all loaded from Google
|
|
Fonts. Add the following import at the top of your stylesheet:
|
|
</p>
|
|
<div class="code-snippet">@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Creepster&family=Griffy&family=Henny+Penny&display=swap');</div>
|
|
|
|
<div class="font-sample">
|
|
<p class="font-meta">
|
|
Griffy — Headings (h1, h2, h3, h4, h5, h6)
|
|
</p>
|
|
<h2 style="border: none; margin: 0;">
|
|
The quick brown fox jumps over the lazy dog
|
|
</h2>
|
|
<p class="font-usage">
|
|
Used for all heading elements. Applied automatically — no class
|
|
needed.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="font-sample">
|
|
<p class="font-meta">Kalam — Body text, UI, form elements</p>
|
|
<p
|
|
style="font-family: 'Kalam', cursive; font-size: 1.15rem; margin-bottom: 0;"
|
|
>
|
|
The quick brown fox jumps over the lazy dog
|
|
</p>
|
|
<p class="font-usage">
|
|
The default page font. Applied to all body text, inputs, and
|
|
general UI. Applied automatically via <code>html</code> — no class
|
|
needed.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="font-sample">
|
|
<p class="font-meta">
|
|
Creepster — Accent display text (.witchy-accent)
|
|
</p>
|
|
<p
|
|
style="font-family: 'Creepster', cursive; font-size: 1.5rem; letter-spacing: 3px; color: var(--witch-purple); margin-bottom: 0;"
|
|
>
|
|
The quick brown fox jumps over the lazy dog
|
|
</p>
|
|
<p class="font-usage">
|
|
Used via the <code>.witchy-accent</code> class. Use sparingly for
|
|
labels and callouts.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="font-sample">
|
|
<p class="font-meta">
|
|
Henny Penny — Mystical display text (.mystical-text)
|
|
</p>
|
|
<p
|
|
style="font-family: 'Henny Penny', cursive; font-size: 1.5rem; letter-spacing: 2px; color: var(--witch-purple); margin-bottom: 0;"
|
|
>
|
|
The quick brown fox jumps over the lazy dog
|
|
</p>
|
|
<p class="font-usage">
|
|
Used via the <code>.mystical-text</code> class. Suited to large
|
|
display headings and special callouts. Use sparingly.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════ ICONS -->
|
|
<section class="guide-section" id="icons">
|
|
<h2>Icons</h2>
|
|
<span class="audience-badge badge-dev">Developers</span>
|
|
|
|
<p>
|
|
All NHCarrigan web applications use
|
|
<strong>Font Awesome</strong> for iconography. Font Awesome is loaded
|
|
automatically via the shared header script — you do not need to add a
|
|
separate import. Use standard <code><i></code> tags with Font
|
|
Awesome class names:
|
|
</p>
|
|
<div class="code-snippet"><!-- Solid icon -->
|
|
<i class="fas fa-heart"></i>
|
|
|
|
<!-- Brand icon -->
|
|
<i class="fab fa-github"></i>
|
|
|
|
<!-- Regular icon -->
|
|
<i class="far fa-star"></i></div>
|
|
<p>
|
|
Browse the full library at
|
|
<a
|
|
href="https://fontawesome.com/icons"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>fontawesome.com/icons</a
|
|
>.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════ LAYOUT -->
|
|
<section class="guide-section" id="layout">
|
|
<h2>Layout</h2>
|
|
<span class="audience-badge badge-dev">Developers</span>
|
|
|
|
<p>
|
|
All NHCarrigan pages share a common layout delivered by the shared
|
|
header script. Include it in every page's <code><head></code>:
|
|
</p>
|
|
<div class="code-snippet"><script src="https://cdn.nhcarrigan.com/headers/index.js" async defer></script></div>
|
|
|
|
<p>
|
|
The script injects the global stylesheet, Font Awesome, footer
|
|
markup, and theme toggle logic. Your page only needs to provide the
|
|
<code><main></code> element with your content.
|
|
</p>
|
|
|
|
<h3>Page Structure</h3>
|
|
<div class="layout-diagram">
|
|
<div class="diagram-layer diagram-bg">
|
|
body::before — Background image (fixed, full-viewport, z-index: -2)
|
|
</div>
|
|
<div class="diagram-layer diagram-overlay">
|
|
body::after — Purple gradient overlay (fixed, full-viewport, z-index: -1)
|
|
</div>
|
|
<div class="diagram-layer diagram-main">
|
|
<main> — Primary content container<br />
|
|
<small
|
|
>max-width: 1080px · margin: auto · padding: 40px
|
|
· border-radius: 15px</small
|
|
>
|
|
</div>
|
|
<div class="diagram-layer diagram-footer">
|
|
<footer> — Fixed bottom bar (injected by header script)<br />
|
|
<small>height: 75px · contains socials and theme toggle</small>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Background & Overlay</h3>
|
|
<p>
|
|
Every page uses a two-layer background system. This is applied
|
|
automatically by the shared stylesheet — do not override it.
|
|
</p>
|
|
<div class="code-snippet">/* Layer 1: Background image */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
background: url(https://cdn.nhcarrigan.com/background.png) center / cover;
|
|
z-index: -2;
|
|
}
|
|
|
|
/* Layer 2: Mystical purple gradient overlay */
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(circle at 20% 50%, rgba(168, 87, 126, 0.35) 0%, transparent 60%),
|
|
radial-gradient(circle at 80% 80%, rgba(68, 39, 90, 0.35) 0%, transparent 60%),
|
|
linear-gradient(180deg,
|
|
rgba(10, 0, 9, 0.5) 0%,
|
|
rgba(43, 27, 61, 0.25) 50%,
|
|
rgba(43, 27, 61, 0.4) 100%
|
|
);
|
|
z-index: -1;
|
|
}</div>
|
|
|
|
<h3>Responsive Breakpoints</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Max Width</th>
|
|
<th>Changes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>625px</code></td>
|
|
<td>
|
|
Footer height reduces to 50px; Tree Nation badge hidden; main
|
|
bottom margin reduces to 60px
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>425px</code></td>
|
|
<td>Donate badge hidden from footer</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>350px</code></td>
|
|
<td>Footer font size reduces to 10pt</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════ CUSTOM CURSORS -->
|
|
<section class="guide-section" id="cursors">
|
|
<h2>Custom Cursors</h2>
|
|
<span class="audience-badge badge-dev">Developers</span>
|
|
|
|
<p>
|
|
NHCarrigan pages use custom SVG cursors as a distinctive brand
|
|
element. Four cursor states are defined and must be applied to the
|
|
correct elements. The cursors are provided as inline SVG data URIs in
|
|
the shared stylesheet — copy them exactly; do not substitute standard
|
|
browser cursors.
|
|
</p>
|
|
|
|
<div class="cursor-grid">
|
|
<div class="cursor-card">
|
|
<p class="cursor-card-name">Default</p>
|
|
<p>Applied to: <code>html</code></p>
|
|
<p>
|
|
A cross-shaped flower with a witch-purple body, rose centre, and a
|
|
trailing lavender sparkle dot. Shown in all non-interactive areas.
|
|
</p>
|
|
</div>
|
|
<div class="cursor-card">
|
|
<p class="cursor-card-name">Pointer</p>
|
|
<p>
|
|
Applied to: <code>a</code>, <code>button</code>,
|
|
<code>input[type="submit"]</code>,
|
|
<code>input[type="button"]</code>, <code>select</code>
|
|
</p>
|
|
<p>
|
|
The same flower shape with a glowing rose fill, indicating a
|
|
clickable or interactive element.
|
|
</p>
|
|
</div>
|
|
<div class="cursor-card">
|
|
<p class="cursor-card-name">Text</p>
|
|
<p>
|
|
Applied to: <code>input[type="text"]</code>,
|
|
<code>input[type="email"]</code>,
|
|
<code>input[type="password"]</code>, <code>textarea</code>
|
|
</p>
|
|
<p>
|
|
A classic I-beam styled in witch purple with a rose midpoint dot,
|
|
indicating an editable text field.
|
|
</p>
|
|
</div>
|
|
<div class="cursor-card">
|
|
<p class="cursor-card-name">Move / Drag</p>
|
|
<p>Applied to: <code>[draggable="true"]</code></p>
|
|
<p>
|
|
A four-directional diamond shape in witch purple, indicating a
|
|
draggable element.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════ COMPONENTS -->
|
|
<section class="guide-section" id="components">
|
|
<h2>Components</h2>
|
|
<span class="audience-badge badge-dev">Developers</span>
|
|
|
|
<p>
|
|
All components below are styled automatically by the shared
|
|
stylesheet. No additional classes are required unless noted.
|
|
</p>
|
|
|
|
<div class="component-demo">
|
|
<h3>Buttons</h3>
|
|
<div class="demo-area">
|
|
<button>Click Me</button>
|
|
|
|
<input type="submit" value="Submit" />
|
|
</div>
|
|
<div class="code-snippet"><button>Click Me</button>
|
|
<input type="submit" value="Submit" /></div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<h3>Links</h3>
|
|
<div class="demo-area">
|
|
<a href="#">An example link</a>
|
|
</div>
|
|
<div class="code-snippet"><a href="https://nhcarrigan.com">An example link</a></div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<h3>Form Inputs</h3>
|
|
<div
|
|
class="demo-area"
|
|
style="display: flex; flex-direction: column; gap: 0.75em; align-items: flex-start;"
|
|
>
|
|
<input type="text" placeholder="Text input" />
|
|
<input type="email" placeholder="Email input" />
|
|
<textarea
|
|
placeholder="Textarea"
|
|
rows="3"
|
|
style="width: 100%; max-width: 400px;"
|
|
></textarea>
|
|
<select>
|
|
<option>Option one</option>
|
|
<option>Option two</option>
|
|
<option>Option three</option>
|
|
</select>
|
|
</div>
|
|
<div class="code-snippet"><input type="text" placeholder="Text input" />
|
|
<input type="email" placeholder="Email input" />
|
|
<textarea rows="3"></textarea>
|
|
<select>
|
|
<option>Option one</option>
|
|
</select></div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<h3>Tables</h3>
|
|
<div class="demo-area">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Role</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Naomi</td>
|
|
<td>Founder</td>
|
|
<td>Active</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Hikari</td>
|
|
<td>Mascot</td>
|
|
<td>Always here</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Contributor</td>
|
|
<td>Developer</td>
|
|
<td>Welcome!</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="code-snippet"><table>
|
|
<thead>
|
|
<tr><th>Column</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Value</td></tr>
|
|
</tbody>
|
|
</table></div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<h3>Blockquotes</h3>
|
|
<div class="demo-area">
|
|
<blockquote>Permanence in a Transient World.</blockquote>
|
|
</div>
|
|
<div class="code-snippet"><blockquote>Your quote here.</blockquote></div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<h3>Code</h3>
|
|
<div class="demo-area">
|
|
<p>Use <code>inline code</code> within body text.</p>
|
|
<pre><code>// Code block example
|
|
const greeting = "Hello, world!";</code></pre>
|
|
</div>
|
|
<div class="code-snippet"><!-- Inline -->
|
|
<code>inline code</code>
|
|
|
|
<!-- Block -->
|
|
<pre><code>// your code here</code></pre></div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<h3>Lists</h3>
|
|
<div class="demo-area">
|
|
<ul>
|
|
<li>First item</li>
|
|
<li>Second item</li>
|
|
<li>Third item</li>
|
|
</ul>
|
|
</div>
|
|
<div class="code-snippet"><ul>
|
|
<li>First item</li>
|
|
<li>Second item</li>
|
|
</ul></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════ SPECIAL CLASSES -->
|
|
<section class="guide-section" id="special-classes">
|
|
<h2>Special Classes</h2>
|
|
<span class="audience-badge badge-dev">Developers</span>
|
|
|
|
<p>
|
|
Three utility classes provide decorative text effects. Use them
|
|
sparingly — they are designed for display emphasis, not body text.
|
|
</p>
|
|
|
|
<div class="component-demo">
|
|
<h3>.witchy-accent</h3>
|
|
<div class="demo-area">
|
|
<span class="witchy-accent">Witchy Accent Text</span>
|
|
</div>
|
|
<p>
|
|
Creepster font with wide letter-spacing, a rose text shadow, and a
|
|
subtle skew. Good for labels, taglines, or section callouts.
|
|
</p>
|
|
<div class="code-snippet"><span class="witchy-accent">Your text here</span></div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<h3>.mystical-text</h3>
|
|
<div class="demo-area">
|
|
<span class="mystical-text" style="font-size: 1.5rem;"
|
|
>Mystical Display Text</span
|
|
>
|
|
</div>
|
|
<p>
|
|
Henny Penny font with letter-spacing and a subtle purple text
|
|
shadow. Suited to display headings or special callouts.
|
|
</p>
|
|
<div class="code-snippet"><span class="mystical-text">Your text here</span></div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<h3>.spooky-title</h3>
|
|
<div class="demo-area">
|
|
<span
|
|
class="spooky-title"
|
|
style="font-size: 2rem; font-family: 'Creepster', cursive;"
|
|
>Spooky Title Text</span
|
|
>
|
|
</div>
|
|
<p>
|
|
Creepster font with a purple-to-rose-to-mauve gradient fill. Use
|
|
for large display titles where maximum visual impact is desired.
|
|
</p>
|
|
<div class="code-snippet"><span class="spooky-title">Your text here</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════ DARK MODE -->
|
|
<section class="guide-section" id="dark-mode">
|
|
<h2>Dark Mode</h2>
|
|
<span class="audience-badge badge-dev">Developers</span>
|
|
|
|
<p>
|
|
Dark mode is activated by adding the <code>.is-dark</code> class to
|
|
the <code><html></code> element. The shared footer script
|
|
handles this automatically via the theme toggle button — you do not
|
|
need to implement the toggle yourself.
|
|
</p>
|
|
<p>
|
|
If your page includes custom elements beyond the standard components,
|
|
add <code>.is-dark</code> overrides for those elements:
|
|
</p>
|
|
<div class="code-snippet">.is-dark .your-custom-element {
|
|
background: rgba(10, 0, 9, 0.95);
|
|
color: var(--witch-lavender);
|
|
border-color: var(--witch-rose);
|
|
}</div>
|
|
|
|
<h3>Theme Variable Remapping</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Variable</th>
|
|
<th>Light Mode</th>
|
|
<th>Dark Mode</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>--foreground</code></td>
|
|
<td>--witch-purple</td>
|
|
<td>--witch-lavender</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--background</code></td>
|
|
<td>--witch-moon</td>
|
|
<td>--witch-black</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--accent</code></td>
|
|
<td>--witch-rose</td>
|
|
<td>--witch-mauve</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--border</code></td>
|
|
<td>--witch-plum</td>
|
|
<td>--witch-rose</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--highlight</code></td>
|
|
<td>--witch-mauve</td>
|
|
<td>--witch-plum</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>Preview</h3>
|
|
<div id="theme-preview-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin: 1em 0;">
|
|
<div class="light-preview">
|
|
<h3>Light Mode</h3>
|
|
<p>
|
|
Body text uses
|
|
<code>--witch-purple</code>
|
|
against a near-white gradient background.
|
|
</p>
|
|
<p><a href="#">Links use --witch-rose in light mode.</a></p>
|
|
<p>
|
|
The main container has a soft lavender gradient with a rose
|
|
box shadow glow.
|
|
</p>
|
|
</div>
|
|
<div class="dark-preview">
|
|
<h3>Dark Mode</h3>
|
|
<p>
|
|
Body text uses
|
|
<code style="background: rgba(255,255,255,0.08); color: var(--witch-lavender);">--witch-lavender</code>
|
|
against a near-black gradient background.
|
|
</p>
|
|
<p><a href="#">Links use --witch-mauve in dark mode.</a></p>
|
|
<p>
|
|
The main container switches to a deep gradient with an
|
|
intensified rose glow on the box shadow.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════ SCROLLBAR & SELECTION -->
|
|
<section class="guide-section" id="details">
|
|
<h2>Scrollbar & Selection</h2>
|
|
<span class="audience-badge badge-dev">Developers</span>
|
|
|
|
<p>
|
|
The shared stylesheet defines custom scrollbar and text selection
|
|
styles. These are applied automatically — do not override them in
|
|
page-specific stylesheets.
|
|
</p>
|
|
|
|
<div class="component-demo">
|
|
<h3>Scrollbar</h3>
|
|
<p>
|
|
Webkit scrollbars (Chrome, Edge, Safari) are styled to match the
|
|
witch palette. Firefox uses the standard scrollbar with no
|
|
customisation.
|
|
</p>
|
|
<div class="code-snippet">::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-track { background: var(--witch-lavender); }
|
|
::-webkit-scrollbar-thumb { background: var(--witch-plum); border-radius: 5px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--witch-purple); }</div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<h3>Text Selection</h3>
|
|
<p>
|
|
Selected text is highlighted in <span style="background: #A8577E; color: #F5F5F5; padding: 1px 6px; border-radius: 3px;">witch rose</span>
|
|
with moon-white text. This applies across all browsers.
|
|
</p>
|
|
<p>Try selecting some text on this page to see it in action!</p>
|
|
<div class="code-snippet">::selection { background: var(--witch-rose); color: var(--witch-moon); }
|
|
::-moz-selection { background: var(--witch-rose); color: var(--witch-moon); }</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════ ANIMATIONS -->
|
|
<section class="guide-section" id="animations">
|
|
<h2>Animations</h2>
|
|
<span class="audience-badge badge-dev">Developers</span>
|
|
|
|
<p>
|
|
A small set of animations are defined in the shared stylesheet and
|
|
applied to specific elements. Do not remove or override them — they
|
|
are part of the brand's playful character.
|
|
</p>
|
|
|
|
<div class="component-demo">
|
|
<h3>Wiggle</h3>
|
|
<p>
|
|
Applied automatically to all <code><h1></code> elements. A
|
|
gentle, continuous rocking animation that gives page titles their
|
|
personality.
|
|
</p>
|
|
<div class="demo-area" style="text-align: center; padding: 1.5em;">
|
|
<h1 style="font-size: 2rem; margin: 0;">Page Title</h1>
|
|
</div>
|
|
<div class="code-snippet">@keyframes wiggle {
|
|
0%, 100% { transform: rotate(-2deg); }
|
|
25% { transform: rotate(2deg); }
|
|
50% { transform: rotate(-1deg); }
|
|
75% { transform: rotate(1deg); }
|
|
}
|
|
|
|
h1 {
|
|
transform: rotate(-2deg);
|
|
display: inline-block;
|
|
animation: wiggle 4s ease-in-out infinite;
|
|
}</div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<h3>Hover Transitions</h3>
|
|
<p>
|
|
Interactive elements use a consistent <code>transition: all 0.3s ease</code>
|
|
for smooth hover feedback. Key hover behaviours to preserve:
|
|
</p>
|
|
<table>
|
|
<thead>
|
|
<tr><th>Element</th><th>Hover Effect</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Buttons</td>
|
|
<td>Lifts up, rotates slightly, scales up, gains rose border and glow</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Links</td>
|
|
<td>Colour shifts to --witch-plum, rose underline appears</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Footer links</td>
|
|
<td>Colour shifts to --witch-mauve, soft text glow appears</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Social list items</td>
|
|
<td>Background fills with rose tint, row nudges right</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════ CONTACT -->
|
|
<section class="guide-section" id="contact">
|
|
<h2>Contact</h2>
|
|
<span class="audience-badge badge-brand">Brand Use</span>
|
|
<span class="audience-badge badge-dev">Developers</span>
|
|
|
|
<p>
|
|
Have a question not covered by this guide? We're happy to help.
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<strong>Brand & logo enquiries</strong> — reach us through our
|
|
<a
|
|
href="https://nhcarrigan.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>website</a
|
|
>.
|
|
</li>
|
|
<li>
|
|
<strong>Developer questions</strong> — join our community and ask in
|
|
our
|
|
<a
|
|
href="https://chat.naomi.lgbt"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>Discord server</a
|
|
>.
|
|
</li>
|
|
<li>
|
|
<strong>Code of Conduct</strong> — all use of NHCarrigan brand
|
|
assets must comply with our
|
|
<a
|
|
href="https://docs.nhcarrigan.com/community/coc/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>Code of Conduct</a
|
|
>.
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|