836 lines
No EOL
23 KiB
HTML
836 lines
No EOL
23 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>so entwined now</h2>
|
||
|| Larry Trainor/Negative Spirit. Explicit NSFW. Post 4x03.
|
||
<hr>
|
||
<p>
|
||
<span>It’s always difficult to fall asleep these days.</span>
|
||
</p><p> </p><p>
|
||
<span>It’s especially hard to fall asleep when your best friend is unconscious and you don’t know </span>
|
||
<em>
|
||
<span>why. </span>
|
||
</em>
|
||
<span>Despite their recent fight, he loves Rita. Appreciates her, adores her. She’s his best friend. He’s - worried </span>
|
||
<em>
|
||
<span>sick. </span>
|
||
</em>
|
||
<span>Everything is so, so sick and nothing is okay, and now there’s a possibility he’s lost Rita for the - fuck, who knows, third time? Everything is happening all at once -- he can’t keep up. He just can’t, he’s banging on the bars of the universe’s cage, he’s begging for the mercy kill.</span>
|
||
</p><p> </p><p>
|
||
<span>Less importantly, Mr. 104’s words are following him around like a lost stray ghost, lingering in this realm because it can’t let go of life, because it wanted something so bad when it was alive that its want seeped into death and placed its roots there. It’s following him around, it’s haunting him, like his personal dark cloud wraith, like his downfall is imminent, like his future ghost self is tailing him, like - like—</span>
|
||
</p><p> </p><p>
|
||
<span>Like a spirit.</span>
|
||
</p><p> </p><p>
|
||
<span>It’s hard to sleep without them.</span>
|
||
</p><p> </p><p>
|
||
<span>He has Keeg, but it’s - it’s different. It’s just different. The Negative Spirit had grown into - not a </span>
|
||
<em>
|
||
<span>comforting </span>
|
||
</em>
|
||
<span>presence, but a necessary one. They kept him grounded, they kept him unstable. They kept him safe.</span>
|
||
</p><p> </p><p>
|
||
<span>They gave him company. Eternal company, which is all that he’s ever craved — he still remembers what they felt like, warm, so warm and crackling even in his form and yet still so soft. So - he deletes the word </span>
|
||
<em>
|
||
<span>beautiful </span>
|
||
</em>
|
||
<span>from his mind, erases it, wipes his memory, because it surely doesn’t apply here - it was so -</span>
|
||
</p><p> </p><p>
|
||
<span>He gives in; it was beautiful. He was looking at himself on the surface; in truth he was seeing their true essence, finally bared to him, and his action of touch stripped him of flesh entirely, replacing his integument with vulnerability, with l—</span>
|
||
</p><p> </p><p>
|
||
<span>Look at where vulnerability gets you. Their absence has been agonizing. He spent over sixty years with them, and adjusting to lacking the Spirit’s presence inside of him is harder than it should be.</span>
|
||
</p><p> </p><p>
|
||
<span>He cannot decipher it - why Mr. 104’s comments on his sensuality and memories of the Spirit are embracing in his mind. It’s - it’s not like that, it wasn’t like that, and it is a pointless idea to entertain now. Even if — it’s too late for them, they missed their chance. Wrong place, wrong time. Wrong in its entirety.</span>
|
||
</p><p> </p><p>
|
||
<span>It’s—</span>
|
||
</p><p> </p><p>
|
||
<span>Oh. It’s humiliating, because now his body is - </span>
|
||
<em>
|
||
<span>reacting. </span>
|
||
</em>
|
||
<span>It’s been notoriously hard to accomplish physical arousal since the accident, but. </span>
|
||
<em>
|
||
<span>Well.</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<span>This isn’t good.</span>
|
||
</p><p> </p><p>
|
||
<span>(Wrong in its entirety, he tells himself.)</span>
|
||
</p><p> </p><p>
|
||
<span>(</span>
|
||
<em>
|
||
<span>You must be devoid of sensuality.)</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<span>(He doesn’t—)</span>
|
||
</p><p> </p><p>
|
||
<span>(</span>
|
||
<em>
|
||
<span>And are memories enough to satisfy you?)</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<span>(He can’t cope with this, he can’t, not now—)</span>
|
||
</p><p> </p><p>
|
||
<span>Memories are not enough to satisfy him.</span>
|
||
</p><p> </p><p>
|
||
<span>Fuck, he’s really going to do this. He’s really going to -- but this, too, is agonizing. Maybe he can get rid of his harrowing want and banish the ghastly invading thoughts if he deals with this, if he acknowledges these feelings just once and never again. If he truly gives in.</span>
|
||
</p><p> </p><p>
|
||
<span>In bed, he removes his garments with caution as his fingers shake and tremble. It feels good when he finally touches himself, feels heavenly. It’s been a while since he’s been able to do this. His hips roll, his eyes roll back, his body lurches. And he allows himself to imagine. He should </span>
|
||
<em>
|
||
<span>never </span>
|
||
</em>
|
||
<span>allow himself to imagine.</span>
|
||
</p><p> </p><p>
|
||
<span>It begins as mere imagination. He’s crazed now, desperate - craving - regretting the depths of his suffering, regretting the fact that he never reached out to them - the only being who can be around him unbandaged - for contact when they were actually here. Images flash through his mind, and the pace of his touch is so fast now—</span>
|
||
<em>
|
||
<span>The Spirit pressing Larry against the wall, running its fingers down his back with an unbearable tenderness that he can nearly feel in reality, until it is able to give him what he really needs, and in his imagination they are just as frantic as he is, in his mind they get overwhelmed inside of him, their thrusts selfish - it would make sense, their first touch ever was three months ago - and then the scenery changes—-</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<span>He’s back in his bed, in his night clothing, and the Spirit is straddling him, hovering just above him with hesitation, and he is not in control of this scenario, and he’s still hard, and they look frightened, and oh </span>
|
||
<em>
|
||
<span>God, oh God. No. No. No. Please, no. Not now. He will never be able to move on from this. No.</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<span>“It’s you,” he whispers, the shock electrifying. He wants to be mad, to yell at them for abandoning him, but his body, his stupid flesh, won’t allow him to do anything besides freeze and force his eyes to close, an attempt at hiding his sorrow. “It’s you, again. It’s you.” He pauses. “Just - why? Why did you do it? I thought - I thought we—I thought we were—something.”</span>
|
||
</p><p> </p><p>
|
||
<span>The Spirit reaches down and places his hand against his cheek. He leans into it, his nature and instinct is to want and need and desire, and then he realizes - they’re mirroring his final act, their first and last embrace. It should be infuriating.</span>
|
||
</p><p> </p><p>
|
||
<span>Four words mist into his thoughts, written in bright glowing messy letters: </span>
|
||
<em>
|
||
<span>We cared too much. </span>
|
||
</em>
|
||
<span>Three more in succession: </span>
|
||
<em>
|
||
<span>You deserved better.</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<span>His eyes flutter open, he stares up at them, the way they glimmer and illuminate his darkness. You don’t get to decide that for me, he wants to say. I knew what I was getting myself into when I left with you, he wants to say, and I was okay with it. The bandages - but you. It’s all centered around you, he wants to say, and I despise that, he needs to say. Instead--</span>
|
||
</p><p> </p><p>
|
||
<span>Instead he grips their hips, pauses - </span>
|
||
<em>
|
||
<span>is this okay - </span>
|
||
</em>
|
||
<span>and the Spirit presses their “body” down over him. But while they are frantic, they grind against him with experience — have </span>
|
||
<em>
|
||
<span>they </span>
|
||
</em>
|
||
<span>imagined this?</span>
|
||
</p><p> </p><p>
|
||
<span>“Can you, um,” he begins, breathless, “can you feel this? Does it feel good for you? It feels good for me, but I--”</span>
|
||
</p><p> </p><p>
|
||
<span>The Spirit responds - their crackling quickens, so fast now with their movement. They press their fingers against his chest, crawling and trailing them down his torso - too slow - too slow - teasing - until their hand hovers over his thighs, asking for permission.</span>
|
||
</p><p> </p><p>
|
||
<span>“Please, I—”</span>
|
||
</p><p> </p><p>
|
||
<span>It’s supposed to mean </span>
|
||
<em>
|
||
<span>I don’t want to lose you again, </span>
|
||
</em>
|
||
<span>but in truth it’s supposed to mean </span>
|
||
<em>
|
||
<span>please touch me, please, please, please. You’re all I know.</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<span>They nod and unbutton him. He’s unsure of what to expect - it’s sex with an alien, after all — he doesn’t expect them to just. Lower their frame onto him. Ride him with the same gentle desperate overlay they had in his thoughts. They’ve definitely had the same thought - they’ve thought about this, most likely multiple times. They wanted him. How long have they wanted him? </span>
|
||
</p><p> </p><p>
|
||
<span>Around him, they feel - it’s beyond description. It feels </span>
|
||
<em>
|
||
<span>so </span>
|
||
</em>
|
||
<span>good, better than intimacy with any human, it’s mystical and otherworldly and approaching intolerable - he wants to remain here forever, he should be able to hide here, he wants this.</span>
|
||
</p><p> </p><p>
|
||
<span>“Pal—”</span>
|
||
</p><p> </p><p>
|
||
<span>He stops to consider that he just called the person he’s having sex with </span>
|
||
<em>
|
||
<span>pal, </span>
|
||
</em>
|
||
<span>which is even more humiliating, but they don’t seem to mind. There’s adoration in their facelessness, inexplicably. The melody of his moans and breath melds with the sound of their cracklepulse, resulting in a noise almost angelic, almost holy. </span>
|
||
</p><p> </p><p>
|
||
<span>He’s getting close. He can sense that they are too.</span>
|
||
</p><p> </p><p>
|
||
<span>“Please—fuck—</span>
|
||
<em>
|
||
<span>please,</span>
|
||
</em>
|
||
<span>” he exhales, voice unsteady. “I need—you. I need—I think—I—</span>
|
||
<em>
|
||
<span>fuck—</span>
|
||
</em>
|
||
<span>I love—”</span>
|
||
</p><p> </p><p>
|
||
<span>He can’t finish the sentence. He doesn’t need to. The two words, the acknowledgement, sends them both over, the Spirit tightening and releasing, their light bursting and flickering. His eyes roll almost closed, momentary bliss, fleeting tranquility. He sways and thrusts, the feeling as waves washing over his entire self. When it fades, he realizes what he’s done, the ultimate implications. He’s ruined it, he thinks, they’ll never visit him again.</span>
|
||
</p><p> </p><p>
|
||
<span>Their shoulders sink as they recover, their head bowing down in exhaustion. It was a lot for them. It was a lot for both of them. It was pure.</span>
|
||
</p><p> </p><p>
|
||
<span>They look up at him, their eyes narrowing. A horrific, boundless despair envelops them - he can feel it within them, their connection still viable, their emotion against his own. They reach up to touch him, one final time. He knows it’s the final time, but he still begs.</span>
|
||
</p><p> </p><p>
|
||
<span>“Wait, please, don’t—”</span>
|
||
</p><p> </p><p>
|
||
<span>And then he’s back in the harsh disgusting fabric of reality -- his body now relieved, his existence satiated and starved. </span>
|
||
</p><p> </p><p>
|
||
<span>Larry curls his knees to his chest. Allows himself to sob, to rock back-forth in his suffering. His moans become wails - the harmony remains but now it’s a harmony of tragedy and destiny and a new eternal hollowing.</span>
|
||
</p><p><br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
</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> |