commit 60dc01a82ab22ec4b6a9be09d86c6329fe2f80dd
parent b5a7af4ad1d98590c1a7acbbba63543e09243fb9
Author: Jack Sangdahl <jack@pngu.org>
Date: Tue, 3 Mar 2026 10:09:24 -0700
Add some image utilties for englarging & galleries
Diffstat:
6 files changed, 115 insertions(+), 16 deletions(-)
diff --git a/artix_laptop.html b/artix_laptop.html
@@ -72,7 +72,7 @@
>
was particularly helpful, especially regarding the resistor modifications.
</p>
- <img class="inline-image" src="data/laptop_open.jpg" alt="laptop_open.jpg" />
+ <img class="lightbox-trigger inline-image" src="data/laptop_open.jpg" alt="laptop_open.jpg" />
<h3>System</h3>
<h4>File System</h4>
<h5>Overview</h5>
@@ -359,30 +359,34 @@ Depends = clang</code></pre>
</ol>
<h3>Screenshots</h3>
<img
- class="inline-image"
+ class="lightbox-trigger inline-image"
src="https://raw.githubusercontent.com/waffle87/dots/refs/heads/kepler/.img/fetch.png"
alt="fetch.png"
/>
<img
- class="inline-image"
+ class="lightbox-trigger inline-image"
src="https://raw.githubusercontent.com/waffle87/dots/refs/heads/kepler/.img/nvim.png"
alt="nvim.png"
/>
<img
- class="inline-image"
+ class="lightbox-trigger inline-image"
src="https://raw.githubusercontent.com/waffle87/dots/refs/heads/kepler/.img/zathura.png"
alt="zathura.png"
/>
<img
- class="inline-image"
+ class="lightbox-trigger inline-image"
src="https://raw.githubusercontent.com/waffle87/dots/refs/heads/kepler/.img/fuzzel.png"
alt="fuzzel.png"
/>
<img
- class="inline-image"
+ class="lightbox-trigger inline-image"
src="https://raw.githubusercontent.com/waffle87/dots/refs/heads/kepler/.img/fuzzel.png"
alt="fuzzel.png"
/>
+ <div class="lightbox-overlay" id="lightbox">
+ <img src="" alt="Enlarged view" />
+ </div>
+ <script src="images.js"></script>
<script src="frame.js"></script>
</body>
</html>
diff --git a/gentoo_desktop.html b/gentoo_desktop.html
@@ -30,7 +30,7 @@
>, <a href="data/desktop_lscpu" target="_blank"><code>lscpu</code></a>
</li>
</ul>
- <img class="inline-image" src="data/desktop.jpg" alt="desktop.jpg" />
+ <img class="lightbox-trigger inline-image" src="data/desktop.jpg" alt="desktop.jpg" />
<h3>System</h3>
<h4>Profile</h4>
<p>
@@ -179,30 +179,34 @@ sys-kernel/vanilla-kernel
virtual/dist-kernel</code></pre>
<h3>Screenshots</h3>
<img
- class="inline-image"
+ class="lightbox-trigger inline-image"
src="https://raw.githubusercontent.com/waffle87/dots/refs/heads/pluto/.img/fetch.png"
alt="fetch.png"
/>
<img
- class="inline-image"
+ class="lightbox-trigger inline-image"
src="https://raw.githubusercontent.com/waffle87/dots/refs/heads/pluto/.img/nvim.png"
alt="nvim.png"
/>
<img
- class="inline-image"
+ class="lightbox-trigger inline-image"
src="https://raw.githubusercontent.com/waffle87/dots/refs/heads/pluto/.img/zathura.png"
alt="zathura.png"
/>
<img
- class="inline-image"
+ class="lightbox-trigger inline-image"
src="https://raw.githubusercontent.com/waffle87/dots/refs/heads/pluto/.img/fuzzel.png"
alt="fuzzel.png"
/>
<img
- class="inline-image"
+ class="lightbox-trigger inline-image"
src="https://raw.githubusercontent.com/waffle87/dots/refs/heads/pluto/.img/fuzzel.png"
alt="fuzzel.png"
/>
+ <div class="lightbox-overlay" id="lightbox">
+ <img src="" alt="Enlarged view" />
+ </div>
+ <script src="images.js"></script>
<script src="frame.js"></script>
</body>
</html>
diff --git a/images.js b/images.js
@@ -0,0 +1,24 @@
+const overlay = document.getElementById("lightbox");
+const overlayImg = overlay.querySelector("img");
+
+document.querySelectorAll(".lightbox-trigger").forEach(img => {
+ img.addEventListener("click", () => {
+ overlayImg.src = img.src;
+ overlay.classList.add("active");
+ });
+});
+
+overlay.addEventListener("click", () => {
+ overlay.classList.remove("active");
+});
+
+document.querySelectorAll("[data-images]").forEach((gallery) => {
+ const images = JSON.parse(gallery.dataset.images);
+ const img = gallery.querySelector("img");
+ let currentIndex = 0;
+
+ img.addEventListener("click", () => {
+ currentIndex = (currentIndex + 1) % images.length;
+ img.src = images[currentIndex];
+ });
+});
diff --git a/keyboard_design.html b/keyboard_design.html
@@ -9,11 +9,44 @@
<body>
<a style="text-decoration: none" href="content.html"><--</a>
<h2>Keyboard Designs</h2>
- <p><i>2026-02-14</i></p>
<hr />
<h3><a href="https://git.pngu.org/sweep" target="_blank">Sweep</a></h3>
+ <p><i>2024-08-10</i></p>
+ <div
+ data-images='["https://raw.githubusercontent.com/waffle87/sweep/refs/heads/master/img/pcb_top.svg", "https://raw.githubusercontent.com/waffle87/sweep/refs/heads/master/img/pcb_bottom.svg"]'
+ >
+ <img
+ class="inline-image"
+ src="https://raw.githubusercontent.com/waffle87/sweep/refs/heads/master/img/pcb_top.svg"
+ alt="sweep pcb_top.svg"
+ />
+ <p class="image-footer">click ^</p>
+ </div>
<h3><a href="https://git.pngu.org/pseusplit" target="_blank">Pseusplit</a></h3>
+ <p><i>2025-06-27</i></p>
+ <div
+ data-images='["https://raw.githubusercontent.com/waffle87/pseusplit/refs/heads/master/img/pcb_top.svg", "https://raw.githubusercontent.com/waffle87/pseusplit/refs/heads/master/img/pcb_bottom.svg"]'
+ >
+ <img
+ class="inline-image"
+ src="https://raw.githubusercontent.com/waffle87/pseusplit/refs/heads/master/img/pcb_top.svg"
+ alt="pseusplit pcb_top.svg"
+ />
+ <p class="image-footer">click ^</p>
+ </div>
<h3><a href="https://git.pngu.org/unzahl" target="_blank">Unzahl</a></h3>
+ <p><i>2025-10-25</i></p>
+ <div
+ data-images='["https://raw.githubusercontent.com/waffle87/unzahl/refs/heads/master/img/pcb_top.svg", "https://raw.githubusercontent.com/waffle87/unzahl/refs/heads/master/img/pcb_bottom.svg"]'
+ >
+ <img
+ class="inline-image"
+ src="https://raw.githubusercontent.com/waffle87/unzahl/refs/heads/master/img/pcb_top.svg"
+ alt="unzahl pcb_top.svg"
+ />
+ <p class="image-footer">click ^</p>
+ </div>
+ <script src="images.js"></script>
<script src="frame.js"></script>
</body>
</html>
diff --git a/leetcode.html b/leetcode.html
@@ -52,7 +52,11 @@ int foo = func(arr, ARRAY_SIZE(arr));</code></pre>
structures with given problem input, and also print data returned by such functions.
</p>
<h4><code>ListNode</code> Data Type</h4>
- <img src="https://assets.leetcode.com/uploads/2022/02/02/ex1-1.png" alt="list node example" />
+ <img
+ class="inline-image"
+ src="https://assets.leetcode.com/uploads/2022/02/02/ex1-1.png"
+ alt="list node example"
+ />
<pre><code class="language-c">int main() {
int input[] = {0, 3, 1, 0, 4, 5, 2, 0};
struct ListNode *head = listnode_build(input, ARRAY_SIZE(input));
@@ -61,9 +65,9 @@ int foo = func(arr, ARRAY_SIZE(arr));</code></pre>
}</code></pre>
<h4><code>TreeNode</code> Data Type</h4>
<img
- class="inline-image"
src="https://assets.leetcode.com/uploads/2021/04/08/leftsum-tree.jpg"
alt="tree node example"
+ style="width: 30%; height: auto"
/>
<p>
Note that in the following, a value of -1 denotes a "null" leaf. If a problem's input depends
diff --git a/style.css b/style.css
@@ -93,7 +93,37 @@ pre {
}
.inline-image {
+ cursor: pointer;
+ max-width: 100%;
display: block;
margin: 10px 0px;
- width: 100%;
+}
+
+.image-footer {
+ text-align: center;
+ font-style: italic;
+ font-size: 75%;
+}
+
+.lightbox-overlay {
+ display: none;
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.8);
+ cursor: pointer;
+}
+
+.lightbox-overlay.active {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.lightbox-overlay img {
+ max-width: 90vw;
+ max-height: 90vh;
+}
+
+.lightbox-trigger {
+ cursor: pointer;
}
