Moving photos into it's own page

2026-07-10 21:03:23 +02:00
parent 482d744437
commit 492e35ac74
141 changed files with 183 additions and 133 deletions
@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Marcus Sailer - Photography</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+
+<header class="site-header">
+  <div class="container">
+    <h1>Photography</h1>
+
+    <p class="tag">
+      A selection of my photography
+    </p>
+
+    <p class="header-links">
+      <a href="index.html">Home</a>
+      <a href="blog.html">Blog</a>
+      <a id="git-link" href="https://git.organic-server.org/organic-CPU">
+        Gitea
+      </a>
+    </p>
+
+  </div>
+</header>
+
+
+<main class="container">
+
+<section id="photography">
+
+  <h2>Gallery</h2>
+
+  <p>
+    A selection from my photography. Click a thumbnail for a fullscreen
+    preview. The gallery updates when images are added or a manifest is
+    regenerated.
+  </p>
+
+
+  <div id="gallery-thumbs" class="gallery">
+    Loading images…
+  </div>
+
+
+  <div id="gallery-modal" class="modal hidden" aria-hidden="true">
+
+    <button class="modal-close" id="modal-close">
+      ×
+    </button>
+
+    <button class="modal-prev" id="modal-prev">
+      ‹
+    </button>
+
+    <img id="modal-image" src="" alt="">
+
+
+    <button class="modal-next" id="modal-next">
+      ›
+    </button>
+
+  </div>
+
+</section>
+
+</main>
+
+
+<footer class="site-footer">
+  <div class="container">
+    © Marcus Sailer - Photography
+  </div>
+</footer>
+
+
+<script src="js/gallery.js"></script>
+
+</body>
+</html>