Juni Writes A Poem

Link to article: Juni Writes A Poem.

Module Styles

• 
  
  @import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica+SC&display=swap');
  
  .licensebox {
      color: white;
  }
  
  
  /* AUDIO PLAYER */
   
  .audio {
      margin-top: 2rem;
  }
   
  .audio iframe {
      width: 300px;
  }
   
  
  /* COLORS */
  
  #content-wrap {
  background: linear-gradient(34.77deg, #011018 29.51%, #132934 76.89%, #011018 107.83%);
  }
  
  :root {
  --bright-accent: 3, 104, 171;
  --dark-accent: 16, 61, 91;
  --medium-accent: 40, 40, 40;
  --newpage-color: 123, 46, 206;
  --pale-accent: 255, 255, 255;
  --gray-monochrome: 30,30,30;
  --visited-link-color: 150, 150, 150;
  }
  
  /* SETTING VARIABLES */
  :root {
  --base-font-size: 1rem;
  --header-title: "Tales of the Mosaic";
  --header-subtitle: "It's always been this way";
  --logo-image: none;
  --header-font: "Hepta Slab", serif;
  --diagonal-stripes: none;
  --body-font: "EB Garamond", serif;
  --UI-font: Hepta Slab, PTRootUI,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantrell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  }
  
  /*MAKING ACTION AREA READABLE */
  
  .licensebox .collapsible-block-link {
      color: white;
   }
  
  #action-area {
      background: white;
  border-radius: 8px;
  padding: 1rem;
  }
  
  #action-area a {
  color: black;
  }
  
  /* HEADER TEXT */
  
  #header h1 a::before {
  display: none;
  }
  
  #header h2 span::before {
  display: none;
  }
  
  #header h1 a::after {
      font-weight: 600;
      font-size: 2.2rem;
      font-family: 'IM Fell DW Pica SC', serif;
  }
  
  #header h2 span::after {
      text-transform: none;
      font-family: 'EB Garamond', 'IM Fell DW Pica SC', serif;
      font-size: 1.2rem;
      font-weight: bold;
      margin-top: 0.5rem;
  }
  
  /* BREADCRUMBS */
  
  #breadcrumbs a:before {
      content: none;
  display: none;
  }
  
  :is(#breadcrumbs,.pseudocrumbs) a {
      margin-right: 0px;
      color: white;
  padding-right: 0.3rem;
  }
  
  :is(#breadcrumbs,.pseudocrumbs) a:hover {
      color: #f0a475;
     text-decoration: underline;
  }
  
  #breadcrumbs {
  color: white;
  font-weight: regular;
  }
  
  /* TITLE  */
  
  div#page-title {
      display: none;
  }
  
  span.title {
      font-weight: bold;
      color: white;
      font-size: 2.5rem;
      max-width: 24.3rem;
      display: block;
      margin: 0.5rem auto 0.5rem;
  }
  
  .whiteline-header {
      margin: 3rem auto 0rem;
      display: flex;
      align-items: center;
  }
  
  .earthworm .whiteline-header {
      margin: 3rem auto 1rem;
  }
  
  .earthworm p, .earthworm a {
  font-weight: bold;
  margin-bottom: 1rem;
  }
  
  .whiteline-label {
      text-transform: uppercase;
      color: white;
      font-weight: 700;
  font-size: 1rem;
      width: max-content;
      display: block;
      margin-inline: 1rem;
  letter-spacing: 0.15rem;
  font-family: 'IM Fell DW Pica SC';
  }
  
  .whiteline-header p, .centerbox p {
  margin: 0px;
  }
  
  .whiteline-header::before, .whiteline-header::after {
      content: "";
      height: 1px;
      background: white;
      width: 100%;
  }
  
  div#u-authorlink {
      text-align: center;
  font-weight: 700;
  font-size: 1.2rem;
  }
  
  div#u-authorlink a {
      color: rgb(var(--link-color));
  font-weight: 700;
  }
  
  div#u-authorlink p {
  margin: 0px;
  color: white;
  }
  
  .centerbox {
  width: fit-content;
  margin: 1rem auto 3rem;
  text-align: center;
  }
  
  /* PAPER DOCUMENT */
  
  .paper {
  padding: 24px 40px;
  background: linear-gradient(203.04deg, #FBFAF9 40.5%, #f1f1f1 100%);
  box-shadow: 0px 16px 32px -4px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05), inset 0px 0px 30px 0px #AE8B75;
  border-radius: 0px;
  margin-block: 2.5rem;
  max-width: 35rem;
  margin: 0 auto 3rem;
  }
  
  .paper p {
      font-weight: 500;
  font-size: 1.2rem;
  color: #262521;
  }
  
  @media (max-width: 479px) {
      .paper {
          padding:1rem 1rem;
      }
  }
  
  
  /* FIXING NAV BAR FONT SIZE ON MOBILE */
  @media only screen and (max-width: 56.25rem) {
  #header div[class*=top-bar]>ul>li>a {
      background: 0 0;
      font-size: calc(var(--base-font-size)*(13/15));
  }
  }
  
  /* EARTHWORM */
  
  .earthworm {
      margin-block: 3rem;
      font-weight: bold;
      font-size: 1.5rem;
      color: white;
  text-align: center;
  }
  
  .earthworm a {
      font-weight: bold;
      padding: 0.5rem 1rem;
      margin: 1rem auto;
      display: block;
      text-align: center;
      font-size: 1.2rem;
      text-decoration: none;
      transition: 0.5s;
      border: 1px solid white;
      background: #011018;
      border-radius: 0px 8px 0px 8px;
      border-left-color: #f0a475;
      border-bottom-color: #f0a475;
  max-width: 25rem;
  }
  
  .earthworm a:visited {
  color: white;
  border-color: #8a8a8a;
  }
  
  .earthworm a:hover {
      text-decoration: none;
      border: 1px solid #f0a475;
      color: #f0a475;
  }
  

• /* Only show the A/B test subject when the A/B test is active */
  :not(.ab-test--active) + .ab-test-subject { display: none; }
  
  .bottom-rating-module {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block: 1rem;
  }
  .bottom-rating-module .page-rate-widget-box {
    margin: 0;
  }

Inline Styles

• (none)

Includes

• :scp-wiki:component:preview [info]
• :scp-wiki:theme:black-highlighter-theme [info]
• :scp-wiki:component:toggle-sidebar-bhl [info]
• :scp-wiki:component:centered-header-bhl [info]
• :snippets:html5player
• :scp-wiki:component:license-box [info]
• :scp-wiki:component:license-box-end [info]

CSS Classes

• centerbox

• whiteline-header

• whiteline-label

• title

• audio

• paper

• earthworm

• whiteline-header

• whiteline-label

• whiteline-header

• whiteline-label

• ab-test-subject

• bottom-rating-module

Page Source

=====

[[include :scp-wiki:component:preview |text=In which a poet finds ways to dream skyward.
(Tales of the Mosaic – 345 words)]]

=====

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[include :scp-wiki:component:centered-header-bhl]]

[[module CSS]]


@import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica+SC&display=swap');

.licensebox {
    color: white;
}


/* AUDIO PLAYER */
 
.audio {
    margin-top: 2rem;
}
 
.audio iframe {
    width: 300px;
}
 

/* COLORS */

#content-wrap {
background: linear-gradient(34.77deg, #011018 29.51%, #132934 76.89%, #011018 107.83%);
}

:root {
--bright-accent: 3, 104, 171;
--dark-accent: 16, 61, 91;
--medium-accent: 40, 40, 40;
--newpage-color: 123, 46, 206;
--pale-accent: 255, 255, 255;
--gray-monochrome: 30,30,30;
--visited-link-color: 150, 150, 150;
}

/* SETTING VARIABLES */
:root {
--base-font-size: 1rem;
--header-title: "Tales of the Mosaic";
--header-subtitle: "It's always been this way";
--logo-image: none;
--header-font: "Hepta Slab", serif;
--diagonal-stripes: none;
--body-font: "EB Garamond", serif;
--UI-font: Hepta Slab, PTRootUI,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantrell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

/*MAKING ACTION AREA READABLE */

.licensebox .collapsible-block-link {
    color: white;
 }

#action-area {
    background: white;
border-radius: 8px;
padding: 1rem;
}

#action-area a {
color: black;
}

/* HEADER TEXT */

#header h1 a::before {
display: none;
}

#header h2 span::before {
display: none;
}

#header h1 a::after {
    font-weight: 600;
    font-size: 2.2rem;
    font-family: 'IM Fell DW Pica SC', serif;
}

#header h2 span::after {
    text-transform: none;
    font-family: 'EB Garamond', 'IM Fell DW Pica SC', serif;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 0.5rem;
}

/* BREADCRUMBS */

#breadcrumbs a:before {
    content: none;
display: none;
}

:is(#breadcrumbs,.pseudocrumbs) a {
    margin-right: 0px;
    color: white;
padding-right: 0.3rem;
}

:is(#breadcrumbs,.pseudocrumbs) a:hover {
    color: #f0a475;
   text-decoration: underline;
}

#breadcrumbs {
color: white;
font-weight: regular;
}

/* TITLE  */

div#page-title {
    display: none;
}

span.title {
    font-weight: bold;
    color: white;
    font-size: 2.5rem;
    max-width: 24.3rem;
    display: block;
    margin: 0.5rem auto 0.5rem;
}

.whiteline-header {
    margin: 3rem auto 0rem;
    display: flex;
    align-items: center;
}

.earthworm .whiteline-header {
    margin: 3rem auto 1rem;
}

.earthworm p, .earthworm a {
font-weight: bold;
margin-bottom: 1rem;
}

.whiteline-label {
    text-transform: uppercase;
    color: white;
    font-weight: 700;
font-size: 1rem;
    width: max-content;
    display: block;
    margin-inline: 1rem;
letter-spacing: 0.15rem;
font-family: 'IM Fell DW Pica SC';
}

.whiteline-header p, .centerbox p {
margin: 0px;
}

.whiteline-header::before, .whiteline-header::after {
    content: "";
    height: 1px;
    background: white;
    width: 100%;
}

div#u-authorlink {
    text-align: center;
font-weight: 700;
font-size: 1.2rem;
}

div#u-authorlink a {
    color: rgb(var(--link-color));
font-weight: 700;
}

div#u-authorlink p {
margin: 0px;
color: white;
}

.centerbox {
width: fit-content;
margin: 1rem auto 3rem;
text-align: center;
}

/* PAPER DOCUMENT */

.paper {
padding: 24px 40px;
background: linear-gradient(203.04deg, #FBFAF9 40.5%, #f1f1f1 100%);
box-shadow: 0px 16px 32px -4px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05), inset 0px 0px 30px 0px #AE8B75;
border-radius: 0px;
margin-block: 2.5rem;
max-width: 35rem;
margin: 0 auto 3rem;
}

.paper p {
    font-weight: 500;
font-size: 1.2rem;
color: #262521;
}

@media (max-width: 479px) {
    .paper {
        padding:1rem 1rem;
    }
}


/* FIXING NAV BAR FONT SIZE ON MOBILE */
@media only screen and (max-width: 56.25rem) {
#header div[class*=top-bar]>ul>li>a {
    background: 0 0;
    font-size: calc(var(--base-font-size)*(13/15));
}
}

/* EARTHWORM */

.earthworm {
    margin-block: 3rem;
    font-weight: bold;
    font-size: 1.5rem;
    color: white;
text-align: center;
}

.earthworm a {
    font-weight: bold;
    padding: 0.5rem 1rem;
    margin: 1rem auto;
    display: block;
    text-align: center;
    font-size: 1.2rem;
    text-decoration: none;
    transition: 0.5s;
    border: 1px solid white;
    background: #011018;
    border-radius: 0px 8px 0px 8px;
    border-left-color: #f0a475;
    border-bottom-color: #f0a475;
max-width: 25rem;
}

.earthworm a:visited {
color: white;
border-color: #8a8a8a;
}

.earthworm a:hover {
    text-decoration: none;
    border: 1px solid #f0a475;
    color: #f0a475;
}

[[/module]]



[[div class="centerbox"]]

[[module rate]]

[[div class="whiteline-header"]]
[[span class="whiteline-label"]]Tessera[[/span]]
[[/div]]

[[span class="title"]]Juni Writes A Poem[[/span]]

[[div id="authorlink"]]
writing and poem narration by [https://scp-wiki.wikidot.com/atypica-s-awfully-alliterative-anomalous-author-page atypica]
story narration and music by [https://scp-wiki.wikidot.com/jezixo-s-author-page Jezixo]
[[/div]]
[[div class="audio"]]
[[include :snippets:html5player
|type=audio
|url=http://scp-wiki.wikidot.com/local--files/juni-writes-a-poem/juniwritesapoem3.mp3
]]
[[/div]]
[[/div]]


[[div class="paper"]]
Juni wrote:

//Leviathans rise on bluest moons
From reservoirs, runoffs and canals
Beneath this sunken city,
To reach the barren ether.//

//As water drops from up on high, 
The magnates call it rain.
And as they sing their ancient songs, 
The magnates call it wind.//

The beginnings of a poem, maybe. If only he could find the words. The pen lay still, leaving a splotch of ink on the parchment next to abandoned couplets and half-written sonnets. The candles had long melted to puddles of wax. 

He knew he ought to be doing more important things than writing about the whales. Tomorrow marked his first day laboring at the Fairchild steel mill; as his parents did now, and his grandparents did before. Soon, Juni would be a real boy, providing for this city so it may provide for him, giving his body the scars of toil for the privilege of living. He had known it his whole life, and yet, he shivered at the thought. It all felt so suffocatingly grand.

But yesterday, the whales had taken flight. He had followed the crowd as it emptied the inn, and skyward there had seen them, covered in the city's waste yet untethered to it.  He watched them soar, he heard them sing, and for a moment, he forgot about it all. 

And then they were gone, as quick as they came. The people scurried back inside, afraid the magnates would see their awe as slack. Juni walked home enraptured, head filled with whale song, murmuring verses under his breath, counting the days until they would return.

Now, his mother called from downstairs, telling him to get ready for bed. The poem was almost done; soon to join the steadily growing stack in his desk drawer, a thousand other little splendors. He'd bind them all into a book one day, he was sure of it. 

Juni thought of the whales, shedding flotsam as they soared, and knew how he wanted it to end.

//O’ whales that sing in the sky above,
Please teach this city to fly.//

[[/div]]


[[div class="earthworm"]]
[[div class="whiteline-header"]]
[[span class="whiteline-label"]]Previous[[/span]]
[[/div]] [https://scp-wiki.wikidot.com/bessie-bogan-and-the-crow-road-inn Bessie Bogan and the Crow Road Inn]

[[div class="whiteline-header"]]
[[span class="whiteline-label"]]Next[[/span]]
[[/div]] [https://scp-wiki.wikidot.com/a-gally-fellows-lens A Gally Fellow's Lens]

[[/div]]]

[!-- A/B testing whether rate module at the bottom of the page actually affects anything - see https://scp-wiki.wikidot.com/forum/t-17022412/should-your-article-have-a-2nd-rating-module --]
[[module css]]
/* Only show the A/B test subject when the A/B test is active */
:not(.ab-test--active) + .ab-test-subject { display: none; }

.bottom-rating-module {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: 1rem;
}
.bottom-rating-module .page-rate-widget-box {
  margin: 0;
}
[[/module]]
[[module ListUsers users="."]]
[[div class="ab-test ab-test--[[#ifexpr %%number%% % 2 == 0 | active | inactive ]]"]]
[[/div]]
[[/module]]
[[div class="ab-test-subject bottom-rating-module"]]
[[module Rate]]
[[/div]]

[[include :scp-wiki:component:license-box]]
> **Filename:** juniwritesapoem3.mp3
> **Name:** Juni Writes A Poem
> **Authors:** [[*user Jezixo]], [[*user atypica]]
> **License:** CC BY-SA 3.0
[[include :scp-wiki:component:license-box-end]]