/tags/tokyo/ Recent content in Tokyo on Syncopated Pandemonium Hugo en-us Fri, 03 Apr 2026 00:00:00 +0000 /posts/20260403-tokyo/ Fri, 03 Apr 2026 00:00:00 +0000 /posts/20260403-tokyo/ <img style="max-height:80vh" src="/photos/20260403-Tokyo-3000w.jpg" height="1108" alt="Tokyo"> <table class="not-prose exif-table"> <tbody> <tr class="exif-heading"> <th class="exif-cell" colspan=2>exiftool</th></th> <tr><td class="exif-cell exif-col-1">Date</td><td class="exif-cell">2026:03:21 17:24:50</td></tr> <tr><td class="exif-cell">Make</td><td class="exif-cell">FUJIFILM</td></tr> <tr><td class="exif-cell">Model</td><td class="exif-cell">GFX100RF</td></tr> <tr><td class="exif-cell">Lens</td><td class="exif-cell">Fujifilm GFX100RF</td></tr> <tr><td class="exif-cell">Aperture</td><td class="exif-cell">f/4</td></tr> <tr><td class="exif-cell">ISO</td><td class="exif-cell">320</td></tr> <tr><td class="exif-cell">Shutter</td><td class="exif-cell">1/750s</td></tr> </tbody> </table> <div class="responsive-img-masonry lightbox-enabled" data-cols="2" data-aspect="cover" style="--grid-gap: 1rem;"> <div class="grid-item"> <img src="/photos/20260403-Tokyo-2-3000w.jpg" alt="20260403-Tokyo-2-3000w.jpg" loading="lazy" class="lightbox-img" data-full="/photos/20260403-Tokyo-2-3000w.jpg"> </div> <div class="grid-item"> <img src="/photos/20260403-Tokyo-4-3000w.jpg" alt="20260403-Tokyo-4-3000w.jpg" loading="lazy" class="lightbox-img" data-full="/photos/20260403-Tokyo-4-3000w.jpg"> </div> <div class="grid-item"> <img src="/photos/20260403-Tokyo-3-3000w.jpg" alt="20260403-Tokyo-3-3000w.jpg" loading="lazy" class="lightbox-img" data-full="/photos/20260403-Tokyo-3-3000w.jpg"> </div> <div class="grid-item"> <img src="/photos/20260403-Tokyo-6-3000w.jpg" alt="20260403-Tokyo-6-3000w.jpg" loading="lazy" class="lightbox-img" data-full="/photos/20260403-Tokyo-6-3000w.jpg"> </div> <div class="grid-item"> <img src="/photos/20260403-Tokyo-5-3000w.jpg" alt="20260403-Tokyo-5-3000w.jpg" loading="lazy" class="lightbox-img" data-full="/photos/20260403-Tokyo-5-3000w.jpg"> </div> </div> <div id="img-lightbox" class="img-lightbox" style="display: none;"> <span class="lightbox-close">&times;</span> <img class="lightbox-content" id="lightbox-img"> </div> <style> .responsive-img-grid { display: grid; gap: var(--grid-gap, 1rem); margin: 2rem 0; } .responsive-img-grid { grid-template-columns: repeat(1, 1fr); } @media (min-width: 640px) { .responsive-img-grid[data-cols="2"], .responsive-img-grid[data-cols="3"], .responsive-img-grid[data-cols="4"], .responsive-img-grid[data-cols="5"], .responsive-img-grid[data-cols="6"] { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .responsive-img-grid[data-cols="3"], .responsive-img-grid[data-cols="4"], .responsive-img-grid[data-cols="5"], .responsive-img-grid[data-cols="6"] { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .responsive-img-grid[data-cols="4"], .responsive-img-grid[data-cols="5"], .responsive-img-grid[data-cols="6"] { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1280px) { .responsive-img-grid[data-cols="5"], .responsive-img-grid[data-cols="6"] { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1536px) { .responsive-img-grid[data-cols="6"] { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 768px) { .responsive-img-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); } } .responsive-img-grid .grid-item { overflow: hidden; } .responsive-img-grid[data-aspect="cover"] .grid-item { aspect-ratio: 1 / 1; } .responsive-img-grid[data-aspect="cover"] img { width: 100%; height: 100%; object-fit: cover; display: block; } .responsive-img-grid[data-aspect="preserve"] .grid-item { display: flex; align-items: start; } .responsive-img-grid[data-aspect="preserve"] img { width: 100%; height: auto; object-fit: contain; display: block; } .responsive-img-masonry { column-gap: var(--grid-gap, 1rem); margin: 2rem 0; } .responsive-img-masonry { column-count: 1; } @media (min-width: 640px) { .responsive-img-masonry[data-cols="2"], .responsive-img-masonry[data-cols="3"], .responsive-img-masonry[data-cols="4"], .responsive-img-masonry[data-cols="5"], .responsive-img-masonry[data-cols="6"] { column-count: 2; } } @media (min-width: 768px) { .responsive-img-masonry[data-cols="3"], .responsive-img-masonry[data-cols="4"], .responsive-img-masonry[data-cols="5"], .responsive-img-masonry[data-cols="6"] { column-count: 3; } } @media (min-width: 1024px) { .responsive-img-masonry[data-cols="4"], .responsive-img-masonry[data-cols="5"], .responsive-img-masonry[data-cols="6"] { column-count: 4; } } @media (min-width: 1280px) { .responsive-img-masonry[data-cols="5"], .responsive-img-masonry[data-cols="6"] { column-count: 5; } } @media (min-width: 1536px) { .responsive-img-masonry[data-cols="6"] { column-count: 6; } } @media (min-width: 768px) { .responsive-img-masonry[data-cols="2"] { column-count: 2; } } .responsive-img-masonry .grid-item { break-inside: avoid; margin-bottom: var(--grid-gap, 1rem); display: inline-block; width: 100%; } .responsive-img-masonry img { width: 100%; height: auto; display: block; } .lightbox-img { cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; } .lightbox-img:hover { opacity: 0.9; transform: scale(1.02); } .img-lightbox { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .lightbox-content { margin: auto; display: block; max-width: 90%; max-height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: zoomIn 0.3s ease; } @keyframes zoomIn { from { transform: translate(-50%, -50%) scale(0.8); } to { transform: translate(-50%, -50%) scale(1); } } .lightbox-close { position: absolute; top: 20px; right: 40px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; transition: color 0.2s ease; } .lightbox-close:hover, .lightbox-close:focus { color: #bbb; } </style> <script> (function() { const lightbox = document.getElementById('img-lightbox'); const lightboxImg = document.getElementById('lightbox-img'); const closeBtn = document.querySelector('.lightbox-close'); document.querySelectorAll('.lightbox-img').forEach(img => { img.addEventListener('click', function() { lightbox.style.display = 'block'; lightboxImg.src = this.getAttribute('data-full') || this.src; }); }); if (closeBtn) { closeBtn.addEventListener('click', function() { lightbox.style.display = 'none'; }); } lightbox.addEventListener('click', function(e) { if (e.target === lightbox) { lightbox.style.display = 'none'; } }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && lightbox.style.display === 'block') { lightbox.style.display = 'none'; } }); })(); </script>