Refactor featured movie section to display latest movies dynamically with improved layout

.guix/modules/datat-website-package.scm

@@ -4,7 +4,7 @@
   #:use-module (guix git-download)
   #:use-module (guix packages)
   #:use-module (guix build-system ruby)
-  #:use-module (gnu packages ruby))
+  #:use-module (gnu packages ruby-xyz))
 
 (define vcs-file?
   (or (git-predicate (string-append (current-source-directory) "/../.."))

_config.yml

@@ -57,6 +57,7 @@ paginate_path: /page:num/
 exclude:
   - .asset-cache
   - .bundle
+  - guix.scm
   - .codeclimate.yml
   - .editorconfig
   - .gitattributes

channels.scm

@@ -0,0 +1,11 @@
+(list (channel
+        (name 'guix)
+        (url "https://git.guix.gnu.org/guix.git")
+        (branch "master")
+        (commit
+          "3a7556ccb6eb02771a9dac63504473d32d24e6f3")
+        (introduction
+          (make-channel-introduction
+            "9edb3f66fd807b096b48283debdcddccfea34bad"
+            (openpgp-fingerprint
+              "BBB0 2DDF 2CEA F6A8 0D1D  E643 A2A0 6DF2 A33A 54FA")))))

index.md

@@ -10,8 +10,88 @@ introduction: |
 actions:
   - label: "Telegram-ryhmä"
     url: "/telegram"
-  - label: "Uusin dataleffa"
-    url: "/leffa"
   - label: "Liity jäseneksi"
     url: "https://rekisteri.datat.fi/apply"
 ---
+
+{% 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-movies {
+  margin-top: 1rem;
+}
+
+.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;
+  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);
+}
+
+.featured-movie-link img {
+  width: 100%;
+  border-radius: 0.25em;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.featured-movie-link:hover img {
+  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
+}
+
+.featured-movie-title {
+  display: block;
+  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>