883 lines
No EOL
22 KiB
HTML
883 lines
No EOL
22 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>you made me forget myself
|
||
</h2>
|
||
|| The Doom Patrol play CAH
|
||
<hr>
|
||
<p>
|
||
<span>Sometimes, Cliff thinks, you need a break from saving the world. You need a </span>
|
||
<em>
|
||
<span>break </span>
|
||
</em>
|
||
<span>from the stress of trying to find your leader. And </span>
|
||
<em>
|
||
<span>sometimes, </span>
|
||
</em>
|
||
<span>Cliff thinks, that break is called ‘game night’. Team bonding shit or whatever. </span>
|
||
</p><p> </p><p>
|
||
<span>Which would be absolutely fine if Cliff </span>
|
||
<em>
|
||
<span>hadn’t </span>
|
||
</em>
|
||
<span>called a team meeting under the false impression that he had important new information about the Whereabouts Of Niles Caulder. He’s going to get so much shit for this.</span>
|
||
</p><p> </p><p>
|
||
<span>“What is it?” Vic asks, and he looks prepared, he is </span>
|
||
<em>
|
||
<span>always</span>
|
||
</em>
|
||
<span> prepared -- for something to go wrong, for something that can help spark hope, for </span>
|
||
<em>
|
||
<span>anything,</span>
|
||
</em>
|
||
<span> and for a moment -- for one small, singular moment -- Cliff almost feels bad, until his guilt melts away and his only crushing guilt now is unrelated to this. Good. Good? Good.</span>
|
||
</p><p> </p><p>
|
||
<span>“Probably nothing,” Jane responds. “I mean, come on, you think </span>
|
||
<em>
|
||
<span>Cliff—</span>
|
||
</em>
|
||
<span>”</span>
|
||
</p><p> </p><p>
|
||
<span>“Very funny,” Cliff says, false laughter. And then, lightning-fast, in admission: “Well, now that we’re all here, I have an idea.”</span>
|
||
</p><p> </p><p>
|
||
<span>“An idea?” calls Larry from what is essentially a hiding spot in the back of the room. “Great.”</span>
|
||
</p><p> </p><p>
|
||
<span>Cliff holds the box in the air, waves it around. A black, rectangular box. </span>
|
||
<em>
|
||
<span>Cards Against Humanity.</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<span>“I don’t understand,” Vic says. “The information is in the box, or…?”</span>
|
||
</p><p> </p><p>
|
||
<span>“There is no information, genius,” Jane tells him. She laughs as she reaches up to snatch the box out of his hand. Of course </span>
|
||
<em>
|
||
<span>she’s </span>
|
||
</em>
|
||
<span>the only one into it, how fitting. “I just want it to be on the record that I told you so.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Then what is it?”</span>
|
||
</p><p> </p><p>
|
||
<span>“It’s Cards Against Humanity.”</span>
|
||
</p><p> </p><p>
|
||
<span>“I’m sorry?”</span>
|
||
</p><p> </p><p>
|
||
<span>“Oh, come on, you’re like, 20, you haven’t heard of this game?”</span>
|
||
</p><p> </p><p>
|
||
<span>“I’m 23,” Vic responds, holding one metal hand in the air. “Wait. This was all for a game?”</span>
|
||
</p><p> </p><p>
|
||
<span>“Maybe.”</span>
|
||
</p><p> </p><p>
|
||
<span>Vic shakes his head. Fuck this. “I’m out of here.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Me as well,” Rita informs him, firm, breaking her silence. “Good job, Cliff. Bravo. You got me excited for nothing.”</span>
|
||
</p><p> </p><p>
|
||
<span>Larry sarcastically salutes him, and turns to follow them; he’s always running, </span>
|
||
<em>
|
||
<span>he’s always—</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<span>“Wait, wait. Come on. Don’t you guys think we deserve, I don’t know, a fucking break? Just one fucking day where we get to have some goddamn </span>
|
||
<em>
|
||
<span>fun</span>
|
||
</em>
|
||
<span>?”</span>
|
||
</p><p> </p><p>
|
||
<span>This is, somehow, enough to stop their movement. It’s enough to stop Rita’s sulking, and she places a calm hand on Larry’s arm, huffs. He’ll do anything she asks. Rita shrugs — partially, Cliff knows, in anger, and partially in defeat. “How do you play this… Cards Against Humanity?”</span>
|
||
</p><p> </p><p>
|
||
<span>—</span>
|
||
</p><p><br />
|
||
<br />
|
||
</p><p>
|
||
<span>“Okay,” Cliff says, when they’re all gathered around the table. They’re </span>
|
||
<em>
|
||
<span>all </span>
|
||
</em>
|
||
<span>behaving and listening with intent — this is probably the first time Cliff has seen everyone get along perfectly in… really, has this </span>
|
||
<em>
|
||
<span>ever </span>
|
||
</em>
|
||
<span>happened? “So, we all get ten white cards. Jane, can you deal them out?”</span>
|
||
</p><p> </p><p>
|
||
<span>“Why can’t you do it?”</span>
|
||
</p><p> </p><p>
|
||
<span>“These cards are too fucking small for my---”</span>
|
||
</p><p> </p><p>
|
||
<span>“Ugh, fine.”</span>
|
||
</p><p> </p><p>
|
||
<span>She deals them out nonchalant, essentially </span>
|
||
<em>
|
||
<span>flinging </span>
|
||
</em>
|
||
<span>them in everyone’s direction. Which… okay, not what he meant, but close enough, it works. Everyone has their cards, that’s all that matters, and this cooperation from Jane is magical in and of itself.</span>
|
||
</p><p> </p><p>
|
||
<span>“Um, Cliff,” Larry asks, “where exactly did you get this game?”</span>
|
||
</p><p> </p><p>
|
||
<span>“I may have bought it off Amazon with Chief’s card.”</span>
|
||
</p><p> </p><p>
|
||
<span>“You used the credit card of a man who vanished off the face of the Earth to buy a card game? He could be—”</span>
|
||
</p><p> </p><p>
|
||
<span>“He’s fine,” Cliff says, dark, voice low. Then: “He probably wouldn’t have cared if he was here.”</span>
|
||
</p><p> </p><p>
|
||
<span>Larry shrugs. No argument. He picks up one of his white cards and reads it, and his body begins to sink in -- repression, Cliff guesses, discomfort. “This is an interesting card.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Cliff, good lord,” Rita exclaims. She’s holding a card, her face half-melting. “This says—”</span>
|
||
</p><p> </p><p>
|
||
<span>“You’re not supposed to tell people what your cards are, that defeats the whole purpose of the game!”</span>
|
||
</p><p> </p><p>
|
||
<span>She shoots him an awful gaze. Her face recoils into normalcy. “If anyone asks, I </span>
|
||
<em>
|
||
<span>never </span>
|
||
</em>
|
||
<span>played this. Got it?”</span>
|
||
</p><p> </p><p>
|
||
<span>“Sure, whatever. So, now that you’ve drawn your white cards, you need to draw a black card, too.” He draws one, places it in the center of the table. “‘___. That’s how I want to die.’ So, you choose one card from your hand that you think would fit best in the blank.”</span>
|
||
</p><p> </p><p>
|
||
<span>“That’s it?” Larry asks.</span>
|
||
</p><p> </p><p>
|
||
<span>“That’s it,” Cliff repeats. “I’ll be the judge first, but we’ll go around the table. The person judging closes their eyes — or in my case, covers their eyes — and opens them when everyone has played. Then, they pick which card they like best, and whoever played it wins.”</span>
|
||
</p><p> </p><p>
|
||
<span>Everyone stares at him. Blank. Confused.</span>
|
||
</p><p> </p><p>
|
||
<span>“Just play a goddamn card already,” Cliff says. He covers his eyes—</span>
|
||
</p><p>
|
||
<span>…</span>
|
||
</p><p>
|
||
<span>…</span>
|
||
</p><p>
|
||
<span>…</span>
|
||
</p><p>
|
||
<span>…</span>
|
||
</p><p>
|
||
<span>…</span>
|
||
</p><p> </p><p>
|
||
<span>Jesus, playing this game with a bunch of senior citizens and one 23 year old was a bad idea, wasn’t it?</span>
|
||
</p><p> </p><p>
|
||
<span>…</span>
|
||
</p><p> </p><p>
|
||
<span>This is taking forever.</span>
|
||
</p><p> </p><p>
|
||
<span>…</span>
|
||
</p><p> </p><p>
|
||
<span>…</span>
|
||
</p><p><br />
|
||
<br />
|
||
</p><p>
|
||
<span>He thinks it’s been </span>
|
||
<em>
|
||
<span>eight minutes—-</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<span>“We’re, uh, we’re good.” Vic’s voice, shaken. “Open them.”</span>
|
||
</p><p> </p><p>
|
||
<span>He stares at the four cards in front of him. Nods. “Okay,” he says. “This is good.”</span>
|
||
</p><p> </p><p>
|
||
<span>“They’re awful,” Larry sighs. “They’re—”</span>
|
||
</p><p> </p><p>
|
||
<span>“I don’t know,” Vic interrupts. “I think mine was pretty good.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Yeah, probably because you actually know what you’re doing. It’s been about four decades since I’ve played a game like this.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Haven’t you been here for six?” Vic asks.</span>
|
||
</p><p> </p><p>
|
||
<span>“Yeah, don’t ask.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Fair.” Vic turns to Cliff. “So?”</span>
|
||
</p><p> </p><p>
|
||
<span>“Let’s see… first card, ‘Sex with Patrick Stewart.’ Well, that’d be a fun way to die. Hell, I’d be just fine with going out like that.” Silence. Stares from everyone. Rita raises an eyebrow in judgement. “I can’t be the only one… nevermind. Second card, ‘becoming a blueberry.’ Wasn’t that from a movie? Uh… third one. ‘A lifetime of sadness.’ Jeez. And finally…” Before Cliff can get the words out, he bursts out into laughter, which quickly infects the entire room as they all let down their repression enough to glance at the remaining card:</span>
|
||
</p><p> </p><p>
|
||
<em>
|
||
<span>Daniel Radcliffe’s delicious asshole.</span>
|
||
</em>
|
||
</p><p> </p><p>
|
||
<span>“This one wins.”</span>
|
||
</p><p> </p><p>
|
||
<span>Jane pumps her fist into the air. “Hell yes.”</span>
|
||
</p><p> </p><p>
|
||
<span>“Really?” Vic asks. “Sex with Patrick Stewart wasn’t enough for you?”</span>
|
||
</p><p> </p><p>
|
||
<span>“Sex with Patrick Stewart would definitely be enough for me, but Jane wins. Sorry, man.”</span>
|
||
</p><p> </p><p>
|
||
<span>Vic blinks. “Okay, too much information. Who’s judge next?”</span>
|
||
</p><p> </p><p>
|
||
<span>“I will.” Larry, who sounds like he actually might be </span>
|
||
<em>
|
||
<span>enjoying himself. </span>
|
||
</em>
|
||
<span>What? “Maybe that’ll save me from the humiliation of having to play a card.”</span>
|
||
</p><p> </p><p>
|
||
<span>“See?” Cliff asks. “You guys like this. I knew you would. Isn’t this great? Just us, being friends? I mean, fuck—”</span>
|
||
</p><p> </p><p>
|
||
<span>“It’s </span>
|
||
<em>
|
||
<span>alright,</span>
|
||
</em>
|
||
<span>” Rita tells him. Her tone is indecipherable, but there’s a threat of a smile on her face. “Just alright.”</span>
|
||
</p><p><br />
|
||
<br />
|
||
<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> |