update style and images

.gitignore

@@ -3,3 +3,6 @@
 
 # Other things
 .DS_Store
+
+# Low resolution image, generated by CI
+/static/img/low

.gitlab-ci.yml

@@ -2,7 +2,20 @@ image: ariejan/dockerized-hugo:latest
 
 test:
   script:
+    # Compile
     - hugo
+
+    # Compress CSS
+    - yui-compressor public/css/style.css -o public/css/style-min.css
+    - mv -f public/css/style-min.css public/css/style.css
+
+    # Mogrify thumbnails
+    - mkdir -p public/img/low
+    - cd public/img
+    - mogrify -format gif -path thumbs -thumbnail 100x100 *.gif
+    - mogrify -format png -path thumbs -thumbnail 100x100 *.png
+    - mogrify -format jpg -path thumbs -thumbnail 100x100 *.jpg
+
   except:
     - master
 
@@ -23,6 +36,13 @@ pages:
     - yui-compressor public/css/style.css -o public/css/style-min.css
     - mv -f public/css/style-min.css public/css/style.css
 
+    # Mogrify thumbnails
+    - mkdir -p public/img/low
+    - cd public/img
+    - mogrify -format gif -path thumbs -thumbnail 100x100 *.gif
+    - mogrify -format png -path thumbs -thumbnail 100x100 *.png
+    - mogrify -format jpg -path thumbs -thumbnail 100x100 *.jpg
+
     # Deploy
     - rsync -az4 --stats --delete-after public/* ariejan@mail.devroom.io:/home/ariejan/www/devroom.io/
   artifacts:

config.toml

@@ -27,10 +27,10 @@ pygmentsstyle = "monokai"
 dateform = "2 Jan, 2006"
 dateformfull = "Mon 2 Jan 2006 15:04:05 MST"
 description = "a blog by ariejan de vroom about software engineering and electronics."
-copyright = "Copyright © 1999 - 2017 Ariejan de Vroom"
+copyright = "Copyright © 1996 - 2017 Ariejan de Vroom"
 # copyrightUrl = "https://creativecommons.org/licenses/by-sa/4.0/"
 logofile = "img/logo.png"
-faviconfile = "img/logo.png"
+faviconfile = "favicon.ico"
 highlightjs = true
 progressively = true
 share = true

static/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

static/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

themes/cocoa-eh/layouts/partials/css/main.css

@@ -426,6 +426,24 @@ a:hover {
 }
 img {
   max-width: 100%;
+  cursor: pointer;
+}
+section.main .content .markdown figure img.zoomed {
+  position: fixed;
+  
+  top: 2vh;
+  bottom: 2vh;
+  left: 2vw;
+  right: 2vw;
+
+  z-index: 1000;
+
+  max-width: 90vw;
+  max-height: 90vh;
+
+  margin: auto;
+
+  border: 4px solid #000
 }
 section.main .content {
     width: 100%;

themes/cocoa-eh/layouts/partials/css/min600px.css

@@ -23,12 +23,12 @@ section.header .container {
 justify-content: flex-start;
 }
 section.header .container .logo {
-margin-left: 10px;
+margin-left: 0;
 margin-right: 10px;
 }
 section.header-home .container .logo {
 max-width: 180px;
-margin-left: 10px;
+margin-left: 0;
 margin-right: 10px;
 }
 section.header-home .name-home {

themes/cocoa-eh/layouts/partials/footer.html

@@ -13,6 +13,14 @@
             {{ .Site.Params.copyright }}
         {{ end }}
 
+        <br />
+
+        <span id="crypto-donations">
+            BTC: <a href="bitcoin:32vFGNzzJwn9qcAABwetFL2J58DvECaRwH">32vFGNzzJwn9qcAABwetFL2J58DvECaRwH</a>
+            <br />
+            ETH: <a href="ethereum:0x485Dc52e580aAeCB06ED81531FA16AadEfF10cE8">0x485Dc52e580aAeCB06ED81531FA16AadEfF10cE8</a>
+        </span>
+
         </div>
         <div class="icons">
 

themes/cocoa-eh/layouts/partials/footer_scripts.html

@@ -52,3 +52,46 @@
     {{ end }}
   };
 </script>
+
+<script type="text/javascript">
+  function ready(fn) {
+      if (document.readyState != 'loading') {
+          fn();
+      } else {
+          document.addEventListener('DOMContentLoaded', fn);
+      }
+  }
+  
+  function imageClick(e) {
+      e.preventDefault();
+      this.classList.toggle('zoomed');
+  }
+  
+  function handleEsc(e) {
+      if (e.keyCode == 27) {
+          var zoomedImages = document.querySelectorAll('img.zoomed');
+          Array.prototype.forEach.call(zoomedImages, function(el, i) {
+              el.classList.toggle('zoomed');
+          });
+      }
+  }
+  
+  ready(function() {
+      var images = document.querySelectorAll('section.post img');
+      Array.prototype.forEach.call(images, function(el, i) {
+          el.addEventListener('click', imageClick);
+      });
+  
+      document.addEventListener('keyup', handleEsc);
+  });
+  </script>
+
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-60089-16', 'auto');
+    ga('send', 'pageview');
+  </script>