House of Leaves: CSS Grid

house-of-leaves-css-grid.markdown

House of Leaves: CSS Grid

CSS Grid implementation of House of Leaves pages 148 and 149.

A Pen by Nienke Dekker on CodePen.

License.

index.html

<!-- CSS Grid implementation of House of Leaves pages 148 and 149. -->

<div class="book">
  <div class="left-page">
	<div class="argument">
			&emsp;Perhaps the best argument for the authenticity of <i>The Navidson Record</i> does not come from film critics, university scholars, or festival panel members but rather from the I.R.S. Even a cursory glance at Will Navidson's tax statements or for that matter Karen's, Tom's or Billy Reston's, proves the impossibility of digitial manipulation.<sup>194</sup>
		</div>
		<div class="dot">
			.
		</div>
		<div class="money">
			They just never had enough money.
		</div>
		<div class="beauregard">
			&emsp;Sonny Beauregard conservatively estimates the special effects in <i>The Navidson Record</i> would cost a minimum of six and a half million dollars. Taking into account the total received for the Guggenheim Fellowship, the NEA Grant, everyone's credit limit on Visa, Mastercard, Amex etc. etc., not to mention savings and equity, Navidson comes up five and a half million dollars short. Beauregard again: "Considering the cost of special effects these days, it is inconceivable how Navidson could have created this house."
		</div>
<div class="footnote-194">
			<sup>194</sup>The records were made public in the Phillip Newharte article "The House The I.R.S. Didn't Build", published in <i>Seattle Photo Zine</i> v.12, 118, p.92-156.
		</div>
		<div class="page-number">
			148
		</div> 
	</div>
	<div class="right-page">
	<div class="haunting">
			Strangely then, the best argument for fact is the absolute unaffordability of fiction. Thus it would appear the ghost haunting <i>The Navidson Record</i>, continually bashing against the door, is none other than<br> the recurring threat of its own <br> reality.<sup>195</sup></div>
		<div class="footnote-195">	
			<sup>195</sup>
			Despite claiming in Chapter One that <i>the more interesting material dwells exclusively on the interpretation of events within the film</i>, Zampano has still wandered into his own discussion of "the antimonies of fact or fiction, representation or artifice, document or prank" within <u>The Navidson Record</u>. I have no idea wether it's on purpose or not. Sometimes I'm certain it is. Other times I'm sure it's just one big fucking train wreck.
			<br>
&emsp;Which, in case you didn't realize, has everything to do with the story of Connaught B.N.S. Cape who observed four asses innow the air ... for as we know there can only be one conclusion, no matter the labor, the lasting trace, the letters or even the faith - no daytime, no starlight, not even a flashlight to the rescue - just, that's it, so long folks, one grand kerplunk, even if Mr. Cape really did come across four donkeys winnowing the air with their hooves...
			<br>
&emsp;Thoughts blazing through my mind while I was walking the aisles at the Virgin Megastore, trying to remember a tune to some words, changing my mind to open the door instead, some door, I don't know which one either, except maybe one of the ones inside me, which was when I found Hailey, disturbed face, incredible body, only eighteen, smoking like a steel mill, breath like the homeless but eyes bright and pure and she had an incredible body and I said hello on a whim invited her over to my place to listen to some of the CD's I'd just bought, convinced she'd decline, surprised when she accepted, so over she came, and we put on the music and smoked a bowl and called Pink Dot though they didn't arrive with our sandwiches and beer until we were already out of clothes and under the covers, and then we ate an drank en Hailey smiled and her face seemed less distrubed and her smile was gentle and peaceful and as I felt myself drift off next to her, I wanted her to fall alseep next to me, but Hailey didn't understand and for some reason when I woke up a little later, she was already gone, leaving neither a note or a number.
			<br>
&emsp;A few days later, I heard her on KROQ's Love Line, this time drenched in purple rain, describing to Doctor Drew and Adam Carolla how I - this guy in a real stale studio with books and writing everywhere, <u>everywhere</u>! and weird drawings all over his walls too, all in black. I couldn't understand any of it. -- had dozed off only to start screaming and yelling terrible things in his sleep, about blood and mutilations and other crazy $#%@, which had scared her and had it been wrong of her to leave even though when he'd been awake he'd seemed alright?
			<br>
&emsp;An ugly shiver ripped up my back then. All this time I'd believed the cavorting and drinking and sex had doneaway with that terrible onslaught of fear. Clearly I was wrong. I'd only pushed it off into another place. My stomach turned. Screaming things was bad enough, but the thought that I'd also frightened someone I felt only tenderness for made it far worse.
			<br>
&emsp;Did I scream every night? What did I say? And why in the hell
		</div>
		<div class="page-number">
			149
		</div>
	</div>
</div>

style.less

/* Some styling */
body, html {
  font-family: 'Amiri', serif;
	font-size: 16px;
	line-height: 1.2em;
}

sup {
	font-family: 'Amiri', serif;
}

/* This is our container, or 'book'. It has two columns. */
.book {
	display: grid;
	grid-gap: 20px;
  grid-template-columns: repeat(2, 1fr);
	background-color: #727272;
}

/* The pages of our book. We have to declare display: grid again, or else its descendants will not be "griddy". */
.left-page,
.right-page {
	background-color: #f7efde;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(10, 100px) 50px;
}

/* Left Page Children */
.argument {
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 5;
	text-align: justify;
}

.dot {
	grid-column-start: 6;
	grid-column-end: 7;
	grid-row-start: 4;
	grid-row-end: 5;
  direction: rtl;
	font-weight: bold;
	font-size: 40px;
	margin-top: -40px;
}

.money { 
	grid-column-start: 3;
	grid-column-end: 7;
	grid-row-start: 5;
	grid-row-end: 5;
	text-align: center;
}

.beauregard {
	grid-column-start: 6;
	grid-column-end: 8;
	grid-row-start: 6;
	grid-row-end: 9;
	text-align: justify;
}

.footnote-194 {
	grid-column-start: 2;
	grid-column-end: 8;
	grid-row-start: 10;
	grid-row-end: 11;
	align-self: end;
}

/* Right Page Children */
.haunting {	
	grid-column-start: 2;
	grid-column-end: 8;
	grid-row-start: 2;
	grid-row-end: 3;
	text-align: center;
}

.footnote-195 {
	grid-column-start: 2;
	grid-column-end: 8;
	grid-row-start: 3;
	grid-row-end: 11;
	font-size: 14.5px;
	font-family: Courier New;
}

/* Shared styling between children */
.page-number {
	grid-column-start: 1;
	grid-column-end: 9;
	grid-row-start: 11;
	grid-row-end: 11;
	text-align: center;
	align-self: end;
}