690 lines
15 KiB
HTML
690 lines
15 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 kept the only part of me that was real (so real)</h2>
|
|||
|
|
|| Relationship: Larry Trainor/Negative Spirit, Characters: The Negative Spirit
|
|||
|
|
<hr>
|
|||
|
|
<p>
|
|||
|
|
<span>They don’t expect him to touch like this—the Spirit does not expect him to touch them at all. The Spirit watches his facial features tremble and pulsate, watches his lips quiver like something freezing to death in a forgotten cold, watches him convulse at the very sight of them. The expression is too warm, disgustingly warm, and the sensation of Larry’s palm against their charred face is too warm, disgustingly warm. The Spirit has never been touched, and oh, he is their first, he is the first person who has </span>
|
|||
|
|
<em>
|
|||
|
|
<span>ever</span>
|
|||
|
|
</em>
|
|||
|
|
<span> been able to spark the kind of churning galactic lovehatred that burns within them now. Only him. Only Larry Trainor, they think, can chain them to the experience of living. </span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>They soar through the air being recycled in his chest but it’s getting too close to what they saw in the future, it’s </span>
|
|||
|
|
<em>
|
|||
|
|
<span>time </span>
|
|||
|
|
</em>
|
|||
|
|
<span>for them to leave and give him the second chance they saw back in 1996. When he was </span>
|
|||
|
|
<em>
|
|||
|
|
<span>truly </span>
|
|||
|
|
</em>
|
|||
|
|
<span>happy—a happiness he could never find if the Spirit were to stay. They cannot rewrite the future just because they want him to touch them.</span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>The Negative Space is just that: negative. Nothing will be the same with him torn out—he nested inside of the Spirit in the same precise ways they nested inside of him, an eternal unfolding. They pour themselves into his soul and he regurgitates them both for their child to eat. Their face sinks down with his hand and, for a moment, they are weak enough to question this decision as they feel his knuckles give light pressure against their collar. They feel things like pressure now. They will never experience this kind of touch again - they don’t expect him to touch like this - they don’t expect it to feel so familiar, as if they should’ve done this long ago.</span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>They do expect the wanting, and the wanting turns out to be a level of unbearable that no sapient being has ever before known. They could adhere to their word, and they could take him home. They’re so close to everything the Spirit has ever wanted—a way to have both, to have it all. To go home with him. </span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>How can they know something so flawed and raw and beautiful — something like this man who is worth saving, who is everything the Spirit has ever wanted and despised and resented and desired — how can they have this and lose this without losing themselves? How are they supposed to go back home, to the negative, having known something this full of life? How are they supposed to move on?</span>
|
|||
|
|
</p><p> </p><p>
|
|||
|
|
<span>They don’t expect him to be so gentle. The Spirit has never been gentle, and they cannot allow themselves to falter into that now.</span>
|
|||
|
|
</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>
|