Initial commit with LFS

.gitattributes

@@ -0,0 +1 @@
+*.mp4 filter=lfs diff=lfs merge=lfs -text

.vscode/settings.json

@@ -0,0 +1 @@
+{}

src/assets/css/style.css

@@ -0,0 +1,117 @@
+:root {
+  --bg: #fff;
+  --fg: #222;
+  --accent: #007acc;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #111;
+    --fg: #eee;
+    --accent: #46c;
+  }
+}
+/* Explicit “.dark” toggle override */
+html.dark {
+  --bg: #111;
+  --fg: #eee;
+  --accent: #46c;
+}
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background-color: var(--bg);
+  color: var(--fg);
+}
+.lightbox-open {
+  overflow: hidden;
+}
+.site-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  background: var(--bg);
+  border-bottom: 1px solid #ccc;
+}
+.emoji-button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--accent);
+}
+.gallery-grid {
+  column-count: 1;
+  column-gap: 1rem;
+  padding: 1rem;
+}
+@media (min-width: 768px) {
+  .gallery-grid { column-count: 2; }
+}
+@media (min-width: 1024px) {
+  .gallery-grid { column-count: 3; }
+}
+.gallery-item {
+  margin: 0 0 1rem;
+  position: relative;
+  cursor: pointer;
+}
+.gallery-item img {
+  width: 100%;
+  display: block;
+  border-radius: 8px;
+}
+.gallery-item figcaption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 0.5rem;
+  background: rgba(0,0,0,0.6);
+  color: #fff;
+  font-size: 0.9rem;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.gallery-item:focus figcaption,
+.gallery-item:hover figcaption {
+  opacity: 1;
+}
+#lightbox {
+  position: fixed;
+  top:0; left:0; right:0; bottom:0;
+  background: rgba(0,0,0,0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+#lightbox[aria-hidden="false"] {
+  visibility: visible;
+  opacity: 1;
+}
+#lb-content img,
+#lb-content video {
+  max-width: 90vw;
+  max-height: 80vh;
+  border-radius: 8px;
+}
+#lb-caption {
+  color: #fff;
+  margin-top: 0.5rem;
+  text-align: center;
+  max-width: 90vw;
+}
+#lb-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: none;
+  border: none;
+  font-size: 2rem;
+  color: #fff;
+  cursor: pointer;
+}

src/assets/js/script.js

@@ -0,0 +1,97 @@
+// --- theme toggle (unchanged) ---
+const toggle = document.getElementById('theme-toggle');
+const root   = document.documentElement;
+const saved  = localStorage.getItem('dark-mode');
+const sysDark= window.matchMedia('(prefers-color-scheme: dark)').matches;
+if (saved==='true' || (saved===null && sysDark)) root.classList.add('dark');
+toggle.addEventListener('click', ()=>{
+  const isDark = root.classList.toggle('dark');
+  localStorage.setItem('dark-mode', isDark);
+});
+
+const body = document.body;
+
+// --- lightbox base ---
+const lb       = document.getElementById('lightbox');
+const lbCnt    = document.getElementById('lb-content');
+const lbCap    = document.getElementById('lb-caption');
+document.getElementById('lb-close')
+        .addEventListener('click', ()=>{ 
+            lb.setAttribute('aria-hidden','true'); 
+            body.classList.remove('lightbox-open');
+            lbCnt.innerHTML=''; 
+        });
+
+// --- build gallery ---
+const gallery  = document.getElementById('gallery');
+const mediaData= JSON.parse(document.getElementById('media-data').textContent);
+
+const createPicture = (item) => {
+  const pic = document.createElement('picture');
+  ['desktop','tablet','mobile'].forEach(bp=>{
+    const src = document.createElement('source');
+    const widthQuery = bp==='desktop'?1024: bp==='tablet'?768: 0;
+    src.media  = `(min-width:${widthQuery}px)`;
+    if(item.type==='image'){
+      src.srcset = 
+        `assets/media/${bp}/${item.name}@1x.webp 1x, ` +
+        `assets/media/${bp}/${item.name}.webp   2x`;
+    } else {
+      // video poster still
+      src.srcset = 
+        `assets/media/${bp}/${item.name}_still@1x.webp 1x, ` +
+        `assets/media/${bp}/${item.name}_still.webp   2x`;
+    }
+    pic.appendChild(src);
+  });
+
+  // thumbnail fallback (always 300px/2×)
+  const img = document.createElement('img');
+  img.src    = `assets/media/thumbnail/${item.name}.webp`;
+  img.alt    = item.alt.replace(/[‘’]/g,'');
+  pic.appendChild(img);
+  return pic;
+};
+
+mediaData.forEach(item=>{
+  const fig = document.createElement('figure');
+  fig.className  = `gallery-item${item.type==='video'?' video':''}`;
+  fig.tabIndex   = 0;
+  fig.dataset.name    = item.name;
+  fig.dataset.type    = item.type;
+  fig.dataset.caption = item.caption;
+  fig.appendChild(createPicture(item));
+
+  // overlay caption
+  const cap = document.createElement('figcaption');
+  cap.textContent = item.caption;
+  fig.appendChild(cap);
+
+  // events
+  fig.addEventListener('click', ()=> openLightbox(item));
+  fig.addEventListener('keypress', e=> e.key==='Enter' && openLightbox(item));
+
+  gallery.appendChild(fig);
+});
+
+// --- video toggle ---
+const videoTgl = document.getElementById('show_video');
+videoTgl.addEventListener('click', ()=>{
+  openLightbox(mediaData.find(i=>i.type==='video'));
+});
+
+function openLightbox(item){
+  lbCnt.innerHTML = '';  
+  if(item.type==='video'){
+    const v = document.createElement('video');
+    v.src       = `assets/media/videos/${item.name}.mp4`;
+    v.controls  = true;
+    v.autoplay  = true;
+    lbCnt.appendChild(v);
+  } else {
+    lbCnt.appendChild(createPicture(item));
+  }
+  lbCap.textContent         = item.caption;
+  body.classList.add('lightbox-open');
+  lb.setAttribute('aria-hidden','false');
+}