smartbar/pages/streetgeek-1.html

<style>

@font-face {
    font-family: "Aerosoldier";
    src: url("assets/font/aerosoldier.otf");
}

@font-face {
    font-family: "COMPUTER Robot";
    src: url("assets/font/computer-robot.ttf");
}

span.computer {
    font-family: "COMPUTER Robot", monospace;
}

#streetgeek1-page {
    display: flex;
    flex-direction: column;
    padding: 0.4in 0.42in;
    background-color: white;
    color: black;
    font: 8.6pt/1.42 'Times New Roman', serif;
}

#sg1-kicker {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 7pt;
    font-weight: bold;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgb(209, 1, 209);
    margin-bottom: 3pt;
}

#streetgeek1-page h1 {
    font-family: Aerosoldier, Helvetica, sans-serif;
    font-size: 38pt;
    line-height: 0.85;
    color: black;
    margin: 0;
}

#sg1-deck {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 10pt;
    color: #222;
    margin: 5pt 0 3pt 0;
}

#sg1-byline {
    font-size: 8pt;
    font-style: italic;
    margin: 0;
}

#sg1-rule {
    border: none;
    border-top: 1.4pt solid black;
    margin: 6pt 0 9pt 0;
}

#sg1-body {
    flex: 1;
    columns: 2;
    column-gap: 0.28in;
}

#sg1-body p {
    color: black;
    text-indent: 2em;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: break-word;
    margin: 0 0 7pt 0;
}

.drop-cap::first-letter {
    float: left;
    font-size: 4em;
    line-height: 0.8;
    padding-right: 8px;
    padding-top: 0px;
    font-weight: bold;
    font-family: Georgia, serif;
}

.drop-cap {
    text-indent: 0 !important;
}

#sg1-pullquote {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 13.5pt;
    line-height: 1.25;
    color: #111;
    text-indent: 0;
    border-left: 3pt solid rgb(209, 1, 209);
    padding: 2pt 0 2pt 10pt;
    margin: 4pt 0 9pt 0;
}

#sg1-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 0.75pt solid black;
    margin-top: 6pt;
    padding-top: 4pt;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 6.5pt;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #333;
}

</style>

<div id="streetgeek1-page" class="page-base">

<div id="sg1-header">
    <h1>Street Geek</h1>
    <p id="sg1-deck">Notes from the front lines of hacker haute couture.</p>
    <p id="sg1-byline">By <strong>Bram Noidz</strong></p>
</div>

<hr id="sg1-rule" />

<div id="sg1-body">

<p class="drop-cap">
    My day in meatspace wasn't going well. I woke up in the late morning and acquired the day's
    outfit using my usual clothing drawer LIFO mechanism. This week's permutation of clothing in the
    drawer left me with a depressingly common combination: black t-shirt with black jeans. I thought
    for a brief second that I should break out of the LIFO ordering and make a daring attempt at a
    more arbitrarily stylish outfit. Brief panic attack. Ultimately I decided against it. <i>The
    purpose of a system is what it does.</i> If I decide for even one day to ignore my LIFO
    clothing system, then it really is no system at all.
</p>

<p>
    I hobbled downstairs in my algorithmically chosen outfit and made a cup of coffee. Double
    espresso with a bit of hot water mixed in. While reading something on my computer, I
    accidentally spilled about half of the coffee onto my shirt. Luckily for me, the stains were
    practically invisible on the black t-shirt, and very little ended up on my pants. The only
    evidence that I had spilled something on myself that morning was the faint coffee smell that
    lingered after I mopped it up. But who doesn't love the smell of coffee? I actually wouldn't
    mind a cologne with the scent of the glorious roasted bean imbued into it. Similar to the
    clickety-clack sound of the mechanical keyboard, the coffee cologne might have the Pavlovian
    effect of stimulating the electronic productivity of the people around you. Free idea for any of
    our young entrepreneurial readers out there.
</p>

<p>
    You might be wondering why I spent more time than usual at this time of the morning thinking
    about what I'm wearing. Today, I am meeting my friend <span class="computer">ByteLord</span> for lunch at the vegan
    restaurant <i>Cha-Ya</i> on Valencia. <span class="computer">ByteLord</span> is a one-of-a-kind genius level programmer
    that I met on an IRC channel one evening. This guy slings code so neat and clean, he puts Linus
    Torvalds and that guy who made the <i>McMaster-Carr</i> catalog website to shame. I had never
    met <span class="computer">ByteLord</span> A.F.K. before. Therefore, needless to say, I felt intimidated and eager to
    please.
</p>

<div id="sg1-pullquote">&ldquo;The purpose of a system is what it does.&rdquo;</div>

<p>
    I got to <i>Cha-Ya</i> a little bit early and ordered a green tea while waiting for
    <span class="computer">ByteLord</span> to arrive. I spilled a little bit of this on my shirt as well. Unfortunately
    now, mixed with the coffee stain from earlier, the combination gave off a toilet smell that was
    quite unpleasant. I started praying that <span class="computer">ByteLord</span> had a cold and wouldn't be able to
    smell anything. Luckily the stains were still mostly invisible on my black t-shirt.
</p>

<p>
    When <span class="computer">ByteLord</span> walked in the front door, I almost mistook him for one of those cool
    hip-hopper guys. He was decked out from head to toe and looked <i>on fleek</i>.
</p>

</div>

<!--
<div id="sg1-footer">
    <span>Smart Bar</span>
    <span>Continued on page 02 &rarr;</span>
    <span>01</span>
</div>
-->

</div>