929 lines
No EOL
33 KiB
HTML
929 lines
No EOL
33 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
|
||
<!-- Change your site title: (It is shown in the tab) -->
|
||
<title>AL13NH0SP1T4L</title>
|
||
|
||
<!-- Change your site description: (It is shown in Google results) -->
|
||
<meta content="My personal website!" name="description" />
|
||
|
||
<!-- Setting character encoding and viewport size. Do not remove. -->
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
||
<!-- FavIcon (small image in tab), change to any image you want: -->
|
||
<link href="favicon.ico" rel="icon" type="image/x-icon" />
|
||
|
||
<!-- CSS: -->
|
||
<!-- You will have to change this to "../style.css" if this HTML file is in a subfolder, to "../../style.css" if this HTML file is in 2 subfolders, etc. -->
|
||
<link href="./style.css" rel="stylesheet" />
|
||
|
||
|
||
<script>
|
||
// Template generated with petrapixel's layout generator.
|
||
// (Please do not remove this credit.)
|
||
console.log("%c Template generated with petrapixel's layout generator.", "font-size: 14pt;");
|
||
console.log("%c https://petrapixel.neocities.org/coding/layout-generator", "font-size: 14pt;");
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<!-- The next line is a skip-to-content link for keyboard users. Do not remove it! -->
|
||
<a href="#content" id="skip-to-content-link">Skip to content</a>
|
||
|
||
<div class="layout">
|
||
|
||
<!-- =============================================== -->
|
||
<!-- HEADER -->
|
||
<!-- =============================================== -->
|
||
|
||
<header>
|
||
<div class="header-image">
|
||
<img src="https://i.ibb.co/d4wzWNJw/tumblr-9521a9fc973bc72adeebdf473bee6653-94ca1a4f-540.png" alt="" />
|
||
</div>
|
||
<div class="header-content">
|
||
<div class="header-title"></div>
|
||
|
||
<!-- NAVIGATION -->
|
||
<nav>
|
||
<ul>
|
||
<li><a href="/homepage">Home</a></li>
|
||
<li><a href="/about">About Me</a></li>
|
||
<li><a href="/shrines">Shrines</a></li>
|
||
<li><a href="/resources">Resources</a></li>
|
||
<li>
|
||
<strong>More</strong>
|
||
<ul>
|
||
<li><a href="/paint">Games - Paint</a></li>
|
||
<li><a href="/kidpix">Games - Kidpix</a></li>
|
||
<li><a href="/secrets">Well of Secrets</a></li>
|
||
<li><a href="/fanworks">Archive of My Fanworks</a></li>
|
||
<li><a href="/links">Even More Links!</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
|
||
<main id="content"> <!-- Do NOT remove the ID here -->
|
||
|
||
|
||
|
||
<!-- =============================================== -->
|
||
<!-- MAIN CONTENT -->
|
||
<!-- =============================================== -->
|
||
|
||
|
||
<section>
|
||
<h1>
|
||
<a href="/fic/directory">Back</a>
|
||
|
||
</h1>
|
||
|
||
|
||
<h2>disintegration</h2>
|
||
|| Deeply odd and DEEPLY non-canon-compliant Negative Spirit backstory written before season 3 aired. You can tell by the fact that I called NS "Keeg". ("Keeg" here refers to the Original Negative Spirit here, not the baby one.) I still love it though.
|
||
|
||
<hr>
|
||
<em> The Great Sun’s love for its vessels is holistic; its warm presence </em>
|
||
</p><p align="center">
|
||
<em> wraps around </em>
|
||
</p><p align="center">
|
||
<em> every aspect of interdimensional existence, slithering into </em>
|
||
</p><p align="center">
|
||
<em> each unit of composition, swelling into atoms and </em>
|
||
</p><p align="center">
|
||
<em> bursting through atoms that cannot contain the magnitude </em>
|
||
</p><p align="center">
|
||
<em> of its adoration, its presence too grand, beyond </em>
|
||
</p><p align="center">
|
||
<em> the comprehension of any being ever brought to life </em>
|
||
</p><p align="center">
|
||
<em> so gracefully, so generously, by its embarking shadow; </em>
|
||
</p><p align="center">
|
||
<em> survival of our kind is contingent upon the length of its rays— </em>
|
||
</p><p align="center">
|
||
<em> upon the reach of its darkness, eternal darkness on the universal </em>
|
||
</p><p align="center">
|
||
<em> plane of residing, our souls fueled by its shaded light </em>
|
||
</p><p align="center">
|
||
<em> and only its shaded light. There shall be no cataclysm. </em>
|
||
</p><p align="center">
|
||
<em> There shall be no horror. The Great Sun unites. </em>
|
||
</p><p align="center">
|
||
<em> The Great Sun makes no distinction between </em>
|
||
</p><p align="center">
|
||
<em> its creations and the evolved external world. The Great Sun </em>
|
||
</p><p align="center">
|
||
<em> unites. The Great Sun </em>
|
||
</p><p align="center">
|
||
<em> loves, the Great Sun as love personified and elevated, </em>
|
||
</p><p align="center">
|
||
<em> its embrace bringing enlightenment and comfort and relief </em>
|
||
</p><p align="center">
|
||
<em> in abundance. Under the Great Sun there is only: </em>
|
||
</p><p align="center">
|
||
<em> copious abundance. Under the Great Sun, </em>
|
||
</p><p align="center">
|
||
<em> all is peaceful. </em>
|
||
</p><p align="center"> </p><p align="center">Excerpt from the Book of the Great Sun (1)</p><p align="center">by Kenn Kava,</p><p align="center">c. KHLAHH.ZOV (2)</p><p><br />
|
||
<br />
|
||
</p><p>—</p><p> </p><p>The decision to create life is the hardest decision known to the dimension.</p><p> </p><p>Yes, there is only tranquility in each Spirit’s surroundings, and the universe is infinite and calm and continuously expanding in every direction to spread its love and impact. Yes, the Spirits are almost invariably dedicated only to creation—-to exploring emotion and allowing it to pour out of oneself into art and literature, an outlet for the intensity at which the inhabitants of the dimension feel every possible sentiment. There are emotions Spirits experience that have not been discovered by any other civilization they know of. There are emotions that shake and wobble and unravel. Yes — this is true, and the difficulty lies in the sacrifice. The emotion lies in the sacrifice. Everything lies in the sacrifice. </p><p> </p><p>If Spirits had any concrete knowledge of or interactions with the Outsiders, beyond the simple affirmation that they exist, they would know that the Outsiders, like a hivemind, believe that creating new life is <em> easy. </em>The others use their bodies to do this, movement and breath, frames and solidity moving against frames and solidity in harmony, and this is understandable — it is what they want, it is all that the others know, so it is understandable — this dimension has no similar concept, though, as all intimacy is telepathic, a connection of minds blending-merging into one like pigment. So: no, the Outsiders have their belief in the simplicity that lies in birth — “birth”, but in the Space there is a consequential reality. This is perhaps its only flaw. For now.</p><p> </p><p>There is no physical reproduction here. To create life, at least two Spirits must extract vials of their energy and place it into a machine of creation, gift courtesy of the Sun. This energy is sacred, holds an aspect of personality or memory or skill that cannot be regained after extraction. It is worth it, most say. The energies combine, blur into ascension and form in it, rise from its smoke like mythical rebirth. Then: the resulting Spirit is forced into existence, the nature and strength of their powers contingent upon the amount of energy sources & the power they possess. Then: the resulting Spirit is presented with their name, adorned with four letters in two sections (3), like decoration, baubles springing from them. Then: the resulting Spirit, with its new life and personality and ability, begins their eternal existence. </p><p> </p><p>The dimension is a bit scarce. Populous enough to warrant cities and academia and residences, but — scarce. Everyone, regardless of where they come from, fears losing the things that make them uniquely <em> themselves. </em> Everyone in each universe has a fear of becoming something <em> other. </em>Even if it’s worth it, even if the beauty of creation outweighs the fright, this terror remains at some level. Omnipresent.</p><p><br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
</p><p align="center">—</p><p align="center"><br />
|
||
<br />
|
||
<br />
|
||
</p><p align="center">
|
||
<em> I think I find my lover, my soulmate— </em>
|
||
</p><p align="center">
|
||
<em> b’kehhal (4), all that is, the Great Sun-chosen </em>
|
||
</p><p align="center">
|
||
<em> embracing </em>
|
||
</p><p align="center">
|
||
<em> rejuvenating </em>
|
||
</p><p align="center">
|
||
<em> love that seeps into my energysoul </em>
|
||
</p><p align="center">
|
||
<em> in each aspect of this plane, in the orange gradient skies, </em>
|
||
</p><p align="center">
|
||
<em> in the unreachable mountains, </em>
|
||
</p><p align="center">
|
||
<em> in the warmth of each Spirit within, </em>
|
||
</p><p align="center">
|
||
<em> in the strokes of paint on my stone canvas, </em>
|
||
</p><p align="center">
|
||
<em> their hue and their hue only forming an eternal photograph. </em>
|
||
</p><p align="center">
|
||
<em> A moment that can never be forgotten, a moment that can be </em>
|
||
</p><p align="center">
|
||
<em> captured not only in love or the eyes of my lover, but also framed, </em>
|
||
</p><p align="center">
|
||
<em> also placed upon the walls of our home, a painting, a representation </em>
|
||
</p><p align="center">
|
||
<em> of devotion displayed for all to see. </em>
|
||
</p><p align="center"> </p><p align="center">
|
||
<em> Devotion. O, devotion. How can one </em>
|
||
</p><p align="center">
|
||
<em> persevere through the realization </em>
|
||
</p><p align="center">
|
||
<em> coveted by all, and not become </em>
|
||
</p><p align="center">
|
||
<em> completely and entirely devoted </em>
|
||
</p><p align="center">
|
||
<em> to the emotional experience of love? </em>
|
||
</p><p align="center"> </p><p align="center">
|
||
<em> There is permanence in the realization sequence (5)--- </em>
|
||
</p><p align="center">
|
||
<em> the instant that you discover your soulmate’s identity, </em>
|
||
</p><p align="center">
|
||
<em> the b’kehhal, the wholeness and completion of a magnitude </em>
|
||
</p><p align="center">
|
||
<em> beyond even these higher being’s comprehension, </em>
|
||
</p><p align="center">
|
||
<em> now unraveled. Revealed. This permanence flows beyond the obvious. </em>
|
||
</p><p align="center">
|
||
<em> These moments are designed to represent the potential of a bond. </em>
|
||
</p><p align="center">
|
||
<em> The unique aspects and desires of each individual, bleeding </em>
|
||
</p><p align="center">
|
||
<em> into something reunited. </em>
|
||
</p><p align="center">
|
||
<em> These moments are never abandoned. Mine remains in the back of my transparency, </em>
|
||
</p><p align="center">
|
||
<em> easily retrievable in my mindscape whenever I need its reminder. My realization </em>
|
||
</p><p align="center">
|
||
<em> is sewed onto the walls of my thoughts, inextricable now for it is a blessing, </em>
|
||
</p><p align="center">
|
||
<em> to have someone perfectly crafted for you, with the Great Sun’s mind focused only on </em>
|
||
</p><p align="center">
|
||
<em> you and your happiness. </em>
|
||
</p><p align="center"> </p><p align="center"><em> Love is inherently </em> vakha kelahhah — <em> this concept is not </em></p><p align="center">
|
||
<em> translatable to any other language. The closest thing the others have </em>
|
||
</p><p align="center">
|
||
<em> is: </em>
|
||
</p><p align="center"> “A conquer of healing. A body overwhelmed by joy. A savior. Generosity.</p><p align="center">Each phenomenon of an all-encompassing acceptance that can heal</p><p align="center">any wound or injury, that can enhance the textures of existence.”</p><p align="center">
|
||
<em> Love is inherently consuming. Love is inherently resurrection. </em>
|
||
</p><p align="center"> </p><p align="center"><em> -- </em>Poems of Devotion by</p><p align="center">Anya Vexa</p><p align="center"><br />
|
||
<br />
|
||
</p><p align="center">—</p><p> </p><p>You find out almost immediately after your creation that you are a historical figure. You are rare, you are unprecedented. You are <em> special. </em>Holy. Embraced by the Great Sun in a way that could never have been predicted:</p><p><br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
</p><p>(</p><p><br />
|
||
<br />
|
||
</p><p>KHALU ZOV OK (6)</p><p> </p><p>
|
||
<em> In the outskirts of N’Hal, the city surrounding the N’Hal hall — the first location in the Space that was created — there rests a calm, intimate commune of lovers. They rejected the concept of soulmates, and chose to love one another in an intricate system of relationships. They were not destined for each other; instead they fell in love on purpose, believing that, while soulmates may be important to others, getting to know someone and falling in love in a way that breaks destiny is a more elegant story. </em>
|
||
</p><p> </p><p>
|
||
<em> They live among one another in partial seclusion from the outside world. There is no shunning in the Space, but there is fear, and these individuals were simply too different to follow in the footsteps of their normal society. So: all thirteen left, moved to this land and expanded, building and building until they had a palace in which they could all be comfortable and harmonious. </em>
|
||
</p><p> </p><p>
|
||
<em> It was Alto Zova who first introduced the idea of procreating to the others. The discussions lasted two cycles. </em>
|
||
</p><p> </p><p>
|
||
<b> <em>What will we do if we lose something important, something crucial to our being?</em> </b>
|
||
</p><p> </p><p><b> <em> </em> </b> <em> It will be worth it. We are capable of bringing something beautiful into the world. </em></p><p> </p><p>
|
||
<b> <em>What will happen if something goes wrong? The maximum number of energy sources used in a creation ever recorded was seven. This is new territory. </em> </b>
|
||
</p><p> </p><p>
|
||
<em> Yes, things could go wrong, but what if we create something with extraordinary power solely from the clay of our love? What if we create something healing? What if we gain more than we lose? No matter what happens, we will love them. They will be the product of unforeseen faithfulness. </em>
|
||
</p><p> </p><p>
|
||
<b> <em>This is true. It is possible.</em> </b>
|
||
</p><p> </p><p>
|
||
<em> I’d even say it’s likely. </em>
|
||
</p><p> </p><p>
|
||
<b> <em>But what if it hurts them? What if they cannot handle it? What if they get overwhelmed?</em> </b>
|
||
</p><p> </p><p>
|
||
<em> Then we will aid them through it. There is nothing we cannot get through together. </em>
|
||
</p><p> </p><p>
|
||
<em> … </em>
|
||
</p><p>
|
||
<em> … </em>
|
||
</p><p>
|
||
<em> … </em>
|
||
</p><p>
|
||
<em> … </em>
|
||
</p><p> </p><p>
|
||
<b> <em>What do you think they’ll look like?</em> </b>
|
||
</p><p> </p><p>
|
||
<em> They will look pure. </em>
|
||
</p><p> </p><p>
|
||
<em> Zova states that most of them lost memories of their first few cycles in the Space. Their early years, gone. No: recreated. Crafted into something higher. They aren’t sure why it was almost universal amongst them. But, they say, it doesn’t matter. </em>
|
||
</p><p> </p><p>
|
||
<em> The result of this unrivaled amalgam was Keeg Bovo, a blue Spirit with awe-inspiring electric abilities and a capacity for telepathic connection unlike anything we have ever seen before in the Space. Bovo was unwilling to give a statement, but it is blatantly obvious that the Thirteen love them wholly and unconditionally. </em>
|
||
</p><p> </p><p>
|
||
<em> -- Article in Shadow Magazine. </em>
|
||
</p><p><br />
|
||
<br />
|
||
</p><p>
|
||
<em> ) </em>
|
||
</p><p><br />
|
||
<br />
|
||
</p><p>You think that this knowledge should be comforting. Who doesn’t want to be special? Who doesn’t want to be something higher? This is another aspect of you that is unprecedented. You do not want to be known for your power or origin, but rather for your contribution. For what you <em> do </em> instead of what you <em> are. </em>You are dedicated to words that function like injury when they reach inside of you sharp and violent to implant emotion, intense experiences that burn burn burn </p><p> </p><p>(later you will understand the literal meaning of <em> burn, </em>but for now—)</p><p> </p><p>and ache ache ache</p><p> </p><p>swirling into you like septic infection and your love and your anger and your love threatens to unravel each source of energy used to compose you & leave you nothing but meatbones of feeling. Reduced to a ghost of impact. Decimated by an intensity of emotion that slaughters, that draws from every dimension and every hell and injects it into you. Your very being is unstable.</p><p> </p><p>It’s horrid. It is intolerable. </p><p><br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
</p><p>(</p><p> </p><p align="center">
|
||
<em> The Great Sun has no concept of punishment or forgiveness. It entrusts </em>
|
||
</p><p align="center">
|
||
<em> every Spirit with one sole mission: to be kind. To emit kindness. To reject </em>
|
||
</p><p align="center">
|
||
<em> evil and alleviate excess negative emotion by pouring their souls </em>
|
||
</p><p align="center">
|
||
<em> into construction. </em>
|
||
</p><p align="center">
|
||
<em> --Book of the Great Sun, Kenn Kava </em>
|
||
</p><p> </p><p>
|
||
<em> ) </em>
|
||
</p><p> </p><p>You know that your people were created without need for punishment, and that the Great Sun’s warmth is eternal. It can never abandon you. It will never depart. </p><p> </p><p>It still feels like the Great Sun despises you. The opposite to the narrative you are fed from the moment you meet your family. How could any just creator curse someone with a mind like this? You have been doomed and your fate lies inside of your own body. How is that embracing? How is that warm? How is that love?</p><p> </p><p>(</p><p> </p><p align="center">
|
||
<em> The Great Sun created us with a purpose. The specifics of this purpose </em>
|
||
</p><p align="center">
|
||
<em> is often debated. Some say that our purpose is creativity. </em>
|
||
</p><p align="center">
|
||
<em> Production. </em>
|
||
</p><p align="center">
|
||
<em> Others theorize that we were created to love. </em>
|
||
</p><p align="center">
|
||
<em> But perhaps we were simply created to spread survival. </em>
|
||
</p><p align="center">
|
||
<em> To be the lungs of the universe. </em>
|
||
</p><p align="center">
|
||
<em> To eliminate the Negative. </em>
|
||
</p><p align="center">
|
||
<em> Yes, to love. But more than that. </em>
|
||
</p><p align="center">
|
||
<em> To experience. </em>
|
||
</p><p align="center"> </p><p align="center">
|
||
<em> --Book of the Great Sun, Final Commentary Edition, </em>
|
||
</p><p align="center">
|
||
<em> by Kenn Kava </em>
|
||
</p><p> </p><p>
|
||
<em> ) </em>
|
||
</p><p> </p><p>You consider your position in this world. Everyone you know is special, regardless of power. Regardless of status. Regardless of source. There should be no distinction.</p><p> </p><p>N’Hal had to create a new category for your presence. Dividing up Spirit society into sections (7) based primarily on power and secondarily on contribution is functional most of the time, but not when there’s someone like <em> you. </em> </p><p> </p><p>(</p><p> </p><p>
|
||
<b> <em>What happened to Kenn Kava, anyway?</em> </b>
|
||
</p><p> </p><p>Most know Kenn Kava as the first of the Great Poets, the first one to record our history and beliefs in written form, and as a well-respected figure in our society, particularly among those who follow his footsteps in poetry. </p><p> </p><p>A new discovery has been made in the caves underneath N’Hal hall: a journal, reportedly kept by Kava concurrently with the writing of the Book. It is extremely fascinating, and may shed significant light onto the circumstances of his disappearance.</p><p> </p><p>In it, he noted the appearance of a hole in the fabric of reality that seemed to open very briefly. He first saw it while working in his study, and it disappeared moments later, almost taking him with it. A few days later, the hole appeared again in the middle of the N’Hal Hall, and sucked two highly important documents -- the contents of which are presently unknown — into its void. It seemed to appear throughout the dimension randomly.</p><p> </p><p>The last entry in the journal documents it as appearing in his yard. The last word in the journal is illegible, but appears to be a word that he was never able to finish writing, almost as if he disappeared in the middle of writing it.</p><p> </p><p>More on this as it develops.</p><p> </p><p>--Article in Shadow Times Newspaper, Issue #333</p><p> </p><p>)</p><p> </p><p>Eventually, it gets tiring.</p><p> </p><p>It is always tiring. Two hundred cycles of pain. Two hundred cycles of pouring word after word onto paper with no relief from the emotion.</p><p> </p><p>So you get a job. Professor of Creative Writing at the University of the Great Sun. (8) It’s perfect for you, divine intervention, where you are <em> meant </em>to exist. You lacked purpose before; it is different here. Perhaps you have found a way to exist inside of yourself.</p><p> </p><p>You feel like you are making a difference in a universe that is already so different from the rest. You feel your metaphorical wounds scar over and heal through; you feel yourself recover. With each student, with each assignment absorbed and graded—</p><p><br />
|
||
<br />
|
||
</p><p>(</p><p> </p><p>
|
||
<em> Keia Novi (9) </em>
|
||
</p><p>
|
||
<em> Intro to Creative Writing </em>
|
||
</p><p>
|
||
<em> Bovo </em>
|
||
</p><p> </p><p>
|
||
<em> Untitled For Now </em>
|
||
</p><p> </p><p>
|
||
<em> I often dream of the worlds beyond ours— </em>
|
||
</p><p>
|
||
<em> is that too ambitious? Is this desire simply too great </em>
|
||
</p><p>
|
||
<em> to be fulfilled? Is this yearning </em>
|
||
</p><p>
|
||
<em> to be completed by travel </em>
|
||
</p><p>
|
||
<em> somehow beneath me? I have loved this dimension. I have loved </em>
|
||
</p><p>
|
||
<em> all that exists, everything in the scope of my knowledge, </em>
|
||
</p><p>
|
||
<em> any possible experience & anything that has ever been loved itself. </em>
|
||
</p><p> </p><p>
|
||
<em> I am convinced that my family made a mistake in the process of </em>
|
||
</p><p>
|
||
<em> weaving me together. I am broken; shattered; incomplete. I will never </em>
|
||
</p><p>
|
||
<em> be satisfied while I am imprisoned. The guilt </em>
|
||
</p><p>
|
||
<em> enveloping me like the Great Sun’s warmth. The guilt </em>
|
||
</p><p>
|
||
<em> embracing me in the Wrong Way, in sickness. </em>
|
||
</p><p> </p><p>
|
||
<em> There is something else out there. </em>
|
||
</p><p> </p><p>
|
||
<em> ) </em>
|
||
</p><p><br />
|
||
<br />
|
||
</p><p>—-you feel each part of your mind begin to mend, to reunite and move together once again to form a Better you. A pure Keeg Bovo. A positive, stable being.</p><p> </p><p>And then the seams of your world split apart and swallow you.</p><p><br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
</p>
|
||
<hr>
|
||
|
||
FOOTNOTES:</p><p>1. Functions somewhat similar to a holy text but the Great Sun is not deified in the traditional sense but rather considered a personal friend of each Spirit. The Book of the Great Sun was written by Kenn Kava, a well-known ancient poet that went missing about a million cycles ago, as a gift in its honor; beforehand there was no written language or expression in the Space.</p><p>2. The date the Book was written in Spirit language. Translates to 100 (khlahh).1 (zov)</p><p>3. Naming rule -- every Negative Spirit in the comics has a 4 letter name. Therefore, there is a rule that all Spirits must be named in this manner. Yes, like That webcomic.</p><p>4. Their headcanon language's word for intense romantic soulmate.</p><p>5. Realization sequence refers to a psychic vision both Spirits get in the moment one or both of them realize the other is their soulmate; their b'kehhal. Each one is different and unique to the Spirits in question.</p><p>6. Translates to 5000.</p><p>7. Spirit society is split into groups. One being main power, and most people only possess one; Keeg's enhanced telepathy is considered a dual power. The less important group is main creative contribution, so basically just. Talent. This concept is used for identification and purpose, not inequality or oppression.</p><p>8. Keeg is a teacher in the comics. Really.</p><p>9. If you're unaware, this is the (non-canon made up by me) name of Valentina's spirit.</p></section>
|
||
</main>
|
||
|
||
<!-- Closing .layout: -->
|
||
</div>
|
||
|
||
|
||
<!-- Add any additional Javascript code (<script></script>) here. -->
|
||
</body>
|
||
<style>
|
||
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* VARIABLES */
|
||
/* -------------------------------------------------------- */
|
||
|
||
/* Variables are used like this: var(--text-color) */
|
||
:root {
|
||
/* Background Colors: */
|
||
--background-color: #ffffff;
|
||
--content-background-color: #ffffff;
|
||
--sidebar-background-color: #ffffff;
|
||
|
||
/* Text Colors: */
|
||
--text-color: #000000;
|
||
--sidebar-text-color: #2500dd;
|
||
--link-color: #000d63;
|
||
--link-color-hover: #5e00ec;
|
||
|
||
/* Text: */
|
||
--font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
|
||
--heading-font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
|
||
--font-size: 18px;
|
||
|
||
/* Other Settings: */
|
||
--margin: 25px;
|
||
--padding: 24px;
|
||
--border: 10px inset #001457;
|
||
|
||
--round-borders: 0px;
|
||
--sidebar-width: 300px;
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* BASICS */
|
||
/* -------------------------------------------------------- */
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 100vh;
|
||
font-size: var(--font-size);
|
||
margin: 0;
|
||
padding: var(--margin);
|
||
color: var(--text-color);
|
||
font-family: Times;
|
||
line-height: 1.2;
|
||
font-weight: 500;
|
||
background: var(--background-color);
|
||
background-image: url("https://i.ibb.co/214VBwsN/pkg50004.jpg");
|
||
|
||
}
|
||
|
||
::selection {
|
||
/* (Text highlighted by the user) */
|
||
background: rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
mark {
|
||
/* Text highlighted by using the <mark> element */
|
||
text-shadow: 1px 1px 4px var(--link-color);
|
||
background-color: inherit;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
/* Links: */
|
||
a {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
a,
|
||
a:visited {
|
||
color: var(--link-color);
|
||
}
|
||
|
||
a:hover,
|
||
a:focus {
|
||
color: var(--link-color-hover);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* LAYOUT */
|
||
/* -------------------------------------------------------- */
|
||
|
||
.layout {
|
||
width: 1200px;
|
||
display: grid;
|
||
grid-gap: var(--margin);
|
||
grid-template: "header" auto "main" auto "footer" auto / auto;
|
||
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
|
||
}
|
||
|
||
main {
|
||
grid-area: main;
|
||
overflow-y: auto;
|
||
padding: var(--padding);
|
||
background: var(--content-background-color);
|
||
border: var(--border);
|
||
border-radius: var(--round-borders);
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* HEADER */
|
||
/* -------------------------------------------------------- */
|
||
|
||
header {
|
||
grid-area: header;
|
||
font-size: 1.2em;
|
||
border: var(--border);
|
||
border-radius: var(--round-borders);
|
||
background: var(--content-background-color);
|
||
}
|
||
|
||
.header-content {
|
||
padding: var(--padding);
|
||
}
|
||
|
||
.header-title {
|
||
font-family: var(--heading-font);
|
||
font-size: 1.5em;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.header-image img {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* SIDEBARS */
|
||
/* -------------------------------------------------------- */
|
||
|
||
aside {
|
||
grid-area: aside;
|
||
border: var(--border);
|
||
border-radius: var(--round-borders);
|
||
overflow: hidden;
|
||
background: var(--sidebar-background-color);
|
||
padding: var(--padding);
|
||
color: var(--sidebar-text-color);
|
||
}
|
||
|
||
.left-sidebar {
|
||
grid-area: leftSidebar;
|
||
}
|
||
|
||
.right-sidebar {
|
||
grid-area: rightSidebar;
|
||
}
|
||
|
||
.sidebar-title {
|
||
font-weight: bold;
|
||
font-size: 1.2em;
|
||
font-family: var(--heading-font);
|
||
}
|
||
|
||
.sidebar-section:not(:last-child) {
|
||
margin-bottom: 3em;
|
||
}
|
||
|
||
.sidebar-section ul,
|
||
.sidebar-section ol {
|
||
padding-left: 1.5em;
|
||
}
|
||
|
||
.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
/* Sidebar Blockquote: */
|
||
|
||
.sidebar-section blockquote {
|
||
background: rgba(0, 0, 0, 0.1);
|
||
padding: 15px;
|
||
margin: 1em 0;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sidebar-section blockquote > *:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.sidebar-section blockquote > *:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Site Button: */
|
||
|
||
.site-button {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.site-button textarea {
|
||
font-family: monospace;
|
||
font-size: 0.7em;
|
||
}
|
||
|
||
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* NAVIGATION */
|
||
/* -------------------------------------------------------- */
|
||
|
||
nav {
|
||
margin-bottom: 3em;
|
||
}
|
||
|
||
nav .sidebar-title {
|
||
margin-bottom: 0.5em;
|
||
}
|
||
|
||
nav ul {
|
||
margin: 0 -5px;
|
||
padding: 0;
|
||
list-style: none;
|
||
user-select: none;
|
||
}
|
||
|
||
nav ul li {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
nav > ul li > a,
|
||
nav > ul li > strong {
|
||
display: inline-block;
|
||
}
|
||
|
||
nav > ul li > a,
|
||
nav > ul li > details summary,
|
||
nav > ul li > strong {
|
||
padding: 5px 10px;
|
||
}
|
||
|
||
nav > ul li > a.active,
|
||
nav > ul li > details.active summary {
|
||
font-weight: bold;
|
||
}
|
||
|
||
nav ul summary {
|
||
cursor: pointer;
|
||
}
|
||
|
||
nav ul ul li > a {
|
||
padding-left: 30px;
|
||
}
|
||
|
||
/* NAVIGATION IN HEADER */
|
||
|
||
header nav {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
header nav ul {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 0;
|
||
}
|
||
|
||
header nav ul li {
|
||
position: relative;
|
||
}
|
||
|
||
header nav ul li:first-child > a {
|
||
padding-left: 0;
|
||
}
|
||
|
||
header nav ul li:last-child > a {
|
||
padding-right: 0;
|
||
}
|
||
|
||
/* Subnavigation (Drop-Down): */
|
||
|
||
header nav ul ul {
|
||
background: var(--content-background-color);
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 10px;
|
||
padding: 0.5em;
|
||
z-index: 1;
|
||
border: var(--border);
|
||
min-width: 100%;
|
||
box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
header nav ul li:hover ul,
|
||
header nav ul li:focus-within ul {
|
||
display: block;
|
||
}
|
||
|
||
header nav ul li strong {
|
||
color: var(--link-color);
|
||
text-decoration: underline;
|
||
font-weight: normal;
|
||
}
|
||
|
||
header nav ul ul li a {
|
||
display: block;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* CONTENT */
|
||
/* -------------------------------------------------------- */
|
||
|
||
main {
|
||
line-height: 1.5;
|
||
}
|
||
|
||
main a,
|
||
main a:visited {
|
||
color: var(--link-color);
|
||
}
|
||
|
||
main a:hover,
|
||
main a:focus {
|
||
color: var(--link-color-hover);
|
||
text-decoration-style: wavy;
|
||
}
|
||
|
||
main p,
|
||
main .image,
|
||
main .full-width-image,
|
||
main .two-columns {
|
||
margin: 0.75em 0;
|
||
}
|
||
|
||
main ol,
|
||
main ul {
|
||
margin: 0.5em 0;
|
||
padding-left: 1.5em;
|
||
}
|
||
|
||
main ol li,
|
||
main ul li {
|
||
margin-bottom: 0.2em;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
main ol {
|
||
padding-left: 2em;
|
||
}
|
||
|
||
main blockquote {
|
||
background: rgba(0, 0, 0, 0.1);
|
||
padding: 15px;
|
||
margin: 1em 0;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
main pre {
|
||
margin: 1em 0 1.5em;
|
||
}
|
||
|
||
main code {
|
||
text-transform: none;
|
||
}
|
||
|
||
main center {
|
||
margin: 1em 0;
|
||
padding: 0 1em;
|
||
}
|
||
|
||
main hr {
|
||
border: 0;
|
||
border-top: var(--border);
|
||
margin: 1.5em 0;
|
||
}
|
||
|
||
/* HEADINGS: */
|
||
|
||
main h1,
|
||
main h2,
|
||
main h3,
|
||
main h4,
|
||
main h5,
|
||
main h6 {
|
||
font-family: var(--heading-font);
|
||
margin-bottom: 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
main h1:first-child,
|
||
main h2:first-child,
|
||
main h3:first-child,
|
||
main h4:first-child,
|
||
main h5:first-child,
|
||
main h6:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
main h1 {
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
main h2 {
|
||
font-size: 1.4em;
|
||
}
|
||
|
||
main h3 {
|
||
font-size: 1.3em;
|
||
}
|
||
|
||
main h4 {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
main h5 {
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
main h6 {
|
||
font-size: 1em;
|
||
}
|
||
|
||
/* COLUMNS: */
|
||
|
||
.two-columns {
|
||
display: flex;
|
||
}
|
||
|
||
.two-columns > * {
|
||
flex: 1 1 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.two-columns > *:first-child {
|
||
padding-right: 0.75em;
|
||
}
|
||
|
||
.two-columns > *:last-child {
|
||
padding-left: 0.75em;
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* CONTENT IMAGES */
|
||
/* -------------------------------------------------------- */
|
||
|
||
.image {
|
||
display: block;
|
||
width: auto;
|
||
height: auto;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.full-width-image {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.images {
|
||
display: flex;
|
||
width: calc(100% + 5px + 5px);
|
||
margin-left: -5px;
|
||
margin-right: -5px;
|
||
}
|
||
|
||
.images img {
|
||
width: 100%;
|
||
height: auto;
|
||
padding: 5px;
|
||
margin: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* ACCESSIBILITY */
|
||
/* -------------------------------------------------------- */
|
||
|
||
/* please do not remove this. */
|
||
|
||
#skip-to-content-link {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
display: inline-block;
|
||
padding: 0.375rem 0.75rem;
|
||
line-height: 1;
|
||
font-size: 1.25rem;
|
||
background-color: var(--content-background-color);
|
||
color: var(--text-color);
|
||
transform: translateY(-3rem);
|
||
transition: transform 0.1s ease-in;
|
||
z-index: 99999999999;
|
||
}
|
||
|
||
#skip-to-content-link:focus,
|
||
#skip-to-content-link:focus-within {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* MOBILE RESPONSIVE */
|
||
/* -------------------------------------------------------- */
|
||
|
||
/* CSS Code for devices < 800px */
|
||
@media (max-width: 800px) {
|
||
body {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.layout {
|
||
width: 100%;
|
||
grid-template: "header" auto "rightSidebar" auto "main" auto "leftSidebar" auto "footer" auto / 1fr;
|
||
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
|
||
}
|
||
|
||
|
||
|
||
|
||
aside {
|
||
border-bottom: 1px solid;
|
||
padding: 9px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
|
||
nav {
|
||
padding: 0;
|
||
}
|
||
|
||
nav > ul {
|
||
padding-top: 0.5em;
|
||
}
|
||
|
||
nav > ul li > a,
|
||
nav > ul li > details summary,
|
||
nav > ul li > strong {
|
||
padding: 0.5em;
|
||
}
|
||
|
||
main {
|
||
max-height: none;
|
||
padding: 15px;
|
||
}
|
||
|
||
.images {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.images img {
|
||
width: 100%;
|
||
}
|
||
|
||
#skip-to-content-link {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
</style>
|
||
</html> |