Some interlude pages

assets/css/base.css

@@ -3,6 +3,11 @@
     margin: 0;
 }
 
+@font-face {
+    font-family: "Heading Now";
+    src: url("../font/HeadingNow-95Medium.otf");
+}
+
 /* Base */
 html, body {
     height: 100%;
@@ -20,6 +25,39 @@ html, body {
 	margin: 0;
 }
 
+.interlude {
+    position: relative;
+    overflow: hidden;
+    color: white;
+    padding: 4rem;
+    z-index: 0; /* ensure stacking context */
+}
+
+.interlude::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-size: cover;
+    background-position: center;
+    filter: grayscale(20%) brightness(0.7);
+    z-index: -2;
+}
+
+.interlude::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    /*background: rgba(128, 0, 128, 0.3); /* purple tint */ */
+    z-index: -1;
+}
+
+.interlude-caption {
+    color: rgba(225, 225, 225, 1.0);
+    font-family: "Heading Now";
+    line-height: 2em;
+    rotate: 5deg;
+}
+
 /* Use border-box sizing everywhere to keep dimensions predictable */
 html { box-sizing: border-box; }
 *, *::before, *::after { box-sizing: inherit; }

pages.yaml

@@ -10,4 +10,9 @@
 - gtkapplang-2.html
 - gtkapplang-3.html
 - gtkapplang-4.html
+- broken-screen.html
+- windows-shirt.html
+- free-dirt.html
+- mr-nickel.html
+- javaguy.html
 

pages/broken-screen.html

@@ -0,0 +1,19 @@
+<style>
+#broken-screen::before {
+    background-image: url("assets/img/broken-screen.jpg");
+}
+
+#broken-screen-caption {
+    position: absolute;
+    bottom: 25%;
+    right: 15%;
+    text-align: right;
+}
+</style>
+
+<div id="broken-screen" class="page-base interlude">
+    <div class="interlude-caption" id="broken-screen-caption">
+        have you tried<br/>
+        turning it off and on again?
+    </div>
+</div>

pages/free-dirt.html

@@ -0,0 +1,15 @@
+<style>
+#free-dirt::before {
+    background-image: url("assets/img/free-dirt.jpg");
+}
+
+#free-dirt-caption {
+    position: absolute;
+    bottom: 25%;
+    right: 25%;
+}
+</style>
+
+<div id="free-dirt" class="page-base interlude">
+    <div class="interlude-caption" id="free-dirt-caption">thanks...</div>
+</div>

pages/javaguy.html

@@ -0,0 +1,18 @@
+<style>
+#javaguy::before {
+    background-image: url("assets/img/javaguy.jpg");
+}
+
+#javaguy-caption {
+    position: absolute;
+    top: 5%;
+    left: 5%;
+}
+</style>
+
+<div id="javaguy" class="page-base interlude">
+    <div class="interlude-caption" id="javaguy-caption">
+        i'm living in the real world<br/>
+        and he's living in a <em>virtual machine...</em><br/>
+    </div>
+</div>

pages/mr-nickel.html

@@ -0,0 +1,19 @@
+<style>
+#mr-nickel::before {
+    background-image: url("assets/img/mr-nickel.jpg");
+}
+
+#mr-nickel-caption {
+    position: absolute;
+    bottom: 10%;
+    right: 5%;
+}
+</style>
+
+<div id="mr-nickel" class="page-base interlude">
+    <div class="interlude-caption" id="mr-nickel-caption">
+        mr. nickel says<br/>
+        the financial collapse is imminent<br/>
+        and it's all your fault!
+    </div>
+</div>

pages/windows-shirt.html

@@ -0,0 +1,19 @@
+<style>
+#windows-shirt::before {
+    background-image: url("assets/img/windows-shirt.jpg");
+}
+
+#windows-shirt-caption {
+    position: absolute;
+    bottom: 10%;
+    left: 10%;
+}
+</style>
+
+<div id="windows-shirt" class="page-base interlude">
+    <div class="interlude-caption" id="windows-shirt-caption">
+        we line up to store<br/>
+        only 4 gigabytes allowed<br/>
+        comrade, be grateful!
+    </div>
+</div>