Update README for Hellion-Media transfer

- Brand schema (Arctic Cyan + Ember Glow) section with token table - Cross-link to Hellion-Forge for plugin work - Allocation rules (cyan for structure, ember for action) - WireGuard convention added to deployment section
2026-05-09 17:10:19 +02:00
parent 1a7d716098
commit f5977be948
1 changed files with 64 additions and 20 deletions
@@ -1,18 +1,18 @@
-# Web App Template
+# Hellion-Media Web App Template

-A starting point for new Hellion Online Media web apps on the [Hellion Forge](https://gitea.hellion-forge.cloud/).
+A starting point for [Hellion Online Media](https://gitea.hellion-forge.cloud/Hellion-Media) web apps. Mirrors the production stack used for `hellion-media-website`, `hellion-initiative-v3`, and `nova-corp-website`.

-Stack:
+**Stack:**

 - **Next.js 16** (App Router, Turbopack)
 - **React 19**
 - **TypeScript** strict mode
 - **Prisma ORM** + **MySQL**
- **NextAuth** (auth.js v5)
+- **NextAuth** (Auth.js v5)
 - **Sass/SCSS** in external files — never inline styles
 - **FontAwesome**

-This mirrors the production stack used for `hellion-media-website`, `hellion-initiative-v3`, and `nova-corporation.de`.
+> Plugin & FFXIV/Modding work? See the [Hellion Forge](https://gitea.hellion-forge.cloud/Hellion-Forge) sub-org instead.

 ---

@@ -22,65 +22,109 @@ This mirrors the production stack used for `hellion-media-website`, `hellion-ini
 2. Clone locally and replace project name in:
   - `package.json` → `name`
   - `README.md` → this section + project description
-3. Set up your `.env.local` from `.env.example`.
+3. Set up your `.env.local` from `env.example` (rename to `.env.example` after cloning if your editor prefers it).
 4. `npm install`, `npx prisma generate`, `npx prisma migrate dev`.
 5. `npm run dev` → http://localhost:3000.
 6. Implement your app in `src/app/`.

 ---

+## Branding — Arctic Cyan + Ember Glow
+
+Hellion Online Media's brand schema. Apply via CSS Custom Properties in `globals.scss`, never hardcoded. Source-of-truth: `BRANDING.md` in the [hellion-media-website](https://gitea.hellion-forge.cloud/JonKazama-Hellion/hellion-media-website) repo — this template lists the tokens you'll typically need:
+
+### Primary — Arctic Cyan (structure, navigation, HUD)
+
+| Token | Hex | When |
+|---|---|---|
+| `--brand-color-dark` | `#0097A7` | Hover-states, pressed buttons |
+| `--brand-color` | `#00BED2` | HUD-borders, panel-borders, active nav |
+| `--brand-color-light` | `#4DD9E8` | Link text, light accents |
+| `--brand-color-glow` | `rgba(0, 190, 210, 0.6)` | Glow effects, text-shadows |
+| `--brand-color-subtle` | `rgba(0, 190, 210, 0.15)` | Subtle backgrounds |
+
+### Accent — Ember Orange (CTAs, badges, highlights)
+
+| Token | Hex | When |
+|---|---|---|
+| `--accent-color-dark` | `#E85D04` | Hover state for CTAs |
+| `--accent-color` | `#F97316` | Primary CTA buttons, feature badges |
+| `--accent-color-light` | `#FB923C` | Light accents, text |
+| `--accent-color-glow` | `rgba(249, 115, 22, 0.6)` | Button glow |
+
+### Backgrounds
+
+| Token | Hex | When |
+|---|---|---|
+| `--background` | `#070B12` | Body background (very dark, not pure black) |
+| `--background-medium` | `#0C1220` | Mid background |
+| `--surface` | `#1A2538` | Card / panel surfaces |
+| `--surface-elevated` | `rgba(6, 10, 18, 0.75)` | Frosted glass panels |
+
+### Allocation rules
+
+- **Cyan** for structure: HUD-borders, navigation, links, focus states, glow effects
+- **Ember** for action: CTA-buttons, submit buttons, feature badges, highlights
+- **Status colors stay semantic**: `--success` `#5CB85C`, `--danger` `#D9534F`, `--warning` `#F0AD4E`
+- **Never** the old `#448f45` green (fully replaced) or admin-OTP red (`#c0392b`) repurposed for cyan
+- **Email templates** use raw hex (CSS variables don't work in email clients)
+
+---
+
 ## Project structure

 ```
 .
 ├── .editorconfig
-├── env.example                     Template for .env.local. Rename to .env.example after cloning if you prefer the dot-prefix convention.
+├── env.example                    Template for .env.local — rename if your editor wants the dot
 ├── .gitea/
 │   ├── ISSUE_TEMPLATE/
 │   ├── PULL_REQUEST_TEMPLATE.md
 │   └── workflows/
-│       └── ci.yml                  Lint + type-check + Prisma validate
+│       └── ci.yml                 Lint + type-check + Prisma validate
 ├── .gitignore
 ├── prisma/
-│   └── schema.prisma               Skeleton with NextAuth tables
+│   └── schema.prisma              Skeleton with NextAuth tables
 ├── src/
 │   ├── app/
-│   │   ├── layout.tsx              Root layout
-│   │   ├── page.tsx                Home page
+│   │   ├── layout.tsx
+│   │   ├── page.tsx
 │   │   └── api/auth/[...nextauth]/route.ts
-│   ├── components/                 Reusable UI components
+│   ├── components/                Reusable UI components
 │   ├── lib/
-│   │   ├── prisma.ts               Prisma client singleton
-│   │   └── auth.ts                 NextAuth config
+│   │   ├── prisma.ts              Prisma client singleton
+│   │   └── auth.ts                NextAuth config
 │   └── styles/
-│       └── globals.scss            Global styles entry
+│       └── globals.scss           Global styles + brand tokens entry
 ├── next.config.ts
 ├── package.json
 ├── tsconfig.json
 ├── CODEOWNERS
-├── LICENSE                         MIT
-└── README.md                       This file (replace before shipping)
+├── LICENSE                        MIT
+└── README.md                      This file (replace before shipping)
 ```

 ---

-## Conventions (Hellion Online Media)
+## Hellion Online Media conventions

 - **External SCSS files only** — no inline `style={...}`, no `style.css` per component. Co-located `*.module.scss` is fine.
 - **Database access via DAL layer** — direct Prisma calls only inside `src/lib/dal/*.ts`, never in components or routes. Pattern from `hellion-initiative-v3`.
 - **No client-side secrets** — all auth/DB access goes through server components or route handlers.
- **PM2 single-process deployment** — production runs on Strato Windows Server with PM2 + IIS reverse proxy. No clustering, no Vercel.
+- **PM2 single-process deployment** — production runs on Strato Windows Server with PM2 (NSSM-wrapped) + IIS reverse proxy. No clustering, no Vercel.
+- **WireGuard-only DB access** — MySQL on the Strato VPS isn't exposed to the public internet, only reachable via the `hellion` WireGuard tunnel.

 ---

 ## Production deployment

-This template is opinionated about non-cloud deployment:
+Opinionated about non-cloud deployment:

 - **Server:** Strato Windows Server 2025
 - **Process manager:** PM2 (NSSM Windows-service wrapper, single-process mode)
 - **Reverse proxy:** IIS with TLS termination
 - **Database:** MySQL on Strato VPS, accessible only via WireGuard
+- **CI:** Gitea Actions on this Forge — see `.gitea/workflows/ci.yml`

 Adjust `next.config.ts` accordingly (no `output: 'standalone'` unless you containerize).