workflow: i guess upload-actions v4 is GH only

Reviewed-on: #7

.gitea/workflows/build-pdf.yml

@@ -0,0 +1,55 @@
+name: Build PDF
+
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  pdf:
+    name: make pdf
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Go (from go.mod)
+        uses: actions/setup-go@v5
+        with:
+          go-version-file: go.mod
+          check-latest: true
+          cache: true
+
+      - name: Install Chrome and tools (no snap)
+        run: |
+          set -euxo pipefail
+          if command -v sudo >/dev/null 2>&1; then SUDO=sudo; else SUDO=; fi
+          $SUDO apt-get update
+          # Base tools and fonts
+          DEBIAN_FRONTEND=noninteractive $SUDO apt-get install -y --no-install-recommends \
+            ca-certificates gnupg make fonts-liberation
+
+          # Add Google's official Chrome APT repo (avoids Ubuntu's snap-only chromium)
+          $SUDO install -d -m 0755 /etc/apt/keyrings
+          curl -fsSL https://dl.google.com/linux/linux_signing_key.pub | $SUDO gpg --dearmor -o /etc/apt/keyrings/google-linux-signing-keyring.gpg
+          echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/google-linux-signing-keyring.gpg] https://dl.google.com/linux/chrome/deb/ stable main" | \
+            $SUDO tee /etc/apt/sources.list.d/google-chrome.list >/dev/null
+          $SUDO apt-get update
+          DEBIAN_FRONTEND=noninteractive $SUDO apt-get install -y --no-install-recommends google-chrome-stable
+
+          # Clean up apt lists to keep image lean
+          $SUDO rm -rf /var/lib/apt/lists/*
+
+      - name: Build PDF
+        env:
+          # Ensure our tools pick Chrome first if multiple are present
+          CHROME_PATH: /usr/bin/google-chrome-stable
+        run: make pdf
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: output-pdf
+          path: _dist/output.pdf
+          if-no-files-found: error

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

@@ -4,10 +4,16 @@
 - hack-the-planet.html
 - wtf.html
 - drivingmissmuni.html
+- crashman.html
 - vranklevictim.html
 - pearlstreetcafe.html
 - gtkapplang-1.html
 - 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/crashman.html

@@ -0,0 +1,89 @@
+<style>
+    #crashman-page {
+        position: relative;
+        background: url("assets/img/crashman/crashman-bg.png") no-repeat center center;
+        background-size: cover;
+        overflow: hidden;
+    }
+
+    #snips {
+        height: 120px;
+        width: 620px;
+        background-color: rgb(209, 1, 209);
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding: 5px;
+
+        position: absolute;
+        bottom: 30px;
+        left: -50px;
+        transform: rotate(-5deg);
+    }
+
+    #snips img {
+        flex: 1 1 0;
+        width: auto;
+        object-fit: contain;
+        max-height: 100%;
+    }
+
+    #title {
+        position: absolute;
+        top: 350px;
+        right: 8px;
+
+        font-family: "Heading Now";
+        font-size: 48px;
+
+        color: #fff;
+        text-shadow:
+            0px 10px 0 rgb(209, 1, 209),
+            0px 20px 0 black;
+    }
+
+    #text {
+        position: absolute;
+        top: 390px;
+        width: 100%;
+        height: auto;
+        background-color: rgba(62, 6, 62, 0.704);
+        font: 11.75pt/1.40 Tahoma, sans-serif;
+        padding: 24px;
+        color: #fff;
+        line-height: 1.9em;
+    }
+
+    .stretch {
+        font-weight: 800;
+        transform: scaleX(2.1);
+        transform-origin: left;
+        display: inline-block;
+    }
+
+</style>
+
+<div id="crashman-page" class="page-base">
+
+    <div id="text">
+        <p>
+            <b>Rusty Haight</b> is the human crash-test dummy. As director of the San Diego-based Collision Safety Institute, 
+            Rusty has experienced more than 950 violent vehicle crash tests at speeds of up to 54 mph, 
+            and taken <span class="stretch">140 air bags to the face.</span>
+        </p>
+        <p>
+            Haight has contributed several publications on the topic of automobile safety 
+            in <b>Collision Magazine</b> such as <em>Hyundai and Kia Crash Data: the Indispensable Compendium.</em>
+        </p>
+    </div>
+
+    <div id="snips">
+        <img src="assets/img/crashman/crashman-1.png" />
+        <img src="assets/img/crashman/crashman-2.png" />
+        <img src="assets/img/crashman/crashman-3.png" />
+    </div>
+
+    <div id="title" class="ytmnd-1">crash man</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/vranklevictim.html

@@ -133,7 +133,7 @@ figure {
     </p>
 
     <p>
-    Famed composer Hilden Valeigh's soundtrack is a complex mix of droning repetitive ambiance. The 9 disc soundtrack is releasing exclusively for streamingon <span class="logo">ULTRA-PLUS®</span> later this winter.
+    Famed composer Hilden Valeigh's soundtrack is a complex mix of droning repetitive ambiance. The 9 disc soundtrack is releasing exclusively for streaming on <span class="logo">ULTRA-PLUS®</span> later this winter.
     </p>
 
     <aside style="position: absolute; bottom: 32px;">

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>