update responsive elements

Alescontrela · Jan 9, 2025 · 95264ae · 95264ae
1 parent 093532c
commit 95264ae
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/_pages/photography.md b/_pages/photography.md
@@ -28,8 +28,8 @@ show_title: false
 
 ## C/2023 A3 over Gilmore Lake, Tahoe
 <div class="row">
-    <div class="col-12">
-        <div class="embed-responsive embed-responsive-1by1">
+    <div class="col-lg-8 col-md-8 col-sm-12 mx-auto">
+        <div class="embed-responsive embed-responsive-5by7">
             <video class="embed-responsive-item" id="tsuchinshan-atlas" controls ></video>
         </div>
     </div>

diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -636,4 +636,22 @@ html.transition *:after {
   width: 100%;
   height: 100%;
   border: 0;
+}
+
+.embed-responsive-5by7 {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding-top: 140%; /* 5:7 aspect ratio */
+}
+
+.embed-responsive-5by7 .embed-responsive-item {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
 }