forked from buzzert/smartbar
More content in street geek article
This commit is contained in:
Charles Magahern
@@ -0,0 +1,205 @@
|
||||
<style>
|
||||
|
||||
@font-face {
|
||||
font-family: "Aerosoldier";
|
||||
src: url("assets/font/aerosoldier.otf");
|
||||
}
|
||||
|
||||
#streetgeek2-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.36in 0.4in;
|
||||
background-color: white;
|
||||
color: black;
|
||||
font: 8.8pt/1.4 '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.24in;
|
||||
margin: 4pt 0 12pt 0;
|
||||
}
|
||||
|
||||
.sg2-frame {
|
||||
width: 2.18in;
|
||||
background: white;
|
||||
padding: 6px 6px 5px 6px;
|
||||
border: 1px solid #ddd;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.28);
|
||||
}
|
||||
|
||||
.sg2-frame.left { transform: rotate(-2.4deg); }
|
||||
.sg2-frame.right { transform: rotate(2.2deg); }
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
#sg2-text p {
|
||||
text-indent: 2em;
|
||||
text-align: justify;
|
||||
text-justify: inter-word;
|
||||
hyphens: auto;
|
||||
overflow-wrap: break-word;
|
||||
margin: 0 0 7pt 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 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>
|
||||
|
||||
<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>■</span>
|
||||
<span>02</span>
|
||||
</div>
|
||||
-->
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user