827 lines
No EOL
21 KiB
HTML
827 lines
No EOL
21 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>like i am free again
|
||
</h2>
|
||
|| Introspection.
|
||
<hr>
|
||
<span>i.</span>
|
||
</p><p> </p><p>
|
||
<span>Larry, in the first draft of his malleable, deformed existence that burned up against the shadowed side of this gruesome world, had thought the mist of the azure cloud that nested above the planet was </span>
|
||
<em>
|
||
<span>beautiful. </span>
|
||
</em>
|
||
<span>He also thought that it was like him, in a way that he could never process or accept; unnatural, divergent, unearthly. </span>
|
||
</p><p> </p><p>
|
||
<span>Different.</span>
|
||
</p><p> </p><p>
|
||
<span>He was right. In a way. The Negative Spirit does not align to human morality, and Larry does not align to the morality of the times. The Negative Spirit is alien, watching humanity from the outside — the inside of Larry’s body, which is the outside of the world, outer space curling up into itself. He does not parse what it parses, if it understands things in the way he does. Larry is also alien, the ultimate truth buried deep within. He watches the world boil up its love and chew on the bones of it until the bones are bones themselves & he watches the world spit his love out undesirable. Unfixable. </span>
|
||
</p><p> </p><p>
|
||
<span>Maybe the Spirit can fix him. </span>
|
||
</p><p> </p><p>
|
||
<span>Maybe the Spirit will kill him.</span>
|
||
</p><p> </p><p>
|
||
<span>He does not think much of it, at first. Thinks of invasion only, of the unwanted nature of reality’s fruit tree harvest---he never </span>
|
||
<em>
|
||
<span>wanted </span>
|
||
</em>
|
||
<span>this, he wanted to be alone yet accompanied but </span>
|
||
<em>
|
||
<span>not</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<em>
|
||
<span>like</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<em>
|
||
<span>this.</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<span>Larry thinks of the Spirit as punishment for a sin eternally committed. A grime that he cannot wash away, a skin unable to be shed & buried, something inherent in the coding of Larry Trainor. At least, if the Spirit ends up killing him, he will finally be free from his affliction. Paying for it. Burning again, over and over again, tortured by flame laps & too much of a different kind of warmth; smothering. Suffering. But free.</span>
|
||
</p><p> </p><p>
|
||
<span>ii.</span>
|
||
</p><p> </p><p>
|
||
<span>He thinks back to the Ant Farm. He tries not to think back to the Ant Farm, but: the Spirit -- the Negative Spirit </span>
|
||
<em>
|
||
<span>killed </span>
|
||
</em>
|
||
<span>for him. To protect. To </span>
|
||
<em>
|
||
<span>save him. </span>
|
||
</em>
|
||
<span>To reach into the sharpened jawteeth of Hell, place hands upon him, and pull him away, out of torment. </span>
|
||
</p><p> </p><p>
|
||
<span>It didn’t work, of course, but by that point it knew Forsythe’s insanity. It had to have been aware that Forsythe would turn his anger towards </span>
|
||
<em>
|
||
<span>it, </span>
|
||
</em>
|
||
<span>a being completely inhuman and alien. A stray. It knew, and revealed itself anyway.</span>
|
||
</p><p> </p><p>
|
||
<span>To protect him.</span>
|
||
</p><p> </p><p>
|
||
<span>Larry does not deserve this kind of mercy.</span>
|
||
</p><p> </p><p>
|
||
<span>iii.</span>
|
||
</p><p> </p><p>
|
||
<span>Larry places a hand over his own chest, trying to feel the Spirit’s warmth — it is the first night in his new home with Rita, he is sleeping on the couch, and nothing is comfortable. If he can reach onto </span>
|
||
<em>
|
||
<span>something — </span>
|
||
</em>
|
||
<span>anything — it should be the Spirit. The one being that he will always have, the one soul that will </span>
|
||
<em>
|
||
<span>always </span>
|
||
</em>
|
||
<span>be there for him. Not out of obligation, but dedication. The Spirit, his true and ultimate companion.</span>
|
||
</p><p> </p><p>
|
||
<span>“I don’t know how to make it stop hurting,” he admits. “I trusted the Chief. I had faith in him. But it… it was all a lie, and it just… I feel like an idiot.”</span>
|
||
</p><p> </p><p>
|
||
<span>A cloud manifests between his ribs. He keeps the Spirit there, caged. He keeps the Spirit in every organ system orchestrating harmony. It lies there — in the chest, waiting, hands around the bars of rib. Willingly imprisoned.</span>
|
||
</p><p> </p><p>
|
||
<span>The Spirit pities him. He knows this, somehow.</span>
|
||
</p><p> </p><p>
|
||
<span>“Well,” he whispers, and something inside of him sparks like the Spirit’s enchanting electrical movement. Something in his mind unlocks, finishes the puzzle. A clear, perfect picture. An intrinsic knowledge uncovered. “I have you, at least.” He pauses, exhales. Sighs, cold air, always cold. “At one point I would’ve considered that a curse. Now… now I don’t know.”</span>
|
||
</p><p> </p><ol>
|
||
<li> </li>
|
||
</ol><p> </p><p>
|
||
<span>Larry bares his soul like teeth to the Spirit, and banishes it. </span>
|
||
<em>
|
||
<span>Let me die. I am so sorry for the things I have done to you, and the things I want to do to you, and every moment of torture that I inflicted. I escaped and you didn’t. It is your time to know freedom.</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<span>It floats away. Larry is starting to believe that he will not go to Hell. He may not know Heaven, but he does not deserve eternal torment.</span>
|
||
</p><p> </p><p>
|
||
<span>The blood in his throat swirls. He is ready for this. It should’ve happened so long ago—</span>
|
||
</p><p> </p><p>
|
||
<em>
|
||
<span>A familiar blue glow moving into the manor. </span>
|
||
</em>
|
||
<span>The Spirit comes back for him, it will always come back to him, it will always remain steady within him. Again, he thinks, dedication. He could almost love it, if it wasn’t saving him from himself once more. He wanted to die. He wanted the release.</span>
|
||
</p><p> </p><p>
|
||
<span>Why won’t it just let him fucking </span>
|
||
<em>
|
||
<span>die?</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<span>It should. Larry has done nothing but cause it pain, his self hatred smothering both of them. It has no reason to want him to live. It should not prioritize him.</span>
|
||
</p><p> </p><p>
|
||
<span>It returns to him anyway. It reveals itself to torture anyway. It saves him anyway.</span>
|
||
</p><p> </p><p>
|
||
<span>Larry—</span>
|
||
</p><p> </p><p>
|
||
<span>v.</span>
|
||
</p><p> </p><p>
|
||
<span>They walk into the painting for Niles Caulder, and he trusts the Negative Spirit with the same reserved faith, holds the hand of the knowledge that the Spirit will always save him. The Negative Spirit is </span>
|
||
<em>
|
||
<span>his, </span>
|
||
</em>
|
||
<span>and he is theirs.</span>
|
||
</p><p> </p><p>
|
||
<span>“You’re going to find us a way out of here,” he whispers, like religion. “I know you are.”</span>
|
||
</p><p> </p><p>
|
||
<span>vi.</span>
|
||
</p><p> </p><p>
|
||
<span>His friends are one inch tall now. The stress is suffocating, the stress like smoke filling his lungs like two parallel rooms of flame. This, too, burns.</span>
|
||
</p><p> </p><p>
|
||
<span>It’s their first night on Cliff’s racetrack. When everyone is asleep, he retreats to his bedroom. Safety. Peace.</span>
|
||
</p><p> </p><p>
|
||
<span>He climbs into his bed, cocoons himself in blanket. Allows himself to drift into the cycle of sleep—</span>
|
||
</p><p> </p><p>
|
||
<span>and wakes up in another world. In this world there is a hotel room again, but in a different way. </span>
|
||
<em>
|
||
<span>Different. </span>
|
||
</em>
|
||
<span>It’s a honeymoon suite, pink and red, the color of innards. This isn’t real. It’s real. This can’t—</span>
|
||
</p><p> </p><p>
|
||
<span>The Spirit taps him on the shoulder from behind. He jumps -- turns to face it -- jumps. It’s no longer floating, instead resting on the floor, instead so human.</span>
|
||
</p><p> </p><p>
|
||
<span>It approaches him, slow, cautious -- as if he is a wounded animal, frightened, and he is a wounded animal, he has been blazed and cut open but </span>
|
||
<em>
|
||
<span>he</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<em>
|
||
<span>is</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<em>
|
||
<span>healing.</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<span>The Negative Spirit places its hands on Larry’s face, and presses its forehead to his. Larry lets out a sigh — a release, perhaps </span>
|
||
<em>
|
||
<span>finally, </span>
|
||
</em>
|
||
<span>perhaps there is some joy buried in this, or prominent in this, sides sticking out to be perceived. </span>
|
||
</p><p> </p><p>
|
||
<span>It is calming.</span>
|
||
</p><p> </p><p>
|
||
<span>The Spirit is calming.</span>
|
||
</p><p> </p><p>
|
||
<span>He closes his eyes, and embraces the moment. This is harmonious, this is a craved closeness. They are always close, in divergent ways. Sharing a body is nothing like this kind of closeness, this intimacy, and simultaneously similar, both concepts involving a lack of distance, both concepts holding tenderness.</span>
|
||
</p><p> </p><p>
|
||
<span>This is destiny.</span>
|
||
</p><p><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 Pゴシック', 'MS PGothic', 'MS ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
|
||
--heading-font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'MS Pゴシック', 'MS PGothic', 'MS ゴシック' , '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> |