make images clickable and show in lightbox (gematik#28)

* Added lightbox support for images

* added lightbox functionality via css

Author: noheadx

_layouts/default.html

@@ -44,6 +44,6 @@ <h1><a href="{{ "/" | absolute_url }}">{{ site.title | default: site.github.repo
       </footer>
     </div>
     <script id="usercentrics-cmp" src="https://app.usercentrics.eu/browser-ui/latest/loader.js" data-settings-id="_NKfSQXhq" async></script>
-    <script src="{{ "/assets/js/scale.fix.js" | relative_url }}" type="text/plain" cookie-consent="strictly-necessary"></script>
+    <script src="{{ site.baseurl }}/assets/js/scale.fix.js" type="text/plain" cookie-consent="strictly-necessary"></script>
   </body>
 </html>

_layouts/post.html

@@ -19,4 +19,4 @@ <h1>{{ page.title }}</h1>
 </p> -->
 
 {{content}}
-
+<script src="path/to/lightbox.js"></script>

_posts/2022-11-04-validating-fhir-resources-is-easy.markdown

@@ -22,9 +22,16 @@ java -jar validator_cli.jar c:\temp\patient.xml -version 3.0 -ig hl7.fhir.us.cor
 Another option is to use the [Simplifier validation service](https://simplifier.net/validate) (free registration required):
 
 <p align="center">
+<a href="#img1">
 <img src="{{ site.baseurl }}/assets/img/221104-validating-fhir/simplifier-1.png" alt="Simplifier validation service"/>
+</a>
 </p>
 
+<!-- lightbox container hidden with CSS -->
+<a href="#" class="lightbox" id="img1">
+  <span style="background-image: url('{{ site.baseurl }}/assets/img/221104-validating-fhir/simplifier-1.png')"></span>
+</a>
+
 The output contains found issues, categorized into errors, warnings, and notices:
 
 <p align="center">

assets/css/style.scss

@@ -2,3 +2,44 @@
 ---
 
 @import "jekyll-theme-minimal";
+
+img {
+  max-height: 50vh;
+}
+
+/** LIGHTBOX MARKUP **/
+.lightbox {
+  /* Default to hidden */
+  display: none;
+
+  /* Overlay entire screen */
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  
+  /* A bit of padding around image */
+  padding: 1em;
+
+  /* Translucent background */
+  background: rgba(0, 0, 0, 0.8);
+}
+
+/* Unhide the lightbox when it's the target */
+.lightbox:target {
+  display: block;
+}
+
+.lightbox span {
+  /* Full width and height */
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  /* Size and position background image */
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}