Live photo fun

nqst · May 2, 2024 · 3e90d6f · 3e90d6f
1 parent 15baf91
commit 3e90d6f
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 1 deletion.
diff --git a/css/main.css b/css/main.css
diff --git a/i/video/amsterdam.jpg b/i/video/amsterdam.jpg
diff --git a/i/video/amsterdam.mp4 b/i/video/amsterdam.mp4
diff --git a/lists/countries.html b/lists/countries.html
@@ -7,6 +7,12 @@
 <main class="main">
   <div class="container container--full">
     <header class="page-header">
+      <figure class="page-header__figure">
+        <video class="page-header__video" poster="/i/video/amsterdam.jpg" autoplay loop muted playsinline>
+          <source src="/i/video/amsterdam.mp4" type="video/mp4">
+        </video>
+      </figure>
+
       <h1 class="page-header__title">Країни, де я був <span class="title-counter">{{ site.data.countries | size }}</span></h1>
     </header>
 

diff --git a/src/css/partials/content.css b/src/css/partials/content.css
@@ -339,6 +339,18 @@ figure.figure--wide,
     line-height: 1.45;
     text-wrap: balance;
   }
+
+  &__figure {
+    margin: 0 0 2em;
+    width: 100%;
+    max-width: 640px;
+  }
+
+  &__video {
+    width: 100%;
+    height: auto;
+    border-radius: 5px;
+  }
 }
 
 .item-locked {