forked from buzzert/smartbar
136 lines
3.9 KiB
HTML
136 lines
3.9 KiB
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>
|
||
</div> |