smartbar/pages/streetgeek-2.html

<style>

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

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

#sg2-topbar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 6.5pt;
    font-weight: bold;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #333;
    border-bottom: 0.75pt solid black;
    padding-bottom: 4pt;
    margin-bottom: 8pt;
}

#sg2-topbar span:first-child {
    color: rgb(209, 1, 209);
}

#sg2-headline {
    font-family: Aerosoldier, Helvetica, sans-serif;
    font-size: 24pt;
    line-height: 0.9;
    margin: 0 0 3pt 0;
}

#sg2-subhead {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 9.5pt;
    color: #222;
    margin: 0 0 10pt 0;
}

#sg2-gallery {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0.2in;
    margin: 3pt 0 8pt 0;
}

.sg2-frame {
    background: white;
    padding: 6px 6px 5px 6px;
    border: 1px solid #ddd;
    box-shadow: 0 3px 10px rgba(0,0,0,0.28);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.sg2-frame.left, .sg2-frame.right {
    width: 1.95in;
}

.sg2-frame.left { transform: rotate(-2.4deg); }
.sg2-frame.right { transform: rotate(2.2deg); }

.sg2-frame.solo {
    float: right;
    width: 46%;
    margin: 2pt 0 4pt 10px;
    transform: rotate(-1.6deg);
}

.sg2-frame img {
    display: block;
    width: 100%;
    height: auto;
}

.sg2-caption {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 6.5pt;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    color: #333;
    margin-top: 4px;
}

#sg2-text {
    flex: 1;
    columns: 2;
    column-gap: 0.26in;
}

#sg2-text p {
    text-indent: 2em;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: break-word;
    margin: 0 0 4pt 0;
}

#sg2-text p:first-child {
    text-indent: 0;
}

#sg2-text p:first-child::first-letter {
    float: left;
    font-size: 3em;
    line-height: 0.78;
    padding-right: 6px;
    font-weight: bold;
    font-family: Georgia, serif;
}

#sg2-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="streetgeek2-page" class="page-base">

<!--
<div id="sg2-topbar">
    <span>Street Geek</span>
    <span>Field Report</span>
    <span>Page 02</span>
</div>
-->

<!--
<div id="sg2-header">
    <h2 id="sg2-headline">The Look</h2>
    <p id="sg2-subhead">ByteLord, spotted in the wild at Cha-Ya on Valencia.</p>
</div>
-->

<div id="sg2-gallery">
    <div class="sg2-frame left">
        <img src="assets/img/streetgeek-java.png" alt="ByteLord wearing a Java t-shirt under a gray plaid overshirt" />
        <div class="sg2-caption">&quot;Java&quot;</div>
    </div>
    <div class="sg2-frame right">
        <img src="assets/img/streetgeek-evangelion.png" alt="ByteLord wearing an Evangelion t-shirt under a black overshirt" />
        <div class="sg2-caption">&quot;Evangelion&quot;</div>
    </div>
</div>

<div id="sg2-text">

<p>
    A typically chilly San Francisco summer afternoon, he was dressed for warmth. A beanie with an
    off-white pattern, reminiscent of the Windows XP start menu background. A comfy gray overshirt
    with a clean geometric pattern. Some kind of smart watch whose battery was obviously dead. Most
    tellingly, a <i>Java</i> t-shirt underneath the overshirt which, in the context of the rest of
    the outfit, gave the programming language an undeserved level of coolness.
</p>

<div class="sg2-frame solo">
    <img src="assets/img/streetgeek-dogtags.jpeg" alt="ByteLord's necklace: a Mac OS X Panther dog tag on a ball chain" />
</div>

<p>
    Besides the comfortable textiles, I was impressed with <i>ByteLord</i>'s choice of accessories.
    A wallet chain, which I hadn't seen anyone wear since the mid 2000's, added a metallic balance
    to the lower half of his appearance. His neck was adorned with a necklace that didn't appear to
    serve any functional purpose, but matched the wallet chain quite nicely. Finally, he was wearing
    rather large, television-sized eyeglass frames. Frankly, I had never given much thought to
    accessories in an outfit, unless they have some kind of microchip in them. But <i>ByteLord</i>
    had arranged them in such a way to make the outfit look effortless, yet stylish.
</p>

<p>
    We ordered <i>zaru soba</i> with <i>vegetable tempura</i> and spoke about various topics from
    cyberspace. After we finished talking about the guy that supposedly defaced fellow editor P. M.
    Cho's website, we started talking about fashion. I was surprised to hear that <i>ByteLord</i>
    was quite into fashion on a deeply philosophical level. He explained to me that what you wear in
    meatspace is like the <i>graphical shell</i> for a person. A hacker should present himself to
    others in the same way that a computer program presents itself to users. You wouldn't want to
    walk away from an interaction with someone having the same feeling as using the <i>git</i>
    command line interface.
</p>

<p> I paid for the <i>zaru soba</i> and <i>ByteLord</i> sent me some <i>SMARTCOIN</i> for his
    portion. We parted ways, each walking opposite directions on Valencia street. After our meeting,
    I couldn't help but notice and observe all of the outfits people were wearing that day in the
    Mission. Thousands of distinct <i>graphical shells</i> all populating the virtual desktop that
    is our city. I smiled, and started thinking about a new ordering system for my wardrobe.
    <span class="endmark">■</span>
</p>

</div>

<!--
<div id="sg2-footer">
    <span>Smart Bar</span>
    <span>&#9632;</span>
    <span>02</span>
</div>
-->

</div>