674 lines
23 KiB
HTML
674 lines
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
|
|||
|
|
<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>
|