replacing two column approach with video grid

Author: Paulie-Aditya

assets/sass/layout.scss

@@ -68,17 +68,43 @@ aside {
   border: solid 1px var(--main-border);
   @include border-radius(5px);
 
-  .two-column {
-    @include clearfix;
-
-    .column-left {
-      width: 47%;
-      float: left;
+  .video-grid {
+    padding: 1rem 0;
+
+    .video-thumbnails {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 2rem;
+      list-style: none;
+      padding: 0;
+      margin: 0;
     }
 
-    .column-right {
-      width: 47%;
-      float: right;
+    .video-card {
+      display: flex;
+      flex-direction: column;
+      text-decoration: none;
+      color: inherit;
+      height: 100%;
+      transition: transform 0.2s ease;
+
+      &:hover {
+        transform: translateY(-3px);
+      }
+
+      img {
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+      }
+
+      h4 {
+        margin: 0.75rem 0;
+      }
+
+      .description {
+        margin-top: auto;
+      }
     }
   }
 

layouts/shortcodes/videos.html

@@ -6,41 +6,20 @@
 {{ $dimensions = .Get "dimensions" }}
 {{ end }}
 
-<div class="two-column">
-  <div class="column-left">
+<div class="video-grid">
   <ul class="video-thumbnails">
-    {{ range $i, $video := $videos }}
-    {{ $group := mod $i 2 }}
-    {{ if eq $group 0 }}
-      <li>
-      <a href="{{ relURL "video" }}/{{ $video.Params.link }}"><img src="{{ relURL "images/video" }}/ep{{ print $video.Params.episode $img_suffix }}.png" {{ $dimensions }}></a>
-      <h4>
-        <a href="{{ relURL "video" }}/{{ $video.Params.link }}">{{ $video.Params.video_title }}</a>
-      </h4>
-      <p class="description">
-        <strong>Length:</strong> {{ $video.Params.length }}
-      </p>
-      </li>
-    {{ end }}
-    {{ end }}
-  </ul>
-  </div>
-  <div class="column-right">
-  <ul class="video-thumbnails">
-    {{ range $i, $video := $videos }}
-    {{ $group := mod $i 2 }}
-    {{ if eq $group 1 }}
-      <li>
-      <a href="{{ relURL "video" }}/{{ $video.Params.link }}"><img src="{{ relURL "images/video" }}/ep{{ print $video.Params.episode $img_suffix }}.png" {{ $dimensions }}></a>
-      <h4>
-        <a href="{{ relURL "video" }}/{{ $video.Params.link }}">{{ $video.Params.video_title }}</a>
-      </h4>
-      <p class="description">
-        <strong>Length:</strong> {{ $video.Params.length }}
-      </p>
-      </li>
-    {{ end }}
+    {{ range $video := $videos }}
+    <li>
+      <a href="{{ relURL "video" }}/{{ $video.Params.link }}" class="video-card">
+        <img src="{{ relURL "images/video" }}/ep{{ print $video.Params.episode $img_suffix }}.png" {{ $dimensions }}>
+        <h4>
+          <span>{{ $video.Params.video_title }}</span>
+        </h4>
+        <p class="description">
+          <strong>Length:</strong> {{ $video.Params.length }}
+        </p>
+      </a>
+    </li>
     {{ end }}
   </ul>
-  </div>
 </div>