Add phone outline, re-shoot and process images

site/_includes/implementation.html

@@ -134,7 +134,10 @@ <h3 class="mt2 mb4">
       <div class="fl-l dn db-l">
         <div class="flex h-100 items-center">
           <a class="link" href={{ app.app-link }}>
-            <img class="grow w5" src={{ app.image | relative_url }} alt="{{ app.title }} HN PWA running on a mobile phone">
+             <div class="phone-outline grow">
+              <div class="phone-outline-power"></div>
+              <img class="w5" src={{ app.image | relative_url }} alt="{{ app.title }} HN PWA running on a mobile phone">
+            </div>
           </a>
         </div>
       </div>

site/_sass/extra.scss

@@ -72,4 +72,49 @@ $primary-orange: #F4751E;
       animation: octocat-wave 560ms ease-in-out;
     }
   }
+}
+
+.phone-outline {
+  padding: 3.5rem .5rem 3rem;
+  background-color: #111;
+  border-radius: 2rem;
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    height: .25rem;
+    width: 33%;
+    top: 1.75rem;
+    background-color: #222;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: .125rem;
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    height: .5rem;
+    width: .5rem;
+    top: 1.65rem;
+    background-color: #222;
+    left: 20%;
+    transform: translateX(-50%);
+    border-radius: .25rem;
+  }
+
+  img {
+    border-radius: 2px;
+  }
+}
+
+.phone-outline-power {
+  position: absolute;
+  right: -.1rem;
+  top: 20%;
+  width: .3rem;
+  height: 3rem;
+  background-color: #000;
+  border-radius: .15rem;
 }