diff options
author | Jedidiah Barber <contact@jedbarber.id.au> | 2022-11-27 01:21:53 +1300 |
---|---|---|
committer | Jedidiah Barber <contact@jedbarber.id.au> | 2022-11-27 01:21:53 +1300 |
commit | 8e36b81714320657b7d06973daa4e769bb17de46 (patch) | |
tree | 6a9289d4e458ebcd8c4e7b9c42de0a90da1e701c /project/templates/vidframe/base_preview.xhtml | |
parent | e75f04ce0747169b0f77aa55518982409cf9a876 (diff) |
Added ASCII fluid simulator article
Diffstat (limited to 'project/templates/vidframe/base_preview.xhtml')
-rw-r--r-- | project/templates/vidframe/base_preview.xhtml | 60 |
1 files changed, 60 insertions, 0 deletions
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 -%} + + |