Main Page: Difference between revisions

From HUIJIA FUN
Edit
New main page design
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Theme-HJ}}
{{Theme-HJ}}__NOTOC__
{{Notice}}
<html><style>
<div style="font-size: 26px;margin-top: 6px;text-align: center;">'''Welcome to「HUIJIA FUN - Plurimod Student Union Official Website」'''</div>
/* HUIJIA FUN Main Page (English): table-of-contents layout
<div style="font-size: 18px;margin-bottom: 6px;text-align: center;">''The Parallel Universe Rooted in [[Beijing Huijia Private School|Huijia Academy]]'' - A Gesamtkunstwerk Work by [[Marina Malinti]]</div>
* Mirrors huijia.fun 首页. Reads only Theme-HJ tokens; no shadows; hover uses colour, accent rule and arrow shift. */
<div style="font-family:Huiwen;text-align: center;">· Chinese Branch Website: https://huijia.fun</div>
<br>
<div class="mini-block">
<tabber>
|-|Website Information=
<br>
[[File:HUIJIA LOGO.png|150px|frameless|right]]
<span class="mini-block-title">Welcome to HUIJIA FUN</span>


HUIJIA FUN began as a fan wiki dedicated to Beijing Huijia Private School and has since grown into something more - Today it serves as the '''official archive and Intellectual Property''' of [[Marina Malinti]] built upon the culture of Huijia as its spiritual origin, and also get recognized by Huijia's principal.
h1.firstHeading {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    margin: 0 !important; padding: 0 !important;
}


Whatever, This site is home to the '''[[Verdant Green Revelation]]''': A Gesamtkunstwerk (Total Art) IP encompassing novel series, music albums, constructed language [[Pre-Diphic]], OtoMAD works, and even a speculative worldview rooted in Huijia Academy.
.hf-home { max-width: 920px; margin: 0 auto; }
.hf-home .hf-toc > p, .hf-home .hf-start > p { display: none; }


This website is '''non-profit''', '''non-advertisement''', and '''non-membership'''. It is largely created and maintained by [[Marina Malinti]] on behalf of the [[User:PlurimodSU|Plurimod Student Union]]. For questions or consultation, please contact me directly through: a@huijia.fun
/* —— Masthead —— */
.hf-mast {
    text-align: center;
    padding: var(--space-8) var(--space-4) var(--space-6);
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--rule);
}
.hf-mast-name {
    font-family: var(--font-latin);
    font-size: 44px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.24em;
    padding-left: 0.24em;
    color: var(--accent);
}
.hf-mast-line {
    font-family: var(--font-serif);
    font-size: 17px;
    letter-spacing: 0.02em;
    color: var(--ink);
    margin-top: var(--space-2);
}
.hf-mast-meta {
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    margin-top: var(--space-3);
}
.hf-mast-meta .hf-dot { margin: 0 var(--space-2); }


|-|Create a Page=
/* —— Contents: area rows —— */
<br>
.hf-toc {
<div style="text-align:center"> '''Remember! This website is publicly accessible on the internet!'''
    border-top: 2px solid var(--accent);
    margin-bottom: var(--space-8);
}
.hf-zone-block { border-bottom: 1px solid var(--rule); }


I fully support and actively encourage fan editing. To ensure resource reliability, information neutrality, and compliance with the '''Creative Commons''' license and copyright, please make sure you have read the [[Guideline]] and understand the community and editing rules. Before writing a page, please be aware that this site follows the '''CC BY-SA''' license and maintains relatively rigorous content standards.
.hf-row {
    position: relative;
    display: grid;
    grid-template-columns: 3.5em minmax(0, 1fr) 2em;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-2);
    transition: background-color 0.2s ease;
}
.hf-row::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.25s ease;
}
.hf-row:hover,
.hf-row:focus-within { background-color: var(--accent-tint); }
.hf-row:hover::before,
.hf-row:focus-within::before { transform: scaleY(1); }


Ready? Create a page through the section below!
.hf-num {
{{#createpage:}}
    font-family: var(--font-latin);
</div>
    font-size: 24px;
    font-weight: 600;
    color: var(--ink-muted);
    text-align: center;
    transition: color 0.2s ease;
}
.hf-row:hover .hf-num,
.hf-row:focus-within .hf-num { color: var(--accent); }


|-|Recent Events=
.hf-zone {
<br>
    font-family: var(--font-serif);
<div style="font-size: 70px; font-weight: 200; text-align: right; height: 0; color: #f1f1f1; user-select: none; margin-bottom: 0">{{{background|Recent events}}}</div>
    font-size: 22px;
{{Section
    font-weight: 600;
|file=[[File:Bittersweet Memories.jpg]]
}
|title=Release of Huijia Class of 2024 Graduation Song – Bittersweet Memories
.hf-zone a { color: var(--ink) !important; }
|content="Bittersweet Memories" is the graduation song for Huijia's Class of 2024. It is a song that expresses mixed feelings about past beautiful memories in Huijia and future farewells.<br>Upon the song's release, the graduation ceremony for Huijia School's Class of 2024 would be also witnessed. This song would become a lasting memento, serving as a precious gift upon the graduation.
.hf-zone a::after {
|link=https://youtu.be/BbaEMZn9psQ
    content: "";
}}
    position: absolute;
 
    inset: 0;
</tabber>
    z-index: 1;
</div>
}
<div class="mini-block-container mini-block-list">
.hf-alt {
<div class="mini-block">
    font-family: var(--font-serif);
<div style="font-size: 70px; font-weight: 200; text-align: right; height: 0; color: #f1f1f1; user-select: none; margin-bottom: 0">Works</div>
    font-size: 14px;
<span class="mini-block-title">[[Works Area]]</span>
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin-left: var(--space-2);
}
.hf-desc {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-muted);
    margin-top: 2px;
}
.hf-arrow {
    font-family: var(--font-sans);
    font-size: 20px;
    color: var(--ink-muted);
    transition: transform 0.25s ease, color 0.2s ease;
}
.hf-row:hover .hf-arrow,
.hf-row:focus-within .hf-arrow { transform: translateX(6px); color: var(--accent); }


''The creative output, and is still ongoing.''
/* —— Sub-areas: one button per line —— */
.hf-home ul.hf-subs {
    list-style: none;
    display: grid;
    gap: var(--space-1);
    margin: 0 0 var(--space-4);
    padding: 0 var(--space-2) 0 calc(3.5em + var(--space-4) + var(--space-2));
}
.hf-home ul.hf-subs li {
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: var(--radius-sm);
    transition: background-color 0.4s cubic-bezier(0.22, 0.58, 0.12, 0.98);
}
.hf-home ul.hf-subs li a {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px 10px 16px;
    font-family: var(--font-serif);
    font-size: 17px;
    letter-spacing: 0.04em;
    color: var(--ink) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
/* short accent rule on the left */
.hf-home ul.hf-subs li a::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--accent);
    transform: scaleY(0);
    transition: transform 0.25s ease;
}
/* arrow on the right (hidden from screen readers) */
.hf-home ul.hf-subs li a::after {
    content: "→";
    content: "→" / "";
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ink-muted);
    transition: transform 0.25s ease, color 0.2s ease;
}
.hf-home ul.hf-subs li:hover,
.hf-home ul.hf-subs li:focus-within { background-color: var(--accent-tint); }
.hf-home ul.hf-subs li:active { background-color: var(--rule); }
.hf-home ul.hf-subs li:hover a,
.hf-home ul.hf-subs li:focus-within a { color: var(--accent) !important; }
.hf-home ul.hf-subs li:hover a::before,
.hf-home ul.hf-subs li:focus-within a::before { transform: scaleY(1); }
.hf-home ul.hf-subs li:hover a::after,
.hf-home ul.hf-subs li:focus-within a::after { transform: translateX(4px); color: var(--accent); }


<li class="mdui-ripple">[[Works Area|→ Enter Works Area]]</li>
/* —— Start here —— */
</div>
.hf-start {
<div class="mini-block">
    display: flex;
<div style="font-size: 70px; font-weight: 200; text-align: right; height: 0; color: #f1f1f1; user-select: none; margin-bottom: 0">Worldview</div>
    flex-wrap: wrap;
<span class="mini-block-title">[[Worldview Area]]</span>
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-8);
    background: var(--paper-sunk);
    border-left: 3px solid var(--accent);
    font-family: var(--font-sans);
    font-size: 15px;
}
.hf-start-label {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--ink);
}


''The fictional universe of VGR - myths, mankind, and canons.''
/* —— Footer —— */
.hf-foot {
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--rule);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.9;
    color: var(--ink-muted);
}


<li class="mdui-ripple">[[:Category:Mythos|Mythos]]</li>
/* —— Keyboard focus —— */
<li class="mdui-ripple">[[:Category:Entity|Entity]]</li>
.hf-zone a:focus-visible { outline: none; }
<li class="mdui-ripple">[[:Category:Cosmology|Cosmology]]</li>
.hf-row:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
</div>
<div class="mini-block">
<div style="font-size: 70px; font-weight: 200; text-align: right; height: 0; color: #f1f1f1; user-select: none; margin-bottom: 0">Archive</div>
<span class="mini-block-title">[[Archive Area]]</span>


''The real Huijia - documents, footage, and the origin of it all.''
/* —— Mobile —— */
@media screen and (max-width: 850px) {
    .hf-mast-name { font-size: 32px; letter-spacing: 0.14em; padding-left: 0.14em; }
    .hf-row { grid-template-columns: 2.5em minmax(0, 1fr) 1.5em; }
    .hf-home ul.hf-subs { padding-left: calc(2.5em + var(--space-4) + var(--space-2)); }
}


<li class="mdui-ripple">[[:Category:Record|Record]]</li>
/* —— Reduced motion —— */
<li class="mdui-ripple">[[:Category:Origin|Origin]]</li>
@media (prefers-reduced-motion: reduce) {
<li class="mdui-ripple">[[:Category:Tangent|Tangent]]</li>
    .hf-home *, .hf-home *::before, .hf-home *::after { transition: none !important; }
    .hf-row:hover .hf-arrow,
    .hf-home ul.hf-subs li:hover a::after { transform: none; }
}
</style></html>
<div class="hf-home">
<div class="hf-mast">
<div class="hf-mast-name">HUIJIA FUN</div>
<div class="hf-mast-line">Portfolio and archive of ''[[Verdant Green Revelation]]''</div>
<div class="hf-mast-meta plainlinks">Rooted in [[Beijing Huijia Private School|Huijia Academy]]<span class="hf-dot">·</span>Chinese Branch: [https://huijia.fun huijia.fun]</div>
</div>
</div>
<div class="hf-toc">
<div class="hf-zone-block">
<div class="hf-row"><div class="hf-num">I</div><div><span class="hf-zone">[[Canon Area]]</span><span class="hf-desc">The creative works of ''Verdant Green Revelation''</span></div><span class="hf-arrow" aria-hidden="true">→</span></div>
</div>
</div>
<div class="mini-block-container mini-block-list">
<div class="hf-zone-block">
<div class="mini-block">
<div class="hf-row"><div class="hf-num">II</div><div><span class="hf-zone">[[Worldview Area]]</span><span class="hf-desc">An encyclopedia of the world of Dipfield City</span></div><span class="hf-arrow" aria-hidden="true">→</span></div>
<big>Quick Guide</big>
<ul class="hf-subs">
 
<li>[[:Category:Mythology|Mythology]]</li>
Welcome - whether you arrived from [[Dipfield City]] or the Eartho.
<li>[[:Category:Entity|Entity]]</li>
 
<li>[[:Category:Cosmology|Cosmology]]</li>
HUIJIA FUN is organized into three areas. The '''[[Works Area]]''' collects all creative output actively produced by the creator: novels, music albums, and more — if it was made, it lives here. The '''[[Worldview Area]]''' documents the fictional universe of [[Verdant Green Revelation]]: its myths ('''Mythos'''), characters and places ('''Entity'''), and canonical settings ('''Lore'''). The '''[[Archive Area]]''' preserves the real Huijia: historical documents ('''Record'''), original footage and campus materials ('''Origin'''), and other derivative works ('''Tangent''').
</ul>
 
The real Huijia Academy is the root. The VGR universe is what grew from it.
 
''[[Quick Guide|Click here to jump to the Quick Guide]]''.
</div>
<div class="mini-block">
<big>Side Guide</big>
 
[[Works Area|'''''I want to explore the creative works of Verdant Green Revelation!''''']]
 
[[:Category:Novel|''I want to read the '''VGR novel series'''!'']]
 
[[:Category:Album|''I want to listen to the '''Green Revelation''' music albums!'']]
 
[[:Category:OtoMAD|''I want to watch the '''Huijia OtoMAD''' works!'']]
 
[[Worldview Area|''What is the '''Huijia Worldview''' — where do I start?'']]
 
[[Trinitarian Laws of Huashael Practice|''Why could I possibly see students '''holding up hexagrams''' on campus?'']]
 
[[Wang Zhize|''Who is the '''actual founder and absolute origin''' of Huijia Group?'']]
 
[[Color Code|''How can I '''design''' like Huijia and Plurimod? (Color Code)'']]
</div>
</div>
<div class="hf-zone-block">
<div class="hf-row"><div class="hf-num">III</div><div><span class="hf-zone">[[Archive Area]]</span><span class="hf-desc">The real Huijia Academy</span></div><span class="hf-arrow" aria-hidden="true">→</span></div>
<ul class="hf-subs">
<li>[[:Category:Record|Record]]</li>
<li>[[:Category:Origin|Origin]]</li>
<li>[[:Category:Tangent|Tangent]]</li>
</ul>
</div>
</div>
<div class="mini-block-container mini-block-list">
<div class="mini-block">
<big>Guidelines</big>
</div>
</div>
<div class="mini-block">
<div class="hf-start"><span class="hf-start-label">First time here?</span>[[Verdant Green Revelation|About the series]] [[Quick Guide]] [[Guidelines]]</div>
<big>Taskbar</big>


</div>
== About this site ==
</div>
HUIJIA FUN began as a playful student wiki centred on [[Beijing Huijia Private School|Huijia Academy]]. Today it is the portfolio and archive of [[Marina Malinti]], and the home of ''[[Verdant Green Revelation]]'': a Gesamtkunstwerk (total artwork) series spanning novels, music albums, the constructed language [[Pre-Diphic]], and a world rooted in Huijia Academy.
<div class="mini-block-container mini-block-list">
<div class="mini-block">
<big>Wanna Join Us?</big>


</div>
The site is non-profit, ad-free and membership-free. It is maintained by [[Marina Malinti]] on behalf of the [[User:PlurimodSU|Plurimod Student Union]], and its content is published under CC BY-SA.
<div class="mini-block">
<big>Special Thanks & Tributes</big>


Before collaborating, please read the [[Guidelines]].
<div class="hf-foot">
Contact: [email protected]<br>
Thanks to: LastW!sh and Trooperr9863625badun (writing), Akatsuki0702 (framework), Bululu and JohnDing (world-building), 1S0d1uM1 and Hewu888 (articles)
</div>
</div>
</div>
</div>
[[Category:Hub]]
[[Category:Hub]]

Latest revision as of 22:52, 5 October 2026

HUIJIA FUN
Portfolio and archive of Verdant Green Revelation
I
Canon AreaThe creative works of Verdant Green Revelation
II
Worldview AreaAn encyclopedia of the world of Dipfield City
III
Archive AreaThe real Huijia Academy

About this site

HUIJIA FUN began as a playful student wiki centred on Huijia Academy. Today it is the portfolio and archive of Marina Malinti, and the home of Verdant Green Revelation: a Gesamtkunstwerk (total artwork) series spanning novels, music albums, the constructed language Pre-Diphic, and a world rooted in Huijia Academy.

The site is non-profit, ad-free and membership-free. It is maintained by Marina Malinti on behalf of the Plurimod Student Union, and its content is published under CC BY-SA.

Before collaborating, please read the Guidelines.

Contact: [email protected]
Thanks to: LastW!sh and Trooperr9863625badun (writing), Akatsuki0702 (framework), Bululu and JohnDing (world-building), 1S0d1uM1 and Hewu888 (articles)