Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header class="prison">
  <cite>
    <p>Written by Chris Chambers and Nick Kaiser</p>
    <p>"Snow Prison" header art by Didier Nguyen on ARTSTATION</p>
  </cite>
</header>
<div class="audio">
  <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42746/ew_switch-1.wav" id="switch-1">
  <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42746/ew_winding-5.wav" id="winding-5"></audio>
  <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42746/ew_welcome.mp3" id="welcome"></audio>
</div>
<div class="contain">
  <section id="toc">
    <ol>
      <li>Prologue: A Cold Welcome</li>
      <li>Prison Features</li>
      <li>Faces of Everwinter</li>
      <li class="spoiler">The Cogwinder Family</li>
    </ol>
  </section>

  <section>
    <h1>
   Prologue: A Cold Welcome
  </h1>
    <p><span class="dropcap">E</span>verwinter Prison is a sprawling complex seated deep in the heart of Neverwinter Wood. A strong magical aura surrounds and conceals it from above, and the horizon from within the prison is dominated by ancient trees that
      block the view in every direction.</p>

    <p>Those attuned to the sounds of the prison would not notice the soft clicking noise that emanated from deep below their feet... but the newcomers will hear it for weeks. It happens once every tenday, like clockwork, and the weekly cycle starts anew.
      A long series of ratchets and plinks, plonks and rattles, and finally, a solid metallic 'click' signals the arrival of a new group of inmates.</p>

    <p>New prisoners can be rare, but today brings quite the catch. A group of common looking folk dressed from head to toe in simple white clothing materializes in the center of the room. Wrapped around their wrists are metallic bracers. They are staring
      at each other, perplexed.</p>

    <p>This entire room is under the effect of a <em>Silence</em> spell. When someone finally tries to speak, read this:</p>

    <aside class="flavor">
      <p>Your lips part but no sound comes out. You look around in frantic bewilderment as there is very obviously no sound present in the room. You shuffle uncomfortably and realize that you cannot move your feet. You stand in almost complete darkness.</p>
      
      <p>In every direction you see glowing orbs. Foggy, blue orbs of varying size. In some cases your vision is obscured as shadows pass in front of these odd lights. Slowly, your eyes begin to focus and the shadows take the shape of other humans. The orbs get sharper too, and you can see that there are large crystals of varying size embedded in the walls emitting a soft blue light that coats the interior of the cornerless room.</p>
      
      <p>As your eyes focus, you begin to notice the walls moving. Large translucent panels laced with brass colored thatching cover a network of mechanical parts -- pipes, gears, chains, weights, and all manner of spinny things. Some of these things are moving slowly, some are moving very quickly, but they are all mostly obscured by the large white panels.</p>
      
      <p>The eerie silence lasts for a few more moments until, suddenly, a pop like the sound of <a href="#switch-1" class="audio">switch being thrown</a> dispels the quiet.</p>
      
      <p>A <a href="#winding-5" class="audio">soft clicking</a> sound permeates the room as an object in the center of the ceiling rotates to reveal a dim blue spotlight... the beam of which slowly pans across the room and comes to rest on a small conical speaker.
      </p>
    </aside>

    <p>There is a sound like a needle dropping on a record... and a cold voice crackles across the still air of the room:</p>

    <blockquote>
      <p>WELCOME TO EVERWINTER PRISON.</p>
      <p>Put all hope out of your mind.</p>
      <p>Make no pretense at rehabilitation here, for we are not priests; we are processesors. As the farmer processes animals into food, we so process dangerous men into harmless ones. This we accomplish by breaking you -- breaking you physically, spritually, and mentally.</p>
      <p>There are no half measures taken here. You have wronged someone, and now you reap what you have sown.</p>
      <p>The rule here is complete and utter SILENCE. Prisoners who break this rule will be fed to the incinerator. If you cannot rise for count, you will be fed to the incinerator. If you do not like the food provided, you <strong>will be fed to the incenerator</strong>.</p>
      <p>There is a pattern here, and I hope you find it.</p>
      <p>Take them away.</p>
    </blockquote>

    <p>There's a loud squelch as the recording stops -- mechanical guards peel off of the walls and unroll to stand on their back four legs. The massive ant-like automatons use their four upper arms to grapple a prisoner and restrain them by clapping their bracers behind their backs. The bracers hum and fuse together.</p>
    <p>
      Large round doors on either side of the room dilate open from the middle. The automatons press the prisoners forward through the doors and into a massive, darkened cell block.
    </p>
  </section>

  <section>
    <h1>Prison Features</h1>
    <p>This entire campaign is based, more or less, in a small complex of buildings. The market is limited to what can be snuck into the prison (takes a lot of time) and what is available at the gnomish comissary.</p>
    <p>The prison is constructed out of a combination of different metal parts and braces and a strong white polymer. It will not scratch or bend.</p>

    <h2>Schedule</h2>
    <ul>
      <li class="bell">[0600] - Wake, mingle.</li>
      <li class="bell">[0700] - Breakfast (fruits/bread).</li>
      <li>[0800] - Yard -> Work detail.</li>
      <li class="bell">[1200] - Lunch (veggies/breads).</li>
      <li>[1300] - Yard -> Work/free time.</li>
      <!--<li class="spoiler">[1400] - Events only on Day Ten?</li>-->
      <li class="bell">[1900] - Dinner (Leftover veggies + nutrient paste).</li>
      <li class="bell">[2000] - 5 minutes until cells close.</li>
      <li>[2005] - Lockdown.</li>
      <li>[2200] - Lights out.</li>
    </ul>
    
    <h2>The Guards</h2>
    
    <p>Multiple tracks run the length of the prison... up and down cell blocks, across the ceiling in the common area, down the walls in the hallways. The track shapes are irregular. In some places they diverge and blanket an area, in others they collect and pass through closed portals. Riding these tracks at any given time are hundreds of clockwork security automatons known affectionately to their creator, as "COBOTS". These <em>correctional officer robots</em> come in many shapes and sizes as generations of Cogwinder have made improvements and mistakes along the way.</p>
    
    <h2>Physicalities</h2>
    
    <p>This is one of the most isolated places on the Sword Coast...</p>
    
    <p><span class="stress">Cold.</span> The weather here is always the same: snow at night, and frigid fog during the day.</p>

    <p><span class="stress">Bells.</span> <i class="bells"></i> Everwinter runs on a strict schedule. The bells ring five times a day: once to wake the prisoners, thrice to signal meal times, and once more to signal cell checks before lockdown.</p>

    <p><span class="stress">Food.</span> There is a large greenhouse on the property that is run by the prisoners. Food prep and distribution is generally managed by the prisoners. At dinner time, a nutrient paste is provided.</p>

    <p><span class="stress">Work.</span> Positioned in the center of prison, leading up to the roof of the central tower, is a large, slow-moving bucket line. Prisoners spend their days shoveling snow into the most accessible, or lowest bucket at the time.
      The load is dumped into a giant funnel on the top of the prison, which feeds it to the boiler. This is where the prison gets its water supply and also the source of the fog that covers the area during the day.</p>

    <p><span class="stress">Water.</span> A small shower area doubles as a toilet in the back of every cell. Every day after dinner, a small hole opens in the ceiling, and another in the floor. Water streams in from the upper area for approximately 30 seconds
      before slowing to a trickle and closing off.</p>

    <p><span class="stress">Lights.</span> There are no actual lights in the prison. However, hundreds of glowing blue crystals poke out of the walls and ceiling bathing everything in a palid blue light. The intensity changes based on the time of day... the crystals work like fiber optics, transferring light from the outside in.</p>

    <p><span class="stress">Bracers.</span> The bracers almost always feel cold to the touch. Maybe it is the weather, but it is something more sinister. When activated by the guards, the bracers can be fused to one another or to certain points throughout the prison. <strong>These bracers are reactive to magic.</strong> If someone tries to cast a spell that requires any kind of concentration, they are shocked for 1dps until concentration is broken. Instantaneous spells may fire, but the result does not always match the intended effect.</p>
    
    <p><span class="stress">Bowl.</span> Every prisoner is assigned a white polymer bowl to be used for water collection or as a tool during work time in the yard. It can be found in their room on the first day. Similar to the uniforms, these bowls pick up dents and stains over time. Engraved in Roman numerals on the inside bottom of the bowl is the number of the prisoner it was assigned to.</p>
    
    <p><span class="stress">Center Lock.</span> The common area of the prison is a large piston that moves and rotates during different parts of the day to control the flow of prisoner movement.</p>
    
    <p><span class="stress">Yard.</span> The yard is a large, semi-circular, walled expanse that bends around the south of the prison.</p>
    
    <p><span class="stress">Doorways.</span> Most of the doorways in the prison, with the exception of cell doors, are circular and work like this mechanically:</p>
    <video preload="auto" autoplay="autoplay" muted="muted" loop="loop" webkit-playsinline="">
      <p>There are no locks in the prison.</p>
                <source src="//i.imgur.com/npqMN3j.mp4" type="video/mp4">
            </video>
    
    <p id="incinerator"><span class="stress">Incinerator.</span> 
    <img id="gif" class="nlSABoG9CSaJpsufv8WW9 _3vYn8QjoEvrXxHyqdn9ddZ _2XBDTIVigBJDybhZvL-hU3" src="https://media.giphy.com/media/ivFpCYm3vDqjC/giphy.webp" srcset="https://media.giphy.com/media/ivFpCYm3vDqjC/200w.webp 200w,
            https://media.giphy.com/media/ivFpCYm3vDqjC/giphy.webp 480w" sizes="100vw" alt="">
    </p>
  </section>


  <section class="content contain">
    <h1>The Faces of Everwinter</h1>

    <h2>Prisoners</h2>
    <p>There are approximately 300 inmates in the prison at any given time. Prisoners come in as groups. Some of them have been here for many years, and different groups tend to fraternize with each other based on their professions or skill class. No one
      ever really sees anyone leave, but people do stop showing up... and are eventually replaced by a new prisoner.</p>

    <h3 id="char-peanut">"Peanut"</h3>
    <p>The Speaker. A character who has a debilitating stutter. Interestingly, he seemed to have crossed an impatient wizard long ago who decided to work around the stutter by implanting a magical bypass in the poor wretch’s mind, after a certain amount
      of stuttering, his mind finds an appropriate synonym and speaks that instead.</p>
    <ul>
      <li>eats more buttercoin than he trades</li>
      <li>is the bookie at events</li>
      <li>loves to have clean clothes</li>
    </ul>

    <h3 id="char-littlefinger">Pinky "Littlefinger" Jones</h3>
    <p>Pinky has been in this place for over 40 years. He assumed the role of prison cook thirty years ago, and more recently helped start a farm within the prison. Under his supervision, meal quality has gone up immensely.</p>
    
    <h3 id="char-bambam">Beaufort "Bam Bam" Bodine</h3>
    <p>The Big Dog. Leader of the strongest gang in the prison. Brutal, self-serving, takes care of his own first, can show kindness when it suits him to do so. Honors debts like the Devil; you get what you ask for, not what you want. Likes being the king
      of the hill.</p>

    <h3 id="char-spoon">Charlie "The" Spoon</h3>
    <p>The Little Dog. Orange-haired firecracker. High-ranking member of Bam Bam's crew.</p>
    <ul>
      <li>Arcanist</li>
    </ul>
    
    <h3 id="char-lips">Lips</h3>
    <p>The Wildcard. A powerful but instable wizard whose lips have been sewn shut &mdash; Likely to crack a joke with a Fireball as a punchline. Lips is tall and lanky. Other prisoners give him all of the space he needs.</p>
    
    <h3 id="char-gut">Gordy "The Gut" Shroder</h3>
    <p>The Blob. Super huge whiny person. Tends to take other prisoners’ food around dinner time. Fights by sitting on opponents. Loves the nutrient paste provided by the prison. Hates the healthy food provided by Pinky and crew, but likes the fact that there is always more than enough leftover nute-paste to sate his appetite.</p>
        
    <div class="spoiler">
    <h3 id="char-slick">Constantine "Slick" Moray.</h2>
    <p>The General. Former high ranking military officer. Excellent combatant, not one to take lightly. Still maintains a sense of honor, but being treated like a prisoner is taking a toll, encouraging him to act like one. Has a moderate following of mercs and former soldier types, most of which share his grim honor values.</p>
    
    
    <h3 id="char-sunshine">Seethan "Sunshine" Solaris</h3>
    <p>The Brain. A seemingly model prisoner. This man appears to only use his internment as time to study and increase the strength of his mind, only exercising in the yard to maintain the vehicle for the powerhouse in his head. Apparently has no allegiances with any other prisoner, however, he holds their respect for his readily-giving nature when asked for information on any topic.</p>
      </div>
  </section>
  
  <section class="spoiler">
    <h1>The Cogwinder Family</h1>
    <p><span class="stress">Kane Cogwinder</span> is the grandson of Roly Cogwinder, the designer of Everwinter Prison. Kane's father, Tague, is the architect that built the prison. Kane is the master engineeer over a team of his brothers and nephews that maintain the guards and the mechanical workings of the prison.</p>
    <p>The Cogwinders have a contract with the Warden that states that every male in the family will work in the prison for the second hundred years of their life in return for an unrecorded compensation. The Cogwinders,
      seeing no reason not to, have moved their entire family into a small, secret village tucked into the trees just outside the prison walls which they have named <em>Winderwell</em>.</p>
    <p>Unless there is an emergency, they will enter the prison after the last bell of the day to perform maintenance.</p>
    <p>The caretakers of Everwinter are a large family of deep gnomes that have been living inside the prison since its inception. No one is really sure how many there are. The males are under contract to work at the prison for the second century of their
      life. Upon realizing the time difference, they moved their entire family inside, unbeknownst to the Warden. They live in a hidden gnome city inside the prison.</p>
        <aside class="fancy mint">
      <h5>The Cogwinders</h5>
      <p>This family is a group of deep gnomes that keep the prison in running order. There can be as few or as many of these gnomes as you wish, and they can have any kind of personality. The rule is for them to ignore the prisoners, but the warden has
        not visited in a few hundred years, and no one expects him to return any time soon.</p>
    </aside>
    <p>Gnomes are usually not found without a custodial guard. They each carry a small remote that allows them to control one of this particular COBOT. Some of the gnomes have taken to customizing their personal guard, adding tools, weapons, and even painting
      them with different metallic colors.</p>
    <p>The Cogwinders are a crafty bunch that also manage the prison comissary, and thereby the resulting economy. Prisoners are alotted a certain amount of items from comissary per week based on a credit system, and credits do not roll over.</p>

  </section>
  
  <section class="spoiler">
    <h1>Chapter 1: Why is it so loud in here?</h1>
    <p>The first day </p>
  </section>
</div>
              
            
!

CSS

              
                $black: #151515;
$gray: #555;
$accent: #740c16;

html {
  font-size: 8px;
}
body {
  font-size: 1.8rem;
}
header {
  height: 60rem;
  max-height: 80vh;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42746/snowprison.jpg);
  background-size: cover;
  background-position: bottom left;
  position: relative;
  &:after {
    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 6rem;
    bottom: -2px;
    left: 0;
    background: linear-gradient(to bottom,  rgba(252,251,227,0) 0%,rgba(252,251,227,1) 100%);
  }
}

section {
  padding: 10rem 0;
  border: 1px solid #ddd;
  border-left: 0;
  border-right: 0;
  columns: 1;
  column-gap: 0;
  &:first-of-type {
    padding-top: 0;
  }
}

body {
  background: #FCFBE3;
  color: $black;
  font-family: serif;
  line-height: 3rem;
  font-family: 'Spectral'
}

h1,
h2,
h3,
h4 {
  font-family: 'Playfair Display SC', serif;
  letter-spacing: 1px;
  color: $accent;
  break-after: avoid;
}

h1 {
  column-span: all;
  padding-bottom: 2rem;
  padding-top: 2rem;
  line-height: 6rem;
  font-size: 5rem;
}

h2 {
  font-size: 4rem;
  line-height: 6rem;
  letter-spacing: 0.2rem;
  margin-top: 3rem;
}

h1 + h2 {
  margin-top: 1rem;
}

h3 {
  border-bottom: 0.3rem solid gold;
  font-size: 3rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

h4 {
  font-size: 2.4rem;
}

h5 {
  font-size: 2.2rem;
  line-height: 3rem;
  font-family: "Open Sans";
  font-weight: 800;
  margin-top: 0.5rem;
}

table {
  font-family: "Open Sans";
  width: 100%;
}

thead {
  font-weight: bold;
}

tbody {
  td:first-child {
    text-align: center;
    width: 4rem;
    font-weight: bold;
  }
  td {
    padding: 0.25rem 0.5rem;
  }
  tr:nth-child(odd) {
    background: #aaa;
  }
  tr:nth-child(even) {
    background: #ddd;
  }
}

p,
ul {
  margin-bottom: 1.8rem;
  font-size: 2rem;
 
}
ul {
  li {
    margin-bottom: 1.5rem;
  }
}

p + p,
aside + p,
blockquote + p {
  text-indent: 3rem;
}

div.audio {
  display: none;
}

a.audio:after,
a.audio:before {
  font-family: "Material Icons";
  content: 'audiotrack'
}

#toc {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%) translateX(-90%);
  background: white;
  padding: 3rem;
  z-index: 2;
  transition: all 200ms ease;
  &:hover {
    transform: translateY(-50%) translateX(0);
  }
}

.bell {
  position: relative;
  list-style: none;
}
.bell:before {
  font-family: "Material Icons";
  content: 'alarm_on';
  display: block;
  position: absolute;
  left: -2.75rem;
  color: $accent;
}

.spoiler {
  display: none;
  transition: all 500ms ease;
  background: $black;
  font-size: 0 !important;
}

// .spoiler:hover {
//   background: transparent;
// }

.dropcap {
  color: $accent;
  float: left;
  font-size: 10rem;
  line-height: 7.6rem;
  padding-top: 1rem;
  padding-right: 0.5rem;
  font-family: 'IM Fell Great Primer SC', serif;
}

.stress {
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.05rem;
  text-indent: -3rem;
}

.pagebreak {
  column-span: all;
  height: 100px;
}

aside {
  position: relative;
  break-before: always;
  font-family: "Open Sans";
  font-size: 1.6rem;
  p {
      line-height: 2.8rem;
  }
}

aside.flavor {
  background: #f4f4f4;
  color: $gray;
  border: 1px solid $accent;
  border-top: 0;
  border-bottom: 0;
  padding: 1rem;
  margin: 3rem 0;
  &:before {
    display: block;
    content: '';
    position: absolute;
    bottom: -3px;
    left: -4px;
    height: 6px;
    width: 6px;
    background-color: $accent;
    border-radius: 50%;
  }
  &:after {
    display: block;
    content: '';
    position: absolute;
    bottom: -3px;
    right: -3px;
    height: 6px;
    width: 6px;
    background-color: $accent;
    border-radius: 50%;
  }
  p:first-of-type {
    &:before {
      display: block;
      content: '';
      position: absolute;
      top: -3px;
      left: -4px;
      height: 6px;
      width: 6px;
      background-color: $accent;
      border-radius: 50%;
    }
    &:after {
      display: block;
      content: '';
      position: absolute;
      top: -3px;
      right: -3.5px;
      height: 6px;
      width: 6px;
      background-color: $accent;
      border-radius: 50%;
    }
  }
}

aside.fancy {    
  background-color: #C5E3BF;
  color: $black;
  position: relative;
  padding: 0 1.5rem; 
  padding-bottom: 1rem;
  border-radius: 5px;
  border: 0.3rem solid $black;
  border-left: 0;
  border-right: 0;
  perspective: 20rem;
  z-index: 14;
  margin: 3rem 0.5rem;
  box-shadow: 0 0 5px 1px rgba(0,0,0,.25);
  h5 {
    &:before {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 1rem 1.5rem 0 0;
      border-color: $black transparent transparent transparent;
      position: absolute;
      bottom: -1.2rem;
      right: 2px;
    }

    &:after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 1.5rem 1rem 0;
      border-color: transparent $black transparent transparent;
      position: absolute;
      bottom: -1.2rem;
      left: 2px;
    }
  }
  &:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1rem 0 0 1.5rem;
    border-color: transparent transparent transparent $black;
    position: absolute;
    top: -1.2rem;
    right: 2px;
  }
  
  &:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 1rem 1.5rem;
    border-color: transparent transparent $black transparent;
    position: absolute;
    top: -1.2rem;
    left: 2px;
  }
  p:last-of-type {
    margin-bottom: 0.25rem;
  }
}

blockquote {
  position: relative;
  background: #ddd;
  font-family: "Open Sans";
  color: $gray;
  padding: 3rem;
  padding-bottom: 1rem;
  border-left: 0.3rem solid $gray;
  margin: 3rem 0;
  font-style: italic;
  font-weight: 400;
  p {
    text-indent: 0;
  }
  &:before {
    content:'“';
    position: absolute;
    top: 1.5rem;
    left: 0rem;
    font-size: 5rem;
    font-family: 'IM Fell Great Primer SC', serif;
  }
  &:after {
    content:'”';
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    font-size: 5rem;
    font-family: 'IM Fell Great Primer SC', serif;
  }
  cite {
    display: block;
    font-style: normal;
    margin-top: 1rem;
  }
}

@media (min-width: 800px) {
  section:not(#toc) {
    columns: 2;
    column-gap: 4rem;
  }
}

img.full {
  column-span: all;
}

video {
  width: 100%;
}

header {
  position: relative;
}

header cite {
  color: #f4f4f4;
  letter-spacing: 0.5px;
  position: absolute;
  right: 30px;
  bottom: 50px;
  font-family: "Open Sans";
  p {
    text-indent: 0;
    line-height: 1;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
  }
}
              
            
!

JS

              
                var app = {
  init: function () {
    app.setup();
    console.log("The adventure awaits...");
  },
  
  setup: function () {
   $("a.audio").on("click", app.handleAudio); 
  },
  
  handleAudio(e) {
    e.preventDefault();
    var $el = $(this),
        $target = $($el.attr("href")),
        target = $target[0];
    target.pause()
    target.currentTime = 0
    target.play()   
  }
}

$(document).ready(app.init);
              
            
!
999px

Console