833 lines
No EOL
20 KiB
HTML
833 lines
No EOL
20 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>in a world on fire
|
||
</h2>
|
||
|| The Spirit during the Danny Patrol fantasy.
|
||
<hr>
|
||
<em>
|
||
<span>2012.</span>
|
||
</em>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<em>
|
||
<span>Larry doesn’t listen to the radio much. Music, nowadays, is difficult to comprehend, a surrounding of things that Larry just cannot relate to —- partying, drinking, love. Love. Every song that he hears boasts what he cannot have, the humanity he cannot reach, the status of love that he has never been able to grasp. He thinks it should be him; in a different world, in a greater world, Larry would be capable of forcing himself into this again, a man and a woman lacking fear, an existence that is not accompanied by debate or targeted violence. No. That’s not — that’s not what he is.</span>
|
||
</em>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<em>
|
||
<span>He can’t direct his love elsewhere, but the love songs they sing now carry a mixture of yearning for the ability to heal & a deep invading anger. He just can’t get it right. He looks in the mirror; he can hear Cliff playing the radio nearby, and the song is slow enough to feel comforting. He looks in the mirror and imagines himself whole again. He looks in the mirror and imagines rearranging his atomic composition, taking out the sick parts of him and stuffing the empty places, the dents in his creation, back up with music drenched in the correct love. The love songs he should embrace pitting his chest, carving his heart out.</span>
|
||
</em>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<em>
|
||
<span>Then the song changes.</span>
|
||
</em>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<em>
|
||
<span>At first he ignores it. There’s a soft, spoken intro — </span>
|
||
</em>
|
||
<span>we come into this world unknown, but know that we are not alone—</span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>they try and knock us down—-</span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>but change is coming, it’s our time now</span>
|
||
<em>
|
||
<span> —</span>
|
||
</em>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<em>
|
||
<span>and an upbeat tune, a honeycomb voice. Calming, in a different way. Background noise until the end of the song approaches, until a dark glow manifests under his chest.</span>
|
||
</em>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<em>
|
||
<span>“What?”</span>
|
||
</em>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<em>
|
||
<span>It floods in:</span>
|
||
</em>
|
||
</p><p>
|
||
<br />
|
||
<br />
|
||
<br />
|
||
</p><p>
|
||
<span>They can't do nothing to you, they can't do nothing to me</span>
|
||
</p><p>
|
||
<span>This is the life that we choose, this is the life that we bleed</span>
|
||
</p><p>
|
||
<span>So throw your fists in the air, come out, come out if you dare</span>
|
||
</p><p>
|
||
<span>Tonight we're gonna change forever—-</span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<em>
|
||
<span>Part of Larry wishes that he could have this bravery, the daring action that she sings about. Changing forever. Another part of him wants to block out the noise; he cannot afford to be that open, he’s just not ready yet. He’s still trying to fix himself.</span>
|
||
</em>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<em>
|
||
<span>So he lies on his right side, curls into his own body, and imagines having valor.</span>
|
||
</em>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>The Spirit is transported into Larry’s fantasy willingly; if he can imagine this happiness, he can have this happiness, he can hold it in his hands and cradle it into growth. It’s funny—-here, he says three words. They are a lie, by virtue of this being a false reality, but they are words that The Spirit has coveted for so long; </span>
|
||
<em>
|
||
<span>I’m not scared.</span>
|
||
</em>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>“Then get up there.”</span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>Larry stands up. Imagines himself standing up. He drags his body to the stage, pulls himself onto the platform. It’s an apt choice; The Spirit thinks back to the first time he heard this song, the first time they </span>
|
||
<em>
|
||
<span>both </span>
|
||
</em>
|
||
<span>heard this song, the moment The Spirit tried to force him into listening to the message. </span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>Larry takes the microphone. Even here, he’s shaking. Even in his own mind he is afraid.</span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>“We come into this world unknown,” Larry says, words hesitant. The Spirit thinks of their own presence, the six decades of Larry’s emanated hatred. They came into this world unknown; they are still unknown; he doesn’t understand them, he doesn’t even know their name, yet they care for him inexplicably. The Spirit should despise him, The Spirit should allow the anger to flood back and reciprocate. They—</span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>“But know that we are not alone,” he continues. “They—”</span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>His voice wavering. His mind shuttering.</span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>“They try to knock us down, but change is coming, it’s our time now.”</span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>Back in the present, in the true world, Larry is being stared at. He’s blank, and underneath his goggles, his eyes are dead, unmoving. They can’t see what The Spirit can see: his fear melting, yet strengthening.</span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>He invites Maura Lee Karupt to sing with him, and they give their performance—-soon, Larry is himself again, set free from his burns and radiation, and in this fantasy he is normal, in this fantasy he is perfect, in this fantasy he is whole and does not need to be fixed. He’s moving fluid, he’s allowing himself to flow into the universe freely. </span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>The Spirit is conflicted. They are furious, and enamored, and Larry is beautiful when he sings but this should be </span>
|
||
<em>
|
||
<span>real—- </span>
|
||
</em>
|
||
<span>this will never be real, because Larry’s cowardice is a perpetual obstacle—-they love watching his freedom, their adoration of him omnipotent—-this should be real. It should be happening externally, outside of whatever dreams are woven from.</span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>But Larry has reached the third verse, and they can feel him thinking back to that moment in 2012, that fear. And here he smiles, sings it with pride:</span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>“They can't do nothing to you, they can't do nothing to me</span>
|
||
</p><p>
|
||
<span>This is the life that we choose, this is the life that we bleed</span>
|
||
</p><p>
|
||
<span>So throw your fists in the air, come out, come out if you dare</span>
|
||
</p><p>
|
||
<span>Tonight we're gonna change forever…”</span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>The Spirit’s lack of heart bursts inside both of their chests. This is what they’ve always wanted for him, and their efforts are finally coming to fruition, but it’s not right, love transmuting into a resentment that then bleeds back into love—</span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>Everything that is loved has to fade at some point. It’s the nature of the universe.</span>
|
||
</p><p>
|
||
<span> </span>
|
||
</p><p>
|
||
<span>“I don’t sing,” Larry hisses, and he’s shaking again. As he leaves the cabaret, The Spirit considers it---making their presence known, illuminating his skin, carrying him back into the room and forcing him to complete his mission, but none of this would bring forth harmony. He will always despise them, and they will always love him, and inside the body of Larry Trainor, The Spirit witnesses his fantasy over and over again, plants themselves in that memory. It’s all they are going to get. </span>
|
||
</p><p>
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
</p>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Closing .layout: -->
|
||
</div>
|
||
|
||
|
||
<!-- Add any additional Javascript code (<script></script>) here. -->
|
||
</body>
|
||
<style>
|
||
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* VARIABLES */
|
||
/* -------------------------------------------------------- */
|
||
|
||
/* Variables are used like this: var(--text-color) */
|
||
:root {
|
||
/* Background Colors: */
|
||
--background-color: #ffffff;
|
||
--content-background-color: #ffffff;
|
||
--sidebar-background-color: #ffffff;
|
||
|
||
/* Text Colors: */
|
||
--text-color: #000000;
|
||
--sidebar-text-color: #2500dd;
|
||
--link-color: #000d63;
|
||
--link-color-hover: #5e00ec;
|
||
|
||
/* Text: */
|
||
--font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
|
||
--heading-font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
|
||
--font-size: 18px;
|
||
|
||
/* Other Settings: */
|
||
--margin: 25px;
|
||
--padding: 24px;
|
||
--border: 10px inset #001457;
|
||
|
||
--round-borders: 0px;
|
||
--sidebar-width: 300px;
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* BASICS */
|
||
/* -------------------------------------------------------- */
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 100vh;
|
||
font-size: var(--font-size);
|
||
margin: 0;
|
||
padding: var(--margin);
|
||
color: var(--text-color);
|
||
font-family: Times;
|
||
line-height: 1.2;
|
||
font-weight: 500;
|
||
background: var(--background-color);
|
||
background-image: url("https://i.ibb.co/214VBwsN/pkg50004.jpg");
|
||
|
||
}
|
||
|
||
::selection {
|
||
/* (Text highlighted by the user) */
|
||
background: rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
mark {
|
||
/* Text highlighted by using the <mark> element */
|
||
text-shadow: 1px 1px 4px var(--link-color);
|
||
background-color: inherit;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
/* Links: */
|
||
a {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
a,
|
||
a:visited {
|
||
color: var(--link-color);
|
||
}
|
||
|
||
a:hover,
|
||
a:focus {
|
||
color: var(--link-color-hover);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* LAYOUT */
|
||
/* -------------------------------------------------------- */
|
||
|
||
.layout {
|
||
width: 1200px;
|
||
display: grid;
|
||
grid-gap: var(--margin);
|
||
grid-template: "header" auto "main" auto "footer" auto / auto;
|
||
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
|
||
}
|
||
|
||
main {
|
||
grid-area: main;
|
||
overflow-y: auto;
|
||
padding: var(--padding);
|
||
background: var(--content-background-color);
|
||
border: var(--border);
|
||
border-radius: var(--round-borders);
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* HEADER */
|
||
/* -------------------------------------------------------- */
|
||
|
||
header {
|
||
grid-area: header;
|
||
font-size: 1.2em;
|
||
border: var(--border);
|
||
border-radius: var(--round-borders);
|
||
background: var(--content-background-color);
|
||
}
|
||
|
||
.header-content {
|
||
padding: var(--padding);
|
||
}
|
||
|
||
.header-title {
|
||
font-family: var(--heading-font);
|
||
font-size: 1.5em;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.header-image img {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* SIDEBARS */
|
||
/* -------------------------------------------------------- */
|
||
|
||
aside {
|
||
grid-area: aside;
|
||
border: var(--border);
|
||
border-radius: var(--round-borders);
|
||
overflow: hidden;
|
||
background: var(--sidebar-background-color);
|
||
padding: var(--padding);
|
||
color: var(--sidebar-text-color);
|
||
}
|
||
|
||
.left-sidebar {
|
||
grid-area: leftSidebar;
|
||
}
|
||
|
||
.right-sidebar {
|
||
grid-area: rightSidebar;
|
||
}
|
||
|
||
.sidebar-title {
|
||
font-weight: bold;
|
||
font-size: 1.2em;
|
||
font-family: var(--heading-font);
|
||
}
|
||
|
||
.sidebar-section:not(:last-child) {
|
||
margin-bottom: 3em;
|
||
}
|
||
|
||
.sidebar-section ul,
|
||
.sidebar-section ol {
|
||
padding-left: 1.5em;
|
||
}
|
||
|
||
.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
/* Sidebar Blockquote: */
|
||
|
||
.sidebar-section blockquote {
|
||
background: rgba(0, 0, 0, 0.1);
|
||
padding: 15px;
|
||
margin: 1em 0;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sidebar-section blockquote > *:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.sidebar-section blockquote > *:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Site Button: */
|
||
|
||
.site-button {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.site-button textarea {
|
||
font-family: monospace;
|
||
font-size: 0.7em;
|
||
}
|
||
|
||
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* NAVIGATION */
|
||
/* -------------------------------------------------------- */
|
||
|
||
nav {
|
||
margin-bottom: 3em;
|
||
}
|
||
|
||
nav .sidebar-title {
|
||
margin-bottom: 0.5em;
|
||
}
|
||
|
||
nav ul {
|
||
margin: 0 -5px;
|
||
padding: 0;
|
||
list-style: none;
|
||
user-select: none;
|
||
}
|
||
|
||
nav ul li {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
nav > ul li > a,
|
||
nav > ul li > strong {
|
||
display: inline-block;
|
||
}
|
||
|
||
nav > ul li > a,
|
||
nav > ul li > details summary,
|
||
nav > ul li > strong {
|
||
padding: 5px 10px;
|
||
}
|
||
|
||
nav > ul li > a.active,
|
||
nav > ul li > details.active summary {
|
||
font-weight: bold;
|
||
}
|
||
|
||
nav ul summary {
|
||
cursor: pointer;
|
||
}
|
||
|
||
nav ul ul li > a {
|
||
padding-left: 30px;
|
||
}
|
||
|
||
/* NAVIGATION IN HEADER */
|
||
|
||
header nav {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
header nav ul {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 0;
|
||
}
|
||
|
||
header nav ul li {
|
||
position: relative;
|
||
}
|
||
|
||
header nav ul li:first-child > a {
|
||
padding-left: 0;
|
||
}
|
||
|
||
header nav ul li:last-child > a {
|
||
padding-right: 0;
|
||
}
|
||
|
||
/* Subnavigation (Drop-Down): */
|
||
|
||
header nav ul ul {
|
||
background: var(--content-background-color);
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 10px;
|
||
padding: 0.5em;
|
||
z-index: 1;
|
||
border: var(--border);
|
||
min-width: 100%;
|
||
box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
header nav ul li:hover ul,
|
||
header nav ul li:focus-within ul {
|
||
display: block;
|
||
}
|
||
|
||
header nav ul li strong {
|
||
color: var(--link-color);
|
||
text-decoration: underline;
|
||
font-weight: normal;
|
||
}
|
||
|
||
header nav ul ul li a {
|
||
display: block;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* CONTENT */
|
||
/* -------------------------------------------------------- */
|
||
|
||
main {
|
||
line-height: 1.5;
|
||
}
|
||
|
||
main a,
|
||
main a:visited {
|
||
color: var(--link-color);
|
||
}
|
||
|
||
main a:hover,
|
||
main a:focus {
|
||
color: var(--link-color-hover);
|
||
text-decoration-style: wavy;
|
||
}
|
||
|
||
main p,
|
||
main .image,
|
||
main .full-width-image,
|
||
main .two-columns {
|
||
margin: 0.75em 0;
|
||
}
|
||
|
||
main ol,
|
||
main ul {
|
||
margin: 0.5em 0;
|
||
padding-left: 1.5em;
|
||
}
|
||
|
||
main ol li,
|
||
main ul li {
|
||
margin-bottom: 0.2em;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
main ol {
|
||
padding-left: 2em;
|
||
}
|
||
|
||
main blockquote {
|
||
background: rgba(0, 0, 0, 0.1);
|
||
padding: 15px;
|
||
margin: 1em 0;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
main pre {
|
||
margin: 1em 0 1.5em;
|
||
}
|
||
|
||
main code {
|
||
text-transform: none;
|
||
}
|
||
|
||
main center {
|
||
margin: 1em 0;
|
||
padding: 0 1em;
|
||
}
|
||
|
||
main hr {
|
||
border: 0;
|
||
border-top: var(--border);
|
||
margin: 1.5em 0;
|
||
}
|
||
|
||
/* HEADINGS: */
|
||
|
||
main h1,
|
||
main h2,
|
||
main h3,
|
||
main h4,
|
||
main h5,
|
||
main h6 {
|
||
font-family: var(--heading-font);
|
||
margin-bottom: 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
main h1:first-child,
|
||
main h2:first-child,
|
||
main h3:first-child,
|
||
main h4:first-child,
|
||
main h5:first-child,
|
||
main h6:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
main h1 {
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
main h2 {
|
||
font-size: 1.4em;
|
||
}
|
||
|
||
main h3 {
|
||
font-size: 1.3em;
|
||
}
|
||
|
||
main h4 {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
main h5 {
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
main h6 {
|
||
font-size: 1em;
|
||
}
|
||
|
||
/* COLUMNS: */
|
||
|
||
.two-columns {
|
||
display: flex;
|
||
}
|
||
|
||
.two-columns > * {
|
||
flex: 1 1 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.two-columns > *:first-child {
|
||
padding-right: 0.75em;
|
||
}
|
||
|
||
.two-columns > *:last-child {
|
||
padding-left: 0.75em;
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* CONTENT IMAGES */
|
||
/* -------------------------------------------------------- */
|
||
|
||
.image {
|
||
display: block;
|
||
width: auto;
|
||
height: auto;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.full-width-image {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.images {
|
||
display: flex;
|
||
width: calc(100% + 5px + 5px);
|
||
margin-left: -5px;
|
||
margin-right: -5px;
|
||
}
|
||
|
||
.images img {
|
||
width: 100%;
|
||
height: auto;
|
||
padding: 5px;
|
||
margin: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* ACCESSIBILITY */
|
||
/* -------------------------------------------------------- */
|
||
|
||
/* please do not remove this. */
|
||
|
||
#skip-to-content-link {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
display: inline-block;
|
||
padding: 0.375rem 0.75rem;
|
||
line-height: 1;
|
||
font-size: 1.25rem;
|
||
background-color: var(--content-background-color);
|
||
color: var(--text-color);
|
||
transform: translateY(-3rem);
|
||
transition: transform 0.1s ease-in;
|
||
z-index: 99999999999;
|
||
}
|
||
|
||
#skip-to-content-link:focus,
|
||
#skip-to-content-link:focus-within {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* MOBILE RESPONSIVE */
|
||
/* -------------------------------------------------------- */
|
||
|
||
/* CSS Code for devices < 800px */
|
||
@media (max-width: 800px) {
|
||
body {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.layout {
|
||
width: 100%;
|
||
grid-template: "header" auto "rightSidebar" auto "main" auto "leftSidebar" auto "footer" auto / 1fr;
|
||
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
|
||
}
|
||
|
||
|
||
|
||
|
||
aside {
|
||
border-bottom: 1px solid;
|
||
padding: 9px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
|
||
nav {
|
||
padding: 0;
|
||
}
|
||
|
||
nav > ul {
|
||
padding-top: 0.5em;
|
||
}
|
||
|
||
nav > ul li > a,
|
||
nav > ul li > details summary,
|
||
nav > ul li > strong {
|
||
padding: 0.5em;
|
||
}
|
||
|
||
main {
|
||
max-height: none;
|
||
padding: 15px;
|
||
}
|
||
|
||
.images {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.images img {
|
||
width: 100%;
|
||
}
|
||
|
||
#skip-to-content-link {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
</style>
|
||
</html> |