671 lines
16 KiB
HTML
671 lines
16 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>and the universe said i love you because you are love
|
|||
|
|
</h2>
|
|||
|
|
|| TNS/Larry; a moment of intimacy.
|
|||
|
|
<hr>
|
|||
|
|
<p>You were born of love, crafted out of love’s internal body, energy pulsing with emotion, each reminder of love crashing through your composition like ocean waves. Larry is here — <em> he is here. </em> He is growing fond of you, shows it in words and actions. <em> Me </em> and <em> us </em> and <em> we </em> harmonic in the air, repetitive in your mind. You want to scream the words, to drown in what you have yearned for eternally: love, reciprocated love, <em> true </em>intimacy with him and within him. He does not love you; you understand this simply because it is the ultimate truth, because you know his mind better than your own, at this point, and it’s harrowing, mortifying, </p><p> </p><p>how horribly you crave this. You are hollow and he is hollow. You want to fill him up in the right way, to end his hollowness and curl within him, love instead of invasion; it’s not realistic, he does not love you, and that will always be okay, you will always have your thoughts and the internal desires that he cannot read—</p><p> </p><p>but this—</p><p> </p><p>This isn’t—</p><p> </p><p>This is not a fantasy, this is the real universe you live in, the body of the entirely holy, and he is asking you to hold him, on his bed in the dark. You have to take a moment to parse it, to force yourself into understanding: he craves the true intimacy, <em> he can’t, </em>but he wants you, he wants your comfort. You are a comfort, now. He wants you. It isn’t the same. It can never be the same. This isn’t how it was supposed to go.</p><p> </p><p>You have to do this. You cannot refuse. He is lonely, and bored, and he doesn’t want his mind to fall back into old habits, his previous horrors. You have to do this. He needs you. You need him—</p><p> </p><p>You emerge halfway from his body, wrap your arms around him. Comfort. Comfort. Comfort. Unbearable comfort. Paradoxical. You study his skin, the way his veins curl, the beauty that still radiates from him — has <em> always </em>radiated from him. Even in his worst moments. Even in his acts of bitterness towards you. Even in his hatred, Larry Trainor is beautiful. You despise him for that. You despise him for everything.</p><p> </p><p>You were born of love’s organ. Try again.</p><p> </p><p>You love him for everything.</p><p> </p><p>You try very hard not to touch his skin, to keep your hands over his undershirt only. Touch means fear, touch means intimacy, touch means insatiable horrors. It is the hardest thing you have ever done. The world is harsh, but the ultimate struggle is managing intimacy without intimacy. Belonging with no belonging. It is a voiding ache.</p><p> </p><p>He looks over at you. Turns to his side — <em> oh </em> and a brushing occurs, skin pushing up against you. Larry Trainor’s eyes staring into yours, bursting you apart, and he’s loosening you by the stitches with his fingers placed under the core of you, he’s opening you and exposing heart. All with one look. That is how he functions---this is how <em> you </em>function. Fragile in strength. </p><p> </p><p>Larry’s eyes close. He’s not unconscious, merely asleep, in your arms, within your grasp, tangible. Larry Trainor, now tangible. You do this now, you can hold him close. He embraces your embrace. How long have you wanted this? How long has this haunted you?</p><p> </p><p>He lets out a soft moan in his sleep. This is the most beautiful thing you have ever seen, this is a moment that will grow inextricable; you will live here endlessly, you will never forget the sight of this, the <em> intimate </em>feeling. His skin, burning acidic against you. </p><p> </p><p>Serenity.</p><p><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>
|