streetgeek: add dogtags image

pages/streetgeek-2.html

@@ -8,10 +8,10 @@
 #streetgeek2-page {
     display: flex;
     flex-direction: column;
-    padding: 0.36in 0.4in;
+    padding: 0.3in 0.4in;
     background-color: white;
     color: black;
-    font: 8.8pt/1.4 'Times New Roman', serif;
+    font: 7.9pt/1.28 'Times New Roman', serif;
 }
 
 #sg2-topbar {
@@ -52,21 +52,33 @@
     display: flex;
     justify-content: center;
     align-items: flex-start;
-    gap: 0.24in;
-    margin: 4pt 0 12pt 0;
+    gap: 0.2in;
+    margin: 3pt 0 8pt 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);
+    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 8px;
+    transform: rotate(-1.6deg);
+}
+
 .sg2-frame img {
     display: block;
     width: 100%;
@@ -85,6 +97,8 @@
 
 #sg2-text {
     flex: 1;
+    columns: 2;
+    column-gap: 0.26in;
 }
 
 #sg2-text p {
@@ -93,7 +107,7 @@
     text-justify: inter-word;
     hyphens: auto;
     overflow-wrap: break-word;
-    margin: 0 0 7pt 0;
+    margin: 0 0 4pt 0;
 }
 
 #sg2-text p:first-child {
@@ -163,6 +177,11 @@
     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 class="sg2-caption">&quot;Necklace&quot;</div>
+</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