Template:Theme-HJ: Difference between revisions

From HUIJIA FUN
← Older edit
VisualWikitext
Design System and Theme updated to V5.0
Sync with zh: ink-green headings; 1px heading rules (full width on h1/h2, fading on h3-h6); Archive Zone mark on h2; no page-title rule; flat language-variant button and dropdown; English-only copy labels
 
Line 41: Line 41:
     --link-new: #A8432F;
     --link-new: #A8432F;
     --focus: #002F9C;
     --focus: #002F9C;
     --heading-bar: #C8D8C8;  /* graded rules under headings */
    --heading: #0F3D27;      /* heading text: ink green 12.2:1 */
     --heading-bar: #C8D8C8;  /* rule under sidebar group names */
    --heading-line: #8FB39A;  /* heading rules: full width on h1/h2, fading from h3 to h6 */
     --dot: #A3B1A8;          /* dot pattern on the content card */
     --dot: #A3B1A8;          /* dot pattern on the content card */


Line 95: Line 97:
     --link-new: #F0907E;
     --link-new: #F0907E;
     --focus: #8FB0FF;
     --focus: #8FB0FF;
    --heading: #D2E8C6;
     --heading-bar: #2F4033;
     --heading-bar: #2F4033;
    --heading-line: #4F7559;
     --dot: #2A352E;
     --dot: #2A352E;
     color-scheme: dark;
     color-scheme: dark;
Line 272: Line 276:
}
}
#mw-content-block .mw-portlet li.selected a {
#mw-content-block .mw-portlet li.selected a {
    border-bottom: 2px solid var(--accent) !important;
     box-shadow: none !important;
     box-shadow: none !important;
}
}
#mw-content-block .mw-portlet li a:hover { color: var(--ink) !important; }
#mw-content-block .mw-portlet li a:hover { color: var(--ink) !important; }
/* Language variant button: remove the underline the skin puts under the label; remove the skin's pink shadow from the dropdown */
#p-variants-desktop h3,
#p-variants-desktop-label { border-bottom: none !important; box-shadow: none !important; }
#p-variants-desktop .dropdown { box-shadow: none !important; }


/* Tabber (e.g. the Main Page "Site info / Create a page" tabs) */
/* Tabber (e.g. the Main Page "Site info / Create a page" tabs) */
Line 287: Line 295:
}
}


/* === 8. Headings === */
/* === 8. Headings ===
  Text in ink green (--heading). The page title has no rule. h1/h2: a full-width 1px green-grey rule; h2 gets the Archive Zone mark ■.
  h3-h6: a rule of the same color and weight (1px) fading out to the right, shorter and fainter at each level (same approach as Theme-VGR, in Archive Zone green-grey). */
h1.firstHeading {
h1.firstHeading {
     font-family: var(--font-serif);
     font-family: var(--font-serif);
Line 293: Line 303:
     font-weight: 600;
     font-weight: 600;
     line-height: 1.3;
     line-height: 1.3;
     color: var(--ink) !important;
     color: var(--heading) !important;
     letter-spacing: 0;
     letter-spacing: 0.02em;
     border-bottom: 4px solid var(--heading-bar);
     border-bottom: none !important;
     padding-bottom: var(--space-2);
     padding-bottom: 10px;
     margin-bottom: var(--space-6);
     margin-bottom: var(--space-6);
     text-wrap: balance;
     text-wrap: balance;
Line 309: Line 319:
     font-family: var(--font-serif) !important;
     font-family: var(--font-serif) !important;
     font-weight: 600;
     font-weight: 600;
     color: var(--ink) !important;
     color: var(--heading) !important;
     letter-spacing: 0;
     letter-spacing: 0.02em;
     text-wrap: balance;
     text-wrap: balance;
     padding-bottom: var(--space-2);
     padding-bottom: var(--space-2);
     overflow: hidden;
     overflow: hidden;
    border: none !important;
}
}


/* Graded rules: full width under h1 and h2; from h3 down, shorter and fainter at each level */
/* h1/h2: full-width 1px rule, same color and weight as the h3-h6 fading rules */
.mw-parser-output h1,
.mw-parser-output h2 {
    background: linear-gradient(var(--heading-line) 0 0) left bottom / 100% 1px no-repeat;
}
.mw-parser-output h1 {
.mw-parser-output h1 {
     font-size: 26px;
     font-size: 26px;
     line-height: 1.3;
     line-height: 1.3;
    border-bottom: 4px solid var(--heading-bar) !important;
     margin: var(--space-8) 0 var(--space-3);
     margin: var(--space-8) 0 var(--space-3);
}
}
Line 326: Line 340:
     font-size: 23px;
     font-size: 23px;
     line-height: 1.35;
     line-height: 1.35;
    border: none !important;
    border-bottom: 4px solid var(--heading-bar) !important;
     margin: var(--space-8) 0 var(--space-3);
     margin: var(--space-8) 0 var(--space-3);
}
}
/* Archive Zone mark: a small solid square (drawn in CSS, font-independent, matching the sidebar ■) */
.mw-parser-output h2::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 12px;
    vertical-align: 0.2em;
    background: var(--accent);
}
.toc h2::before, #toc h2::before, .mw-parser-output .toctitle h2::before { content: none; display: none; }
.toc h2, #toc h2, .mw-parser-output .toctitle h2 { background: none; }
.mw-parser-output h3 {
.mw-parser-output h3 {
     font-size: 19px;
     font-size: 19px;
Line 338: Line 363:
     font-size: 17px;
     font-size: 17px;
     line-height: 1.5;
     line-height: 1.5;
    color: var(--ink) !important;
     margin: var(--space-4) 0 var(--space-2);
     margin: var(--space-4) 0 var(--space-2);
}
}
Line 343: Line 369:
     font-size: 15px;
     font-size: 15px;
     line-height: 1.5;
     line-height: 1.5;
    color: var(--ink) !important;
     margin: var(--space-4) 0 var(--space-1);
     margin: var(--space-4) 0 var(--space-1);
}
}
Line 353: Line 380:
     margin: var(--space-4) 0 var(--space-1);
     margin: var(--space-4) 0 var(--space-1);
}
}
/* h3-h6: fade out to the right */
.mw-parser-output h3,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h5,
.mw-parser-output h6 {
.mw-parser-output h6 { position: relative; }
    border: none !important;
    position: relative;
}
.mw-parser-output h3::after,
.mw-parser-output h3::after,
.mw-parser-output h4::after,
.mw-parser-output h4::after,
Line 369: Line 395:
     left: 0;
     left: 0;
     bottom: 0;
     bottom: 0;
     height: 4px;
     background: linear-gradient(90deg, var(--heading-line), transparent);
    background-color: var(--heading-bar);
    border-radius: 2px;
}
}
.mw-parser-output h3::after { width: 80%; opacity: 1; }
.mw-parser-output h3::after { width: 85%; height: 1px; }
.mw-parser-output h4::after { width: 60%; opacity: 0.8; }
.mw-parser-output h4::after { width: 65%; height: 1px; opacity: 0.8; }
.mw-parser-output h5::after { width: 40%; opacity: 0.6; }
.mw-parser-output h5::after { width: 45%; height: 1px; opacity: 0.7; }
.mw-parser-output h6::after { width: 20%; opacity: 0.4; }
.mw-parser-output h6::after { width: 25%; height: 1px; opacity: 0.6; }


#personal h2,
#personal h2,
Line 598: Line 622:
     window.__hjThemeLoaded = true;
     window.__hjThemeLoaded = true;


    var isZh = (document.documentElement.lang || "").toLowerCase().indexOf("zh") === 0;
     var LABEL = { copy: "Copy", done: "Copied", fail: "Copy failed" };
     var LABEL = isZh ? { copy: "复制", done: "已复制", fail: "请手动复制" }
                    : { copy: "Copy", done: "Copied", fail: "Copy failed" };


     function initProgressBar() {
     function initProgressBar() {
Line 668: Line 690:
</includeonly><noinclude>{{Theme-HJ}}
</includeonly><noinclude>{{Theme-HJ}}
==Description==
==Description==
'''Theme-HJ''' is the theme for HUIJIA FUN's Archive Zone and the site-wide default pages, built strictly on the VGR Design System. Its features: a cool, green-tinted grey paper ground, a "Huijia Green" accent, square corners and no shadows; the content card carries a dot pattern, and headings sit on rules that get shorter and fainter at each level.
'''Theme-HJ''' is the theme for HUIJIA FUN's Archive Zone and the site-wide default pages, built strictly on the VGR Design System. Its features: a cool, green-tinted grey paper ground, a "Huijia Green" accent, square corners and no shadows; the content card carries a dot pattern, and headings are set in ink green on thin green-grey rules: full width under level-1 and level-2 headings (level 2 also carries the Archive Zone mark ■), fading out to the right and getting shorter at each level below.


==Origin==
==Origin==

Latest revision as of 10:35, 13 October 2026

Description

Theme-HJ is the theme for HUIJIA FUN's Archive Zone and the site-wide default pages, built strictly on the VGR Design System. Its features: a cool, green-tinted grey paper ground, a "Huijia Green" accent, square corners and no shadows; the content card carries a dot pattern, and headings are set in ink green on thin green-grey rules: full width under level-1 and level-2 headings (level 2 also carries the Archive Zone mark ■), fading out to the right and getting shorter at each level below.

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-HJ}}

Test

A body paragraph with an internal link, a red link and some inline code. English italic stays italic; 中文不会被压斜。

Subheading 3

Subheading 4

Subheading 5
Subheading 6
Event S.C. O.
Sample event A 1999 0
Sample event B 2021 22 
{{Theme-HJ}}

Test 2

Subheading 3

Subheading 4

Subheading 5
Subheading 6
Retrieved from "https://en.huijia.fun/index.php?title=Template:Theme-HJ&oldid=198"