1 files changed, 125 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4e776f5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>danrh</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+        <style>
+            body {
+                font-family: sans-serif;
+                background-color: #fdfded;
+                margin: 2em auto;
+                max-width: 97vw;
+                color: #1a1a1a;
+            }
+            h1 {
+                font-family: Georgia, serif;
+                display: flex;
+                justify-content: center;
+            }
+            em {
+                display: flex;
+                justify-content: center;
+            }
+            .image-container {
+                margin: 2px;
+                width: min(480px,95vw);
+                height: min(480px,95vw);
+                border-radius: 10px;
+                overflow: hidden;
+            }
+            .image-container-inner {
+                border-radius: 10px;
+                width: 100%;
+                position: relative;
+                padding-top: 100%;
+                background: black;
+                overflow: hidden;
+            }
+            .image-container-inner img {
+                position: absolute;
+                top: 50%;
+                -ms-transform: translate(-50%, -50%);
+                transform: translate(-50%, -50%);
+                left:50%;
+            }
+            img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+            #root {
+                display: flex;
+                justify-content: center;
+            }
+            #imageroot {
+
+            }
+            @media only screen and (min-width: 500px) {
+                body {
+                    width: 500px;
+                }
+            }
+            @media only screen and (min-width: 1000px) {
+                body {
+                    width: 1000px;
+                }
+            }
+            @media only screen and (min-width: 1500px) {
+                body {
+                    width: 1500px;
+                }
+            }
+            @media only screen and (min-width: 2000px) {
+                body {
+                    width: 2000px;
+                }
+            }
+            .image-caption {
+                position: relative;
+                top: -10%;
+                display: flex;
+                justify-content: space-between;
+                color: #fdfded;
+                background: #000a;
+                padding: 0 1em;
+                font-size: 0.9em;
+            }
+            .image-caption span {
+                padding: 0.4em;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>Some Photos</h1>
+        <em>That I either took or am a subject of.</em>
+        <div id="root"></div>
+    </body>
+<script>
+const $ = innerHTML => Object.assign(document.createElement('div'), { innerHTML:innerHTML||'<div></div>' }).firstChild;
+
+Promise.all([
+    fetch("images.json").then(r => r.json()),
+    fetch("captions.json").then(r => r.json())
+])
+    .then(([images, captions]) => {
+        root.appendChild($(`<div id="imageroot"></div>`));
+        images.forEach(({path}) => {
+            const caption = captions[path] || '';
+            const date = new Date(path.replace(/.*\/(\d{4})(\d{2})(\d{2}).*/,"$1-$2-$3T23:59:59.000Z")).toDateString();
+            const imgBox = $(`<div class="image-container" style="float:left;"></div>`);
+            const imgBoxOuter = $(`<div class="image-container-inner">`)
+            imgBox.appendChild(imgBoxOuter);
+            imgBoxOuter.appendChild($(
+                `<img loading="lazy" src="${path}">`
+            ));
+            imgBox.appendChild($(
+                `<div class="image-caption">
+                <span style="visibility: ${caption ? "visible" : "hidden"};">${caption}</span>
+                <span>${date}</span>
+            </div>`
+            ));
+            imageroot.appendChild(imgBox);
+        });
+    });
+
+</script>
+</html>