242 lines
6.5 KiB
HTML
242 lines
6.5 KiB
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");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "TS Block Bold";
|
|
src: url("assets/font/ts-block-bold.ttf");
|
|
}
|
|
|
|
span.computer {
|
|
font-family: "COMPUTER Robot", monospace;
|
|
}
|
|
|
|
span.cyberwheel {
|
|
font-family: "TS Block Bold";
|
|
}
|
|
|
|
#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">"Java"</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">"Evangelion"</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 color, 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 <span class="computer">ByteLord</span>'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 <span class="computer">ByteLord</span>
|
|
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 <span class="computer">ByteLord</span>
|
|
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 elegant 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 <span class="computer">ByteLord</span> sent me some <span class="cyberwheel">SMARTCOIN</span> 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>■</span>
|
|
<span>02</span>
|
|
</div>
|
|
-->
|
|
|
|
</div>
|