746 lines
17 KiB
HTML
746 lines
17 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>carried me along the sand
|
||
</h2>
|
||
|| Larry masturbates, basically.
|
||
<hr>
|
||
<p>
|
||
<span>It has been so long since Larry Trainor has known touch. </span>
|
||
</p><p> </p><p>
|
||
<span>Yes, he dreams of it, </span>
|
||
<em>
|
||
<span>yearns for it; </span>
|
||
</em>
|
||
<span>presses himself into his bed and curls up only to stay awake burdened by faceless, unrealistic fantasies. Over and over broken in his mind: hands brushing against one another, skin meeting skin in every holy altarplace, fresh teeth against his tired neck. Now that he allows himself to openly desire, he misses being fucked more than anything; O how he would sacrifice himself to feel someone inside of him again, to feel a mouth around him again, and some nights when he focuses on it with a particular effort, he can almost feel it still, like ghosts of love against him.</span>
|
||
</p><p> </p><p>
|
||
<span>He will never have that again.</span>
|
||
</p><p> </p><p>
|
||
<span>He will never be touched again. He will also never die. He will live out the rest of time’s cruelty and he will </span>
|
||
<em>
|
||
<span>never </span>
|
||
</em>
|
||
<span>be touched ever again. It is hard to deal with. It is agonizing, to have touch stolen from you. It stirs up illness within him. An anger that he had previously laid to rest.</span>
|
||
</p><p> </p><p>
|
||
<span>It’s -</span>
|
||
</p><p> </p><p>
|
||
<span>Even if he could be touched without disaster, no man will ever look at Larry Trainor’s scarred body and want to lay hands on him. No one will ever desire him. He is grotesque, an eyesore, something that must be hidden away from view lest the world becomes horrifically disturbed. Long ago he was beautiful, long ago he was worthy. Now—-</span>
|
||
</p><p> </p><p>
|
||
<span>Now, he supposes, he shouldn’t think in such firm concepts. Black and white gets you nowhere in this life. The Negative Spirit certainly would not want him to think of himself as grotesque, but it also does not understand the truth of humanity yet; it only knows Larry, and he isn’t a very good example of humanity.</span>
|
||
</p><p> </p><p>
|
||
<span>Sometimes it is enough, to dream. Sometimes, though it is very rare, he will have a dream in which he can feel again, in which emotions become physical and he’s being fucked again </span>
|
||
<em>
|
||
<span>so </span>
|
||
</em>
|
||
<span>good against the wall of his bedroom, and the rest of the world doesn’t matter. He cannot see </span>
|
||
<em>
|
||
<span>who </span>
|
||
</em>
|
||
<span>is fucking him, the man’s face obscured. He can only feel a warm arm wrapped around his torso, fingers snaking through his own fingers, the feeling of being </span>
|
||
<em>
|
||
<span>whole. </span>
|
||
</em>
|
||
<span>He doesn’t need to see the man’s face; it is better this way, he thinks, so he doesn’t have to deal with identities and emotions. Only craving now, here.</span>
|
||
</p><p> </p><p>
|
||
<span>It takes him too long to realize that he can move his hands over his own skin. Larry Trainor can place touches upon his own body — allow his mind to work the fantasy — and that has to be enough.</span>
|
||
</p><p> </p><p>
|
||
<span>He doesn’t even </span>
|
||
<em>
|
||
<span>mean </span>
|
||
</em>
|
||
<span>to. The dream hits him, infects him and courses through his veins to destroy him, and he wakes up hard. It’s dizzying. His head spins, as he adjusts to the vivid, bright world around him. The realization feels like a wound.</span>
|
||
</p><p> </p><p>
|
||
<span>He wasn’t even aware that his body, after the fire’s affliction, could still do this. He cannot bring himself to analyze it.</span>
|
||
</p><p> </p><p>
|
||
<span>Instead he works quickly to strip himself of clothing, runs his own hand down his own chest and stomach. Feels the ridges of the burns, as if they are constellations not born of pain. Grasps himself —</span>
|
||
</p><p> </p><p>
|
||
<span>Larry tries to believe that he is worthy of what he imagines, forces himself to bite into the belief that he deserves to feel good, until his mind is banished of anxiety and fear entirely and is replaced with the blazeburn of a million stars, what he has not felt in</span>
|
||
<em>
|
||
<span> so </span>
|
||
</em>
|
||
<span>long. Not since Flex—</span>
|
||
</p><p> </p><p>
|
||
<span>The planet spins and Larry’s mind spins along with it, gravity unbuckling him. It feels </span>
|
||
<em>
|
||
<span>so </span>
|
||
</em>
|
||
<span>good. He deserves this. One day, if he is touched again by some miracle, he will deserve it. He deserves this release now — is </span>
|
||
<em>
|
||
<span>owed </span>
|
||
</em>
|
||
<span>it, even, after the crushing weight of time.</span>
|
||
</p><p> </p><p>
|
||
<span>He places one hand over his mouth. Muffled. Gasps and moans like melodies, like birdsong. It’s almost </span>
|
||
<em>
|
||
<span>healing </span>
|
||
</em>
|
||
<span>when he reaches his release, body folding in on itself, the feeling like electricity flowing and seeping into every cell. Healing. </span>
|
||
<em>
|
||
<span>Healing, </span>
|
||
</em>
|
||
<span>he thinks.</span>
|
||
</p><p> </p><p>
|
||
<span>He deserves it.</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>
|