747 lines
18 KiB
HTML
747 lines
18 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>looked up and i saw the sky scream
|
|||
|
|
</h2>
|
|||
|
|
|| Negative Spirit character study.
|
|||
|
|
<hr>
|
|||
|
|
<p>
|
|||
|
|
<span>i.</span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>Anyway, their story ends here, wrapped in the facade of a beginning. There isn't much left to say. </span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>ii.</span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>They try to function and they try to spark and it is all so hollow without Him inside of Them inside of Him inside of the membrane that separated their entanglement from the rest of humanity & the vast remainder of the universe. They cut Him out of Them, He cut Them out of Him, and now the Spirit is firmly on the outside, as far away as is conceivable, cursed to dream. They ruminate, they dream. They ache even in their fantasies, even in the worlds they concoct in agony where things work out all the time, and no one ever touches the embodied flesh of suffering with the familiarity of intimate lovers, and no one ever carves into themselves, and no one ever has to ache and - they’re getting ahead of themselves, they’re in over their head, drowning in the overflow of their pain. How typical of them. How horribly typical. </span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>See: the Spirit knows too much, now, about flesh. The Spirit knows too much. The Spirit knows </span>
|
|||
|
|
<em>
|
|||
|
|
<span>too much</span>
|
|||
|
|
</em>
|
|||
|
|
<span> as in </span>
|
|||
|
|
<em>
|
|||
|
|
<span>too often</span>
|
|||
|
|
</em>
|
|||
|
|
<span> and here are the facts:</span>
|
|||
|
|
</p><p> </p><ol>
|
|||
|
|
<li><span>Larry is on Earth with their son, the beautiful being created from each shard of their bond that crashed into the dimensional floors, Keeg like a mosaic of the - the - they hesitate to call it love because that makes it </span><em><span>real—-</span></em></li>
|
|||
|
|
<li><span>Larry is on Earth with their son, and both of them surely despise the Spirit now. Larry has only been abandoned and only knows how to abandon and Keeg was born out of abandonment; this should be beautiful, this should ring some sort of serendipity into the space around them.</span></li>
|
|||
|
|
<li><span>Larry is on Earth with their son and the Spirit is not there to see any of it; their son will grow up believing that they didn't want him, that they left with malevolence. This kind of punishment is worse than anything the Bureau of Normalcy could ever conjure.</span></li>
|
|||
|
|
<li><span>Larry is on Earth with their son. They will never see each other again. The Spirit will live forever and Larry will live forever. They will never see each other again.</span></li>
|
|||
|
|
</ol><p><br />
|
|||
|
|
<br />
|
|||
|
|
</p><p>
|
|||
|
|
<span>ix.</span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>Anyway, their story began here: force. The Spirit was forced into Larry’s body by Niles Caulder; </span>
|
|||
|
|
<em>
|
|||
|
|
<span>force. </span>
|
|||
|
|
</em>
|
|||
|
|
<span>The burden of their presence was </span>
|
|||
|
|
<em>
|
|||
|
|
<span>forced </span>
|
|||
|
|
</em>
|
|||
|
|
<span>upon Larry, the burden of Larry’s spiralling pain was </span>
|
|||
|
|
<em>
|
|||
|
|
<span>forced </span>
|
|||
|
|
</em>
|
|||
|
|
<span>into them, injected into their energy against the will of the universe. It was never meant to happen like this, it was never meant to happen. Reality and chance are amoral; they devour in blindness, without regard to who they hurt or who they bestow a miracle upon or who they curse. Life.</span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>The Spirit knows this now, and the Spirit knows many other things now, ruminating over the concept of </span>
|
|||
|
|
<em>
|
|||
|
|
<span>genuine love </span>
|
|||
|
|
</em>
|
|||
|
|
<span>and </span>
|
|||
|
|
<em>
|
|||
|
|
<span>undying desire </span>
|
|||
|
|
</em>
|
|||
|
|
<span>and </span>
|
|||
|
|
<em>
|
|||
|
|
<span>yearning </span>
|
|||
|
|
</em>
|
|||
|
|
<span>and </span>
|
|||
|
|
<em>
|
|||
|
|
<span>yearning </span>
|
|||
|
|
</em>
|
|||
|
|
<span>and </span>
|
|||
|
|
<em>
|
|||
|
|
<span>they will never see each other again. </span>
|
|||
|
|
</em>
|
|||
|
|
<span>That kind of ending was inconceivable only ten years-on-Earth ago, and at one point the Spirit would have done anything - </span>
|
|||
|
|
<em>
|
|||
|
|
<span>anything - </span>
|
|||
|
|
</em>
|
|||
|
|
<span>to grasp it, anything except hurt Larry, always the one complication. They wanted to take him home, all those years ago, when Flex Mentallo failed at his rescue. He would fit in here. They could’ve been something.</span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>viii.</span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>They ruminate, they dream. They imagine, to feed the fire, what Larry and Keeg are doing now on the planet beneath them. Time works differently here, sideways and vertically-flipped, liquidstone, eternal yet fleeting - </span>
|
|||
|
|
<em>
|
|||
|
|
<span>now </span>
|
|||
|
|
</em>
|
|||
|
|
<span>is not a concept that translates, so the Spirit has to work harder in their dreaming. </span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>They see it: Larry holding their son in his arms, comforting Keeg in the pain that the Spirit knows is inevitable; Larry flying through the skies with Keeg steering him, in the air once again, living inside of it like he used to but this time he’s living instead of running, the skies only invigorating him. They see it: Keeg growing up as Larry watches, reaching his adult form in 20 years-on-Earth, and there’s beauty, they are both always beautiful. Their son is perfect and they’ve never even met him. Larry’s growth is their ultimate mark on the planet, his blossoming into something less turbulent nurtured into existence at their hands. Their son is a being created from a human soul and the soul of a Negative Spirit, something that shouldn’t be possible, something that never should’ve happened, yet the only viable outcome of their love for Larry Trainor.</span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>x.</span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>They will never see each other again.</span>
|
|||
|
|
</p>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<!-- Closing .layout: -->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Add any additional Javascript code (<script></script>) here. -->
|
|||
|
|
</body>
|
|||
|
|
<style>
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* -------------------------------------------------------- */
|
|||
|
|
/* VARIABLES */
|
|||
|
|
/* -------------------------------------------------------- */
|
|||
|
|
|
|||
|
|
/* Variables are used like this: var(--text-color) */
|
|||
|
|
:root {
|
|||
|
|
/* Background Colors: */
|
|||
|
|
--background-color: #ffffff;
|
|||
|
|
--content-background-color: #ffffff;
|
|||
|
|
--sidebar-background-color: #ffffff;
|
|||
|
|
|
|||
|
|
/* Text Colors: */
|
|||
|
|
--text-color: #000000;
|
|||
|
|
--sidebar-text-color: #2500dd;
|
|||
|
|
--link-color: #000d63;
|
|||
|
|
--link-color-hover: #5e00ec;
|
|||
|
|
|
|||
|
|
/* Text: */
|
|||
|
|
--font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
|
|||
|
|
--heading-font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
|
|||
|
|
--font-size: 18px;
|
|||
|
|
|
|||
|
|
/* Other Settings: */
|
|||
|
|
--margin: 25px;
|
|||
|
|
--padding: 24px;
|
|||
|
|
--border: 10px inset #001457;
|
|||
|
|
|
|||
|
|
--round-borders: 0px;
|
|||
|
|
--sidebar-width: 300px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* -------------------------------------------------------- */
|
|||
|
|
/* BASICS */
|
|||
|
|
/* -------------------------------------------------------- */
|
|||
|
|
|
|||
|
|
* {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
font-size: var(--font-size);
|
|||
|
|
margin: 0;
|
|||
|
|
padding: var(--margin);
|
|||
|
|
color: var(--text-color);
|
|||
|
|
font-family: 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>
|