templates/entry-video.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>blog@cameron1729 - $title</title>
   6     <style>
   7       body, html {
   8         width: 100%;
   9         height: 100%;
  10         padding: 0px;
  11         margin: 0px;
  12       }
  13       body {
  14         background-color: #BCBCBC;
  15         font-family: helvetica;
  16         font-weight: bold;
  17       }
  18       a {
  19         color: #666666;
  20         text-decoration: none;
  21       }
  22       a:hover {
  23         color: #999999;
  24       }
  25       #container {
  26         display: flex;
  27         justify-content: center;
  28         overflow: hidden;
  29         height: 70%;
  30       }
  31       video {
  32         object-fit: cover;
  33         width: 100%;
  34       }
  35       p {
  36         font-size: 1.2vh;
  37         margin-left: 5px;
  38         margin-right: 15px;
  39       }
  40       h1 {
  41         font-size: 3vh;
  42         margin-left: 5px;
  43       }
  44       h3 {
  45         padding: 0px;
  46         margin-left: 30px;
  47         font-size: 2vh;
  48       }
  49     </style>
  50     <script>
  51       window.onload = _ => {document.getElementById("video").muted = !!window.chrome;};
  52     </script>
  53   </head>
  54   <body>
  55     <div id="container"><video id="video" autoplay controls loop muted><source src="$video" type="video/webm"></video></div>
  56     <h1>$title</h1>
  57     <h3>$date (<a href="https://cameron1729.xyz/blog">blog index</a>)</h3>
  58     $body
  59     <p>ᚳᚱᛒ</p>
  60   </body>
  61 </html>
  62