From f8b0d9ba85757cf0c61039aa5ce6b77ec3e54b95 Mon Sep 17 00:00:00 2001
From: Ben Visness <ben@bvisness.me>
Date: Wed, 31 May 2023 23:10:42 -0500
Subject: [PATCH] Styles upon styles

---
 .../img/timemachine/win95-camera.png          | Bin 0 -> 641 bytes
 .../img/timemachine/win95-computer.png        | Bin 0 -> 529 bytes
 src/templates/img/timemachine/win95-pad.png   | Bin 0 -> 455 bytes
 src/templates/img/timemachine/win95-play.png  | Bin 0 -> 825 bytes
 .../img/timemachine/win95-upload.png          | Bin 0 -> 581 bytes
 src/templates/src/include/footer.html         |   2 +-
 src/templates/src/time-machine.html           | 162 +++++++++---------
 7 files changed, 86 insertions(+), 78 deletions(-)
 create mode 100644 src/templates/img/timemachine/win95-camera.png
 create mode 100644 src/templates/img/timemachine/win95-computer.png
 create mode 100644 src/templates/img/timemachine/win95-pad.png
 create mode 100644 src/templates/img/timemachine/win95-play.png
 create mode 100644 src/templates/img/timemachine/win95-upload.png

diff --git a/src/templates/img/timemachine/win95-camera.png b/src/templates/img/timemachine/win95-camera.png
new file mode 100644
index 0000000000000000000000000000000000000000..4aa88adbfce09163ef66cb6adf8ceda310fd193a
GIT binary patch
literal 641
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfvmUKs7M+SzC{oH>NSwWJ?9znhg
z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fgp%~y3;tEpG&;TSsG(*FI
z0|);9{|{pR{}19bFjPD=0vgD`SQ6wH%;50sMjD8d<n8XlmYBAq7RX^Q@$_|Nf5alp
zs3cUnR~YCj#sE(j#}JM4p%ZQM4;cuw@dmM*)jVj_wNrPv`6FOyA7kly;d7IY^KE=_
z!>eOwQ1qrrT?_xR|D9gS^YpRU>Hc}v^Zytfi(ppWt>uste^1(CcATc~)K5Q`Uh1(d
zJua?rc;<q4J6|3XT;g=z|A<J4PVMC<^CiM3oPOM@{&w-h&Xb|D^d`vj2%hNq>>6>?
zV(+&l4O6BirfPkeX0tK5>8sl&wMlyMK8d9|Y)`*URh<6wm9K@6*4z5J3I*f3aOP8w
z_I-9x>bHJ>$RhkqyEZ?IhtF}-1z8b!6W<D?>XfCNIJDr)`jAPh-#m<zP&&|ifAJxf
zZ=DafHhx_eUp(`!`j?c9curYEGuAVqylYrL7Bk4Io~&Z7+8_9L@g`-*jO0>P1+JAo
z0VfiA47e;cOSx}la4$}{^2F}7q|jAOM~4?bB^yp!-pzO3eYhog>$h3)s^_Bq7|yA$
zGLKraF5^BYFt}AqTq8<S5=&C8l8aJ-6oZk0p@pu2iLRk#h=HM%v56I!Yh_?CJ8#Ng
e6b-rgDVb@NxHY^o)&Zs^1_n=8KbLh*2~7YoQ1S=>

literal 0
HcmV?d00001

diff --git a/src/templates/img/timemachine/win95-computer.png b/src/templates/img/timemachine/win95-computer.png
new file mode 100644
index 0000000000000000000000000000000000000000..43184e5b6626d6da0b82068ecd0f3b4bddf91d59
GIT binary patch
literal 529
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDB3?!H8JlO)ISkfJR9T^xl_H+M9WCijSl0AZa
z85pY67#JE_7#My5g&JNkFq8r{zDi(Vu$sZZAYL$MSD+10LN353#1*8Vq2a)R13<?A
z|NntJAPr;z2_SP@<_-y<1Y=2%UoeBivm0q3PLj8~3rl~-%|IZBy~NYkmHiQmFr%vB
zjM-m`fI^QwT^vI!PQRUeQ1Fm~fNNrog92~Ml7^HH)(JPobPnF=O3yFT-p#Q|rSIH}
zi|2Lq>l@Fn6Hr+><C~J_?Vz=u_f>!Ag|hKZ`6PK_X813b61~?3#v4-RT3Gz&)2aVp
zYhicPA>M?O>H8u{H`^Sh#kUey7dJb)D#%RFl3!q?u~un9z)AH3-;X8lWu2ZqizkFJ
zk29gT-z77rVy;~a)7>g=-UMkT-+Tq#-migdymhBeJIWltS<uWVzg~iEmZaK+ivnJu
z?p;$q@U9kAZ$HW%#<x^caC4uHmdd8b`7V`9;xt_UCpML9x$O+jd66Up^sZ`&YeY#(
zVo9o1a#1RfVlXl=w9qv$(KWOTF)*|;Hn%dd1ahqm4CbBF(nHaZo1c=IR*74~`^l3g
Q0W~mqy85}Sb4q9e0B}pM*8l(j

literal 0
HcmV?d00001

diff --git a/src/templates/img/timemachine/win95-pad.png b/src/templates/img/timemachine/win95-pad.png
new file mode 100644
index 0000000000000000000000000000000000000000..21c4953335f406a01ea665e6a875bf0479f82418
GIT binary patch
literal 455
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfvmUKs7M+SzC{oH>NSwWJ?9znhg
z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fgp%~y3;tHgJprN7R|Ns97
z4jgD;VE7N>gQ$iEhX4N=G}2$%0Yw-~g8YIR9G=}s196hP-CdXkd3-(rIqW5#zOL+#
zSOnNDM66EFF9ixs^K@|x(Kw%+kRT$^qR7Z55D;e6q&$IR^1_V<JepQXq6TgZ?mUdw
z14<gVFtDkKvlQs?iaLY_26kvY$h>-@VbRgcSxT!GP7dcv5O%oSxaN>hY{DlmM>Y}N
z0LB#Az6jO{r3+R$h%>x&xcG=uxM8J%k)WHffQj4HM;ecsRvi+EUa{Ef%u&|eTx_B(
zT!IB(jJcE;CU7&%+!a52#m@kDpbJ$?Tq8<S5=&C8l8aJ-6oZk0p@pu2iLRkph=IA4
sshO3L0g!8DVDQAT{sD@H-29Zxv`X9>rpg?T0cv3IboFyt=akR{05tf8Hvj+t

literal 0
HcmV?d00001

diff --git a/src/templates/img/timemachine/win95-play.png b/src/templates/img/timemachine/win95-play.png
new file mode 100644
index 0000000000000000000000000000000000000000..524219f38307814883bbfa8828b969063a2526c1
GIT binary patch
literal 825
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA3?vioaBc-sEa{HEjtmSN`?>!lvI6-E$sR$z
z3=CCj3=9n|3=F@3LJcn%7)pT}UnMXwSj}Ky5HFasE6@fgF(JSw#Fd4G<^TVg|7SA%
zKf_@BKkdxSw6rs6Gt(G+eSOo?fD9lHXavK81xrFhL;wH(f9A}8ps=xV+RT~%&%F76
z;Ld?G<C)7&eE{-}je+K*odKF=%+S`>_W#WPGsX;?Hf=gHlYs#!3M6O#X8;+=(9po}
zKaHWhyd20oa|VbQW`Y<%6Vse!9=!*;jj<%iFPOpM*$trW42((M?k@ZiyBKZ)IqW5#
zzOL+#*rXUN<o9Ynt^rEV^mK6y@i>0=T77tvfe2edYlif(50er?w70b6WZnONdn<3E
zw7uHA%Pa5gx2cjZKfZJJxwQWlpFKbFJn%oM-zY80+w?$a$JC1qi9&jJ9{4R`o9E$T
z=$QE6=0-=E<LL@<x{96#ch)Bv7qfdPpV*}0nP4lc;rLL|YdMo*(MFGJU1Bz77ZbL!
zO<j|xQ?=<p@nk!T^-eQmj<Lo~V@S}O<eb%X-Ad|+)Qe*aE*!WMDnExc_2Dws=$U~R
zCbaC?`XKfQ=ckxFd%@2}j474D{k$7)_vTrhKmRpVa*;20oB7&V6R%2K4r0-rvmnpy
zYOvF(O-|kX;u*6KPBC&jwTkOY@Fs^_nQfhK?0+8o-hOZugTd^Z#$v9l&;LmXJkB*$
zejQvqt%_kyT13c=%eR=bGiC+G$1R!r`2zdQt3J<<@HR9h{=CC^Q{I31y_xTr3Y|YI
zYr0lS$XQ<h{*5ExVW{ddg(uDC^BMYMA1Jr*wNG3fB==nJ2Uk<W?{Eh9Ju_|ohcimD
z?#aBEpz*1Bp?tu{e`OYr6HM%x%hvt*D&KedCmYwnw24>!E`d^;YKdz^NlIc#s#S7P
zDv)9@GBC8zH89gPG7B*<urf8XGB(sTFtIW)xN=bcIf{nd{FKbJO57Tj&Y2z!)WG2B
L>gTe~DWM4f4dGFf

literal 0
HcmV?d00001

diff --git a/src/templates/img/timemachine/win95-upload.png b/src/templates/img/timemachine/win95-upload.png
new file mode 100644
index 0000000000000000000000000000000000000000..f79d3af4dfd9f2a6c113407556e080546bdeb1e5
GIT binary patch
literal 581
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfvmUKs7M+SzC{oH>NSwWJ?9znhg
z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fgp%UN|;tEpG&~V_ufrbVk
z3&dgg4+0DfKm_Cic?@BvE?oq&7)yfuf*Bm1-ADs*lDyqr*u@e%UIRJoC7!;n?2p)_
z7<A+(x0+}Ir3F1*978nDmtL^-Z!wTK@Nv_<lums^A2UO#i1&64m%IzU6m`!(Ae)@k
zceX@BdhuJA-7&v%?p<osSJ!7cdSv-+{r?x1E3`26oS$IsxZ|GP@1m1=-)FPySJe7%
z{*vm)^le7xo0YQ^&e-n|xOA@I`_83{wlEkRaQ)|IzGX|x9iF0nw=ZsCecrLIdcpUa
z`I^xp8zmdK_lbEW@hoY7;9U@<#hT#9>~YeV^(xn*J?tfG*RXUe?2_uzV~lJpyjb4r
zwld5rbJ2!*^EqbBF{t=|fZ^CN?g@5&`9E7D<QL2roF&oM{?6xsNt_7h<=*658$U)p
zDhb|V(RA(Prii1uKUtf0#7@g_diL~WQomo%e)s=#?T^-fW|m!8H{;K`0#M+ombgZg
zq$HN4S|t~y0x1R~149d412bJCvk(IVD-#ndV?$j76DtD)!CeYcC>nC}Q!>*kacf9;
SK4TeB1B0ilpUXO@geCwlpV&J9

literal 0
HcmV?d00001

diff --git a/src/templates/src/include/footer.html b/src/templates/src/include/footer.html
index 72b87b4a..12f6936c 100644
--- a/src/templates/src/include/footer.html
+++ b/src/templates/src/include/footer.html
@@ -1,6 +1,6 @@
 <footer class="pa3 pa4-l tc">
     <h2>
-        Community by <a href="{{ .Footer.HomepageUrl }}">handmade.network</a>
+        <a href="{{ .Footer.HomepageUrl }}">Handmade Network</a>
     </h2>
     <ul class="list">
         {{ $footerClasses := "ma0 pa0 dib-ns" }}
diff --git a/src/templates/src/time-machine.html b/src/templates/src/time-machine.html
index fbe81430..226083c8 100644
--- a/src/templates/src/time-machine.html
+++ b/src/templates/src/time-machine.html
@@ -39,7 +39,7 @@
   }
 
   header .submenu {
-    background-color: #000080;
+    background-color: #d661ad;
   }
 
   #logo {
@@ -64,6 +64,7 @@
     border-image: url('{{ dataimg "timemachine/win95-border.gif" }}') 4;
     padding: 1px;
     margin-bottom: 2rem;
+    color: black;
   }
 
   .frame ol,
@@ -80,7 +81,7 @@
   }
 
   .frame .title {
-    padding: 0 0.125rem; /* 0 2px */
+    padding: 0 0.1875rem; /* 0 3px */
     height: 1.125rem; /* 18px */
     line-height: 1.125rem; /* 18px */
     font-size: 0.8125rem; /* 13px */
@@ -99,29 +100,11 @@
     cursor: pointer;
   }
 
-  .frame .body {
-    padding: 0.5rem; /* 8px */
-    color: black;
-  }
-
   .frame * {
     font-family: "MS Sans Serif", "Microsoft Sans Serif", sans-serif;
   }
 
-  .frame .image_copy {
-    display: flex;
-  }
-
-  .frame .image {
-    width: 40%;
-    flex: 1 0 auto;
-  }
-
-  .frame .copy {
-    padding-left: 10px;
-  }
-
-  .frame .body img {
+  .inset {
     border-width: 1px;
     border-color: #828282 #ffffff #ffffff #828282;
     border-style: solid;
@@ -148,59 +131,92 @@
     </div>
     <div class="frame">
       {{ template "frame title" "Overview" }}
-      <div class="body post-content">
-        <p>
-          This summer, we're digging out old devices and seeing what they were
-          actually like to use.
-        </p>
-        <p>
-          Our phones today are far more powerful than our desktop computers from decades ago. But those old computers worked just fine! The Time Machine project is a chance to revisit those old devices and see what they were actually like to use.
-        </p>
-        <p>
-          As our hardware has improved, how has the user experience changed? Which parts have stayed the same? Which parts have gotten worse? There's only one way to find out.
-        </p>
+      <div class="post-content pa3 flex g3">
+        <div class="flex-shrink-0">
+          <img class="pixelated" src="{{ dataimg "timemachine/win95-computer.png" }}">
+        </div>
+        <div>
+          <p>
+            This summer, we're digging out old devices and seeing what they were actually like to use.
+          </p>
+          <p>
+            Our phones today are far more powerful than our desktop computers from decades ago. And yet, those old computers worked just fine! The Time Machine project is an opportunity to boot up those old devices and see how they feel to use.
+          </p>
+          <p>
+            As our hardware has improved, how has the user experience changed? Which parts have stayed the same? Which parts have gotten worse? There's only one way to find out.
+          </p>
+        </div>
       </div>
     </div>
 
     <div class="frame">
-      <div class="title">How To Participate</div>
-      <div class="body post-content">
-        <ol>
-          <li>
-            <p>
-              <strong>Take video of yourself using an older device.</strong> Any personal device from any time period is great. We're particularly interested in the history of day-to-day devices like personal computers, and mobile phones.
-            </p>
-          </li>
-          <li>
-            <p>
-              <strong>Upload the video somewhere.</strong> Upload to Google Drive, Dropbox, or even YouTube - anywhere we can download it from.
-            </p>
-          </li>
-          <li>
-            <p>
-              <strong>Send us the video link + extra info.</strong> Tell us about this device, when you got it, what specs it has, and anything else you think is interesting. We'll get the video posted here on the website for everyone to see.
-            </p>
-          </li>
-        </ol>
-        <p>
-          At the end of the summer, we'll compile all the submissions into a final report.
-        </p>
-      </div>
-    </div>
-
-    <div class="frame">
-      <div class="title">Example Submission</div>
-      <div class="body post-content mt1">
-        <div class="image_copy">
-          <div class="image">
-            <img
-              class="pixelated"
-              src="{{ static "timemachine/ipodtouch-dither.gif" }}"
-              alt=""
-            />
+      {{ template "frame title" "How To Participate" }}
+      <div class="post-content pa3">
+        <div class="flex flex-column g3">
+          <div class="flex g3">
+            <div class="flex-shrink-0">
+              <img class="pixelated" src="{{ dataimg "timemachine/win95-camera.png" }}">
+            </div>
+            <div>
+              <p>
+                <strong>Take video of yourself using an older device.</strong> Any personal device from any time period is great. We're particularly interested in the history of day-to-day devices like personal computers and mobile phones.
+              </p>
+            </div>
           </div>
-          <div class="copy">
-            <p><strong>Description</strong></p>
+          <div class="flex g3">
+            <div class="flex-shrink-0">
+              <img class="pixelated" src="{{ dataimg "timemachine/win95-upload.png" }}">
+            </div>
+            <div>
+              <p>
+                <strong>Upload the video somewhere.</strong> Upload to Google Drive, Dropbox, or even YouTube - anywhere we can download it from.
+              </p>
+            </div>
+          </div>
+          <div class="flex g3">
+            <div class="flex-shrink-0">
+              <img class="pixelated" src="{{ dataimg "timemachine/win95-pad.png" }}">
+            </div>
+            <div>
+              <p>
+                <strong>Send us the video link + extra info.</strong> Tell us about this device, when you got it, what specs it has, and anything else you think is interesting. We'll get the video posted here on the website for everyone to see.
+              </p>
+              <p>
+                At the end of the summer, we'll compile all the submissions into a final report.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="frame">
+      {{ template "frame title" "2009 iPod Touch" }}
+      <div>
+        <div class="pa3 flex flex-column g3">
+          <div class="flex flex-column flex-row-ns g3">
+            <div class="flex-shrink-0 relative">
+              <img
+                class="pixelated inset"
+                src="{{ static "timemachine/ipodtouch-dither.gif" }}"
+                alt="Video Thumbnail"
+              />
+              <a href="https://youtu.be/2eBFk1yV6mE" target="_blank">
+                <div class="absolute absolute--fill bg-black-30 flex justify-center items-center">
+                  <img class="pixelated" alt="Play Video" src="{{ dataimg "timemachine/win95-play.png" }}">
+                </div>
+              </a>
+            </div>
+            <div class="flex flex-column g1">
+              <div><strong>Device:</strong> iPod Touch 3rd gen, model MC008LL</div>
+              <div><strong>Submitted by:</strong> Ben Visness</div>
+              <div><strong>Release year:</strong> 2009</div>
+              <div><strong>Processor:</strong> 600MHz Samsung S5L8922, single-core</div>
+              <div><strong>Memory:</strong> 256MB LPDDR2 @ 200 MHz</div>
+              <div><strong>Operating system:</strong> iOS 5</div>
+            </div>
+          </div>
+          <div class="post-content">
             <p>
               This is the iPod Touch I got when I was 13. It was my first major
               tech purchase and an early device in the iOS lineup. When I
@@ -221,14 +237,6 @@
               Overall, I would say this device feels only a hair slower than my
               current iPhone.
             </p>
-            <p><strong>Device Info</strong></p>
-            <p>iPod Touch 3rd gen, model MC008LL</p>
-            <ul>
-              <li><p>Release year: 2009</p></li>
-              <li><p>Processor: 600MHz Samsung S5L8922, single-core</p></li>
-              <li><p>Memory: 256MB LPDDR2 @ 200 MHz</p></li>
-              <li><p>Operating system: iOS 5</p></li>
-            </ul>
           </div>
         </div>
       </div>