This commit is contained in:
Charles Magahern
@@ -0,0 +1,194 @@
|
||||
<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">“The purpose of a system is what it does.”</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 →</span>
|
||||
<span>01</span>
|
||||
</div>
|
||||
-->
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user