smartbar/pages/wtf.html

<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>