674 lines
No EOL
23 KiB
HTML
674 lines
No EOL
23 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 this house, in this house
|
||
</h2>
|
||
|| TNS/Larry/Tyme.
|
||
<hr>
|
||
<p>Larry has barely been awake for an hour —- <em> so early in the morning as he tends to his plants, the golden rays enveloping him — </em> when the Spirit exits his body without warning. Without prior discussion, without <em> knowledge, </em>the Spirit scoops him up, holds him, gazes into his soul.</p><p> </p><p>And then it opens up a portal to another dimension, and forces both of them in. Of course; tenderness, or the appearance of it, will never last here. It always has to fade in the Spirit’s eyes. Long ago he could not imagine desiring tenderness from it — but things have changed, the circumstances are different now. They can be in—</p><p> </p><p>At first the new dimension is a blinding, unbearable <em> white, </em> and then it morphs itself into a vibrant, unbearable <em> rainbow </em>of color, bleeding around him into pools of mud. When his eyes finally adjust, he’s in a roller rink.</p><p> </p><p>The Spirit allows him to stand, and he stands — stares at it in a similar gaze, in a frustrated form. “What the fuck,” he exclaims, waving both arms in the air, “is wrong with you? I was just — and you had to—”</p><p> </p><p>“Well, well,” interrupts a booming, <em> enchanting </em>voice. “Who are you, baby?”</p><p> </p><p>Larry freezes. Cold, in fright. Is —- is he talking to <em> Larry? </em></p><p> </p><p>“Oh, there’s <em> two </em>of you, mmm. My lucky day.”</p><p> </p><p>The Spirit nearly falls out of the air at the tone of these words. Okay. Larry turns around, anger brewing—</p><p> </p><p>It’s confusing, when he sees the clock-head. It’s continually confusing when he sees the <em> rest </em>of this man’s sparkling, muscular body. His skin glistens in the changing lights. “I—-”</p><p> </p><p>“I’m Dr. Jonathan Tyme,” he says. <em> Jonathan Tyme </em>holds out his hand for Larry to take, and as Larry does so his entire body begins to tremble. “With a ‘y’. And you are?” </p><p> </p><p>Tyme laughs as Larry’s hand lingers against his own — <em> shit, </em>his intention was not to remain here, his intention was to get this over with, to deal with the Spirit’s impulsive decision. But: he pulls his hand back successfully, tries to act tame. “I’m Larry Trainor.”</p><p> </p><p>“What,” he says, gesturing to the Spirit, the alien being that hovers in the air next to him, “are you?”</p><p> </p><p>“It doesn’t talk,” Larry explains. “I don’t think it talks on the same frequency as—”</p><p> </p><p>A voice, deep and alluring until he realizes its source, blasts through the room, shaking the walls, monstrous, <em> oh. </em>“Can you hear me?”</p><p> </p><p>Larry stands in shock as he parses the statement, the reality of the Spirit’s voice finally being revealed to him in person — <em> in real time, </em> in real life, everything about this is entirely <em> real. </em>“Yes,” he breathes, his own voice turning into a molten mess. “But I don’t — I don’t understand—”</p><p> </p><p>“I overheard Cliff and Rita discussing this dimension,” the Spirit explains, and Larry still cannot truly grasp it —- they’re <em> talking, </em>they’re communicating, they’re blossoming. “I thought there was a possibility we might be able to communicate here.”</p><p> </p><p>“So your motivation behind essentially <em> kidnapping </em>me into another dimension was just—”</p><p> </p><p>“Larry,” it says, pausing his anger, “you’re my best friend.”</p><p> </p><p>This is enough to stop him, to decimate him. How — how is <em> that </em>possible? How can the Spirit feel fondness towards him after everything that he has done? After gaining the deepest understanding of Larry Trainor that anyone could ever possibly have? He’s inherently flawed, he’s wholly broken. “What?”</p><p> </p><p>“I just wanted to tell you that,” it reveals. “You’re good. You’re a good person. I’ve been waiting six decades to tell you that I care about you, because apparently my actions were not enough.”</p><p> </p><p>“Don’t lie to me,” he snaps, without meaning to. “This isn’t funny.”</p><p> </p><p>“I’m not—-”</p><p> </p><p>“This is a very touching moment,” Tyme says, interrupting their conversation as it escalates, “but you’re boring me.”</p><p> </p><p>He reaches up to snap his fingers -- to <em> banish </em>them -- but the Spirit is quick, the Spirit takes his hand and interlocks it with theirs. This stops him; Larry can tell that Tyme is captivated even beyond his lack of facial expression. </p><p> </p><p>Alright. That’s - okay. Odd.</p><p> </p><p>“Please,” the Spirit says, and it sounds uncomfortably whiny, “let us stay here. We can’t talk anywhere else.”</p><p> </p><p>“If I let you stay, then you stay for a while.”</p><p> </p><p>“I don’t think that would be a problem.”</p><p> </p><p>“Do you two need to be alone?” Larry asks. He’s - <em> so tired. </em>“And I’m sorry, ‘not a problem’? I don’t want to stay here forever.”</p><p> </p><p>“<em> Relax, </em>Larry,” Tyme says. With his other hand, he takes Larry’s palm again. “Have some fun.”</p><p> </p><p>“This isn’t exactly my idea of fun.”</p><p> </p><p>“If you say so,” the Spirit says, voice now cocky, absorbed. “Don’t forget how well I know you.”</p><p> </p><p>There’s a drawn-out moment where, behind goggles and layers, Larry stares into them. Studies them, <em> truly </em> studies them. Their electrical composition, their body. It’s almost intolerable, knowing the Spirit’s view of him now. Everything melts away — the Spirit is no longer frightening nor irritating, but is simultaneously despised. <em> Don’t forget how well I know you. </em>The Spirit sees him. The Spirit knows, understands every aspect of Larry Trainor, and that is unacceptable.</p><p> </p><p>“I don’t get visitors often,” Tyme says, and it forces them both back into the present. “Why don’t we dance, hm?”</p><p> </p><p>“I’m not sure if this is the right time for that—”</p><p> </p><p>But he’s snapped his fingers again. <em> Bad Girls </em>stops and an upbeat, constantly banging song fills the air surrounding them. It’s overwhelming. Everything about this is overwhelming.</p><p> </p><p>Tyme whisks the Spirit away, out to the floor. It’s — it’s —</p><p> </p><p>The Spirit acts as if it has done this before, as if it knows the correct movement, the right virtuous path toward driving someone insane. It buries its “face” in Tyme’s neck, grinds up against him, legs snaking between legs. It feels <em> wrong </em>to watch, like Larry is intruding. Obscene.</p><p> </p><p>Risky.</p><p> </p><p>But — he can’t look away. It’s more sensual than dancing. He shouldn’t —- he shouldn’t be doing this. They need to go home. They need to go home and pretend this never happened.</p><p> </p><p>Tyme pulls it closer, sinks into it. “What’s your name, baby?” he asks, voice in an inconsistent, distracted whimper. “Tell me what you are.”</p><p> </p><p>“My name,” the Spirit says back, somehow muffled, strained, “is irrelevant.” Its head turns up, entirely in Larry’s direction now, gazing into his core again. “I come from the Negative Space.”</p><p> </p><p><em> Your home, </em>Larry thinks.</p><p> </p><p>“Well, <em>Irrelevant,</em><em> </em>” Tyme says, “let me tell you, you’re <em> heavenly. </em>”</p><p> </p><p>“Thank you.”</p><p> </p><p>Strobe lights begin to blare through the room, flashing, but Larry’s eyes remain entirely fixed on them. It’s no longer a dimension of loneliness.</p><p> </p><p>“Come here, Larry,” Tyme says, nearly desperate. “Join me.”</p><p> </p><p>He should <em> not be doing this </em> but he can’t <em> help himself, </em> he obeys, he presses himself up against Tyme’s back, his legs buckling slowly when his hips feel the contact. His arms move around Tyme’s torso, rest against his chest. He can feel the tingle of the Spirit's --- <em>oh</em> —- own chest against his bandages. It’s oddly calming — he expected their touch to be unpleasant. He lowers his hand immediately after the touch, pulling it away in shock and embarrassment, without realizing where he has landed until he hears Tyme’s gasp.</p><p> </p><p>“Whoa,” Tyme says. “You don’t waste any time, do you?”</p><p> </p><p>“I didn’t mean to,” Larry breathes. “I’m sorry.” But he doesn’t move, stays glued to Tyme’s posterior side. He lowers his voice, directs it to the Spirit: “You son of a bitch,” he says. “You didn’t bring me here to talk.”</p><p> </p><p>“You have proven yourself to be much more tolerable after you’ve had a sexual experience,” the Spirit replies. “Consider him my gift to you.”</p><p> </p><p>“Wow, thanks,” Larry says, sarcasm like radiation. “‘Gift.’ Sure.”</p><p> </p><p>“You’re acting like you’re not excited about this,” Tyme whispers in a mocking, <em> horrific </em>tone, “but something against me begs to differ.”</p><p> </p><p>Larry inhales. Sharp. Oh, he <em> wants </em> this. He shouldn’t want this. He wants this. He wants to thank the Spirit — sincerely, this time, <em> truthfully — </em> for allowing this to happen, even for seeing his all and understanding his needs. He needs this. It’s been so long. The Spirit knows that it has been so long. Larry knows his loneliness. He doesn’t <em> trust </em>Tyme, but he needs Tyme.</p><p> </p><p>“I need—” Larry says, whimpers. It’s too vulnerable; the truth. His thoughts pouring out into the room, manifesting through the lights and music. </p><p> </p><p>“Come with me, baby,” Tyme says. He turns, twirling Larry into his arms, and then next to him; Larry sighs, dizzy, at the lack of touch when it is over. He takes Larry’s hand and leads him towards a door. A secluded room, away from the other dancers. Loneliness. To be fulfilled.</p><p> </p><p>He does not check to see if the Spirit is following them; <em> following him </em>is their only desire, it seems, but he can deal with that later, they can talk later. He needs to experience. </p><p> </p><p>For now, Larry does not look back.</p><p><br />
|
||
<br />
|
||
<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: 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> |