811 lines
20 KiB
HTML
811 lines
20 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>Connection</h2>
|
|||
|
|
|| Script format through a canon scene.
|
|||
|
|
<hr>
|
|||
|
|
<p>
|
|||
|
|
<span>EXT. JOHN’S PORCH - SUNSET</span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>LARRY TRIES TO MAINTAIN HIS COMPOSURE as he sits next to his old lover, JOHN BOWERS’ presence like a miracle -- a gift given to him wrapped in electric light and smooth certainty, his life illuminating like his chest illuminating like everything that has ever been pure or considered untainted, whole. Without disease.</span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>Larry is beginning to believe that he is not diseased. This could prove to be very dangerous. He knows that it is dangerous to be optimistic, but the calming gold spots of sunstorm peering through the background trees is growing serenity from seeds in his mind. The seed, of course, is the Spirit’s intention, planted and now harvested, oh. Oh, the Spirit has gifted him this. </span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>He is also beginning to look at the Spirit in a different light. It is light. It is, inherently, light. Physically, but the metaphor extends outwards, bursting out of him and onto the porch, into this world, this freshly safe world.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>JOHN</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>Tell me all about you.</span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>This is almost comical to everyone involved. Us. Larry. There is no aspect of Larry that is worth discussion, not here. Larry has been two beings living one-dimensional for far too long; it is time to reconcile.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>LARRY</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>There’s nothing to tell. </span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>JOHN</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>There must be something. You have the strength of a twenty year old. What do you do to stay like that? Please don’t tell me yoga.</span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>Larry laughs. He will always laugh, because John will always be beautiful, and perfect, and deserving.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>JOHN</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>All that laughing under that gauze. Fucking yoga, I knew it.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>LARRY</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>More like R.H.I.P.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>JOHN</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>Haven’t heard that since the service. Uh, rank his its privileges...?</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>LARRY</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>Ah, ‘radiation has its perks.’</span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>John looks away. Remembers the FLAMES, briefly, remembers finding out about Larry’s condition. A true condition, unlike the perceived. Larry remembers along with him. He will be this way forever, untouched. He wants, more than anything tangible in any life, to hold John’s hands bare. To let go. To exhale freely.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>JOHN</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>Well, I’ll be damned. </span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>(pause)</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>I guess there’s always a silver lining, Lar. </span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>‘LAR’. A nickname he has not heard in decades. It rings CALMING now. It shouldn’t. This should be heartbreaking, should feel like the suffering of an animal that has just realized it is about to die, to fall victim to prey. It should burn. Again. Should twist him on the inside, should turn him to shattered, shining rubies. Instead, it feels like the break of a new cycle, the beginning of something Greater than Life, higher than comprehension.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>JOHN</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>So. There’s been no one special in your life for sixty years? Come on! What about your wife, Sheryl?</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>LARRY</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>She died of cancer in ‘89.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>JOHN</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>Oh, I’m so sorry to hear that.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>LARRY</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>We weren’t close, but, ah, thank you.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>JOHN</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>And... the boys?</span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>TIME STOPS as we watch Larry begin to suffocate. He suffocates underneath the crushing weight of his own guilt, his own fear growing teeth and eating him up. Even underneath bandages, his regret IS STILL VISIBLE.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>LARRY</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>Why put this on them? What good would it do?</span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>The statement is simple. It tells us all that we need to know. Larry is tired of running, but will always be his own burden.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>LARRY</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>The truth is... I haven’t really lived much since the accident. You were my last real thing, and I still feel bad about sending you away.</span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>John’s face RADIATES a pain that he had previously buried.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>JOHN</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>Wasn’t easy, but... I got over you. Eventually. And I moved on. </span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>He reaches over to TAKE LARRY’S HANDS into his own, and Larry GIVES IN. They hold hands. John emphasizes his next statement. These words are important. These words like remains.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>JOHN</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>You should too.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>LARRY</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>You know... when I told you I loved you at the motel, I meant it. I wanted you to know that in case I don’t get another chance to tell you.</span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>John BLINKS. He processes Larry’s words. They represent sixty years of desire in both of them, sixty years of wishing - yearning - for these words, a culmination. Larry knows the effect of his words, takes in the concept as John tries to force tears away. He knows John so well, even after all this time. </span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>JOHN</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>I’m not dead yet, for Christ’s sake.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>(beat)</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>You really haven’t fucked anyone since J.F.K? My God, Larry.</span>
|
|||
|
|
</p><p align="left">
|
|||
|
|
<span>Larry lets the laughter envelop him again. A caress. But.</span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>Something inside of him stirs. It almost feels like the Spirit. Something about this makes him think of the Negative Spirit.</span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>Special. </span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>The Spirit exhumes special, embodies it while lacking true form. The Spirit prioritizes Larry and Larry’s healing process, has only ever wanted him to embrace healing and stability. To embrace, at least, something, which he is doing in this moment, obeying. The Spirit - </span>
|
|||
|
|
<em>
|
|||
|
|
<span>cares </span>
|
|||
|
|
</em>
|
|||
|
|
<span>for him. </span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>The Negative Spirit is the closest person to Larry in this surviving world. They have to be so close, bleeding into one another, to live. The Spirit is good. The Spirit is the purity that Larry once lacked.</span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>He’s moved on.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>LARRY</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>Now that I think of it... there is a relationship I want to tell you about. </span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>JOHN</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>Go on, go on.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>LARRY</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>It’s not a traditional relationship, per se, but... there’s something inside me. I wouldn’t say we’re friends, but there’s definitely a connection there. And for years I didn’t know what it was, or what it wanted, but now I think I might.</span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>Larry had been too engrossed in this new, hopeful emotion to realize that JOHN HAS FALLEN ASLEEP, perhaps into the illuminating light, perhaps taken. They have both moved on. They have both found closure.</span>
|
|||
|
|
</p><p>
|
|||
|
|
<span>He covers John with his blanket. Presses their foreheads together.</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>LARRY</span>
|
|||
|
|
</p><p align="center">
|
|||
|
|
<span>Sleep well, my friend.</span>
|
|||
|
|
</p><p> </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>
|