807 lines
No EOL
22 KiB
HTML
807 lines
No EOL
22 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>you only live forever in the lights you make</h2>
|
||
|| Jane/Shelley Byron
|
||
<hr>
|
||
<p>Shelley allows herself to feel intrigued by this one.</span>
|
||
</p><p> </p><p>
|
||
<span>Jane enters </span>
|
||
<em>
|
||
<span>her </span>
|
||
</em>
|
||
<span>territory & ghosts through </span>
|
||
<em>
|
||
<span>her </span>
|
||
</em>
|
||
<span>land & touches everything in the realm besides </span>
|
||
<em>
|
||
<span>her, </span>
|
||
</em>
|
||
<span>her lithe fingers remaining at her sides, her lips parting carefully in shock. Her body, Shelley realizes, is being suffocated by its repression. It’s tremendously easy to decipher; the fear manifested the moment Jane entered, transforming itself by weaving its atoms into choking hands, threads of soft pillows pressed over soft faces. There have been many others that have found themselves in this situation, moving within her freely, but Jane is…. </span>
|
||
<em>
|
||
<span>different </span>
|
||
</em>
|
||
<span>is not quite applicable here, is it? Of course she is different. Yes, something about Jane casts a shadow over anyone else she has known, her intrigue eclipsing over Jane’s light to absorb every aspect of beauty in her consciousness. Yes, Jane lives a life of devotion to the purest cause. Yes, Jane is standing across from her, gaze pouring blades into Shelley’s soul.</span>
|
||
</p><p> </p><p>
|
||
<span>She’s enchanting. That’s the word.</span>
|
||
</p><p> </p><p>
|
||
<span>Shelley wants to lurk into her, to crawl inside and eradicate the barrier that bars her desires from flowing through into the body. Shattered glass for a shattered woman. </span>
|
||
</p><p> </p><p>
|
||
<span>So she introduces herself. They can start there.</span>
|
||
</p><p> </p><p>
|
||
<span>“Oh, my manners,” she says. “Pardon me. I’m Shelley Byron, also known as The Fog.” She smiles, pushes the plate of red velvet cake towards Jane. Imagines, briefly, devouring her similarly. Red and red and red in every way. “You care for a little red velvet? The frosting is seraphic.”</span>
|
||
</p><p> </p><p>
|
||
<span>She nods. “You’re with the Sisterhood,” she says. It makes some crevice, some aching wound inside of Shelley repair itself, stitched together in preparation. She’s smart. They both know that Jane is smart, and perceptive, and hidden. </span>
|
||
</p><p> </p><p>
|
||
<span>Jane, an art project for Shelley to take on the burden of, something she can mesh and paint into perfect senselessness with slow strokes of brush against canvas, slow strokes of skin brushing against skin, wet painted lines curling into something striking. Jane and some sort of becoming. Jane unburdened from her fears. Shelley can sense it; Jane needs her.</span>
|
||
</p><p> </p><p>
|
||
<span>“Beguiling and perceptive,” she says. Her eyes move over Jane’s body, her intentions blatant and sinking. “What a combination. You sure I can’t tempt you with something—” (Shelley pulls her blazer away from her skin) (brief, too brief) (</span>
|
||
<em>
|
||
<span>bury yourself here</span>
|
||
</em>
|
||
<span>) (teeth forced into flesh in Shelley’s mind within her mind—) “...something sweet?”</span>
|
||
</p><p> </p><p>
|
||
<span>Jane moves to sit across from her. “You said you wanted to talk, so let’s talk. I want to join the Sisterhood.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Join—” Shelley cannot stifle her laugh. Oh, there are so many endearing things about Jane, her very presence exuding passion.</span>
|
||
</p><p> </p><p>
|
||
<span>“Did I stutter?”</span>
|
||
</p><p> </p><p>
|
||
<span>“All right, then. Answer me this.” She tilts her head, locks onto Jane’s stare, and drops the bomb: “Who are you, Jane?”</span>
|
||
</p><p> </p><p>
|
||
<span>Jane looks at her. Her expression, at first, reads anger and defense, until it bleeds into confusion. Her eyes squint and her lips tighten. She understands the implication, fears it, even if she pretends not to. Back to the defensive: “I’m Jane. You already know that.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Yes. You are very, very much Jane, and you’re — </span>
|
||
<em>
|
||
<span>mmm — </span>
|
||
</em>
|
||
<span>tantalizing. But that doesn’t answer my question. </span>
|
||
<em>
|
||
<span>Who </span>
|
||
</em>
|
||
<span>are you?”</span>
|
||
</p><p> </p><p>
|
||
<span>She sighs, the breath exhaling from her body to infect the surroundings. “My God, really? This is what we’re doing?”</span>
|
||
</p><p> </p><p>
|
||
<span>“Yes.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Fine,” she says, and so beautifully: “I’m the person who’s gonna rip your eyes out if you touch </span>
|
||
<em>
|
||
<span>one hair </span>
|
||
</em>
|
||
<span>on that little girl’s head.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Oh, amazing,” Shelley says, also an exhale, her words dripped in golden invitation. “But again, that still doesn’t answer my question.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Okay, so you go first. Who the fuck are you, and what the fuck are you and the Sisterhood planning, because I’m guessing you weren’t leaving bread crumbs all across the world just so we can sit here and talk in your weird candyland fuck pad.”</span>
|
||
</p><p> </p><p>
|
||
<span>Ah. She is so fascinating. Shelley’s mind drifts for a moment at the last words—</span>
|
||
</p><p> </p><p>
|
||
<span>No. Focus.</span>
|
||
</p><p> </p><p>
|
||
<span>“You’re here for the eternal flagellation.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Sure. What the fuck is it?”</span>
|
||
</p><p> </p><p>
|
||
<span>Shelley smiles, all teeth, and she stands. Placing her hands on both of Jane’s shoulders, she leans in close to Jane’s ear, and </span>
|
||
<em>
|
||
<span>waits. </span>
|
||
</em>
|
||
<span>She’ll stay here, like this, for hours if she has to. It would be preferable to the interrogation, quite honestly. The expression of intrigue is always preferable to anything else.</span>
|
||
</p><p> </p><p>
|
||
<span>But.</span>
|
||
</p><p> </p><p>
|
||
<span>Jane’s hand finds hers, their fingers entwining awkwardly. Her skin is warm and damp from sweat; Shelley is affecting her.</span>
|
||
</p><p> </p><p>
|
||
<span>“Come,” she whispers. “Let me show you.”</span>
|
||
</p><p> </p><p>
|
||
<span>Shelley waves her hand, and Kay fades into mist. Jane pulls back—</span>
|
||
</p><p> </p><p>
|
||
<span>“Don’t worry. She’s with the rough one — Hammerhead, I believe. I just want you, and </span>
|
||
<em>
|
||
<span>only </span>
|
||
</em>
|
||
<span>you, to see this.” Jane relaxes. “Come, come.”</span>
|
||
</p><p> </p><p>
|
||
<span>She drags Jane to a room behind the counter, their hands again together in touch. Shelley studies her before they walk into the darkness; the warmth of her, her newly discovered refusal to meet Shelley’s eyes, the way her other hand curls into the fabric of the bottom of her shirt.</span>
|
||
</p><p> </p><p>
|
||
<span>And then she flips on the light to reveal a blank room. White walls, white floor, white ceiling, no furniture. Like a canvas.</span>
|
||
</p><p> </p><p>
|
||
<span>“What the fuck?” Jane asks, turning to Shelley. Confused, defensive, but her hand still lingers. “What is this? Some weird ass art thing?”</span>
|
||
</p><p> </p><p>
|
||
<span>“Before I tell you about the eternal flagellation,” Shelley says, her hand curling around Jane’s wrist now, “there’s something I want to show you.”</span>
|
||
</p><p> </p><p>
|
||
<span>“So show me.”</span>
|
||
</p><p> </p><p>
|
||
<span>Jane looks down at Shelley’s grip, and then her eyes climb back slowly to rest against Shelley’s mouth. Hm.</span>
|
||
</p><p> </p><p>
|
||
<span>“Think of something in your life that doesn’t make sense.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Nothing in my life makes sense.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Oh, dear. I imagine that must be quite exasperating.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Fine,” Jane says. “I’ll think of something that doesn’t make sense.”</span>
|
||
</p><p> </p><p>
|
||
<span>An image of Shelley in a long gown made of inverted horseshoe crabs appears on the wall, the legs of the animals trembling-curling-squirming around, desperate for correction. It’s - it’s a start. Rather impressive, actually. Jane jumps at the sight.</span>
|
||
</p><p> </p><p>
|
||
<span>“Oh my, Jane,” she says. “I’m flattered that you think of me as nonsensical, but I’m not really the kind of woman who likes long, flowing gowns, am I?” </span>
|
||
</p><p> </p><p>
|
||
<span>“I don’t know, you’re definitely pretentious enough for them.”</span>
|
||
</p><p> </p><p>
|
||
<span>Shelley laughs, and moves closer to Jane snake-fast, feels Jane’s breath again, hot exhales against Shelley’s jaw. “No, no,” she says, placing a hand underneath Jane’s chin, guiding her head upwards, “I’d much rather prefer something like this.”</span>
|
||
</p><p> </p><p>
|
||
<span>With a wink, an image of Shelley bare, her body covered only by lines of picket fence, appears on the wall in its place. Jane’s eyes flicker over to it, and then back over to Shelley, slow and cautious like entering a wild, vicious animal’s enclosure.</span>
|
||
</p><p> </p><p>
|
||
<span>“Embrace your desires, Jane,” Shelley whispers as Jane shifts on her feet. “Let yourself go. Prove to me you can emulate the values of the Sisterhood.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Fuck it,” Jane whispers. She brings her face closer to Shelley’s, still at a gradual, fright-drowning pace, until they’re kissing; it starts off slow, Shelley’s hands travelling across Jane’s face, neck, back, hips as if she’s creating her next masterpiece, but it quickly grows hungry, and Shelley knows that Jane never thought she could have something like this, has never allowed herself to imagine anything that was </span>
|
||
<em>
|
||
<span>just for her. </span>
|
||
</em>
|
||
<span>Shelley is Jane’s, and Jane is Shelley’s, and they both manifest their belonging as marks on skin.</span>
|
||
</p><p> </p><p>
|
||
<span>Shelley isn’t rough as she makes them. Jane doesn’t need to feel the reality of her sharp edges, yet. Not on her first time touching, not during her first enlightenment. Instead she is gentle. Instead she vows to take care of Jane, to strip her into pure bone and rebuild her into someone who can find independence.</span>
|
||
</p><p> </p><p>
|
||
<span>She’s so beautiful.</span>
|
||
</p><p><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> |