agnes/alienhospital
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
alienhospital/fic/dp/old/bodyache.html
owoctober f2f4d4699a first
2025-12-23 05:56:17 -05:00

703 lines
No EOL
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>bodyache</h2>
|| Negative Spirit/Larry Trainor
<hr>
<p>Once upon a time—[“Once upon a time,” Debbie Trainor’s voice tired, words burstingthrough her mouth like etches of gravel Larry untainted Larry untainted Larry Lawrence Trainor untainted, “there was a man, and he was,” she coughs with a sick sick chestrattle, “very brave. He was a prince—” Larry could do that, one day, he could be the just ruler, the heir to the throne, the virtuous and he could spread his untorn wings and fly himself off into the kingdom, oh oh oh oh, he could if he wanted to he could do this he could be something good when he grows up when he is Big and Tall and Not Afraid Anymore “—and his wife, the princess, loved him <em> very </em>much”</p><p> </p><p>it does not end here, it should. But this story is not a kind story;;; Larry is a boy which means he. Already has bravery like vines slithergrowing from his eyes and ears and mouth. He has bravery and untorn wings and he is the prince, the hero of the story on the hero’s journey, long literary — biblical — trials and suffering and he thinks of life like a storybook and says:</p><p> </p><p>“Mom, I don’t like this story. I don’t think he’d wanna princess.” He stops himself; he is five entire years old and sometimes bravery is just is just is just something inherent that chooses when to envelop the body. “If I was the prince, I’d want the castle to myself.”</p><p> </p><p>“Dear, that’ll change when you get older—-”]</p><p> </p><p>Once upon a time and the Spirit is starting to forget this: time. They have</p><p> </p><p>en cage d</p><p> </p><p>| The Spirit |</p><p>| and |</p><p> </p><p>La rr y Trai n or</p><p><br />
<br />
</p><p>Not like how Larry’s beautiful chest is a cage but in the traditional sense of the humanlanguage words thattheystillcan’t parse right it doesn’t sound right it doesn’t. This means: they are caged and caged away. Like pretty birds with beautiful [---the first thing that the Spirit thinks when they see it, the monster<b>no </b>the mangledpathetic thing with its pitiful pitiful endless-pit-of-synonymous-agony-pain-suffering-folding in The Spirit can see the door frames behind his eyes that house horrors beyond even their caliber’s comprehension their eyes so close to touching his eyes</p><p> </p><p>is</p><p> </p><p>he is beautiful]</p><p> </p><p>wings and harmonious song chirps. If the Spirit could be heard anywhere in this aching dimension they would sing to Larry, hymns from the home they cannot find their way back to. Like <em> hmmm. Hmmm. </em> Piano notes, each key pressed knife-wound-similar. <em> Such a perfect day, you just keep me hanging on, oh such a perfect day, you made me </em></p><p> </p><p>
<em> forget (Larry forgets and remembers over and over like this: falling; there is no end beyond the air, there is no light besides their presence inside of his “””heart””” his !!!heart!!! (their own heartplace with dying frailty) and Larry remembers over and over like this: John Bowers and Sheryl Trainor and) </em>
</p><p> </p><p>
<em> myself (Larry Trainor the amalgam of everyone he has ever known Larry Trainor the amalgam of everything that is Larry Trainor and everything that excludes the Negative Spirit entirely, the amalgam that The Spirit aspires to touch to touch to touch if they could touch anything, it would be him) </em>
</p><p> </p><p>
<em> I thought I was someone else, someone good </em>
</p><p> </p><p>
<em> Oh, such a perfect day </em>
</p><p> </p><p>and the electricity crackles into Larry’s skin this answers the question: <em> yes he can still feel </em>they check the box on their paperwork;;; he can feel everything that is not</p><p> </p><p>
<em> you just </em>
</p><p> </p><p>The Spirit</p><p> </p><p>
<em> keep me </em>
</p><p> </p><p>or their love which is: the crux, the catalyst, the spark (ha!) of it all the energy that could form universes different from this one in which the stars breathe to shine their love over the system’s planets and life evolves into a love that burns to the skeleton that he should be ; they are not Earthly but they </p><p> </p><p>
<em> hanging </em>
</p><p> </p><p>love in a way that is not Earthly but beyond any galactic knowledge or any visible monster</p><p> </p><p>
<em> on. </em>
</p><p> </p><p>But anyway: he can’t hear them. He wheels himself into Niles Caulder’s manor in a memory (1966 they have) and they speak in tongues (time) that the Spirit cannot understand (like breath) they hurl words out like <em> home </em> and <em> comfort </em>which of course of course the Spirit cannot have. Do you understand do you doyou do you </p><p> </p><p>DO YOU UNDERSTAND THE SICKENED TRUTH OF IT ALL: THAT THE SPIRIT IS TRAPPED IN SOMETHING BEAUTIFUL AND ALLURING THE OPPOSITE OF MYTHICAL SO TANGIBLE SO SO SO THE SPIRIT IS TRAPPED HERE THE SPIRIT IS. AND THEY ARE! THEY ARE SO MANY THINGS BUT THEY CANNOT WRAP THEIR FORM OUTSIDE OF THE CAGE. The Spirit could be here for —- time. Oh, here: months. Decades. Years. Centuries. Millennia. And beyond. Do you understand that the Spirit is trapped in their own prison of wanting and yes wanting can be solidified wanting can be calcified into something purer religious holy that can hold even their power captive wild wild wild wild wild wild they are wild now they. Larry is. But he. His voice is so calming-- deep like vast ocean water water that could be used to create false invisible purity that emits from his body stronger than radiation<em> oh </em> water to wade into and drown into and decay into if they were this: human deep like agonizing torture endless like — and so they imagine him singing to <em> them </em>in a cycle of beauty and something pure religious holyhymns like:</p><p> </p><p>
<em> You made me forget myself. </em>
</p><p> </p><p>
<em> I thought I was someone else. </em>
</p><p> </p><p>
<em> Someone good. </em>
</p><p> </p><p>And in the present day which is [sixty years] [six decades] [over half a century] tiring, Larry curls into himself imagines inverting entirely turning himself inside out insides slurred and beautiful ruby divine red on the pillowcase</p><p> </p><p>so <em> !!!!!!!!! beautiful! even in his pain </em></p><p> </p><p>
<em> so !!!!!!!! beautiful!!!!!!! even in his body’s stages of grief and unravelling and grief bandaging his body ghastly with its colddead hands and lithe fingers and the Spirit</em>
</p><p> </p><p>
<em> does not even see the fire instead they see something that could be cradled if they were just a bit stronger oh </em>
</p><p> </p><p><em> instead they see the most </em> <b> <em>beautiful </em> </b> <em> man that this planet has ever held in its atmosphere and outside of its atmosphere and in every aspect of beauty Larry Trainor exists it makes them convulse in a way that is just </em></p><p> </p><p>
<em> is </em>
</p><p> </p><p>and the inside of Larry Trainor — their residence their surroundings the pink<b>beautiful </b>glow of inner light — is —</p><p> </p><p>is —</p><p> </p><p>Well. Simply put it is unbearable. It is torturous, each (beautiful) thought in Larry’s mind blade-sharp to turn them human into a lowly creature with skin that is shredded and sanded down each (beautiful) thought blooming into microscopic cuts in their composition and it reduces them to a being of pity rather than valiance and oh</p><p> </p><p>and oh</p><p> </p><p>and oh</p><p> </p><p>and oh</p><p> </p><p>and oh</p><p> </p><p>and oh</p><p> </p><p>and oh</p><p> </p><p>and oh</p><p> </p><p>He hasn’t placed his hand over his chest in <em> so </em> <b> <em>long. </em> </b> <em> So long. </em>The Spirit has craved it. To touch him. The worshipworthy. Like divinity’s fingertips brushing over them, incinerating them and forcing them from the ashes of eviscerated airplanes;;; they can be an amalgam too but it’s different. Now. It’s different. The Spirit is an amalgam of love love</p><p> </p><p>
<big> <big> <big> <big> <big>LOVE</big> </big> </big> </big> </big>
</p><p> </p><p>LOVE love Love love and a torture they have grown-accustomed-to. The Spiritis the blending point of torture and love and torture and love and it doesn’t. Mat. ter. It doesn’t matter because Larry’s hand is touching them </p><p> </p><p>now,</p><p> </p><p>his fingers curling into his flesh, their light and his flesh becoming one creature of crazed desire (yes it always boils back down to desire which is the boneframe of it all but we don’t have</p><p> </p><p>time for that. We just don’t have time, we have to establish the most important aspect of the fable which is: the Spirit is in love with Larry and their love is both the monster of the story, the big bad’s needling teeth &amp; also the savior knight’s glistening bodyarmor, also the heavenly touch <b> <em>it is very confusing, see. </em> </b>They—)</p><p> </p><p>their light and his flesh meeting in a manner that almost approaches the coveted way. </p><p> </p><p>“Do you ever,” he whispers in vulnerability, cutting his integument in half and baring his all to them, <em> beaut,if,ul, </em>“get tired?”</p><p> </p><p>If they could know what crying or humanity is like they would melt into that state but unfortunately they are</p><p> </p><p align="center">above</p><p> </p><p align="right">all of that.</p><p> </p><p>But Larry is there too. Larry is all that is and Larry is all that matters and the Spirit looks at the world through his sad faded-in eyes and the Spirit looks at the patterns behind his eyes when he closes them and their glow remains like an inhale like lungworks they gather their courage and they force themselves into acknowledgement and they pull their mind out of the deep wells of flustering and they say:</p><p> </p><p>“No,” and they say:</p><p> </p><p>“Yes,” and they say:</p><p> </p><p>“Never of you but it is exhausting and that’s different.”</p><p> </p><p>&amp; Larry balls his sweater in his fist and giggles laughs (beautiful) (always beautiful) (always a rarity here to hear him laugh to feel his chest raise and tighten in every movement that could for a moment be decided pure—) behind bandages. He is always bandaged even when he is bare, always held——→back restrained by the skinscarring that has grown over the bravery that once spilled out, that splattered on the ground and melted into the ground and grew flowers in the destitute for him to pluck and vase.</p><p> </p><p>“Who am I kidding,” he says, words sp</p><p> </p><p>i</p><p>ll</p><p>i</p><p>n</p><p>g</p><p> </p><p>out of him like holy-wrath, like <em> like </em> like <em> like </em> organs sickened and destined to rot <em> like </em> an overflowing flood of desperation that is ruining the Spirit's structure, collapsing invading them, soaking each aspect of their form up, the love extracted---. “Of course you do. I know you do.” Another baring, pitiful <em> pathetic- </em>beautiful man without any teeth to show: “Who wouldn’t get tired, of me.”</p><p> </p><p>It is hard. This attempt at communication. The Spirit. Glows up into his chest, presses up against him feels the outside world rumble hears the rhythm of his heartbeats (this could be prayed to) and tries <b> <em>tries </em> </b> to convey the message, which of course is <em> No. I love you. </em> Even—-when---they---shouldn’t, when it is horribly illogical and oxymoronic to feel this emotion like epic poetry engrained, the Spirit loves him. The Spirit</p><p> </p><p><em> he stole them away from everything they knew every aspect of existence and all of familiarity and hope </em> <b> <em>which they were once so </em> </b> <em> FULL of but he was transplanted IN to compensate and now he runs deeper and higher than hope, his body clothed in light to replace it, his soul like wounded animalflesh and </em></p><p> </p><p>loves</p><p> </p><p>
<em> and yet they still devote, yet they still listen to (boombooomboomboooom) the fluttering in his (boom) chest and curl in to form stories and complex worlds in their intricate mind, and pretend. That one day things will be: different. That the miraculous will touch them with their precious hands and melt the Negative Spirit and Larry Trainor into one soul (boom) one heart without invasion (boom) one kind of love that would be envied by anyone searching for true harmony — here it would be true harmony — here in their mind they only crave true harmony; they do not allow themselves to think about </em>
</p><p> </p><p>him.</p><p> </p><p>See: downfalls should not taste like honey. The SPirit has never tasted this, but Larry has and they recall it from his mind. Downfalls, sweet and candied and alluring. Downfalls — (weak)nesses — slithering into minds to push them into something unrecognizable, beings existences formed from cardiac muscle and spilled-out grotesque insides that from a distance resemble love. Resemble peace.</p><p> </p><p>Larry tastes like honey like downfall like something sweet and candied and alluring, Larry the metaphorical serpent in the cycle of adoration and frustration, the dance they’ve been performing back and forth, hand in hand, for decades upon <em> decades. </em>Hand in hand. Wouldn’’t that be nice? One should never- - - - - - - - - - - - - - touch. There has to be - - - - - - - - - - - - distance. The Spirit cannot possess anything beyond foolish desire. They have tried. They try to reach the center, the boiling core of the tools to unravel love but</p><p> </p><p>it’s</p><p> </p><p>too </p><p> </p><p align="right">far away, intangible. </p><p> </p><p>And. Peace is also a foolish concept &amp; something that cannot be HOPED for nor dreaded. It’s something that even celestial energy beings desire [desire, reduntantly, is the weakness, the one tender spot in their presence, the only thing that forces them through each day of a hatred like the bones of a bird; delicate yet still macabre, still a bad omen, still a horrifying sight to behold, still pity] and it’s something that humanity may never have. They could manage it, the Spirit thinks, in a few centuries. Oh.</p><p> </p><p>They will witness the change — and perhaps a different kind of alluring downfall — of humanity through Larry’s eyes;; they’re stuck together and the Spirit as the oxygen that moves through his body, the Spirit as the hand of miracles pumping the heart and so on. They will be together for ev er.</p><p> </p><p>So much time to:</p><p> </p><p>love him with. So much time to cradle him and sing to him, him as the perfect day, the ultimate ideal ending. So much time to envelop Larry Trainor’s essence, so much time to open it.</p><p> </p><p>An eternal opportunity. He will always need someone to save him.</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>
Reference in a new issue View git blame Copy permalink