<div class = "poemBody">
<h1>
<span class='slabtext'>In</span>
<span class='slabtext'> Side </span>
<span class='slabtext'>Each of us </span>
<span class='slabtext'> is a portal to God and the sun </span>
<!-- <span class='slabtext'>it opens when we're we peeled back </span>
<span class='slabtext'>beneath such hurt and fear </span>
<span class='slabtext'> its outside the bounds of what screams in the mirror</span> -->
<span class='slabtext'>We’ve mistaken our weapons and masks </span>
<span class='slabtext'>For our mouths and lungs </span>
<span class='slabtext'>Confused what’s happened to us </span>
<span class='slabtext'> For what we’ve become</span>
</h1>
</div>
<div class = "poemTitle">
<div data-lining class = "vtxt">
<p>
We humans<br /> often mistake</br> Our portals of possibility</br>
For the certainty of a sunset
</p>
</div>
</div>
body {
/*background-color: #0F3B72;
color: #fffff8;*/
background:#fcfcfc;
color:#444;
width:92%;
padding:20px 0;
margin:0 auto;
transform: scale(.35);
transform-origin: 0 0;
}
.poemBody {
position:absolute;
width: 66%;
}
.poemTitle{
position:absolute;
left: 75%;
/*width: 66%;*/
}
.vtxt {
/*position:absolute;*/
font-size: 4em;
color: #333;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
.vtxt .line:first-of-type {
font-size: 5.5em;
color: #D0496A;
}
.vtxt .line:first-of-type small {
color: #333;
font-size: .6666666em;
}
.small{
font-size: 9px;
}
.slabtexted .slabtext
{
display: -moz-inline-box;
display: inline-block;
white-space: nowrap;
}
.slabtextinactive .slabtext
{
display: inline;
white-space: normal;
font-size: 1em !important;
letter-spacing: inherit !important;
word-spacing: inherit !important;
*letter-spacing: normal !important;
*word-spacing: normal !important;
}
.slabtextdone .slabtext
{
display: block;
}
function slabTextHeadlines() {
$("h1").slabText({
// Don't slabtext the headers if the viewport is under 380px
"viewportBreakpoint":380
});
};
// Load fonts using google font loader
var WebFontConfig = {
google: { families: [ 'Open+Sans:400,700:latin', 'Oswald:700:latin' ] },
// slabText the headers when the font has finished loading (or not)
fontactive: slabTextHeadlines,
fontinactive: slabTextHeadlines
};
(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();