From 8e36b81714320657b7d06973daa4e769bb17de46 Mon Sep 17 00:00:00 2001
From: Jedidiah Barber <contact@jedbarber.id.au>
Date: Sun, 27 Nov 2022 01:21:53 +1300
Subject: Added ASCII fluid simulator article

---
 project/templates/vidframe/base_preview.xhtml | 60 +++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 project/templates/vidframe/base_preview.xhtml

(limited to 'project/templates/vidframe/base_preview.xhtml')

diff --git a/project/templates/vidframe/base_preview.xhtml b/project/templates/vidframe/base_preview.xhtml
new file mode 100644
index 0000000..eaf0bea
--- /dev/null
+++ b/project/templates/vidframe/base_preview.xhtml
@@ -0,0 +1,60 @@
+
+{%- extends "vidframe/base_vidframe.xhtml" -%}
+
+
+
+{%- block style %}
+    body {
+        background-color: black;
+    }
+    a {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    img.thumb {
+        opacity: 0.5;
+    }
+    div.playbutton {
+        opacity: 1.0;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+    svg {
+        position: absolute;
+        fill: #fff;
+        width: 100px;
+        height: 100px;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+    div.playbutton:hover svg,
+    div.playbutton:focus svg {
+        fill: #17e617;
+    }
+{% endblock -%}
+
+
+
+{%- block video %}
+<div class="playbutton">
+    <a href="{%- block vidlink -%}{%- endblock -%}">
+        <img class="thumb" src="{%- block thumbnail -%}{%- endblock -%}"
+             alt="Click to load video"
+             width="100%"
+             height="100%" />
+        <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 311.69 311.69">
+            <svg:path d="M155.84,0A155.85,155.85,0,1,0,311.69,155.84,155.84,155.84,0,0,0,155.84,
+            0Zm0,296.42A140.58,140.58,0,1,1,296.42,155.84,140.58,140.58,0,0,1,155.84,296.42Z"/>
+            <svg:polygon points="218.79 155.84 119.22 94.34 119.22 217.34 218.79 155.84"/>
+        </svg:svg>
+    </a>
+</div>
+{% endblock -%}
+
+
-- 
cgit