Added proper wait for img load, added author info, refactoring

exhibit.service

@@ -0,0 +1,14 @@
+[Unit]
+Description=Portfolio website
+After=network.target
+
+[Service]
+Type=simple
+Restart=always
+User=www-data
+Group=www-data
+WorkingDirectory=/var/www/exhibit
+ExecStart=/var/www/exhibit/exhibit
+
+[Install]
+WantedBy=multi-user.target

inc/css/main.css

@@ -197,9 +197,9 @@ a:hover {
     cursor: pointer;
 }
 
-/******************* MAGNIFY *******************/
+/******************* ZOOM *******************/
 
-.magnify {
+#zoom {
     background-size: contain;
     background-clip: content-box;
     display: inline-block;
@@ -233,7 +233,7 @@ a:hover {
         max-height: 50%;
     }
 
-    .magnify {
+    #zoom {
         position: relative;
         top: 5vh;
         left: 2.5%;

inc/js/main.js

@@ -1,3 +1,10 @@
+/*
+ * main.js
+ * functions to power my portfolio
+ * Author: phga/teord
+ * Date: 2019-10-18
+ * Version: 1.0
+ */
 document.addEventListener("DOMContentLoaded", run);
 // global var to control the animation of the text
 var runTextAnimation = true;
@@ -30,16 +37,20 @@ function handleThumb(overlay, elem) {
 
 function showOverlay(overlay, imgName) {
     let info = getInfoForImg(imgName);
-    // \xD7 is the multiplication sign in hex
+    let magni = document.getElementById("zoom");
-    overlay.children[0].innerHTML =
+    let infoTable = document.getElementById("img-description");
-        `
+    let img = document.createElement("img");
-<div id="btn-close">\xD7</div>
+    // call my zoom function (zoom.js)
-<div class="magnify">
+    img.addEventListener("load", () => {zoom(0.4, imgName)});
-<img id=${imgName} src="/inc/images/${imgName}.jpg" alt="${imgName}" />
+    img.src = `/inc/images/${imgName}.jpg`;
-</div>
+    img.id = imgName;
+    img.alt = imgName;
 
-<table id="img-description">
+    magni.innerHTML = "";
-<tr>
+    magni.appendChild(img);
+
+    infoTable.innerHTML =
+        ` <tr>
 <th>Author:</th><td>${info.author}</td>
 </tr>
 <tr>
@@ -62,11 +73,8 @@ function showOverlay(overlay, imgName) {
 </tr>
 <tr>
 <th colspan="2"><a href="${info.blog}">Read more...</a></th>
-</tr>
+</tr> `;
-</table>`;
     overlay.classList.remove("hidden");
-    // call my zoom function (zoom.js)
-    zoom(0.4, imgName);
 }
 
 function hideElement(elem) {

inc/js/zoom.js

@@ -1,26 +1,23 @@
 /*
-* zoom.js
+ * zoom.js
-* function for the purpose of my portfolio to zoom into
+ * function for the purpose of my portfolio to zoom into
-* images inside their box without touching the rest of the layout.
+ * images inside their box without touching the rest of the layout.
-* Author: phga/teord
+ * Author: phga/teord
-* Date: 2019-10-20
+ * Date: 2019-10-20
-* Version: 1.0
+ * Version: 1.1
-*/
+ */
 function zoom(factor, imgName) {
     let img = document.getElementById(imgName);
     let magni = img.parentElement;
     magni.style.backgroundImage = `url("${img.src}")`;
 
-    // wait till size of img is calculated
+    let offset = {x: img.width * factor, y: img.height * factor};
-    setTimeout(() => {
-        var offset = {x: img.width * factor, y: img.height * factor};
     // Fix for firefox, somehow width larger than content (inline-block)
     magni.style.width = img.width;
     // setup the padding (bigger zoom canvas)
     magni.style.padding = offset.y + "px " + offset.x + "px";
     // adjust the margin to ged rid of the extra size gained from padding
     magni.style.margin = -offset.y + "px " + -offset.x + "px";
-    }, 10);
 
     // Added a mouse(enter|move|leave) to make img transparent and show bg-img when it should be visible
     img.addEventListener("mouseenter", (e) => {

tmpl/contact.html

@@ -1 +1,34 @@
-{{template "base"}}
+<section id="contact">
+</section>
+<section id="disclaimer">
+    Haftungsausschluss
+    Angaben gemäß § 5 TMG:
+    Philip Gaber
+    Lebzeltergasse 3
+    85049 Ingolstadt
+
+    Kontakt:
+    E-Mail: phga@posteo.de
+    Mobil: +49 15224277636
+
+    Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:
+    Philip Gaber
+    Lebzeltergasse 3
+    85049 Ingolstadt
+
+    Streitschlichtung
+    Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: https://ec.europa.eu/consumers/odr.
+    Unsere E-Mail-Adresse finden Sie oben im Impressum.
+
+    Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.
+
+    Haftung für Inhalte
+    Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
+
+    Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.
+
+    Urheberrecht
+    Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.
+
+    Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
+</section>

tmpl/gallery.html

@@ -1,6 +1,9 @@
 {{define "body"}}
 <section id="info-box" class="hidden">
     <div id="bg-box">
+        <div id="btn-close">&#xd7</div>
+        <div id="zoom"></div>
+        <table id="img-description"></table>
     </div>
 </section>
 <section id="welcome">