Template:Theme-STR
Description
Theme-STR is the shared theme for Setting Zone pages on HUIJIA FUN (myths, entities and the Way). It follows the Setting Zone (night) palette of the VGR Design System: a Dipfield violet-black ground, Plurimod light-green headings, green-leaning sidebar links and a pale Dipfield violet accent. The content card keeps its 40px grid lines and scanlines and adds corner markers; body text is set in LXGW Neo ZhiSong.
The Setting Zone always uses a dark theme and the Archive Zone (Theme-HJ) always uses a light one, so readers can tell fiction from reality by the background alone.
Origin
Author: Marina Malinti
Note
To use this theme on a page, simply add the following code directly to the page's source code:
{{Theme-STR}}
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-radius |
var(--radius) (6px) |
Corners of cards, anchor buttons and the title block |
--c-mark |
"◈" |
Zone mark: tagline divider and above Coming Soon |
--c-label-font |
var(--font-hud) |
Font of small labels (.rec-subhead, chapter numbers, Coming Soon)
|
--c-label-size / -weight / -spacing |
13px / 400 / 0.16em |
Label size, weight and tracking |
--c-soon-style |
normal |
Font style of Coming Soon |
--c-intro-border |
4px solid rgba(0,163,108,0.6) |
Left rule of .rec-intro
|
--c-title-bg |
40px grid lines + --accent-tint |
Background of .vgr-title-block
|
--c-title-top / -shadow |
1px solid var(--accent) / none |
Title block top rule and lintel |
--c-title-ink / -en-ink |
var(--ink) / var(--accent) |
Main and secondary title colors in the title block |
--c-chap-bg / -bg-hover |
var(--paper-raised) / var(--color-surface-3) |
Chapter card background and hover background |
--c-chap-top / -lintel |
3px solid var(--accent) / transparent |
Chapter card top rule and lintel line |
Page components
With this theme on the page, the components below take on the Worldview 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
Section One
Section Two
Code
Put {{Theme-STR}} 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-titleandmini-block-listclasses 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. This inline color should stay gold.
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 |
