713 lines
No EOL
31 KiB
HTML
713 lines
No EOL
31 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>
|
||
<h2><a href="/writing">back!</a></h2>
|
||
<h1>Reposing Force Excerpt #1</h1>
|
||
Officially scrapped 2025.
|
||
<hr>
|
||
<p><span style="font-weight: 400;">For some reason—</span></p>
|
||
<p><span style="font-weight: 400;">For some reason?</span></p>
|
||
<p><span style="font-weight: 400;">For some reason, Ivy feels a need to impress her. Kira Ramos is so perfect that it’s horrendously annoying, and maybe that’s exactly why Ivy wants to impress her - so she can feel Good Enough. So she can feel useful. So she can feel useful in more ways than just throwing a treadmill out of a window. It’s an addictive adjective.</span></p>
|
||
<p><span style="font-weight: 400;">Ivy darts for the most difficult object she can reach — a chunk of concrete. She looks directly at Kira, pounds her fist into it, and watches the concrete crumble into sad powder. Kira’s lips curl into a very faint smile, and Ivy knows she’s done well. She reaches for another — this one made of steel— and warps it effortlessly, never breaking eye contact with Kira as she decimates everything around her.</span></p>
|
||
<p><span style="font-weight: 400;">The other prospective recruits are watching her in annoyance, some even in anger, but it doesn’t matter;</span></p>
|
||
<p><span style="font-weight: 400;">the attention Ivy is getting from Kira is making Ivy soar — she’s spreading her wings and landing directly on the roof of the Reposing Force HQ, and this time she’s got the world’s throat squeezed tightly in her palm. She’s doing well. The others are struggling to even dent their objects.</span></p>
|
||
<p><span style="font-weight: 400;">When Ivy turns around to grab something else to destroy, she freezes in her movement; there’s nothing left to ruin.</span></p>
|
||
<p><span style="font-weight: 400;">Kira’s gripping a clipboard so hard it looks like it’s going to break. “Thank you, Ivy,” she says with barely masked annoyance. “I’ll be right back with more material for the </span><em><span style="font-weight: 400;">other </span></em><span style="font-weight: 400;">potential recruits, and after that we’ll begin combat testing.”</span></p>
|
||
<p><span style="font-weight: 400;">She turns, and Ivy can see her fists glowing red-orange as she leaves. Well. Annoyance isn’t exactly synonymous with being impressed, but regardless, Ivy certainly made an </span><em><span style="font-weight: 400;">impression.</span></em></p>
|
||
<p><span style="font-weight: 400;">“Nice to meet you all, I’m Dr. Alice Argyle,” says the group leader, and the tone of her voice indicates that she </span><em><span style="font-weight: 400;">really </span></em><span style="font-weight: 400;">doesn’t want to be there; she’s bored, she’s tired, and she wants this over with. “To begin, we’ll have you demonstrate your abilities so I know what I’m working with. I’ll call you each up by name and you’ll use your powers in any way you want, just make sure we get a good idea of what’s going on. Okay? Okay.” She picks up her clipboard and looks down at it, studying each name with careful intent.</span></p>
|
||
<p><span style="font-weight: 400;">There aren’t that many people in the Manifestation-And-Manipulation group, in contrast to the others. Besides Kingsley and Rowan, there are about three other prospective members. One of them looks to be asleep despite his standing position, and one of them is glued to her phone, engrossed in a long text message. The third looks rough and mischevious, and he elbows Kingsley while laughing. From his other side, Rowan rages slightly within.</span></p>
|
||
<p><span style="font-weight: 400;">“Hey, Alice,” says the final member. “Why don’t you do a little </span><em><span style="font-weight: 400;">demonstration </span></em><span style="font-weight: 400;">for us first? Show us what </span><em><span style="font-weight: 400;">you </span></em><span style="font-weight: 400;">got.”</span></p>
|
||
<p><span style="font-weight: 400;">He’s laughing, but he’s the only one laughing. Everyone else is looking away in embarrassment. Rowan whispers into Kingsley’s ear, his breath invitingly warm against Kingsley’s skin: “Do you think he knows?”</span></p>
|
||
<p><span style="font-weight: 400;">They both watch as Alice looks up. Her brows raise, and her black hair waves as she shakes her head. The clipboard is tossed aside with force. “If you want me to,” she says with amusement, “I will.”</span></p>
|
||
<p><span style="font-weight: 400;">The group watches in awe as Alice’s eyes shut, her head points to the floor, and her short frame is lifted off the ground as her legs turn from human to insectoid. Her head is enveloped in black facial armor, but it looks more organic than actual armor, covering the area above her eyes and nose and meeting solidly at the point of her chin. She continues growing, pitch black rough material flowing over her skin to cover each elbow, wrist, knee, and ankle joint. She grows two more posterior insect legs, raising her to a terrifying height that towers above them all. The cherry on top: the pinscers that extend from her knuckles, the scorpion tail that emerges from her spine.</span></p>
|
||
<p><span style="font-weight: 400;">None of the other groups seem to notice.</span></p>
|
||
<p><span style="font-weight: 400;">“</span><em><span style="font-weight: 400;">Fuck,</span></em><span style="font-weight: 400;">” Rowan says, because he genuinely can’t keep it in. “I heard but… I hadn’t seen it. You really are part scorpion.”</span></p>
|
||
<p><span style="font-weight: 400;">“Yes, I am,” Alice responds. “It’s a bit more complicated than that, but you got the basics right.”</span></p>
|
||
<p><span style="font-weight: 400;">They all look over to That Asshole, whose jaw is now comically ajar. Without saying another word, he shrugs, accepts his defeat, and walks to the elevator as Alice reverts, shrinking into her more human form while her black hair sways.</span></p>
|
||
<p><span style="font-weight: 400;">She walks over and retrieves the clipboard, unbothered. “Now, let’s get back on track,” she sighs. Her agony is even more blatant now. “Rowan James, please.”</span></p>
|
||
<p><span style="font-weight: 400;">Rowan steps forward, uneasy. His gaze shifts over to Kingsley, who shoots a smile back in Rowan’s direction that is rooted in both concern and encouragement. </span><em><span style="font-weight: 400;">God. </span></em><span style="font-weight: 400;">There’s no way he can go up there and make fucking cheese appear after finding out that the person evaluating his powers can indeed turn herself into a scorpion. It’s going to be anti-climactic. It’s going to be humiliating. It’s going to haunt Rowan for </span><em><span style="font-weight: 400;">decades.</span></em></p>
|
||
<p><span style="font-weight: 400;">But he has to. He didn’t get this far just to give up immediately. So he walks up to Alice, into the center of the group, and does what he does best: bullshits everything. He spreads his arms apart like a wingspan, holding them as far away from his body as possible. Rowan closes his eyes, and focuses on being as impressive as possible in the moment. His face twists, and a variety of cheeses begin to rain down from beneath his reach, falling from his arms and plopping onto the floor with a rather unpleasant noise.</span></p>
|
||
<p><span style="font-weight: 400;">He opens his eyes, and everyone looks…</span></p>
|
||
<p><span style="font-weight: 400;">It’s probably good that he can’t read expressions very well.</span></p>
|
||
<p><span style="font-weight: 400;">He walks back to Kingsley’s side with the most confident stride he can manage, and grasps Kingsley’s hand with a force that screams anxiety even if he can’t outwardly show it. Kingsley turns to him, whispers </span><em><span style="font-weight: 400;">you did a good job.</span></em></p>
|
||
<p><span style="font-weight: 400;">The girl who had been texting finally looks up from her phone. “That was cool as shit,” she exclaims. She picks up one of the wedges and turns it in her fingers slowly, inspecting it. “Hey, can you give me some mozzarella to take home?”</span></p>
|
||
<p><span style="font-weight: 400;">“Sure, how much?”</span></p>
|
||
<p><span style="font-weight: 400;">Alice clears her throat. “You can figure that out after the interview,” she says, writing something on the clipboard. “Thank you, Mr. James, that was… enlightening.”</span></p>
|
||
<p><span style="font-weight: 400;">Okay, maybe she’s starting to regret showing off. Just a little bit.</span></p>
|
||
<p><span style="font-weight: 400;">But Ivy has never had the </span><em><span style="font-weight: 400;">chance </span></em><span style="font-weight: 400;">to show off before. No one cares about her powers, no one has ever wanted to see them. Kira doesn’t really want to see them either, she knows, she’s just doing her job, so now Ivy gets her enjoyment out of </span><em><span style="font-weight: 400;">annoying </span></em><span style="font-weight: 400;">Kira instead of attempting to impress her. She’s much better at being a nuisance.</span></p>
|
||
<p><span style="font-weight: 400;">Thank God for that. She’s trying to convince herself that this isn’t all futile, that she didn’t just accidentally throw this entire interview in the garbage. She watches as Kira prepares for the combat test by retrieving a container holding a few wooden poles. Ivy watches, and watches, and watches, and tries to stifle her giggling underneath her breath.</span></p>
|
||
<p><span style="font-weight: 400;">Kira tries to avoid eye contact with Ivy when she returns, approaching the group with a pointedly exhausted expression - she’s attempting to communicate, in no uncertain terms, that she’s </span><em><span style="font-weight: 400;">not </span></em><span style="font-weight: 400;">having a good time. Most of the other group leaders probably just want to get this over with, and none of them are the Reposing Force’s second-in-command. Kira is probably less pleasant in day-to-day life than anyone else on the floor right now - including Ivy, if that’s possible. She has to be obnoxious. The position comes with an odd entitlement, an attitude she’s seen across the social media of almost every popular Reposing Force hero. She’ll have to check and see what Kira’s Twitter page is like later.</span></p>
|
||
<p><span style="font-weight: 400;">“Okay,” Kira says. “Now, we won’t actually be engaging in physical combat. I’m testing your ability to think quickly in a fight situation, your reflexes, your strength and dexterity… I’ll do my best not to hurt you and I ask that you don’t purposefully hurt me. Are we on the same page?”</span></p>
|
||
<p><span style="font-weight: 400;">The group mumbles in a chorus of agreement. Ivy crosses her arms.</span></p>
|
||
<p><span style="font-weight: 400;">“Good. I’ll call you up one by—“</span></p>
|
||
<p><span style="font-weight: 400;">“Can I go first?”</span></p>
|
||
<p><span style="font-weight: 400;">Kira looks like she’s internally punishing herself for not expecting this. Ivy is also internally punishing herself for not expecting this. It’s an impulsive decision, calculated only out of fascination with Kira “Pyromaniac” Ramos, out of a strong desire to see her squirm and shift in annoyance. She’s ruining this for herself; she wishes it was accidental, that she wasn’t dying at her own hands. Ivy’s default mode is to self-sabotage, to destroy everything in her vicinity that could build up to something beautiful with the right amount of care. She’s never been allowed to have anything good, or even anything bittersweet, and it’s not about to start happening </span><em><span style="font-weight: 400;">now.</span></em></p>
|
||
<p><span style="font-weight: 400;">“Sure,” Kira says, between teeth and lips folded into a forced, artificial smile. “Sure, why not? Why not.” She picks up one of the wooden poles and holds it out in Ivy’s direction. “Whenever you’re ready, Ms. White.”</span></p>
|
||
<p><span style="font-weight: 400;">Ivy’s gaze catches Kira’s gaze and pins it down, clenching its teeth around it and pulling like a dog with a fierce mandible. She reaches out and takes the pole from Kira, eye contact never fading. Her eyes are undoubtedly red, and Kira’s are beautiful, the color of wet earth drilling into her, over her, like being buried alive, and Ivy has already ruined this interview for herself, so she might as well go all the way with it. She has nothing left to lose; at least she’ll be going out with a bang. To quote her opponent: Why not?</span></p>
|
||
<p><span style="font-weight: 400;">They circle each other for a bit. It’s uncomfortable; she can feel Kira watching her like her stare is scalpel-sharp, cutting into each strip of flesh it pours over. Ivy tries to keep herself vigilant. She watches Kira’s legs, watches each hand grasp the pole with tight exhaustion. She makes sure Kira doesn’t extend in her direction - and when Kira eventually </span><em><span style="font-weight: 400;">does </span></em><span style="font-weight: 400;">extend the pole in her direction, Ivy dodges to the side, shoving her own pole lower, against Kira’s leg.</span></p>
|
||
<p><span style="font-weight: 400;">The force causes Kira to stumble, but ultimately she remains steady in her footing. Nothing, it seems, can knock her over. In response, she swipes the pole at Ivy’s head, and Ivy barely manages to block the move with her own pole, pushing Kira away at the contact.</span></p>
|
||
<p><span style="font-weight: 400;">“You know this isn’t fair,” Ivy notes. “Super strength against fire control. In stick-fighting.”</span></p>
|
||
<p><span style="font-weight: 400;">“The goal isn’t for this to be a </span><em><span style="font-weight: 400;">fight,</span></em><span style="font-weight: 400;">” Kira corrects. She swipes at Ivy’s knees, but Ivy jumps before the blow can land. “It’s to test a potential recruit’s physical abilities. I understand if you weren’t paying attention.”</span></p>
|
||
<p><span style="font-weight: 400;">“Oh, I was paying attention,” Ivy says, followed by an unintentional, high-pitched laugh. “Let me ask you something: imagine if, when you swung at my </span><em><span style="font-weight: 400;">head </span></em><span style="font-weight: 400;">just now, I wasn’t able to block you in time, and you hit me. These poles are very solid. Were you </span><em><span style="font-weight: 400;">really</span></em><span style="font-weight: 400;">—“ she makes a mocking voice when she repeats Kira’s words “—‘doing your best not to hurt me’?”</span></p>
|
||
<p><span style="font-weight: 400;">Kira sighs, focusing in on Ivy’s movements further, clearly attempting to drown out her utterly boring idea of an intimidating speech.</span></p>
|
||
<p><span style="font-weight: 400;">“In fact, I could even argue that with my mental state right now - you know, me being under the influence and all, which you knew - that you thought it’d be </span><em><span style="font-weight: 400;">easy </span></em><span style="font-weight: 400;">to beat up on me.”</span></p>
|
||
<p><span style="font-weight: 400;">“That doesn’t even make sense.”</span></p>
|
||
<p><span style="font-weight: 400;">Ivy swipes forward at Kira’s shoulder - instead of any meaningful outcome, Kira simply grabs the end of Ivy’s pole and </span><em><span style="font-weight: 400;">pulls </span></em><span style="font-weight: 400;">her forward, sliding out of the way before they can come into contact. Ivy falls face-first into the soft mat beneath them.</span></p>
|
||
<p><span style="font-weight: 400;">She takes a moment, on the ground, to collect herself. Her body aches. It isn’t a </span><em><span style="font-weight: 400;">literal ache </span></em><span style="font-weight: 400;">- she’s essentially incapable of registering physical pain right now - but her body aches, like someone’s rooting a spoon around inside of her, scooping out her viscera like pumpkin seeds. That was </span><em><span style="font-weight: 400;">humiliating.</span></em></p>
|
||
<p><span style="font-weight: 400;">She feels a warm hand on the back of her neck. She jumps, turns—</span></p>
|
||
<p><span style="font-weight: 400;">And Kira’s there, trying to help her off the floor, an extended hand and a disgustingly human smile on her face that seems warmer than any second-in-command of the Reposing Force should be capable of.</span></p>
|
||
<p><span style="font-weight: 400;">Ivy contemplates pushing her away. That would be rude, probably, and it would </span><em><span style="font-weight: 400;">definitely </span></em><span style="font-weight: 400;">not get her this job. If she still has any chance of succeeding here, that is. Ivy watches Kira and thinks that she looks horrifically normal, Ivy watches Kira and thinks that she must be cruelly mocking Ivy in her internal world, because the alternative would mean that the smile on Kira’s face is genuine. She can’t deal with that right now. She just can’t. Kira is acting inexplicably </span><em><span style="font-weight: 400;">warm</span></em><span style="font-weight: 400;"> even after Ivy accused her of attempting physical assault and it’s completely fucking </span><em><span style="font-weight: 400;">weird.</span></em></p>
|
||
<p><span style="font-weight: 400;">She takes Kira’s hand and allows Kira to pull her up. Ivy nods, but doesn’t thank her; instead she looks away, curls into herself.</span></p>
|
||
<p><span style="font-weight: 400;">“You’ve certainly made this an interesting recruitment session,” Kira notes, with a hint of intrigue in her tone. She turns back to the group. “Who would like to go next?”</span></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: var(--font);
|
||
line-height: 1.2;
|
||
font-weight: 900;
|
||
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> |