adds wtf page and interstitial hack the planet

pages.yaml

@@ -1,6 +1,8 @@
 # locations in pages/
 
 - cover.html
+- hack-the-planet.html
+- wtf.html
 - gtkapplang-1.html
 - gtkapplang-2.html
 - gtkapplang-3.html

pages/hack-the-planet.html

@@ -0,0 +1,10 @@
+<style>
+    #hack-the-planet-page {
+        background: url("/assets/img/hack-the-planet.jpg") no-repeat center center;
+        background-size: cover;
+    }
+
+</style>
+
+<div id="hack-the-planet-page" class="page-base">
+</div>

pages/wtf.html

@@ -0,0 +1,136 @@
+<style>
+    #wtf-page {
+        background: url("/assets/img/wtf.png") no-repeat center center;
+        background-size: cover;
+
+        font: 8.75pt/1.40 Tahoma, sans-serif;
+        padding: 10px;
+        hyphens: auto;
+        overflow-wrap: break-word;
+    }
+
+    h2 {
+        font-family: "Heading Now";
+        font-size: 23px;
+    }
+
+    h3 {
+        font-family: "Heading Now";
+        font-size: 24px;
+        text-align: right;
+    }
+
+    p {
+        font-family: Helvetica, sans-serif;
+        font-size: 12.75pt;
+    }
+
+    /* Windows 98 styles */
+    .win98-window {
+        background: #c0c0c0c0;
+        border: 2px solid;
+        border-color: #ffffff #404040 #404040 #ffffff; /* light top/left, dark bottom/right */
+        padding: 6px;
+
+        /* Vertically center the window in the page */
+        position: relative;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .win98-titlebar {
+        display: flex;
+        align-items: center;
+        margin: 0 0 6px 0;
+        padding: 4px 8px;
+        min-height: 22px;
+        font-weight: bold;
+        color: #ffffff;
+        background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
+        border: 2px solid;
+        border-color: #ffffff #404040 #404040 #ffffff;
+    }
+
+    .win98-content {
+        background: #ffffffc0;
+        border: 2px solid;
+        border-color: #808080 #ffffff #ffffff #808080; /* inset look */
+        padding: 10px;
+        color: #000000;
+        line-height: 1.4;
+    }
+
+    .feces {
+        transform: skewX(-10deg);
+        transform-origin: bottom center;
+        display: inline-block;
+        color: rgb(154, 77, 0);
+        font-stretch: condensed;
+        font-family: inherit;
+        font-size: 90%;
+        font-weight: bold;
+    }
+
+    .round-boxes {
+        display: inline-block;
+        font-stretch: condensed;
+        font-family: inherit;
+        border-radius: 10px;
+
+        background: rgb(166, 205, 211);
+        padding: 2px 4px;
+    }
+
+    .real {
+        display: inline-block;
+        transform: scaleX(2.5);
+        transform-origin: left;
+        font-weight: bold;
+        width: 80px;
+    }
+</style>
+
+<div id="wtf-page" class="page-base">
+    <div class="win98-window">
+        <h1 class="win98-titlebar">wtf??? is this???</h1>
+        <div id="wtf-text" class="win98-content">
+            <h2>AH, THE CITY BY THE BAY,</h2>
+
+            <p>
+                If you ask me, I say the city needs some more grime. I
+                know that’s probably not what you were thinking when
+                you stepped over the <span class="feces">HUMAN FECES</span> 
+                this morning on the
+                way from picking up your $6 latte. And for damn sure it
+                wasn’t what your UX designer or whatever he calls himself 
+                was thinking when he was drawing his stupid fucking 
+                <span class="round-boxes">ROUND BOXES</span> for the hundreth time.
+            </p>
+
+            <p>
+                Put the round boxes on ice. This is SMART BAR. The
+                “mission district before it was cool” publication. The
+                “noisebridge before they got kicked out” edition.
+            </p>
+
+            <p>
+                You see, here at SMART BAR we don’t give a shit. But we
+                also care. No, not about you. We have our own agenda.
+                What is our agenda? That’s our business.
+            </p>
+
+            <p>
+                SMART BAR is the little bit o’ dirt that makes virtual
+                reality feel more <span class="real">real</span>. It’s the disgusting mess of
+                cables behind your desk that you’re constantly trying
+                to hide. It’s the malware with the pretty UI that tries to
+                steal people’s bitcoin.
+            </p>
+
+            <p>Log on, if you dare.</p>
+
+            <h3>TRENT SNEEK</h3>
+        </div>
+    </div>
+</style>