Template:Theme-STR: Difference between revisions

From HUIJIA FUN
← Older edit
VisualWikitext
Code updated to V3.0 version
Sync with zh: component tokens (section 2b) for Common.css page components; docs: component tokens and page-component demo; English-only copy labels
 
Line 135: Line 135:


     color-scheme: dark;
     color-scheme: dark;
}
/* === 2b. Component tokens: read by the page components in Common.css section 8 (title block, cards, chapter track...) === */
:root,
html.skin-theme-clientpref-night {
    --c-radius: var(--radius);
    --c-mark: "◈";
    --c-label-font: var(--font-hud);
    --c-label-size: 13px;
    --c-label-weight: 400;
    --c-label-spacing: 0.16em;
    --c-soon-style: normal;
    --c-intro-border: 4px solid rgba(0, 163, 108, 0.6);
    --c-title-bg:
        linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--accent-tint);
    --c-title-top: 1px solid var(--accent);
    --c-title-shadow: none;
    --c-title-ink: var(--ink);
    --c-title-en-ink: var(--accent);
    --c-chap-bg: var(--paper-raised);
    --c-chap-bg-hover: var(--color-surface-3);
    --c-chap-top: 3px solid var(--accent);
    --c-chap-lintel: transparent;
}
}


Line 1,001: Line 1,026:


     var reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     var reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    var isZh = (document.documentElement.lang || "").toLowerCase().indexOf("zh") === 0;
     var LABEL = { copy: "COPY", done: "COPIED", fail: "FAILED" };
     var LABEL = isZh ? { copy: "复制", done: "已复制", fail: "请手动复制" }
                    : { copy: "COPY", done: "COPIED", fail: "FAILED" };


     function killStickyHeader() {
     function killStickyHeader() {
Line 1,105: Line 1,128:
To use this theme on a page, simply add the following code directly to the page's source code:
To use this theme on a page, simply add the following code directly to the page's source code:
<pre>{{Theme-STR}}</pre>
<pre>{{Theme-STR}}</pre>
==Component tokens==
The page components (<code>.vgr-title-block</code>, <code>.rec-card</code>, <code>.rec-subhead</code>, <code>.rec-intro</code>, <code>.novel-track</code>, <code>.rec-soon</code> and others) are defined in section 8 of <code>MediaWiki:Common.css</code> 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).
{| class="wikitable"
! Token !! Value !! Used for
|-
| <code>--c-radius</code> || <code>var(--radius)</code> (6px) || Corners of cards, anchor buttons and the title block
|-
| <code>--c-mark</code> || <code>"◈"</code> || Zone mark: tagline divider and above Coming Soon
|-
| <code>--c-label-font</code> || <code>var(--font-hud)</code> || Font of small labels (<code>.rec-subhead</code>, chapter numbers, Coming Soon)
|-
| <code>--c-label-size</code> / <code>-weight</code> / <code>-spacing</code> || <code>13px</code> / <code>400</code> / <code>0.16em</code> || Label size, weight and tracking
|-
| <code>--c-soon-style</code> || <code>normal</code> || Font style of Coming Soon
|-
| <code>--c-intro-border</code> || <code>4px solid rgba(0,163,108,0.6)</code> || Left rule of <code>.rec-intro</code>
|-
| <code>--c-title-bg</code> || 40px grid lines + <code>--accent-tint</code> || Background of <code>.vgr-title-block</code>
|-
| <code>--c-title-top</code> / <code>-shadow</code> || <code>1px solid var(--accent)</code> / <code>none</code> || Title block top rule and lintel
|-
| <code>--c-title-ink</code> / <code>-en-ink</code> || <code>var(--ink)</code> / <code>var(--accent)</code> || Main and secondary title colors in the title block
|-
| <code>--c-chap-bg</code> / <code>-bg-hover</code> || <code>var(--paper-raised)</code> / <code>var(--color-surface-3)</code> || Chapter card background and hover background
|-
| <code>--c-chap-top</code> / <code>-lintel</code> || <code>3px solid var(--accent)</code> / <code>transparent</code> || 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''': <code>.vgr-title-block</code> (<code>-cn</code> / <code>-en</code> / <code>-sub</code> / <code>-tagline</code>). A page with a title block hides the default page title and table of contents
* '''Anchor bar''': <code>#rec-anchors</code>
* '''Section''': <code>.rec-section</code>, which only adds space above the section heading
* '''Epigraph''': <code>.rec-intro</code>; '''small label''': <code>.rec-subhead</code> (not a real heading, not in the TOC)
* '''Grid''': <code>.rec-grid</code> + <code>.rec-grid-2</code> / <code>.rec-grid-4</code>; '''card with description''': <code>.rec-card</code> (title in <code>.rec-card-title</code>); '''compact link''': <code>.rec-link</code>
* '''Chapter track''': <code>.novel-track</code> / <code>.novel-chap</code> (<code>.chap-no</code> / <code>.chap-pd</code> / <code>.chap-title</code> / <code>.chap-desc</code>; unfinished chapters use <code>.chap-upcoming</code>)
* '''Placeholder''': <code>.rec-soon</code>
===Example===
<div class="vgr-demo">
<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">
[[#demo-section-1|Section One]]
[[#demo-section-2|Section Two]]
</div>
<div class="rec-section">
<html><div class="mw-heading mw-heading2"><h2 id="demo-section-1">Section One</h2></div></html>
<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">
<html><div class="mw-heading mw-heading2"><h2 id="demo-section-2">Section Two</h2></div></html>
<div class="rec-soon">Coming Soon</div>
</div>
</div>
===Code===
Put <code><nowiki>{{Theme-STR}}</nowiki></code> at the very top of the page, then build the body like this:
<pre>
<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>
</pre>
* 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 <code><nowiki>== Section One ==</nowiki></code> as in the code above.
* A title block wrapped in <code><nowiki><div class="vgr-demo"></nowiki></code> does not hide the page title or TOC; it is for documentation pages only.
* The old <code>mini-block rec-card</code>, <code>mini-block-title</code> and <code>mini-block-list</code> classes still work, but new pages should use the classes above.


==Test==
==Test==

Latest revision as of 10:35, 13 October 2026

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

Series Title
Series Subtitle
A one-line introduction to the series
An optional epigraph.

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-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-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. 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
Retrieved from "https://en.huijia.fun/index.php?title=Template:Theme-STR&oldid=199"