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,9 +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

@@ -0,0 +1,148 @@
+<meta charset="UTF-8">
+
+<style>
+body {
+    width: 5.5in;
+    height: 8.5in;
+    position: relative;
+    font-family: sans-serif;
+}
+
+h1,h2,h3 {
+    text-align: center;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+
+h1 {
+    font-size: 4rem;
+    font-weight: bold;
+    font-family: "Impact";
+    color: darkred;
+    rotate: 5deg;
+    border: solid;
+    border-width: 0.125in;
+    padding: 8px;
+    border-radius: 16px;
+}
+
+h2 {
+    margin-left: 0.25in;
+    margin-right: 0.25in;
+    font-size: 1.4rem;
+}
+
+p {
+    margin-top: 4px;
+    margin-bottom: 4px;
+    margin-left: 0.25in;
+    margin-right: 0.25in;
+    text-align: justify;
+}
+
+.root {
+    height: 100%;
+    width: 100%;
+    background: linear-gradient(
+        to bottom,
+        grey 0%,
+        black 45%,
+        black, black
+    );
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+div * {
+    z-index: 2;
+}
+
+img {
+    margin-top: 2.85in;
+    width: 50%;
+    position: absolute;
+    z-index: 1;
+    rotate: -10deg;
+    scale: 115%;
+    filter: saturate(0.45) sepia(0.8) brightness(0.6);
+}
+
+aside {
+    width: 100%;
+    text-transform: uppercase;
+    text-align: center;
+    margin-left: 0.25in;
+    margin-right: 0.25in;
+}
+
+figure {
+    margin: 0px;
+    padding: 0px;
+}
+
+.logo {
+    text-transform: uppercase;
+    background-image: radial-gradient(yellow, goldenrod);
+    color: transparent;
+    background-clip: text;
+    font-family: sans-serif;
+    font-weight: bold;
+}
+
+.byline {
+    background-color: #F0E0D6;
+    position: absolute;
+    right: 0px;
+    bottom: 0px;
+    font-size: 1em;
+}
+
+</style>
+
+<div class="root">
+    <aside style="position: absolute; top: 0;">
+        Coming exclusively to <span class="logo">ULTRA-PLUS®</span> on Christmas Day
+    </aside>
+
+    <figure style="height: 0.3in"></figure>
+
+    <h1>
+        Vrankle: A Victim
+    </h1>
+
+    <img src="assets/img/vrankle.png"/>
+
+    <h2>
+        The true story of an innocent man's struggle
+    </h2>
+
+    <p>
+    Jer Vrankle was attending a fun demonstration downtown when a brute ignorantly called his baseball cap "cool" in the co-op grocer's parking lot. Vrankle was thrust into crisis. Recovering from a small cold and running a mild fever, Jer was the opposite of "cool". The property security dismissed complaints about the comment.
+    </p>
+
+    <figure style="height: 2.5in;"></figure>
+
+    <p>
+    The 48 episode docuseries, directed by the award-winning Selgus Bango, deals with the complex struggles plaguing society today: relationships, decency, and verbal communication.
+    </p>
+
+    <p>
+    Learn about every aspect of the conflict. Make up your own mind about the innocent Jer and antagonistic brute. Hear interviews with bystanders parking in the lot, watch the security camera footage of the event, and listen to Ivy League professors unpack every detail.
+    </p>
+
+    <p>
+    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;">
+        Watch the 48 episode docuseries on <span class="logo">ULTRA-PLUS®</span>
+    </aside>
+
+    <div class="byline">
+        <span style="color: black;">by</span>
+        <span style="color: black;">[+]</span>
+        <span style="font-weight: bold; color: forestgreen;">Max Res Default</span>
+    </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>