added short story look and feel and published Em & Ben
Some checks failed
Web/pipeline/head There was a failure building this commit

This commit is contained in:
Ell 2021-03-31 19:24:36 +02:00
parent d171f55eea
commit 9270cf8bed
5 changed files with 735 additions and 7 deletions

657
blog/src/em_and_ben.html Normal file
View file

@ -0,0 +1,657 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="crowbook">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Ell Peck">
<title>Em &amp; Ben</title>
<style type = "text/css">
body {
font-family: "Linux Libertine", "Georgia", serif;
text-align: justify;
font-size: 100%;
}
p {
text-indent: 1.25em;
margin:0;
hyphens: auto;
}
blockquote {
margin: 1em;
font-style: italic;
}
code {
font-size: 80%;
font-family: "Linux Libertine Mono", monospace;
background-color: #F0F0F0;
}
pre {
font-family: "Linux Libertine Mono", monospace;
margin: 1em;
padding-top: 0;
background-color: #F0F0F0;
white-space: pre-wrap;
word-wrap: break-word;
}
/* Try to disable hyphenation in titles */
h1, h2, h3, h4, h5, h5 {
adobe-hyphenate: none;
-ms-hyphens: none; /* Trident (Windows) */
-moz-hyphens: none; /* Gecko (Firefox) */
-webkit-hyphens: none; /* Webkit */
-epub-hyphens: none; /* EPUB 3 */
hyphens: none; /* Futur standard */
}
h1, h2, h3, h4, h5, h6 {
text-align: left;
font-family: Linux Biolinum, sans-serif;
font-variant: small-caps;
}
/* Title of a part */
h1.part {
font-size: 250%;
text-align: center;
}
/* The `Part X` section of a part */
h2.part {
font-size: 175%;
text-align: center;
}
/* The "Chapter X" section of a chapter */
span.chapter-header {
font-size: 75%;
}
/* Title of the book */
h1.title {
text-align: center;
font-size: 300%;
}
/* Author */
h2.author {
text-align: right;
font-size: 200%;
}
/* Subtitle */
h2.subtitle {
text-align: center;
font-size: 200%;
}
/* When toc is displayed inlined */
#toc ol, #toc ul {
padding: 0;
margin-left: 1em;
}
#toc li {
list-style-type: none;
margin: 0; padding: 0;
}
#toc li:before {
content: none;
}
#cover img {
width: 100%;
max-height: 100%;
}
.image {
margin: auto;
width: 80%;
}
.image img {
width: 100%;
max-height: 100%;
}
.rule {
text-align: center !important;
margin-top: 1em;
margin-bottom: 1em;
font-weight: bold;
page-break-inside: avoid;
break-inside: avoid;
page-break-after: avoid;
break-after: avoid;
}
/* The number of the note in an expanded footnote (e.g. [3]) */
.note-number {
font-weight: bold;
margin-right: 1em;
}
td.note-number {
vertical-align: top;
}
/* When footnotes (try to) be diplayed as margin notes */
.sidenote {
display: block;
float: right;
width: 30%;
border: 1px solid black;
margin: 1em;
padding: .5em;
margin-right: -1.5em;
}
.sidenote .note-number {
float: left;
}
/* The div class displaying notes at the end of a chapter */
div.notes {
text-align: justify;
border-top: thin dashed black;
margin-top: 1em;
}
table.notes {
border-collapse: collapse;
border-style: hidden;
}
table.notes tr td {
margin-left: 1em;
margin-right: 1em;
}
table.notes tr td p {
text-indent: 0;
}
/* Every markdown table is included in a <div class = "table"> */
.table {
margin: 1em;
}
.table table {
width: 80%;
margin: 0 auto;
border-style: solid;
border-width: thin;
border-color: black;
border-collapse: collapse;
}
.table table th, .table table td {
border-style: solid;
border-width: 1px;
text-align: center;
}
.table table th {
font-weight: bold;
font-variant: small-caps;
}
span.initial {
float: left;
font-size: 285%;
font-weight: bold;
margin-right: 0.05em;
line-height: 0.8em;
}
p.first-para {
text-indent: 0;
}
/* Use this for escape narrow space so it is non-breaking */
.nnbsp {
/* white-space: nowrap;*/
word-spacing: -0.13em;
/* Following necessary for Kobo EPUB3 reader??? */
margin: 0;
padding: 0;
}
/* Default HTML CSS file includes default EPUB CSS file */
/* Colors for the navigation menu (toc) */
nav {
background: #CBBFCC;
color: black;
border-right-color: black;
}
#nav a:link {
color: black;
}
#nav a:visited {
color: black;
}
/* Colors for top and footer */
#top {
background-color: #444343;
color: white;
}
footer {
background-color: #444343;
color: white;
}
footer a, #top a {
color: #fc71ff;
}
footer a:hover, #top a:hover {
color: #b743fe;
}
/* Additional elements, only use for proofreading */
/* Grammar error */
.grammar-error {
color: red;
text-decoration-line: underline;
text-decoration-style: double;
/* background: #d966ff;*/
}
p.first-para:first-letter {
font-size: 300%;
float: left;
font-weight: bold;
margin-right: 0.05em;
line-height: 1em;
}
/* The nav element corresponding to the navigation menu */
nav {
z-index: 2;
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 20%;
overflow-y: auto;
font-size: 80%;
margin-left: 0;
border-right-width: 2px;
border-right-style: dashed;
}
#nav code {
background-color: transparent;
}
#nav a:link {
text-decoration: none;
}
#nav a:visited {
text-decoration: none;
}
#nav {
text-align: left;
}
#nav h2 {
text-align: center;
}
#nav li {
list-style-type: none;
text-indent: -1em;
}
#nav li:before {
content: none;
}
#nav ul {
padding-right: 1em;
padding-left: 1.5em;
}
/* The menu containing the button to display the navigation bar */
#menu {
position: fixed;
z-index: 2;
top: 0em;
left: 1em;
transition: left 1s;
}
#menu img {
opacity: 0.5;
}
#menu img:hover {
opacity: 1.0;
cursor: pointer;
}
#menu-button {
height: 1.5em;
padding: 0.5em;
}
#book-button {
height: 1.5em;
padding: 0.5em;
float: left;
}
/* Hide navigation bar */
#nav {
left: -21%;
transition: left 1s;
}
/* The main content of the book */
#content {
overflow-y: auto;
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
transition: margin-left 1s;
}
/* Used for multifiles HTML */
.prev_chapter {
text-align: left;
text-indent: 0;
margin-bottom: 1em;
font-size: 120%;
font-variant: small-caps;
font-weight: bold;
}
.next_chapter {
text-align: right;
margin-top: 1em;
margin-bottom: 1em;
font-size: 120%;
font-variant: small-caps;
font-weight: bold;
}
/* Improving readability for the HTML format only */
p, blockquote, li, .image {
margin-right: auto;
max-width: 33em;
}
blockquote {
padding: 1em;
}
#content {
text-align: center;
}
#page {
display: inline-block;
text-align: justify;
max-width: 33em;
}
#nav-container {
top: 0;
width: 100%;
}
#nav-title {
top: 0;
}
#toolbar {
top: 0;
float: left;
}
#toolbar img {
cursor: pointer;
}
footer {
margin-top: 2em;
margin-bottom: 0;
}
#top {
margin-top: 0;
margin-bottom: 1em;
}
#top p {
font-family: "Linux Biolinum";
font-weight: bold;
font-variant: small-caps;
}
footer, #top {
padding-top: .25em;
padding-bottom: .25em;
margin-left: 0;
margin-right: 0;
text-align: center;
transition: margin-left 1s;
}
footer a, #top a {
text-decoration: none;
}
footer p, #top p {
text-indent: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.5em;
margin-top: 0.5em;
max-width: 33em;
}
</style>
<style type = "text/css" media = "print">
#page {
display: block;
}
.chapter {
page-break-before: always;
}
#menu {
display: none;
}
#nav {
display: none;
}
</style>
<script>
function on(name) {
var elements = document.getElementsByClassName(name);
for (var i = 0; i < elements.length; i++) {
var elem = elements[i];
elem.style.backgroundColor = "pink";
}
}
function off(name) {
var elements = document.getElementsByClassName(name);
for (var i = 0; i < elements.length; i++) {
var elem = elements[i];
elem.style.backgroundColor = "white";
}
}
var display_menu = false;
function toggle() {
if (display_menu == true) {
display_menu = false;
document.getElementById("nav").style.left = "-21%";
document.getElementById("content").style.marginLeft = "0%";
document.getElementById("menu").style.left = "1em";
/* if(document.getElementById("top")) {
document.getElementById("top").style.left = "0";
}
if(document.getElementById("footer")) {
document.getElementById("footer").style.marginLeft = "0%";
}*/
} else {
display_menu = true;
document.getElementById("nav").style.left = "0";
document.getElementById("content").style.marginLeft = "20%";
document.getElementById("menu").style.left = "20%";
/* if(document.getElementById("top")) {
document.getElementById("top").style.left = "20%";
}
if(document.getElementById("footer")) {
document.getElementById("footer").style.marginLeft = "20%";
}*/
}
}
</script>
</head>
<body>
<script type = 'application/ld+json'>
{
"@context": "http://schema.org/",
"@type": "Book",
"author": "Ell Peck",
"name": "Em & Ben",
"inLanguage": "en"
}
</script>
<nav id = "nav">
<div id = "nav-title">
<h2><a href = "#link-0">Em &amp; Ben</a></h2>
</div>
<ul>
<li><a href="#link-1">1. </a></li>
<li><a href="#link-2">2. </a></li>
</ul>
</nav>
<div id = "content">
<div id = "page">
<header>
<div id = "menu">
<img id = "menu-button" onclick="toggle();"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iMjAwbW0iCiAgIGhlaWdodD0iMjAwbW0iCiAgIHZpZXdCb3g9IjAgMCA3MDguNjYxNDIgNzA4LjY2MTQxIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIKICAgc29kaXBvZGk6ZG9jbmFtZT0ibWVudS5zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM0IiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBpZD0iYmFzZSIKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMS4wIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp6b29tPSIwLjQ5NDk3NDc1IgogICAgIGlua3NjYXBlOmN4PSIxMDUuNjEyNzUiCiAgICAgaW5rc2NhcGU6Y3k9IjQwNy4wNjM5MSIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0icHgiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjEzNjYiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNzA0IgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTciPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgaW5rc2NhcGU6bGFiZWw9IkxheWVyIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTM0My43MDA3OSkiPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjEwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICAgIGQ9Im0gMTA0LjMzMDcxLDQ2OS41MDUxIDUwMCwwIgogICAgICAgaWQ9InBhdGg0MTM2IgogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoxMDA7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICBkPSJtIDEwNC4zMzA3MSw3MDQuNTA1MSA1MDAsMCIKICAgICAgIGlkPSJwYXRoNDEzNi01IgogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgIGlua3NjYXBlOnRyYW5zZm9ybS1jZW50ZXIteD0iNzEuNDI4NTcyIgogICAgICAgaW5rc2NhcGU6dHJhbnNmb3JtLWNlbnRlci15PSItMjQyLjg1NzE2IiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjEwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICAgIGQ9Im0gMTA0LjMzMDcxLDkzOS41MDUwNiA1MDAsMCIKICAgICAgIGlkPSJwYXRoNDEzNi01LTMiCiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgaW5rc2NhcGU6dHJhbnNmb3JtLWNlbnRlci14PSI3MS40Mjg1NzIiCiAgICAgICBpbmtzY2FwZTp0cmFuc2Zvcm0tY2VudGVyLXk9Ii0yNDIuODU3MTYiIC8+CiAgPC9nPgo8L3N2Zz4K"
alt = "Table of contents" title = "Table of contents" />
</div>
<h2 class="author">Ell Peck</h2>
<h1 id = "link-0" class="title" >Em &amp; Ben</h1>
</header>
<div id = "chapter-0" class = "chapter">
<h1 id = 'link-1'><span class = 'chapter-header'>Chapter 1</span></h1><p id = "para-1">Thered never been a day quite like Tuesday, February 17. It was a warm, spring day, and the newly awakened sun was warming Bens freckle-ridden face. He didnt know it just yet, but this would be the day that Ben would almost die. Well, thats the way hed think of it <em>afterwards</em>, anyway.</p>
<p id = "para-2">The park was unusually packed with people, and for a second, Ben debated whether turning back was a good idea after all. Hed had these thoughts a lot recently; wanting to just turn back and run away from things. He ran a hand through his long, silky hair and turned around. <em>Damn it</em>, he thought, before he snapped back to facing the center of the park. <em>I have to do this.</em></p>
<p id = "para-3">From afar, he could just about make out what was going on around the large fountain. The water was splashing out of what hed always just assumed to be a large fish, though he didnt have the ability to tell for sure, because the fountain was old and rugged and had probably been just-about-fixed one too many times before. Ben squinted a bit before raising his glasses in an attempt to make out the faces of the people he saw, sitting and standing around the fountain, talking. He was looking for his best friend, Emily. She was really the kind of person that would drag him to outings like this; public gatherings and any sort of parties were terrifying to Ben. It was natural then that he would find a best friend that is his absolute polar opposite: Popular, blonde and, of course, an absolute party animal. <em>Damn it, Em, where are you?</em>, he mumbled to no one in particular.</p>
<p id = "para-4">He started approaching the fountain and the square around it. Several small crowds of people were standing around little stalls that emitted vastly different smells. Amidst all of this mess, he was almost certain he could smell bubblegum ice cream. Hectically looking around in an attempt to find his friend, he tried to suppress any memory related to bubble gum. To ice cream. To the life that hed had before he changed. <em>Fuck</em>, he quietly said to himself.</p>
<p id = "para-5">The smell of the bubblegum ice cream started getting too strong for him to handle, and memories started welling up inside of him. His brain was unfolding like a book, too heavy to close. Ben pictured a red, rickety swing set in the middle of a park much like the one he was in right now. He pictured Emily, and for a moment, he pictured the way it had felt. The way the wind blew through his hair as he threw his legs back and forth on the swings, laughing with Em about wanting to do a three hundred and sixty degree turn. Had he already called her <em>Em</em> back then?</p>
<p id = "para-6">He immediately snapped back into reality when he felt the tap of something on his shoulder. Immediately might have been generous, because the tap really did feel like a heavy knock. Maybe it had taken him a few seconds to come back. His eyes felt a bit watery and his knees were shaking, but he told himself that he was probably just hungry (he wasnt) and turned around to discover the source of the heavy tapping.</p>
<p id = "para-7">“Ben!”, Emily exclaimed right behind him. She was a beautiful woman with curly hair and a smile that probably tasted like bubblegum ice cream. <em>Tasted?</em></p>
<p id = "para-8">“Hey, Emily, whyd you take so long?”, he asked in the flattest possible tone.</p>
<p id = "para-9">“Shut up”, she returned with a snarky grin. <em>Damn</em>, she looked extra beautiful today. Ben looked down at her flowy, blue skirt and matching light purple ballerinas. Even though his eyes were still watery, he couldnt help but smile at the look of her, standing there right in front of him. This is exactly what she did to him.</p>
<p id = "para-10">“Oh man, I want some fro-yo right about now!”, Emily sighed yearningly as she grasped Bens upper arm and started pulling him towards one of the stalls by the fountain. “You want some too? I can pay.”</p>
<p id = "para-11">“Are you kidding me? Youre <em>broke</em>, Im not letting you pay for <em>anything</em>!"</p>
<p id = "para-12">"<em>Broke</em>? Come on, thats a bit harsh", she countered and frowned. She stopped dead in her tracks, let go of his upper arm and, after a few seconds of fondling with her cardigan, produced a thirty-dollar bill out of what he could only assume to be a hidden pocket somewhere. “See?”</p>
<p id = "para-13">Not entirely convinced of Emilys sudden wealth, he raised an eyebrow and tilted his head slightly in disapproval. “Fine.”</p>
</div><div id = "chapter-1" class = "chapter">
<h1 id = 'link-2'><span class = 'chapter-header'>Chapter 2</span></h1><p id = "para-14">Over the next few hours, Ben was dragged back and forth between stalls and attractions. For every single one, he was apprehensive at first but rather quickly changed his mind once Emily frowned. It was such a heart-melting frown, worse than the faces that his aunts dogs would make when they wanted to be taken for a long walk. Every single thing about Emily was just so beautiful that he could be happy doing anything with her. Even going to a shoddy, uncomfortable carnival in the middle of February.</p>
<p id = "para-15">Theyd already stopped at almost every ride and stall, and so Ben decided that now was enough. He wasnt usually the type of person to make decisions like this (hed just leave it up to whoever else was actually in charge), but this time, hed put his foot down. He would, absolutely.</p>
<p id = "para-16">“Em, Im getting tired.”</p>
<p id = "para-17">“Are you serious? We havent even eaten any churros yet!” Emily smiled devilishly at him while tugging on his blue sweatshirts right sleeve. She was staring at him, as if trying to extract the information directly from his eyes. Her blonde locks were flowing over her brow and almost into her eyes, but that didnt seem to bother her. He guessed that, after a while, youd probably get used to it, like you do with seeing your own nose. He really liked seeing her nose, though.</p>
<p id = "para-18">“You <em>love</em> churros," she pointed out with an overly exaggerated <em>o</em> in <em>love</em>.</p>
<p id = "para-19"><em>In love</em>, he thought. This time, he was going to put his foot down, right? Thats what hed decided. He didnt want people to control him anymore. But was that really what Emily was doing here? No. She was his best friend, she knew what was good for him. Right? She was looking at him, in obvious anticipation of his answer. He did really like churros. But did he love them? He wasnt sure about that. Okay, he did love them, but did he love them enough to warrant another thirty minutes at this godforsaken carnival?</p>
<p id = "para-20">He loved Emily, that was for certain.</p>
<p id = "para-21">Wait, what? Had he really just thought that? No, he couldnt have. That was just one of those jokes his brain made up sometimes. Amusing, albeit slightly infuriating. <em>Fuck off</em>, he said to himself.</p>
<p id = "para-22">“What?”, Emily replied, clearly confused as to what he was saying. He wasnt saying anything though, right? What had he said?</p>
<p id = "para-23">“Im, the,” he mumbled, trying to make sense of what Emily couldve just heard him say. Maybe she didnt hear anything, maybe it was just the wind. What could he have said to her? Surely he didnt say the love part out loud, right?</p>
<p id = "para-24">He stared at her face. Her brown eyes were intensely focusing on him, her lips slightly curled into a smile. She tugged on his sweatshirt one last time.</p>
<p id = "para-25">“So, churros?” Oh Thank God.</p>
<p id = "para-26">"<em>Fine.</em>"</p>
<p class = "rule">***</p>
<p id = "para-27">As they were eating their churros, Ben couldnt help but notice how much chocolate sauce Emily had on hers with every bite. Theyd ordered a little square box filled with twelve or so standing churros, along with a small tub of chocolate sauce that tasted criminally close to Nutella without actually being Nutella.</p>
<p id = "para-28">“You know this sauce is for dipping, right?”, he said to her with a grin before taking another huge bite. “Its not supposed to be a full-on coating.”</p>
<p id = "para-29">“What do you know, huh? Where does it say that?” She tutted and shoved her churro into the tub of sauce with ostentation. While pulling out the excessively coated pastry, she got ready to put her other hand under it as to prevent any of the chocolate sauce from dripping down onto her dress. “Try it!”, she said with an impish smile and held the dripping mess right up to Bens mouth.</p>
<p id = "para-30">“No, I dont—” He tried to interject, but Emily had already rammed the chocolate-covered churro directly into his face. He resisted opening his mouth, so the chocolate sauce smeared all over this face and chin and then continued to drip onto his sweatshirt in big, brown globs. “Damn it, Em.”</p>
<p id = "para-31">“Im sorry, but why didnt you open your mouth?”, she asked jokingly while holding back laughter.</p>
<p id = "para-32">“Fuck,” he said angrily and fumbled around his pockets, trying to find a tissue or something. In the scramble, the smells of the chocolate on his face and the odor of bubblegum ice cream in the air mixed to create something awfully unpleasant in his nose. He was trying really hard to find a tissue now.</p>
<p id = "para-33">“Damn it, Em, why do you always have to do that?”</p>
<p id = "para-34">“Oh, <em>come on</em>, that isnt fair! I was just trying to have fun!"</p>
<p id = "para-35">“Fun? You know I hate these kinds of things. I hate <em>people</em>!"</p>
<p id = "para-36">She tutted. “Lighten up a bit, Ben!”</p>
<p id = "para-37">“Lighten the <em>fuck</em> up?" His brain was unfolding again, this time like floodgates, unable to be stopped by the water pushing against them. “You dont understand me at all!”</p>
<p id = "para-38">He was yelling now, and some people around them were beginning to notice. Fuck. He finally looked over at Emily, his face still covered in chocolate sauce, but she wasnt smiling anymore. Instead, she had this look on her face that shed sometimes get. When watching a sad documentary, or when her mom prepared food that she didnt particularly enjoy. It wasnt a frown, it was more of a neutral expression of… disapproval? Disgust?</p>
<p id = "para-39">“Why is everything such a big fucking deal to you, Ben?”, she yelled, tears starting to escape from her half-shut, pained eyes.</p>
<p id = "para-40">That was the moment a switch in his brain finally flicked. A switch that was probably in a back room, guarded by multiple doors with multiple, separate keys. Use only in emergencies, a sign somewhere close to the switch probably said. Dont use even, maybe. Ben tried to force his eyes shut with extreme determination. No, he wouldnt cry.</p>
<p id = "para-41">But he did. Tears started running down his face like waterfalls, and he tried to cover them up and wipe them away with the sleeve of his sweatshirt. He wiped his cheeks with the sleeves of his blue sweatshirt, and large amounts of chocolate sauce transferred from his face to the sleeves. God fucking damn it, he muttered to himself. The world around him was turning into a very small part of his vision, the rest filled with blurry streams of tears. He tried to get up from the bench they were sitting on and stumbled around the square where the festival was happening. He was sure hed bumped into a few people on the way, but couldnt tell for absolute certain. After what felt like an hour and a half, he finally arrived at a tree a few meters away from the fountain square.</p>
<p id = "para-42">He rested one hand against the bark and tried to catch his breath. The thought of bubblegum ice cream was fresh in his mind again, the thought of the red, rickety swing set was morphing and mixing with the thought of churros, the thought of chocolate sauce in his face. The thought of Emilys smile, the thought of her frown, the thought of her sad movie face. Fuck.</p>
<p id = "para-43">He tried telling himself to breathe. <em>Five in, six hold, seven out.</em> Thats what his therapist had told him. <em>One, two, three.</em> Whats the worst that could realistically happen?, thats what he was supposed to ask himself. <em>Four, five.</em> Well. <em>One, two, three.</em> Emily might never talk to him again. <em>Four, five, six.</em> She might hate him, now that shed just tried to be cute by shoving a churro into his face, and now that hed reacted like a total fucking asshole. <em>One, two.</em> Was he already breathing in again? <em>Fuck.</em> He kept telling his body to calm down, his mind to stop racing. His heart to stop racing. He started leaning against the bark and then slowly slid down the tree trunk, sitting down on the ground with his knees close to his chest. He observed the rickety swing set in the middle of the field, and saw himself and Emily swinging back and forth again, talking about three hundred and sixty degree swings. He saw himself, laughing and giggling and occasionally licking a cone of bubble gum soft serve he had in his left hand. He saw Emily doing the same. He saw himself wobbling a bit on the swing, trying to hold himself steady with just his right hand. He tried to breathe again. <em>One, two, three.</em> He saw himself, still holding the cone, sliding out of the swings seat and yelling something. He saw himself landing in the rough, wet sand, the cone having left his hand and landing face-down in the sand next to him. <em>Four, five.</em> Tears were still running down his face. He saw himself turning around as Emily jumped off of her swing and came to his rescue.</p>
<p id = "para-44">“Are you alright?”, he heard her say in her beautiful, melodic voice. <em>One, two, three.</em></p>
<p id = "para-45">“I wouldve been, if you hadnt forced me to get this stupid ice cream!”, he heard himself shoot back aggressively.</p>
<p id = "para-46">He felt something tap on his shoulder again.</p>
<p id = "para-47">“Are you alright?”, he heard someone say. “Im sorry, I shouldnt have said that.”</p>
<p id = "para-48">It was Emily, standing next to him, bending down a bit to reach his shoulders. She slid down the tree trunk next to him. “Im really sorry.”</p>
<p id = "para-49">Ben tried to catch his breath, but with Emily here, it felt much easier all of a sudden. Its like a tension had been lifted from him, like someone had come to push on the floodgates from the other side. “Its alright. Im sorry I yelled, too.”</p>
<p id = "para-50">Emily tutted.</p>
<p id = "para-51">“You know, sometimes I think of that day on the swings.”</p>
<p id = "para-52">“What day?”</p>
<p id = "para-53">“The day we had our first fight. Dont you remember?”</p>
<p id = "para-54">Emily tutted again. She placed her hand back on his shoulder, which he liked, because it was Emilys hand. Thats all that mattered to him.</p>
<p id = "para-55">He wiped the remaining tears and chocolate sauce off of his face, his sweatshirts sleeves now completely covered in both. “I keep remembering that day, being scared that Ill re-live it. That well have another fight. That youll leave.”</p>
<p id = "para-56">"<em>Leave</em>? Come on."</p>
<p id = "para-57">“Im serious.”</p>
<p id = "para-58">“I am, too. Im not leaving.”</p>
<p id = "para-59">She scooched closer and rested her head on his shoulder. “You know, I think about stuff too.”</p>
<p id = "para-60">“Like what?”, he asked while also resting his head on her head, which made him feel really close to her. Intertwined, even.</p>
<p id = "para-61">“You”, she said quietly and grunted. “I really like hanging out with you, you know?”</p>
<p id = "para-62">“I do too,” he said almost immediately. Did this mean what he thought it meant?</p>
<p id = "para-63">“Do you want to go home? Im sure my mom has cookies.”</p>
<p id = "para-64">He nodded. Maybe it did.</p>
</div>
</div>
</div>
</body>
</html>

View file

@ -151,5 +151,15 @@
"cat": ["Minecraft", "Featured"], "cat": ["Minecraft", "Featured"],
"date": "3/21/2021", "date": "3/21/2021",
"discuss": "https://twitter.com/Ellpeck/status/1373660751060160512" "discuss": "https://twitter.com/Ellpeck/status/1373660751060160512"
},
{
"name": "Em & Ben",
"summary": "Ben hates public gatherings because he suffers from anxiety. He's also in love with his best friend Emily, who frequently tries to drag him out of his shell. At the spring festival, he has a panic attack. Will Emily manage to support him?",
"id": "em_and_ben",
"cat": ["Short Stories", "Featured"],
"date": "3/24/2021",
"book": true,
"prompt": "https://blog.reedsy.com/creative-writing-prompts/contests/86/submissions/59997/",
"discuss": "https://twitter.com/Ellpeck/status/1374770369169653767"
} }
] ]

View file

@ -169,8 +169,7 @@
<div class="list-display rounded"> <div class="list-display rounded">
<h1>Blog</h1> <h1>Blog</h1>
<p> <p>
This is my blog, where I post about gaming, programming and life. The featured posts are the ones you'll probably be most interested in, but you can select a different category to see every post. Additionally, you can subscribe to this blog using <a href="/rss.xml">RSS</a>, <a href="/atom.xml">Atom</a> or <a href="/feed.json">JSON</a>.<br> This is my blog, where I post about gaming, programming and life. The featured posts are the ones you'll probably be most interested in, but you can select a different category to see every post. Additionally, you can subscribe to this blog using <a href="/rss.xml">RSS</a>, <a href="/atom.xml">Atom</a> or <a href="/feed.json">JSON</a>.
<span class="text-muted">If you're interested in my fiction writing, I occasionally publish my short stories on <a href="https://ellpeck.de/reedsy">Reedsy Prompts</a>.</span>
</p> </p>
<div id="blog-cats"></div> <div id="blog-cats"></div>

View file

@ -31,7 +31,9 @@ fs.readFile(`${folder}index.html`, function (_, html) {
const index = i; const index = i;
const last = getAdjacentPost(json, index, -1); const last = getAdjacentPost(json, index, -1);
const next = getAdjacentPost(json, index, 1); const next = getAdjacentPost(json, index, 1);
fs.readFile(`${folder}blog/src/${post.id}.md`, function (_, content) {
let extension = post.book ? "html" : "md";
fs.readFile(`${folder}blog/src/${post.id}.${extension}`, function (_, file) {
let dom = new JSDOM(template); let dom = new JSDOM(template);
let document = dom.window.document; let document = dom.window.document;
@ -46,14 +48,29 @@ fs.readFile(`${folder}index.html`, function (_, html) {
${next ? /*html*/ `<a class="nav-item nav-link" href="./${next.id}">Next ${post.cat[0]} Post</a>` : ""} ${next ? /*html*/ `<a class="nav-item nav-link" href="./${next.id}">Next ${post.cat[0]} Post</a>` : ""}
`; `;
let content;
if (post.book) {
document.head.innerHTML += /*html*/ `<link rel="stylesheet" href="../style/book.css">`;
// pull the actual content from the crowbook export
let html = new JSDOM(file);
let page = html.window.document.getElementById("page");
let header = page.getElementsByTagName("header");
while (header.length > 0)
header[0].parentNode.removeChild(header[0]);
content = /*html*/ `
${post.prompt ? /*html*/ `<p class="meta-info"><i>This story was inspired by a Reedsy Prompt and submitted to their competition. As such, it has also been published on <a href="${post.prompt}">their website</a>.</i></p>` : ""}
${page.outerHTML}
`;
} else {
content = converter.makeHtml(file.toString());
}
document.getElementById("main").innerHTML = /*html*/ ` document.getElementById("main").innerHTML = /*html*/ `
<div class="list-display rounded"> <div class="list-display rounded">
<div class="blog-isolated"> <div class="blog-isolated">
<h1>${post.name}</h1> <h1>${post.name}</h1>
<div id="blog-post-${post.id}"> ${post.archived ? /*html*/ `<p class="meta-info"><i>This post has been archived.</i></p>` : ""}
${post.archived ? /*html*/ `<p><i>This post has been archived.</i></p>` : ""} ${content}
${converter.makeHtml(content.toString())}
</div>
<span class="text-muted project-status blog-isolated-status">${post.date}</span> <span class="text-muted project-status blog-isolated-status">${post.date}</span>
${post.discuss ? /*html*/ `<a href="${post.discuss}" class="blog-discuss" id="blog-discuss-${post.id}">Discuss this post</a>` : ""} ${post.discuss ? /*html*/ `<a href="${post.discuss}" class="blog-discuss" id="blog-discuss-${post.id}">Discuss this post</a>` : ""}
</div> </div>

45
style/book.css Normal file
View file

@ -0,0 +1,45 @@
.list-display {
max-width: 40.5em;
}
.chapter {
padding-bottom: 2em;
}
#page {
font-family: "Georgia", serif;
text-align: justify;
}
span.chapter-header {
font-size: 2rem;
}
p {
text-indent: 1.25em;
margin: 0;
hyphens: auto;
}
p.meta-info {
text-indent: 0;
hyphens: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-align: left;
font-family: sans-serif;
font-variant: small-caps;
}
.rule {
text-align: center !important;
margin-top: 1em;
margin-bottom: 1em;
font-weight: bold;
}