Add kotlin+proguard logo.

Make figures look a bit nicer.

site/content/post/2019-05-08-debugging-beyond-the-debugger.md

 area: troubleshooting
 ---
 
-<figure class="image right">
+<figure class="right">
   <img src="/res/images/unsplash/tools.jpg" alt="Collection of tools">
   <figcaption>Real-life debugging tools</figcaption>
 </figure>

site/content/post/2019-10-21-obfuscating-kotlin-proguard.md

 area: Android
 ---
 
+<figure class="left">
+  <img src="/res/images/obfuscation/kotlin-proguard.png" alt="Kotlin and Proguard logos">
+  <figcaption>Kotlin + ProGuard = fun</figcaption>
+</figure>
+
 Obfuscating code is the process of modifying source code or build output in
 order to make it harder for humans to understand. It's often employed as a
 tactic to deter reverse engineering of commercial applications or libraries

site/static/res/css/style.css

   max-width: 100%;
 }
 
-  .image {
-    border-radius: 0.35em;
-    border: 0;
-    display: inline-block;
-    position: relative;
-  }
+.image {
+  border-radius: 0.35em;
+  border: 0;
+  display: inline-block;
+  position: relative;
+}
+
+figure {
+  border: 2px solid rgba(200, 200, 200, 0.7);
+  border-radius: 0.35em;
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+}
+
+figure img {
+  display: block;
+}
+
+figure figcaption {
+  display: block;
+  background-color: rgba(200, 200, 200, 0.7); 
+}
 
     .image:before {
       -moz-transition: opacity 0.2s ease-in-out;
       display: block;
     }
 
-    .image.left {
+    .image.left, figure.left {
       float: left;
       margin: 0 1.5em 1em 0;
       top: 0.25em;
     }
 
-    .image.right {
+    .image.right, figure.right {
       float: right;
       margin: 0 0 1em 1.5em;
       top: 0.25em;
     }
 
-    .image.left, .image.right {
+    .image.left, .image.right, figure.left, figure.right {
       max-width: 40%;
     }
 
-      .image.left img, .image.right img {
+      .image.left img, .image.right img, figure.left img, figure.right img {
         width: 100%;
       }