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

727 lines
No EOL
22 KiB
HTML
Raw Permalink 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>
<h2><a href="/writing">back!</a></h2>
<h1>Reposing Force Excerpt #3</h1>
Officially scrapped 2025.<hr>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">She tries to ignore them.&nbsp;</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">She moves throughout the lobby at viper-strike speed, winding and twisting through like she's on a heroic journey to Avoid Kingsley And Rowan. She ducks underneath the crowd, tries to find her escape, but there are simply too many people here for it to be effective. Too many metahumans in this crowded world. Too many people seeking help from the Force that they will never receive in the way that they deserve. Too much selfishness. Too much admiration. Too many people talking to her, too many people perceiving her presence in the universe. Too much, too many. It's all just so much, so overwhelming. Ivy melts over the flooring, tries to keep herself intact until she can leave.</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">She glances back - Kingsley doesn't look pleased. Rowan has him in tow, his hand tightly clasped around Kingsley's hand, dragging him through the chase. He looks like he's tired of Rowan's antics - he must do this often - and he has the body language of someone who would rather be a corpse than be in the current situation.</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">But when he catches Ivy's gaze, he manages a smile and an awkward wave with his other hand, and it's entirely infuriating. Today was a mistake. Today was, potentially, the biggest mistake of her whole existence. She transforms into something mistaken, a shimmering, shifting inhuman being composed only of fallacy and untruths. She melts, again, over the flooring, and she groans when she pulls her gaze away.</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">The ridiculousness of the situation does not escape her. It's not as Kira suggested; they're not stalking or harassing her. For some reason, she wishes they were stalking or harassing her instead of the unfathomable, insurmountable truth, which is: they care about her. They're chasing her down to wish her goodbye after meeting her. They're being kind. Ivy is not too familiar with kind; she is, however, familiar with intimidation. It's easier, sometimes, to deal with facing violence than to accept the opposite.</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">She finally reaches the door, </span><span style="font-weight: 400;">and the cold air bites her face with violent gnashing as she runs into the parking lot. Kingsley and Rowan follow her, because of course - or because they parked out here too, she's not sure - and she stops for a moment to almost consider feeling guilty about this. She has to maneuver herself into guilt, see. It's rather inconvenient; she doesn't know how to feel it on her own.</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">She knows what she </span><em><span style="font-weight: 400;">should </span></em><span style="font-weight: 400;">be doing. She should be opening up and allowing herself to grow. Maybe she can even make a friend. Two friends! She should allow herself to spread her wingspan out over the skies and escape the confinements of herself. She shouldn't be running like this. It's almost embarrassing; her movements are slow and jerking, her body winding down with each step toward her car. She needs to rest.</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">She looks back, on unholy instinct, and her puny little human heart sinks into itself when she notices that it looks like Rowan has given up. He's hugging Kingsley; they must have reached one of their cars. The car looks historic - and extremely expensive, coated in a light pink shine. They're about to go home.</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">Silly Ivy, that's what you wanted, she thinks. That </span><em><span style="font-weight: 400;">is </span></em><span style="font-weight: 400;">what you wanted, right?</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">Right?</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">Ugh.&nbsp;</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">She curses under her breath, exhaling the word </span><em><span style="font-weight: 400;">fuck </span></em><span style="font-weight: 400;">so many times it's like a new, invented hymn, but she does walk over. In the opposite direction from her car. Away from her car. She does not walk towards her car. She walks away. This is a very important fact that has to be stressed, underlined, emphasized: she walks away from her car, into the metaphorical skies and the literal road, towards Rowan and Kingsley, towards the path of freedom she has impulsively decided to carve. And she keeps walking.</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">When she approaches, her hands find the inner pockets of her coat, which are surprisingly spacious, the inner fabric soft. She refuses to make eye contact when she says it: "Hi," and then: "Sorry."</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">"Whatever could you be sorry for," Rowan asks in blatant sarcasm. Kingsley gives him a </span><em><span style="font-weight: 400;">look. </span></em><span style="font-weight: 400;">"Well, it's okay," he continues. "We just don't know a lot of people here."</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">"We wanted to say goodbye," Kingsley chimes in. "You really helped us out today. We wanted to thank you."</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">"The treadmill thing," Rowan exclaims, lighting up in intrigue. "Kingsley told me about it. Cool as </span><em><span style="font-weight: 400;">fuck.</span></em><span style="font-weight: 400;">"</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">Her mouth stumbles open, and remains there for a few seconds before she can parse what she's hearing. "Uh&hellip; wow. It's - it's no problem, really. I mean, join the Reposing Force to help people, right?"</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">"Yeah, I mean, in an ideal world, that'd be the main motivation, yes," Kingsley says, a saddened laugh.</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">"Well, it's&hellip; my motivation. I think," she lies.&nbsp;</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">"So, what else are you gonna do if you get in?" Rowan asks.</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">Ivy considers it. She didn't think that far ahead. She wonders if anyone does, if most people apply to join the Force </span><em><span style="font-weight: 400;">after </span></em><span style="font-weight: 400;">establishing an intricate, detailed plan of how they're going to spend their time within it. In an ideal world, as Kingsley said, that would occur. She feels selfish. She </span><em><span style="font-weight: 400;">is </span></em><span style="font-weight: 400;">selfish; she applied for her own well-being instead of wanting to maintain the well-being of others. But who takes care of Ivy? Who believes in her enough, who is kind enough, who is brave enough, to look after her? No one in this city can manage such a difficult feat.</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">&ldquo;I don&rsquo;t know,&rdquo; she admits. &ldquo;Um, once I get back on my feet? Might start&hellip; uh&hellip; painting in my free time?&rdquo;</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">She can&rsquo;t quite figure out why she expects them to laugh, but her first instinct is to expect ridicule. That doesn&rsquo;t get you anywhere in life, her father once said. You need to make something of yourself. Don&rsquo;t embarrass us.</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">Kingsley&rsquo;s face only lights up at her words. &ldquo;Oh, you paint?&rdquo;&nbsp;</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">&ldquo;I used to,&rdquo; Ivy replies, blatantly awkward. &ldquo;I haven&rsquo;t since&hellip; a while. But I always said I&rsquo;d come back to it when I could.&rdquo;</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">&ldquo;If you do, I&rsquo;d love to buy one of your paintings,&rdquo; Kingsley tells her, and she hates him for it. She was never supposed to see them again, they were supposed to get lost in the city waters; she wanted to see them again, she was supposed to make a friend. Her desires are failing, and conquering. Defeat, victorious. She wants so many different things, distinct wants and needs and fears, all contradictory, enough to fill up a city. She hates him for it and she wants to fall to her knees in shocks of sobs and she wants to hug him and she wants, above all, to die. It&rsquo;s not very logical.</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">&ldquo;Wow,&rdquo; she says, her tone flat now. &ldquo;Thank you.&rdquo;</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">&ldquo;I think I heard they sell their members&rsquo; art in auctions sometimes,&rdquo; Rowan offers. &ldquo;So, you know, if you get in, that might be something to look into.&rdquo;</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">&ldquo;I&rsquo;ll keep that in mind. Thanks.&rdquo;</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">Kingsley turns to Rowan. &ldquo;I can drive you up the parking ramp, Ro,&rdquo; he says, and then turns back to Ivy, grinning. &ldquo;Do you need anything?&rdquo;</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">&ldquo;No,&rdquo; she says. &ldquo;Nah, I&rsquo;m good. So&hellip;&rdquo;</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">&ldquo;I can walk you to you car.&rdquo;</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">She screams, wails, in her internal world. In the external world, within the constraints of reality, her body speaks of its own accord: &ldquo;That&rsquo;d be nice.&rdquo;</span></p>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">&ldquo;And I am getting in ours,&rdquo; Rowan announces. &ldquo;Sorry. It&rsquo;s, you know, cold. But it was really nice to meet you, Ivy.&rdquo;</span></p>
<p><br /><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 PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
--heading-font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
--font-size: 18px;
/* Other Settings: */
--margin: 25px;
--padding: 24px;
--border: 10px inset #001457;
--round-borders: 0px;
--sidebar-width: 300px;
}
/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-size: var(--font-size);
margin: 0;
padding: var(--margin);
color: var(--text-color);
font-family: var(--font);
line-height: 1.2;
font-weight: 900;
background: var(--background-color);
background-image: url("https://i.ibb.co/214VBwsN/pkg50004.jpg");
}
::selection {
/* (Text highlighted by the user) */
background: rgba(0, 0, 0, 0.2);
}
mark {
/* Text highlighted by using the <mark> element */
text-shadow: 1px 1px 4px var(--link-color);
background-color: inherit;
color: var(--text-color);
}
/* Links: */
a {
text-decoration: underline;
}
a,
a:visited {
color: var(--link-color);
}
a:hover,
a:focus {
color: var(--link-color-hover);
text-decoration: none;
}
/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */
.layout {
width: 1200px;
display: grid;
grid-gap: var(--margin);
grid-template: "header" auto "main" auto "footer" auto / auto;
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}
main {
grid-area: main;
overflow-y: auto;
padding: var(--padding);
background: var(--content-background-color);
border: var(--border);
border-radius: var(--round-borders);
}
/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */
header {
grid-area: header;
font-size: 1.2em;
border: var(--border);
border-radius: var(--round-borders);
background: var(--content-background-color);
}
.header-content {
padding: var(--padding);
}
.header-title {
font-family: var(--heading-font);
font-size: 1.5em;
font-weight: bold;
}
.header-image img {
width: 100%;
height: auto;
}
/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */
aside {
grid-area: aside;
border: var(--border);
border-radius: var(--round-borders);
overflow: hidden;
background: var(--sidebar-background-color);
padding: var(--padding);
color: var(--sidebar-text-color);
}
.left-sidebar {
grid-area: leftSidebar;
}
.right-sidebar {
grid-area: rightSidebar;
}
.sidebar-title {
font-weight: bold;
font-size: 1.2em;
font-family: var(--heading-font);
}
.sidebar-section:not(:last-child) {
margin-bottom: 3em;
}
.sidebar-section ul,
.sidebar-section ol {
padding-left: 1.5em;
}
.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
margin-top: 10px;
}
/* Sidebar Blockquote: */
.sidebar-section blockquote {
background: rgba(0, 0, 0, 0.1);
padding: 15px;
margin: 1em 0;
border-radius: 10px;
overflow: hidden;
}
.sidebar-section blockquote > *:first-child {
margin-top: 0;
}
.sidebar-section blockquote > *:last-child {
margin-bottom: 0;
}
/* Site Button: */
.site-button {
display: flex;
flex-direction: column;
align-items: center;
}
.site-button textarea {
font-family: monospace;
font-size: 0.7em;
}
/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */
nav {
margin-bottom: 3em;
}
nav .sidebar-title {
margin-bottom: 0.5em;
}
nav ul {
margin: 0 -5px;
padding: 0;
list-style: none;
user-select: none;
}
nav ul li {
margin-bottom: 0;
}
nav > ul li > a,
nav > ul li > strong {
display: inline-block;
}
nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
padding: 5px 10px;
}
nav > ul li > a.active,
nav > ul li > details.active summary {
font-weight: bold;
}
nav ul summary {
cursor: pointer;
}
nav ul ul li > a {
padding-left: 30px;
}
/* NAVIGATION IN HEADER */
header nav {
margin-bottom: 0;
}
header nav ul {
display: flex;
flex-wrap: wrap;
margin: 0;
}
header nav ul li {
position: relative;
}
header nav ul li:first-child > a {
padding-left: 0;
}
header nav ul li:last-child > a {
padding-right: 0;
}
/* Subnavigation (Drop-Down): */
header nav ul ul {
background: var(--content-background-color);
display: none;
position: absolute;
top: 100%;
left: 10px;
padding: 0.5em;
z-index: 1;
border: var(--border);
min-width: 100%;
box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}
header nav ul li:hover ul,
header nav ul li:focus-within ul {
display: block;
}
header nav ul li strong {
color: var(--link-color);
text-decoration: underline;
font-weight: normal;
}
header nav ul ul li a {
display: block;
padding-left: 0;
padding-right: 0;
}
/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */
main {
line-height: 1.5;
}
main a,
main a:visited {
color: var(--link-color);
}
main a:hover,
main a:focus {
color: var(--link-color-hover);
text-decoration-style: wavy;
}
main p,
main .image,
main .full-width-image,
main .two-columns {
margin: 0.75em 0;
}
main ol,
main ul {
margin: 0.5em 0;
padding-left: 1.5em;
}
main ol li,
main ul li {
margin-bottom: 0.2em;
line-height: 1.3;
}
main ol {
padding-left: 2em;
}
main blockquote {
background: rgba(0, 0, 0, 0.1);
padding: 15px;
margin: 1em 0;
border-radius: 10px;
}
main pre {
margin: 1em 0 1.5em;
}
main code {
text-transform: none;
}
main center {
margin: 1em 0;
padding: 0 1em;
}
main hr {
border: 0;
border-top: var(--border);
margin: 1.5em 0;
}
/* HEADINGS: */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
font-family: var(--heading-font);
margin-bottom: 0;
line-height: 1.5;
}
main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
margin-top: 0;
}
main h1 {
font-size: 1.5em;
}
main h2 {
font-size: 1.4em;
}
main h3 {
font-size: 1.3em;
}
main h4 {
font-size: 1.2em;
}
main h5 {
font-size: 1.1em;
}
main h6 {
font-size: 1em;
}
/* COLUMNS: */
.two-columns {
display: flex;
}
.two-columns > * {
flex: 1 1 0;
margin: 0;
}
.two-columns > *:first-child {
padding-right: 0.75em;
}
.two-columns > *:last-child {
padding-left: 0.75em;
}
/* -------------------------------------------------------- */
/* CONTENT IMAGES */
/* -------------------------------------------------------- */
.image {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.full-width-image {
display: block;
width: 100%;
height: auto;
}
.images {
display: flex;
width: calc(100% + 5px + 5px);
margin-left: -5px;
margin-right: -5px;
}
.images img {
width: 100%;
height: auto;
padding: 5px;
margin: 0;
overflow: hidden;
}
/* -------------------------------------------------------- */
/* ACCESSIBILITY */
/* -------------------------------------------------------- */
/* please do not remove this. */
#skip-to-content-link {
position: fixed;
top: 0;
left: 0;
display: inline-block;
padding: 0.375rem 0.75rem;
line-height: 1;
font-size: 1.25rem;
background-color: var(--content-background-color);
color: var(--text-color);
transform: translateY(-3rem);
transition: transform 0.1s ease-in;
z-index: 99999999999;
}
#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
transform: translateY(0);
}
/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE */
/* -------------------------------------------------------- */
/* CSS Code for devices < 800px */
@media (max-width: 800px) {
body {
font-size: 14px;
}
.layout {
width: 100%;
grid-template: "header" auto "rightSidebar" auto "main" auto "leftSidebar" auto "footer" auto / 1fr;
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}
aside {
border-bottom: 1px solid;
padding: 9px;
font-size: 0.9em;
}
nav {
padding: 0;
}
nav > ul {
padding-top: 0.5em;
}
nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
padding: 0.5em;
}
main {
max-height: none;
padding: 15px;
}
.images {
flex-wrap: wrap;
}
.images img {
width: 100%;
}
#skip-to-content-link {
font-size: 1rem;
}
}
</style>
</html>
Reference in a new issue View git blame Copy permalink