video support

content/projects/kernel.md

@@ -6,4 +6,7 @@ date = 2024-08-08
 [taxonomies]
 tags = ["rust", "embedded", "risc-v"]
 +++
-https://github.com/ParkerTenBroeck/milkv-duos-rs
+https://github.com/ParkerTenBroeck/milkv-duos-rs
+
+
+{{ video(src="/videos/kernel/os_demo.mp4", controls=true, caption="meow")}}

content/projects/software-renderer.md

@@ -6,4 +6,11 @@ date = 2025-12-12
 [taxonomies]
 tags = ["C++", "graphics"]
 +++
-https://github.com/ParkerTenBroeck/3P93
+
+
+[GitHub](https://github.com/ParkerTenBroeck/3P93)
+
+
+{{ video(src="/videos/rasterizer/halo.mp4", controls=true, autoplay=true, loop=true, caption="meow")}}
+{{ video(src="/videos/rasterizer/bricks.mp4", controls=true, autoplay=true, loop=true, caption="meow")}}
+{{ video(src="/videos/rasterizer/wavy.mp4", controls=true, autoplay=true, loop=true, caption="meow")}}

sass/lightbox.scss

@@ -1,19 +1,12 @@
-/* Prevent page scroll when lightbox is open */
 body.lb-open {
   overflow: hidden;
-  touch-action: none; /* disables background gestures */
+  touch-action: none; 
 }
 
-figure.image img.zoomable {
+figure .zoomable {
   cursor: pointer;
 }
 
-// figure.image img.zoomable:hover {
-//   transform: scale(1.02);
-// }
-
-
-/* Overlay */
 .lightbox {
   position: fixed;
   inset: 0;
@@ -26,18 +19,17 @@ figure.image img.zoomable {
 
 .lightbox.open {
   opacity: 1;
-  pointer-events: auto; /* blocks clicks/scroll to the page behind */
+  pointer-events: auto; 
 }
 
-/* Stage fills viewport; it’s the only interaction surface */
 .lightbox__stage {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  overflow: hidden;         /* hide panned edges */
+  overflow: hidden;
-  cursor: zoom-out;         /* click outside to close */
+  cursor: w-resize;         
 }
 
 .lightbox__img {
@@ -45,12 +37,19 @@ figure.image img.zoomable {
   max-height: 95vh;
   user-select: none;
   -webkit-user-drag: none;
-  cursor: grab;
   transform-origin: 50% 50%;
   will-change: transform;
   touch-action: none;
 }
 
+.lightbox__img.is-zoomed {
+  cursor: zoom-out;
+}
+
+.lightbox__img.is-unzoomed {
+  cursor: zoom-in;
+}
+
 .lightbox__img.dragging {
   cursor: grabbing;
 }

sass/style.scss

@@ -3,7 +3,7 @@
 @use "footer.scss";
 @use "blog.scss";
 @use "fonts.scss";
-@use "img.scss";
+@use "lightbox.scss";
 
 .z-code{
     overflow-x: auto;
@@ -100,22 +100,26 @@ figure {
   flex-direction: column;
 }
 
-figure.image {
+figure {
   margin: 2rem 0;
   text-align: center;
 }
 
-@media screen and (min-width: 978px) {
+figure * {
-  
+  max-width: 100%;
-}
-
-figure.image img {
-  max-width: 80%;
   height: auto;
   border-radius: 6px;
 }
 
-figure.image figcaption {
+@media screen and (min-width: 700px) {
+  figure * {
+    max-width: 80%;
+    height: auto;
+    border-radius: 6px;
+  }
+}
+
+figure figcaption {
   max-width: 80%;
   margin-top: 0.5rem;
   font-size: 0.9rem;

static/js/script.js

@@ -61,6 +61,8 @@
     function applyTransform() {
         clampPan();
         img.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
+        img.classList.toggle("is-zoomed", scale > 1);
+        img.classList.toggle("is-unzoomed", scale === 1);
     }
 
     function resetView() {

templates/base.html

@@ -139,10 +139,10 @@
         </footer>
     </div>
 
-    <div id="lightbox" class="lightbox" aria-hidden="true" role="dialog" aria-label="Image viewer">
+    <div id="lightbox" class="lightbox" aria-hidden="true" role="dialog" aria-label="Media viewer">
-    <div class="lightbox__stage">
+        <div class="lightbox__stage" id="lightbox-stage">
-        <img id="lightbox-img" class="lightbox__img" alt="">
+            <img id="lightbox-img" class="lightbox__img" alt="">
-    </div>
+        </div>
     </div>
 </body>
 <script src="{{ get_url(path='/js/script.js') }}"></script>

templates/shortcodes/image.html

@@ -1,5 +1,5 @@
-<figure class="image {% if class %} {{ class }} {% endif %}">
+<figure class="{% if class %} {{ class }} {% endif %}">
-  <img src="{{ get_url(path=src) }}" loading="lazy" decoding="async" class="zoomable" data-full="{{ get_url(path=src) }}">
+  <img src="{{ get_url(path=src) }}" loading="lazy" decoding="async" class="zoomable">
   {% if caption != "" %}
     <figcaption>{{ caption }}</figcaption>
   {% endif %}

templates/shortcodes/video.html

@@ -0,0 +1,17 @@
+<figure class="{% if class %} {{ class }} {% endif %}">
+  <video
+      {% if poster %} poster="{{ poster }}"{% endif %}
+      {% if loop | default(value=false) %} loop {% endif %}
+      {% if controls  | default(value=true) %} controls {% endif %}
+      preload="metadata"
+      muted
+      {% if autoplay | default(value=false) %} autoplay {% endif %}
+      playsinline
+    >
+      <source src="{{ get_url(path=src) }}">
+    </video>
+    {% if caption != "" %}
+      <figcaption>{{ caption }}</figcaption>
+  {% endif %}
+</figure>
+