Add film photos

2025-08-21 17:07:58 +08:00
parent f1d2e36852
commit 9f30a23177
38 changed files with 200 additions and 0 deletions
--- a/layouts/film-archive.shtml
+++ b/layouts/film-archive.shtml
@@ -0,0 +1,25 @@
+<extend template="base.shtml">
+<head id="head">
+  <style>
+    .date {
+      font-size: 0.9em;
+    }
+    
+    .title h3{
+      margin-top: 0;
+    }
+  </style>
+</head>
+<body id="body">
+  <h1 :text="$page.title"></h1>
+  <div :html="$page.content()"></div>
+  <div>
+    <h2>Rolls</h2>
+    <div :loop="$page.subpages()">
+      <span class="date" :text="$loop.it.date.format('Year 2006')"></span>
+      <a class="title" href="$loop.it.link()">
+        <h3 :text="$loop.it.title"></h3>
+      </a>
+    </div>
+  </div>
+</body>
--- a/layouts/film.shtml
+++ b/layouts/film.shtml
@@ -0,0 +1,119 @@
+<extend template="base.shtml">
+<head id="head">
+  <style>
+    #prev-next {
+     display: flex;
+     flex-direction: row;
+     justify-content: space-between;
+     margin-top: 40px;
+    }
+
+    figure {
+      align-self: center;
+      text-align: center;
+      font-style: italic;
+    }
+
+    .post {
+      display:flex;
+      flex-direction: column;
+    }
+
+    .image-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      grid-auto-rows: 150px;
+      gap: 10px;
+      margin-bottom: 40px;
+      padding: 0 10px;
+    }
+
+    @media (min-width: 480px) {
+      .image-grid {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        grid-auto-rows: 180px;
+        gap: 12px;
+      }
+    }
+
+    @media (min-width: 768px) {
+      .image-grid {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        grid-auto-rows: 200px;
+        gap: 15px;
+        padding: 0;
+      }
+    }
+
+    @media (min-width: 1200px) {
+      .image-grid {
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      }
+    }
+
+    .image-grid img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 8px;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      transition: transform 0.3s ease;
+    }
+
+    .image-grid img:hover {
+      transform: scale(1.02);
+    }
+
+    .image-grid a.portrait {
+      grid-row: span 2;
+    }
+
+    .film-container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 0 20px;
+    }
+
+    .film-container h1 {
+      text-align: center;
+      margin-bottom: 30px;
+    }
+  </style>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const images = document.querySelectorAll('.image-grid img');
+      images.forEach(img => {
+        img.onload = function() {
+          if (this.naturalHeight > this.naturalWidth) {
+            this.parentElement.classList.add('portrait');
+          }
+        };
+      });
+    });
+  </script>
+</head>
+<body id="body">
+  <div class="film-container">
+    <h1 :text="$page.title"></h1>
+    <div class="post" :html="$page.content()"></div>
+    <div class="image-grid" :loop="$page.asset('images.json').ziggy().get('images')">
+      <a href="$page.asset($loop.it).link()" target="_blank">
+        <img src="$page.asset($loop.it).link()">
+      </a>
+    </div>
+    <div id="prev-next">
+    <div :if="$page.prevPage?()">
+      <a href="$if.link()">
+        ←
+        <span :text="$if.title"></span>
+      </a>
+    </div>
+    <div :if="$page.nextPage?()">
+      <a href="$if.link()">
+        <span :text="$if.title"></span>
+        →
+      </a>
+    </div>
+  </div>
+</div>
+</body>
--- a/layouts/templates/base.shtml
+++ b/layouts/templates/base.shtml
@@ -25,6 +25,8 @@
      </ctx>
       &nbsp; • &nbsp;
      <a href="$site.asset('resume.pdf').link()">Resume</a>
+       &nbsp; • &nbsp;
+      <a href="$site.page('film').link()">Film</a>
    </nav>
    <super>
    <footer>