ry
/
datat.fi
10
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

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

This commit is contained in:
OtsoBear 2025-12-01 12:04:51 +02:00
parent 4c60c06e30
commit a4e209b887
1 changed files with 44 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
index.md
View File

@ -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>