Editing CrucibleCodexStyles

{{CodexHeader}}
<div class="codex-page">

= 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">
= Stormbringer Example =

<div class="codex-subtitle">A world of dying empires and bargains best left unmade.</div>

<div class="codex-panel">
'''Storm Panel'''<br>
Use this for sidebars, lore capsules, or boxed rules.
</div>

<div class="codex-callout--chaos">
'''Chaos Callout'''<br>
Use this for uncanny, mutating, or destabilizing material.
</div>

<div class="codex-callout--doom">
'''Doom Callout'''<br>
Use this for prophecy, corruption, price, or fatal consequence.
</div>

{| class="wikitable"
! Power !! Cost
|-
| Sorcery || Corruption
|}
</div>

=== Stormbringer-Specific Classes ===

* <code>storm-subtitle</code>
* <code>storm-panel</code>
* <code>storm-callout-chaos</code>
* <code>storm-callout-doom</code>
* <code>storm-nav-title</code>
* <code>thumbcaption</code> is also styled within this skin

=== Stormbringer Example Markup ===

<pre>
<div class="codex-page codex-page--stormbringer">
<div class="storm-subtitle">A dying age.</div>

<div class="storm-panel">
Lore text.
</div>

<div class="storm-callout-doom">
All victories are temporary.
</div>
</div>
</pre>

== Hawkmoon Skin ==

=== Canonical Wrapper ===

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

=== Canonical Nav ===

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

Legacy aliases still supported:
* <code>hawkmoon-theme</code>
* <code>hawkmoon-navbox</code>

=== Banner ===

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

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

=== Example ===

<div class="codex-page codex-page--hawkmoon">
= Hawkmoon Example =

<p class="codex-lead">This is the lead paragraph styling for Hawkmoon pages.</p>

<div class="codex-panel">
<div class="codex-panel-title">Granbretan At A Glance</div>
Dark science, ruin, masks, and empire.
</div>

<div class="codex-callout--gm">
'''GM Note'''<br>
Use this for campaign guidance, ominous secrets, or behind-the-screen material.
</div>

<p><span class="codex-smallcaps">The Tragic Millenium</span> is ash, iron, and old cruelty.</p>
</div>

=== Hawkmoon-Specific Classes ===

* <code>hawkmoon-banner</code>
* <code>hawkmoon-banner-image</code>
* <code>hawkmoon-panel</code>
* <code>hawkmoon-panel-title</code>
* <code>hawkmoon-gm</code>
* <code>hawkmoon-lead</code>
* <code>hawkmoon-smallcaps</code>
* <code>hawkmoon-nav-title</code>

=== Hawkmoon Example Markup ===

<pre>
<div class="codex-page codex-page--hawkmoon">
<p class="hawkmoon-lead">Opening paragraph.</p>

<div class="hawkmoon-panel">
<div class="hawkmoon-panel-title">Forbidden Science</div>
Panel text.
</div>

<div class="hawkmoon-gm">
GM-only note.
</div>
</div>
</pre>

== Apes Skin ==

=== Canonical Wrapper ===

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

=== Canonical Nav ===

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

=== Example ===

<div class="codex-page codex-page--apes">
= Age Of The Covenant Example =

<div class="codex-subtitle">A parchment-and-bronze historical adventure skin.</div>

<div class="codex-callout">
<div class="codex-callout-title">Field Note</div>
The Covenant remains uneasy even in peace.
</div>

<hr class="codex-divider">

<p><span class="apes-dropcap">T</span>his skin also defines a decorative drop cap class for opening paragraphs.</p>
</div>

=== Apes-Specific Classes ===

* <code>apes-subtitle</code>
* <code>apes-divider</code>
* <code>apes-callout</code>
* <code>apes-callout-title</code>
* <code>apes-dropcap</code>
* <code>apes-nav-title</code>
* <code>career-portrait</code> appears in responsive rules tied to this section

=== Apes Example Markup ===

<pre>
<div class="codex-page codex-page--apes">
<div class="apes-subtitle">A doubtful peace.</div>

<div class="apes-callout">
<div class="apes-callout-title">Field Note</div>
Callout text.
</div>

<hr class="apes-divider">

<p><span class="apes-dropcap">T</span>he bridge still stands.</p>
</div>
</pre>

== Legacy Alias Summary ==

These legacy names are still supported and are worth knowing when reading older pages:

{| class="wikitable"
! Subsite !! Canonical Pattern !! Legacy Names Still Supported
|-
| Nightcats || <code>codex-page codex-page--nightcats</code>, <code>codex-navbox codex-navbox--nightcats</code>, <code>codex-panel</code> || <code>nightcats-panel</code>, <code>nightcats-panel-title</code>, related Nightcats panel classes
|-
| Burning Temple || <code>codex-page codex-page--ffbt</code>, <code>codex-navbox codex-navbox--ffbt</code>, <code>codex-callout</code>, <code>codex-grid</code>, <code>codex-card</code> || <code>ffbt-callout</code>, <code>ffbt-grid</code>, <code>ffbt-card</code>, <code>ffbt-stylebox</code>
|-
| Sigil Lands || <code>codex-page codex-page--sigil</code>, <code>codex-navbox codex-navbox--sigil</code> || none of major importance beyond standard wrapper usage
|-
| Stormbringer || <code>codex-page codex-page--stormbringer</code>, <code>codex-navbox codex-navbox--stormbringer</code>, <code>codex-callout--chaos</code>, <code>codex-callout--doom</code> || <code>storm-subtitle</code>, <code>storm-panel</code>, <code>storm-callout-chaos</code>, <code>storm-callout-doom</code>, <code>stormbringer-nav</code>, <code>codex-nav--stormbringer</code>
|-
| Hawkmoon || <code>codex-page codex-page--hawkmoon</code>, <code>codex-navbox codex-navbox--hawkmoon</code>, <code>codex-callout--gm</code>, <code>codex-lead</code>, <code>codex-smallcaps</code> || <code>hawkmoon-theme</code>, <code>hawkmoon-navbox</code>, <code>hawkmoon-panel</code>, <code>hawkmoon-gm</code>, <code>hawkmoon-lead</code>
|-
| Apes || <code>codex-page codex-page--apes</code>, <code>codex-navbox codex-navbox--apes</code>, <code>codex-callout</code>, <code>codex-divider</code> || <code>apes-subtitle</code>, <code>apes-callout</code>, <code>apes-callout-title</code>, <code>apes-divider</code>
|}

== Quick Lookup ==

'''Shared'''
* <code>codex-banner</code>
* <code>codex-page</code>
* <code>codex-navbox</code>
* <code>codex-nav-title</code>
* <code>codex-subtitle</code>
* <code>codex-panel</code>
* <code>codex-panel-title</code>
* <code>codex-callout</code>
* <code>codex-callout-title</code>
* <code>codex-lead</code>
* <code>codex-smallcaps</code>
* <code>codex-grid</code>
* <code>codex-card</code>
* <code>codex-divider</code>

'''Nightcats'''
* <code>codex-page--nightcats</code>
* <code>codex-navbox--nightcats</code>
* <code>nightcats-panel</code>
* <code>nightcats-stats</code>
* <code>nightcats-tags</code>

'''Burning Temple'''
* <code>codex-page--ffbt</code>
* <code>codex-navbox--ffbt</code>
* <code>ffbt-callout</code>
* <code>ffbt-seal</code>
* <code>ffbt-stylebox</code>
* <code>ffbt-statblock</code>
* <code>ffbt-grid</code>
* <code>ffbt-card</code>
* <code>ffbt-table</code>
* <code>ffbt-tag</code>

'''Sigil Lands'''
* <code>codex-page--sigil</code>
* <code>codex-navbox--sigil</code>

'''Stormbringer'''
* <code>codex-page--stormbringer</code>
* <code>codex-navbox--stormbringer</code>
* <code>storm-subtitle</code>
* <code>storm-panel</code>
* <code>storm-callout-chaos</code>
* <code>storm-callout-doom</code>
* <code>storm-nav-title</code>

'''Hawkmoon'''
* <code>codex-page--hawkmoon</code>
* <code>codex-navbox--hawkmoon</code>
* <code>hawkmoon-banner</code>
* <code>hawkmoon-panel</code>
* <code>hawkmoon-gm</code>
* <code>hawkmoon-lead</code>
* <code>hawkmoon-smallcaps</code>
* <code>hawkmoon-nav-title</code>

'''Apes'''
* <code>codex-page--apes</code>
* <code>codex-navbox--apes</code>
* <code>apes-subtitle</code>
* <code>apes-divider</code>
* <code>apes-callout</code>
* <code>apes-callout-title</code>
* <code>apes-dropcap</code>
* <code>apes-nav-title</code>

</div>
[[Category:Crucible Codex]]