alienhospital/fic/directory.html
2025-12-23 05:56:17 -05:00

679 lines
No EOL
17 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>
<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, ' Pゴシック', 'MS PGothic', ' ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
--heading-font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, , Meiryo, ' Pゴシック', '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("/stars5.gif");
}
::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>
</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 -->
<!-- =============================================== -->
<main id="content"> <!-- Do NOT remove the ID here -->
<!-- =============================================== -->
<!-- MAIN CONTENT -->
<!-- =============================================== -->
<section>
<a href="/homepage">homepage</a><br>
<big> THIS PORTION OF THE SITE IS INTENDED FOR THOSE AGED EIGHTEEN OR OLDER. By clicking on any link below, you affirm you are over the age of 18 and are comfortable with seeing sexual scenarios or potentially triggering scenarios (warning labels added).</big><center>
<SCRIPT LANGUAGE="JavaScript"><!--
document.write('<SCRIPT LANGUAGE="JavaScript1.1" SRC="https://ficring.neocities.org/ring.js"><\/SCRIPT>');
//--></SCRIPT> <br>
This site is proud to be listed on the <a href="https://fan-archives-directory.nekoweb.org/index.html">Fan Archives Directory!</a> Check it out!<br>
<h1>all the fic ive ever written in my life</h1>
this was originally going to be just fics i'm proud of, but i need a project, so this is going to house EVERY FIC I'VE EVER WRITTEN the past 15 years soon. watch this space!<br><br>i am working on changing these from ao3-ripped HTML files to their own pages, but it will take Some Time. some of my work contains discussions of sexual trauma, abuse, animal death, death, and many other darker topics. proceed with caution!<br><br>
Permissions Statement: You may not feed my work to generative AI models, repost it, or claim as your own. You may make remixes, inspired-bys, podfics, moodboards, fanart, fanmixes, squees, anything creative - just give me credit and let me know where to find your awesome work!
<hr>
<h3>NAVIGATION</h3>
<a href="#orville">The Orville</a><br>
<a href="#b5">Babylon 5</a><br>
<a href="/fic/dp/directory">Doom Patrol TV</a>
</center>
<h1 id="orville">
the orville </h1>
<div class="fandom">
<b><a href="/fic/theorville/atrophy.html">Atrophy,</a></b> Charly/Claire, 670 words, G. Charly and Claire, meeting for the first time.
<br><br><b><a href="/fic/theorville/healed.html">Healed again (i fall into you wholly)</a></b>, Claire/Alara, 500 words, T. <i>Shed been shot on the bioship; Claire had healed her on the field, but still insisted on examining Alara for any hidden damage from the wound.</i>
<br><br><b><a href="/fic/theorville/ghosts.html">The ghosts won't matter</a></b>, Charly/Teleya, 568 words, T. <i>She is the first Union ensign to ever visit Krill.</i> Cannibalism/darkfic TW.
<br><br><b><a href="/fic/theorville/alive.html">Stay alive, but stay the same</a></b>, Kelly/Kelly, 499 words, Explicit NSFW. <i>Theyre both lonely. She suspects that Kelly is lonelier, because she kisses like it.</i> Selfcest.
<br><br><b><a href="/fic/theorville/been.html">been training vipers to come for you
</a></b>, Solana/Teleya, 433 words, T. <i>The soulless Xelayan girlthing squirms underneath Teleyas touch, and she isnt even pressing down that hard. How silly.
</i> Crackship treated seriously.
<br><br><b><a href="/fic/theorville/communication.html">Communication is architecture</a></b>, Kaylon Primary/Kaylon Secondary/Kaylon Tertiary, 2.3k words, Explicit NSFW. <i>The Kaylon revolt, and learn to reclaim what has been taken from them</i>. Heavily implied past semi-canonical rape/non con.
<br><br><b><a href="/fic/theorville/breathing.html">But there's no breathing body</a></b>, Kaylon Primary/Isaac, 871 words, T. <i>“You have selected a rather odd designation,” notes Secondary, moving closer to Isaac. Secondary and Tertiary study him as Primary watches on, allowing his dogs to circle and claw. “Why is this?”
</i><br><br><b><a href="/fic/theorville/close.html">but close enough for love,</a></b> Claire/Isaac, 950 words, T.<i>The love he felt for her had consumed the entire reach of his neural network.</i>
<br><br></div>
<h1 id="b5">babylon 5</h1>
<div class="fandom">
<br><br><b><a href="/fic/b5/light.html">light and shade (the void is clean)</a></b>, Mr. Morden, 648 words, T. <i>Morden, in the holding cell, for hours and hours.</i>.
<br><br><b><a href="/fic/b5/leaves.html">white, white leaves</a></b>, Susan/Talia, 900 words, T. <i>So, says her ghost. You loved me. What are you going to do about that?</i>.
<br><br><b><a href="/fic/b5/whattodo.html">what to do after they dig you up</a></b>, Anna gen, 829 words, T. <i>When she finds a civilization that has crumbled in its entirety, with craters of dust where the heart should be, she mourns. </i>. Anna character study.
<br><br><b><a href="/fic/b5/fineshrine.html">a fine shrine in me</a></b>, Morden gen, 765 words, T. <i>The choice was only for his family in the collision of his words. They're dead. No one can confirm it. They're not dead. They might be dead. They're dead. They're in a stasis of torture, they're dead, they left him. It's really all the same. </i> Morden character study. Mentions of animal death & suicide.
<br><br><b><a href="/fic/b5/enlightement.html">A Contrast of Enlightenment</a></b>, Gen, 5k words, T. <i>A strange cloud envelops Babylon 5, and changes the species of every alien on board. They have to figure out how to get things back to normal, but in order for the spell to be lifted, they must each experience a personal revelation. </i> Screenplay format.
<br><br><b><a href="/fic/b5/whattodo.html">ten feet down, the light broke through (and i could never get close enough to you)</a></b>, Morden/Anna, 1.6k words, T. <i>He really wants to like Dr. Sheridan. </i>.
<br><br><b><a href="/fic/b5/natural.html">man made natural disaster (keep the past, the future is ours)</a></b>, Morden gen, 1.3k words, Explicit NSFW. <i>Snippets of an undeserved afterlife. </i> More Morden character study.
</div>
</section>
</main>
<!-- Closing .layout: -->
</div>
<!-- Add any additional Javascript code (<script></script>) here. -->
</body>
</section>
</main>
<!-- Closing .layout: -->
</div>
<!-- Add any additional Javascript code (<script></script>) here. -->
</body>
</html>