From a4e209b8876da03d80908488aef5a22dfad40d31 Mon Sep 17 00:00:00 2001
From: OtsoBear <otso.veistera@gmail.com>
Date: Mon, 1 Dec 2025 12:04:51 +0200
Subject: [PATCH] Refactor featured movie section to display latest movies
 dynamically with improved layout

---
 index.md | 53 ++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 44 insertions(+), 9 deletions(-)

diff --git a/index.md b/index.md
index 8a7cd68..5a6e749 100644
--- a/index.md
+++ b/index.md
@@ -14,31 +14,51 @@ actions:
     url: "https://rekisteri.datat.fi/apply"
 ---
 
-<div class="featured-movie">
-  <h3>Uusin dataleffa</h3>
-  <a href="https://youtu.be/79V7Vi5bE5o" class="featured-movie-link">
-    <img src="/assets/images/leffat/2025.jpg" alt="Dataleffa 2025: Datrix">
-    <span class="featured-movie-title">Dataleffa 2025: Datrix</span>
+{% assign sorted_movies = site.leffat | sort: 'path' | reverse %}
+
+<div class="featured-movies">
+  <h3>Viimeisimmät dataleffat · <a href="/leffat" class="see-all-link">Kaikki</a></h3>
+  {% assign latest = sorted_movies | first %}
+  <a href="{{ latest.external_url }}" class="featured-movie-link featured-movie-main">
+    <img src="{{ latest.image.thumbnail }}" alt="{{ latest.title }}">
+    <span class="featured-movie-title">{{ latest.title }}</span>
   </a>
+
+  <div class="older-movies">
+    {% for movie in sorted_movies offset:1 limit:2 %}
+    <a href="{{ movie.external_url }}" class="featured-movie-link featured-movie-small">
+      <img src="{{ movie.image.thumbnail }}" alt="{{ movie.title }}">
+      <span class="featured-movie-title">{{ movie.title }}</span>
+    </a>
+    {% endfor %}
+  </div>
 </div>
 
 <style>
-.featured-movie {
+.featured-movies {
   margin-top: 1rem;
 }
 
-.featured-movie h3 {
+.featured-movies h3 {
   margin-bottom: 0.75rem;
   font-size: 1.25rem;
 }
 
+.see-all-link {
+  font-weight: 400;
+  font-size: 0.9em;
+}
+
 .featured-movie-link {
   display: inline-block;
-  max-width: 320px;
   text-decoration: none;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
+.featured-movie-main {
+  max-width: 320px;
+}
+
 .featured-movie-link:hover {
   transform: translateY(-4px);
 }
@@ -55,8 +75,23 @@ actions:
 
 .featured-movie-title {
   display: block;
-  margin-top: 0.75rem;
+  margin-top: 0.5rem;
   font-weight: 600;
   color: inherit;
 }
+
+.older-movies {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+}
+
+.featured-movie-small {
+  max-width: 180px;
+}
+
+.featured-movie-small .featured-movie-title {
+  font-size: 0.9rem;
+}
 </style>