Editing CrucibleCodexStyles (section)

= Crucible Codex Styles Guide =

This page is a working reference for the full Codex stylesheet.

It is meant to show the wrappers, navigation blocks, subsite skins, and reusable content components that currently exist in the CSS, including the newer canonical <code>codex-*</code> component names and the older legacy aliases that still render.

Use the canonical patterns for all new pages. Legacy names are documented here so older pages remain understandable.

== Canonical Page Pattern ==

For all new subsite pages, use this general structure:

<pre>
{{HeaderTemplate}}
<div class="codex-page codex-page--subsite">

= Page Title =

Page content here.

{{NavTemplate}}
</div>
</pre>

For nav templates, use this general structure:

<pre>
<includeonly>
<div class="codex-navbox codex-navbox--subsite">
<strong class="codex-nav-title">Subsite Codex</strong>
[[Subsite:Home|Home]] • [[Subsite:Character Creation|Character Creation]]
</div>
</includeonly>
</pre>

== Shared Foundation ==

These styles affect the whole wiki, not just one subsite.

=== Global Page Skin ===

The site-wide body, headings, links, forms, tables, infoboxes, TOC, code blocks, and images all have a shared dark Codex treatment.

Reusable selectors documented in CSS include:

* <code>html</code>, <code>body</code>, <code>.mw-page-container</code>, <code>.vector-body</code>
* <code>.mw-body</code>
* <code>#firstHeading</code>, <code>.mw-first-heading</code>, <code>.mw-parser-output h1-h6</code>
* <code>.vector-pinned-container</code>, <code>.vector-column-start</code>, <code>#mw-panel</code>, <code>.vector-menu</code>, <code>.vector-user-links</code>
* <code>.vector-header-container</code>, <code>.vector-header</code>, <code>.mw-header</code>, <code>.vector-page-toolbar</code>, <code>.vector-sticky-header</code>, <code>.vector-page-titlebar</code>
* <code>.vector-search-box</code>, <code>.vector-search-box-vue</code>, <code>.vector-typeahead-search-container</code>, <code>#searchInput</code>
* <code>.wikitable</code>, <code>.infobox</code>, <code>.portable-infobox</code>
* <code>#toc</code>, <code>.toc</code>, <code>.catlinks</code>
* <code>pre</code>, <code>code</code>
* <code>.thumb</code>, <code>.thumbinner</code>, <code>.mw-file-element</code>, <code>.floatright</code>, <code>.floatleft</code>
* <code>.mw-editsection</code> and related section-edit selectors are hidden globally

=== Shared Banner ===

<div class="codex-banner">
[[File:PLACEHOLDER.jpg|900px]]
</div>

<pre>
<div class="codex-banner">
[[File:Banner.jpg|900px]]
</div>
</pre>

Use:
* <code>codex-banner</code> for a standard centered banner
* <code>codex-header</code> for shared header wrappers where needed

=== Shared Page Wrapper ===

<div class="codex-page">
This is the default shared <code>codex-page</code> wrapper. It gives the page its centered panel, padding, line spacing, rounded corners, and drop-shadow.
</div>

<pre>
<div class="codex-page">
Your page content here.
</div>
</pre>

=== Shared Navigation Wrapper ===

<div class="codex-navbox">
<strong>Codex Navigation</strong>
[[Main Page|Home]] • [[Help:Contents|Help]] • [[Special:AllPages|All Pages]]
</div>

<pre>
<div class="codex-navbox">
<strong>Codex Navigation</strong>
[[Main Page|Home]] • [[Help:Contents|Help]] • [[Special:AllPages|All Pages]]
</div>
</pre>

== Canonical Reusable Components ==

These are the newer, future-facing shared component names. Use these for all new work where practical.

=== codex-nav-title ===

<div class="codex-navbox">
<strong class="codex-nav-title">Example Codex</strong>
[[Main Page|Home]] • [[Help:Contents|Help]]
</div>

<pre>
<div class="codex-navbox codex-navbox--subsite">
<strong class="codex-nav-title">Subsite Codex</strong>
[[Subsite:Home|Home]]
</div>
</pre>

=== codex-subtitle ===

<div class="codex-page codex-page--stormbringer">
<div class="codex-subtitle">A short italic subtitle placed beneath a major heading.</div>
</div>

<pre>
<div class="codex-subtitle">A short italic subtitle.</div>
</pre>

=== codex-panel And codex-panel-title ===

<div class="codex-page codex-page--hawkmoon">
<div class="codex-panel">
<div class="codex-panel-title">Panel Title</div>
Panel text goes here.
</div>
</div>

<pre>
<div class="codex-panel">
<div class="codex-panel-title">Panel Title</div>
Panel text goes here.
</div>
</pre>

=== codex-callout And codex-callout-title ===

<div class="codex-page codex-page--ffbt">
<div class="codex-callout">
<div class="codex-callout-title">Callout Title</div>
This is a reusable callout block.
</div>
</div>

<pre>
<div class="codex-callout">
<div class="codex-callout-title">Callout Title</div>
Callout text here.
</div>
</pre>

=== codex-lead ===

<div class="codex-page codex-page--hawkmoon">
<p class="codex-lead">This is lead paragraph styling for an opening paragraph or emphasized introduction.</p>
</div>

<pre>
<p class="codex-lead">Opening paragraph text.</p>
</pre>

=== codex-smallcaps ===

<div class="codex-page codex-page--hawkmoon">
<p><span class="codex-smallcaps">Small Caps Example</span></p>
</div>

<pre>
<span class="codex-smallcaps">Small Caps Example</span>
</pre>

=== codex-grid And codex-card ===

<div class="codex-page codex-page--ffbt">
<div class="codex-grid">
<div class="codex-card">
'''Card One'''<br>
Example card text.
</div>
<div class="codex-card">
'''Card Two'''<br>
Example card text.
</div>
</div>
</div>

<pre>
<div class="codex-grid">
<div class="codex-card">Card One</div>
<div class="codex-card">Card Two</div>
</div>
</pre>

=== codex-divider ===

<div class="codex-page codex-page--apes">
<hr class="codex-divider">
</div>

<pre>
<hr class="codex-divider">
</pre>

=== Variant Callouts ===

Stormbringer and Hawkmoon define special canonical variant names:

* <code>codex-callout--chaos</code>
* <code>codex-callout--doom</code>
* <code>codex-callout--gm</code>

== Nightcats Skin ==

=== Canonical Wrapper ===

<pre>
<div class="codex-page codex-page--nightcats">
...
</div>
</pre>

=== Canonical Nav ===

<pre>
<div class="codex-navbox codex-navbox--nightcats">
<strong class="codex-nav-title">Nightcats Codex</strong>
...
</div>
</pre>

=== Example ===

<div class="codex-page codex-page--nightcats">
== Nightcats Example ==

This is paragraph text in the Nightcats skin.

<div class="codex-panel">
<div class="codex-panel-title">Jungle Lore</div>
The canonical <code>codex-panel</code> is supported here, and maps to the older Nightcats panel styling.
</div>

<div class="nightcats-panel">
<div class="nightcats-panel-title">Legacy Nightcats Panel</div>
The legacy Nightcats class still works too.
</div>

<table class="nightcats-stats">
<tr><th>Strength</th><td>d8</td></tr>
<tr><th>Agility</th><td>d6</td></tr>
</table>

<div class="nightcats-tags"><strong>Tags:</strong> Beast, Jungle, Rare</div>

<blockquote>
The jungle remembers what men forget.
</blockquote>
</div>

=== Nightcats-Specific Classes ===

* <code>nightcats-header</code>
* <code>nightcats-panel</code>
* <code>nightcats-panel-title</code>
* <code>nightcats-panel-subtitle</code>
* <code>nightcats-panel--beast</code>
* <code>nightcats-panel--hazard</code>
* <code>nightcats-panel--sorcery</code>
* <code>nightcats-stats</code>
* <code>nightcats-tags</code>
* <code>nightcats-panel-grid</code>
* <code>nightcats-panel-grid--two</code>
* <code>nightcats-panel-image-top</code>
* <code>nightcats-frame right</code> for responsive image behavior in the CSS

=== Nightcats Example Markup ===

<pre>
<div class="codex-page codex-page--nightcats">
<div class="nightcats-panel nightcats-panel--beast">
<div class="nightcats-panel-image-top">
[[File:Tiger.jpg|380px]]
</div>
<div class="nightcats-panel-title">Tiger</div>
A silent killer of the green dark.
</div>
</div>
</pre>

== Five Fists / Burning Temple Skin ==

=== Canonical Wrapper ===

<pre>
<div class="codex-page codex-page--ffbt">
...
</div>
</pre>

=== Canonical Nav ===

<pre>
<div class="codex-navbox codex-navbox--ffbt">
<strong class="codex-nav-title">Burning Temple Codex</strong>
...
</div>
</pre>

=== Example ===

<div class="codex-page codex-page--ffbt">
== Burning Temple Example ==

<div class="codex-callout">
<div class="codex-callout-title">Master’s Saying</div>
Patience is also a weapon.
</div>

<div class="ffbt-seal">Disciplined Style</div>

<div class="ffbt-stylebox">
=== Style Box ===
Use this for schools, techniques, or doctrine summaries.
</div>

<div class="ffbt-statblock">
'''Master Iron Crane'''<br>
Agility d8, Smarts d6, Spirit d8, Strength d6, Vigor d8
</div>

<div class="codex-grid">
<div class="codex-card">
=== Tiger Style ===
Relentless, fierce, direct.
</div>
<div class="codex-card">
=== Crane Style ===
Precise, elegant, evasive.
</div>
</div>

<div class="ffbt-table">
{| class="wikitable"
! Maneuver !! Effect
|-
| Throw || Put the foe on the ground
|}
</div>

<span class="ffbt-tag">Martial</span>
<span class="ffbt-tag">Discipline</span>
</div>

=== FFBT-Specific Classes ===

* <code>ffbt-header</code>
* <code>ffbt-callout</code>
* <code>ffbt-seal</code>
* <code>ffbt-stylebox</code>
* <code>ffbt-statblock</code>
* <code>ffbt-divider</code>
* <code>ffbt-quote</code>
* <code>ffbt-grid</code>
* <code>ffbt-card</code>
* <code>ffbt-quicklinks</code>
* <code>ffbt-table</code>
* <code>ffbt-tag</code>

=== FFBT Example Markup ===

<pre>
<div class="codex-page codex-page--ffbt">
<div class="ffbt-callout">
<strong>Master’s Saying</strong>
Patience is also a weapon.
</div>

<div class="ffbt-grid">
<div class="ffbt-card">Tiger</div>
<div class="ffbt-card">Crane</div>
</div>
</div>
</pre>

== Sigil Lands Skin ==

=== Canonical Wrapper ===

<pre>
<div class="codex-page codex-page--sigil">
...
</div>
</pre>

=== Canonical Nav ===

<pre>
<div class="codex-navbox codex-navbox--sigil">
<strong class="codex-nav-title">Sigil Lands Codex</strong>
...
</div>
</pre>

=== Example ===

<div class="codex-page codex-page--sigil">
== Sigil Lands Example ==

<div class="codex-subtitle">A skin for chronicles, lore essays, and older-world material.</div>

This wrapper is suited to historical or reflective setting text.

{| class="wikitable"
! Realm !! Condition
|-
| Angharais || Enduring
|-
| Vorghol || Shrouded
|}
</div>

=== Sigil Notes ===

The Sigil skin uses fewer custom component classes than the other subsites. The important styles are the wrapper, nav, and the canonical <code>codex-subtitle</code> and <code>codex-nav-title</code> hooks.

== Stormbringer Skin ==

=== Canonical Wrapper ===

<pre>
<div class="codex-page codex-page--stormbringer">
...
</div>
</pre>

=== Canonical Nav ===

<pre>
<div class="codex-navbox codex-navbox--stormbringer">
<strong class="codex-nav-title">Stormbringer Codex</strong>
...
</div>
</pre>

Legacy nav aliases still supported in CSS:
* <code>stormbringer-nav</code>
* <code>codex-nav--stormbringer</code>

=== Example ===

<div class="codex-page codex-page--stormbringer">