diff --git a/assets/img/streetgeek-dogtags.jpeg b/assets/img/streetgeek-dogtags.jpeg new file mode 100644 index 0000000..4f71b34 Binary files /dev/null and b/assets/img/streetgeek-dogtags.jpeg differ diff --git a/pages.yaml b/pages.yaml index 153effe..3b92773 100644 --- a/pages.yaml +++ b/pages.yaml @@ -15,6 +15,7 @@ - broken-screen.html - fashion.html - streetgeek-1.html +- streetgeek-2.html - windows-shirt.html - free-dirt.html - mr-nickel.html diff --git a/pages/streetgeek-1.html b/pages/streetgeek-1.html index 6a0ffe6..d24f08d 100644 --- a/pages/streetgeek-1.html +++ b/pages/streetgeek-1.html @@ -5,11 +5,67 @@ src: url("assets/font/aerosoldier.otf"); } -div#body { - columns: 2; - font: 8.4pt 'Times New Roman', serif; - padding: 0.5in; +#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 { @@ -26,38 +82,47 @@ div#body { text-indent: 0 !important; } -h1, h2 { - color: black; -} - -h1 { - font-family: Aerosoldier, Helvetica, sans-serif; - font-size: xx-large; - margin-bottom: 0; -} - -h2 { - font-size: small; +#sg1-pullquote { + break-inside: avoid; + -webkit-column-break-inside: avoid; + font-family: Georgia, 'Times New Roman', serif; font-style: italic; - font-weight: normal; - color: black; + 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; } -#body p { - color: black; - text-indent: 2em; - text-align: justify; - text-justify: inter-word; - hyphens: auto; - overflow-wrap: break-word; +#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; } -
+
-

Street Geek

-

By Bram Noidz

+
+

Street Geek

+

Notes from the front lines of hacker haute couture.

+

By Bram Noidz

+
+ +
+ +

My day in meatspace wasn't going well. I woke up in the late morning and acquired the day's @@ -87,10 +152,13 @@ h2 { about what I'm wearing. Today, I am meeting my friend ByteLord for lunch at the vegan restaurant Cha-Ya on Valencia. ByteLord 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 McMaster-Carr catalog website to shame. Therefore, - needless to say, I felt intimidated and eager to please. + Torvalds and that guy who made the McMaster-Carr catalog website to shame. I had never + met ByteLord A.F.K. before. Therefore, needless to say, I felt intimidated and eager to + please.

+
“The purpose of a system is what it does.”
+

I got to Cha-Ya a little bit early and ordered a green tea while waiting for ByteLord to arrive. I spilled a little bit of this on my shirt as well. Unfortunately @@ -104,22 +172,14 @@ h2 { hip-hopper guys. He was decked out from head to toe and looked on fleek.

-

- 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 *Java* t-shirt underneath the overshirt, which in the context of the rest of the - outfit, gave the programming language an undeserved level of coolness. -

+
-

- Besides the comfortable textiles, I was impressed with ByteLord'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 ByteLord - had arranged them in such a way to make the outfit look effortless, yet stylish. -

+
diff --git a/pages/streetgeek-2.html b/pages/streetgeek-2.html new file mode 100644 index 0000000..d7864ef --- /dev/null +++ b/pages/streetgeek-2.html @@ -0,0 +1,205 @@ + + +
+ + + + + + + +
+ +

+ 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 Java t-shirt underneath the overshirt which, in the context of the rest of + the outfit, gave the programming language an undeserved level of coolness. +

+ +

+ Besides the comfortable textiles, I was impressed with ByteLord'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 ByteLord + had arranged them in such a way to make the outfit look effortless, yet stylish. +

+ +

+ We ordered zaru soba with vegetable tempura 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 ByteLord + was quite into fashion on a deeply philosophical level. He explained to me that what you wear in + meatspace is like the graphical shell 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 git + command line interface. +

+ +

I paid for the zaru soba and ByteLord sent me some SMARTCOIN 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 graphical shells all populating the virtual desktop that + is our city. I smiled, and started thinking about a new ordering system for my wardrobe. + ■ +

+ +
+ + + +