783 lines
No EOL
30 KiB
HTML
783 lines
No EOL
30 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>Nemesis Lake</h1>
|
||
Scrapped 2019. Excerpt. Death TW.
|
||
<hr>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">The drive from Texas to Minnesota is a winding pattern of dust and an aura of lifelessness; the trees and lake lack all beauty when someone you love is dead. The green of it all spins into her unfocused eyes as she hangs her arm right out of the backseat window and feels the air and movement on her skin. Life is like this: a fast-moving car, trapping in and strapping down its passengers, until the crash.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Kav is a good kid, mostly. She does her homework. She eats her vegetables. She is kind to animals, the elderly, and even her own sister. She doesn’t stay out past curfew. </span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">What did she do to deserve </span><em><span style="font-weight: 400;">this?</span></em></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">The crash, of course, is a metaphor for death, and Kav has seen it: the wreckage of the car in the aftermath, the shattered window glass, the parts scattered on the ground, the dents and the leaks and the fire. It burns a striking image in the mind.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">This time around it is her grandmother. </span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">For the deceased, that is. Her mother sunk to the floor, flowing and boundless, upon hearing the news, bruised her knees all up. She doesn’t talk much, now; it has been three weeks and Kav was forced to walk to school, when school was in session. Her mother stopped driving. She’d sit in Economics, swiping back and forth on her phone with her mind grass-stained, her mind sitting next to a grave, running its fingers over the headstone and feeling the cool slate. She is a good kid. She is a good student. Her mother stopped doing most things, and now they are here, adhered to the Minnesota border. Waiting.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">It’s like that when someone dies. It’s just </span><em><span style="font-weight: 400;">like that. </span></em><span style="font-weight: 400;">People react in a spectrum of ways; some sink to the floor and some swallow down the grief, a magical act of sword-swallowing, pricking the internal, endless sleep. Some act flat, as if it never happened and their loved one will come home and press themselves into the couch, fall asleep on the sofa and wake up bright-eyed in the morning, alive. Alive. </span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Kav reacted inappropriately. She doesn’t care. She tells herself that she doesn’t care, that she’s better off dead than suffering anyway, that her grandmother’s hatred tainted them, but even Eve cried. Even </span><em><span style="font-weight: 400;">Eve.</span></em><span style="font-weight: 400;"> She doesn’t care. It doesn’t bother her, and she is a good person, despite the sour pit stuck in her throat, she is a good person.</span></p>
|
||
|
||
<p><span style="font-weight: 400;">A hand grasps the back of her sweater and pulls her back into the car, arm resting at her side now. She looks over; it is Eve, holding her black eyeliner in one hand and Kav’s very white outfit in the other, in bright, bright contrast. Then the window rolls up, and there’s a scoff from the front seat.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“Kavs, that’s not safe,” her sister says. Eve releases her grip. “Mom told you two hours ago to quit.”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">She wants to roll her eyes, wants to sigh and ignore and sink into the car’s leather seats. But she’s a good kid, and a good sister, and good people don’t do things like that; good people do kind things, and she is, above all, a </span><em><span style="font-weight: 400;">good person.</span></em><span style="font-weight: 400;"> So she apologizes, and goes back to watching the depths of green, the beauty of the ultimate surrounding, with her head pressed up against the glass of the window.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“We’re stopping for gas soon,” her mother yells, needlessly loud. “Just a little bit longer, and then we can rest.”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Just a little bit longer. The biggest question: can she ever rest?</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">---</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Her mother’s definition of soon is too loose, wrapped multiples around Kav’s wrist; she’s checked her phone clock about 4 times, each in somehow perfect 30 minute intervals, and she’s double-checked Eve’s phone to make sure that her phone isn’t malfunctioning, and she’s triple checked with the car’s display of time. </span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">It’s been two hours.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">It’s been two hours, and Eve is half-asleep, leaning on Kav’s shoulder. Her head is heavy, and her blue hair looks (understandably) unwashed. She’s not sure if Eve has showered since they left for Nemesis Lake four days ago. It is, again, understandable - they haven’t had </span><em><span style="font-weight: 400;">time. </span></em><span style="font-weight: 400;">Time feels nebulous, moving swiftly in and out of the digestible knowledge of existence. They have transcended it, in their car and cheap hotel rooms. </span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Their mother drives for 16 hours at a time, and when they finally get to their hotel room, they are too tired to shower, or brush their teeth, or live. She has eaten exactly two things today: a large container of gas station mac n’ cheese, and a small package of milk-less Oreos.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Mom’s not usually like this; before their grandmother passed, she… cared. She cared. She donated to school fundraisers and took Eve to volleyball games. She made dinner every night, bought groceries every week. </span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Kav hates her grandmother for a thick variety of reasons; for continually gifting Eve masculine clothing even after she came out, for forcing Eve to try on every gift at every holiday, for smiling when their father left, for ignoring her every time she was struggling. This, however, is her worst action yet, and she continues to be awful even after her passing. How lucky Kav is.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">It was ridiculous - her grandmother’s “dying wish”, that is. Go to middle-of-nowhere Minnesota, Kav! Spend the summer in the house I haven’t been to in 66 years, Kav! Her mother went along with it because it would look </span><em><span style="font-weight: 400;">awful </span></em><span style="font-weight: 400;">if she did not heed </span><em><span style="font-weight: 400;">her </span></em><span style="font-weight: 400;">mother’s last words, but Kav can sense that she thought it was strange as well.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Still. Anger is not going to change their circumstances, and as Kav unfurls her fists, they hit a bump in the road, flying upwards. It shoves her forehead into Eve’s, pain pulsing. Eve’s eyes open quick and wide, and she pushes herself off of Kav’s shoulder.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“That </span><em><span style="font-weight: 400;">hurt,</span></em><span style="font-weight: 400;">” Eve says, but her voice is entirely monotone; Kav can tell she’s still tired, because she can rest, she can close her eyes and sleep.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Kav, however, </span><em><span style="font-weight: 400;">hears </span></em><span style="font-weight: 400;">the ghosts, feels the haunting cold on the skin of her neck. She cannot sleep in cars because she feels the road turn beneath her, because she hears every whir and every sound; crickets and raindrops and passing cars and the ambience of time. Morning, afternoon, evening, night. She is sensitive to </span><em><span style="font-weight: 400;">all.</span></em></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“Yeah,” Kav agrees. “When are we stopping?”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“</span><em><span style="font-weight: 400;">Soon</span></em><span style="font-weight: 400;">,” replies their mother, and when Kav looks into the front seat, her fingers are gripping the steering wheel tightly, paling out her skin.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">She turns to Eve, leans in close to her ear. “I’m sorry,” she whispers.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“It’s okay,” Eve responds. “I know she’s hasn’t exactly been jumping for joy lately. I get it.”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“Do you?”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“I do. I understand, Kav. I just wonder if you do.”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Kav inhales, exhales, inhales and holds her breath. She tries to picture it, losing someone and what that looks like, what face it wears & how it digs into the fragile subconscious---someone you love is here, walking on this solidified planet, loving you and loving you and loving you. It takes one moment---just one small, insignificant significant moment---for them to pass through the veil, shroud themselves into the entrance of the afterlife and </span><em><span style="font-weight: 400;">leave you.</span></em><span style="font-weight: 400;"> Grandma Kavya left their mother and left scarred marks over her fingers, over her chest, the skin of her skull; everything that propelled her existence and pushed her awake every morning.</span></p>
|
||
<p><span style="font-weight: 400;">When the love dissipates---that can be devastating. Kav understands, but her mother is still loved by her daughters. Kav supposes that she simply doesn’t understand grief. Why can’t she see how loved she is?</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“I’m trying to understand,” Kav says finally. “I am, I promise. But—”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Eve shushes her. “Whatever you’re going to say, don’t say it. It’s the last thing she needs right now.”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Kav frowns, crosses her arms, makes a big show of her frustration. “What did you think I was gonna say?”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“It doesn’t matter.” </span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“It does matter.”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“Not </span><em><span style="font-weight: 400;">now, </span></em><span style="font-weight: 400;">Kavya.”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Eve never uses her full name unless she is </span><em><span style="font-weight: 400;">very </span></em><span style="font-weight: 400;">upset. The thing is! Kavya cannot seem to outrun her roughness. She upset her sister, she must be upsetting her mother, and they are alone without each other so they must stick together. They have to be together. </span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">The ultimate fear: being alone. Entirely alone in the world, without Eve or her mom. Having no one---floating through the darkness ghastly, never touching the ground again, flying too high and never coming down. Kav’s nightmares revolve around this only, the threat looming and looming.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“Sorry.”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“It’s---it’s okay. I just wanna keep the peace… what little there is left of it.”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Is it Kav’s fault? The lack of peace, that is; her stubborn edges slicing into the car door and making those aforementioned skin cuts. Is she salvagable? Can she be saved? Is she the one ruining everything?</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Instinctively, no, but your instincts always tell you what you want to hear, at least in Kav’s case, at least in Kav’s mind and Kav’s existence. The truth is that she cannot see through the truth. The truth is that Kav is struggling to grasp it.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Whatever. The silence in the car feels heavy on her shoulders, and Eve coughs so hard that it rattles her. </span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“Let’s play a car game!” Eve announces, her voice upbeat.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“Like what?” Kav asks.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“You know. Like, uh… I don’t know. I spy?”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“I spy,” Kav says, monotone. “Really.”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Eve makes direct eye contact, nods her head slowly. “Really.”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“Okay, then. I spy with my little eye… something blue.”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“My hair? Wow, genius.”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“No,” Kav corrects, eyes wide. She points to the car window. “Water.”</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">They both stare---the light illuminates the lake, shining and shining. It is so open and it rings of freedom; no one in this car has seen a body of water in years, and Kav cannot visualize, in this moment, anything more beautiful or serene. She wants to jump out of the car and into it, swim and float and think of nothing but the peace that she is hoarding. She wants to drown and ressurect. She wants to feel something. She wants everything. </span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“I wish I could swim in it,” says Eve; twin telepathy, as she would have called it when they were children. They have always been perfect, siblings operating gears operating one whole function together. A whole connection of earth and surroundings and mind. Familial love can conquer anything, or so they say.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Before Eve came out, Kav could always sense something in her, a deep pitting darkness, but could never quite pin down what it was. Eve is a wonderful girl, and a </span><em><span style="font-weight: 400;">girl, </span></em><span style="font-weight: 400;">and the world has written it down in the history books. Of course they like to think that, one day, they will be famous, because what 16 year old girl doesn’t want to be famous? They want to change the world. </span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">Kav daydreams about it; maybe she’ll help out starving children, maybe she will save animals from abuse and maltreatment, maybe she’ll discover a new scientific advancement that will help save the world. Maybe she’ll cure cancer! Maybe she’ll be everything she wants to be, in the end. Whenever the end will be. Kavya Velox: the Loved.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">The appreciated. She’s never had any appreciation beyond her family; no one wants to be friends with a girl who looks like her, who talks like her, despite how hard she tries to fit in. She spends hours in the morning in front of a mirror, perfecting her makeup, the perfect lines and color and contour, and still she fades into the background, or often the rotten center of attention, ridiculed for just being true to herself. Children are awful. Teenagers are awful. Kav wants to swim in this lake and never leave, wrinkle down until she becomes part of the lake, a spirit lurking underneath it.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">They pass the lake. Her mesmerized gaze snaps back into its true form; a slight gauzed-over discomfort that only barely exists in this world. Kav sighs. </span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“Hey, maybe things will be different in Nemesis Lake,” their mother calls from the front seat. She sounds like she’s faking her positivity---in other words, she sounds like she normally does these days.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“Yeah, maybe!” Eve responds; the difference is that she actually has hope.</span></p>
|
||
<p> </p>
|
||
<p><span style="font-weight: 400;">“Yeah,” Kav calls back faintly. “Maybe.”</span></p>
|
||
<p> </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> |