Template:Theme-VGR

Description

Theme-VGR is the theme for the work Verdant Green Revelation and the Canon Zone on HUIJIA FUN. It follows the Canon Zone (night) palette of the VGR Design System and sits between Theme-STR (Dipfield's sci-fi order) and Theme-HJ (Huijia's sober archive): an ink-green ground, Plurimod light-green headings and a pale green accent. The content card has a double-line lintel, a high-window halo falling from the top and a planning-map cross grid; body text is set in a serif with wide leading, and scripture in Kai script. ∴ is its only ornament: it marks level-2 headings, the page title and horizontal rules.

The only animation is the reading progress bar at the bottom: no scanlines, glitch text or drifting glows.

Origin

Author: Marina Malinti

Usage

This template has no parameters. Add the following at the very top of the page source:

{{Theme-VGR}}

The whole page (header, sidebars, content card, footer) switches to the Canon Zone theme.

Component tokens

The page components (.vgr-title-block, .rec-card, .rec-subhead, .rec-intro, .novel-track, .rec-soon and others) are defined in section 8 of MediaWiki:Common.css and work on any page. This theme only resets the tokens below; pages without a theme use the defaults in Common.css (Archive Zone look).

Token	Value	Used for
--c-surface	--paper-sunk mixed 25% into --paper-raised	Title block background; also the gap color between the two lintel lines
--c-lintel-line	rgba(193,225,166,0.22)	Second thin line of the lintel
--c-radius	var(--radius) (2px)	Corners of cards, anchor buttons and the title block
--c-mark	"∴"	Zone mark: tagline divider and above Coming Soon
--c-label-font	var(--font-latin)	Font of small labels (.rec-subhead, chapter numbers, Coming Soon)
--c-label-size / -weight / -spacing	15px / 600 / 0.18em	Label size, weight and tracking
--c-soon-style	italic	Font style of Coming Soon
--c-intro-border	3px double var(--accent)	Double left rule of .rec-intro
--c-title-bg	high-window halo + cross grid + --c-surface	Background of .vgr-title-block
--c-title-top / -shadow	3px solid var(--heading-bar) / double-line lintel	Title block top rule and lintel
--c-title-ink / -en-ink	var(--ink-bright) / var(--heading)	Main and secondary title colors in the title block
--c-chap-bg / -bg-hover	var(--paper-alt) / var(--color-surface-3)	Chapter card background and hover background
--c-chap-top / -lintel	3px solid var(--heading-bar) / var(--c-lintel-line)	Chapter card top rule and lintel line

Page components

With this theme on the page, the components below take on the Canon Zone look.

• Title block: .vgr-title-block (-cn / -en / -sub / -tagline). A page with a title block hides the default page title and table of contents
• Anchor bar: #rec-anchors
• Section: .rec-section, which only adds space above the section heading
• Epigraph: .rec-intro; small label: .rec-subhead (not a real heading, not in the TOC)
• Grid: .rec-grid + .rec-grid-2 / .rec-grid-4; card with description: .rec-card (title in .rec-card-title); compact link: .rec-link
• Chapter track: .novel-track / .novel-chap (.chap-no / .chap-pd / .chap-title / .chap-desc; unfinished chapters use .chap-upcoming)
• Placeholder: .rec-soon

Example

Series Title

Series Subtitle

A one-line introduction to the series

An optional epigraph.

Section One Section Two

Section One

A short introduction to this section.

Cards with descriptions

Entry title One or two sentences describing the entry.

Another entry One or two sentences describing the entry.

Compact links

Term one

Term two

Term three

Chapter I

Subtitle

Title

A sample chapter summary.

Chapter II

Subtitle

Title

A sample chapter summary.

Chapter III

Subtitle

Title

A sample chapter summary.

Chapter IV

Subtitle

Title

A sample chapter summary.

In progress

Section Two

Coming Soon

Code

Put {{Theme-VGR}} at the very top of the page, then build the body like this:

<div class="vgr-title-block">
<div class="vgr-title-cn">Series Title</div>
<div class="vgr-title-en">Series Subtitle</div>
<div class="vgr-title-sub">A one-line introduction to the series</div>
<div class="vgr-title-tagline">An optional epigraph.</div>
</div>

<div id="rec-anchors">
[[#Section One|Section One]]
[[#Section Two|Section Two]]
</div>

<div class="rec-section">
== Section One ==
<div class="rec-intro">A short introduction to this section.</div>

<div class="rec-subhead">Cards with descriptions</div>
<div class="rec-grid rec-grid-2">
<div class="rec-card"><span class="rec-card-title">[[Main Page|Entry title]]</span>
One or two sentences describing the entry.</div>
<div class="rec-card"><span class="rec-card-title">[[Main Page|Another entry]]</span>
One or two sentences describing the entry.</div>
</div>

<div class="rec-subhead">Compact links</div>
<div class="rec-grid rec-grid-4">
<div class="rec-link">[[Main Page|Term one]]</div>
<div class="rec-link">[[Main Page|Term two]]</div>
<div class="rec-link">[[Main Page|Term three]]</div>
</div>

<div class="novel-track">
<div class="novel-chap"><div class="chap-no">Chapter I</div><div class="chap-pd">Subtitle</div><div class="chap-title">Title</div><div class="chap-desc">A sample chapter summary.</div></div>
<div class="novel-chap"><div class="chap-no">Chapter II</div><div class="chap-pd">Subtitle</div><div class="chap-title">Title</div><div class="chap-desc">A sample chapter summary.</div></div>
<div class="novel-chap"><div class="chap-no">Chapter III</div><div class="chap-pd">Subtitle</div><div class="chap-title">Title</div><div class="chap-desc">A sample chapter summary.</div></div>
<div class="novel-chap"><div class="chap-no">Chapter IV</div><div class="chap-pd">Subtitle</div><div class="chap-title">Title</div><div class="chap-desc">A sample chapter summary.</div></div>
<div class="novel-chap chap-upcoming">In progress</div>
</div>
</div>

<div class="rec-section">
== Section Two ==
<div class="rec-soon">Coming Soon</div>
</div>

• The two section headings in the example are written in HTML so they stay out of this page's TOC; on a real page use == Section One == as in the code above.
• A title block wrapped in <div class="vgr-demo"> does not hide the page title or TOC; it is for documentation pages only.
• The old mini-block rec-card, mini-block-title and mini-block-list classes still work, but new pages should use the classes above.

Test

A body paragraph with an internal link, a red link, some inline code and bold text.

A scripture passage or epigraph is set in Kai script with a double line on the left.

---

Subheading 3

Subheading 4

Subheading 5

Subheading 6

Event	S.C.	O.
Sample event A	1999	0
Sample event B	2021.05.14	22.05.14