Merge pull request 'Add possibility to link news post' (#31) from link-news into main

Reviewed-on: #31

content/en/news/001-a-new-indie-studio.md

@@ -1,4 +1,5 @@
 ---
+id: 001-a-new-indie-studio
 title: Frog Collective a new indie game development studio!
 date: 04/21/2024
 ---

content/en/news/002-coldridge-is-out.md

@@ -1,4 +1,5 @@
 ---
+id: 002-coldridge-is-out
 title: Our first game is out
 date: 10/28/2024
 ---

content/en/news/003-one-year-already.md

@@ -1,4 +1,5 @@
 ---
+id: 003-one-year-already
 title: Frog Collective is just over a year old!
 date: 03/31/2025
 ---

content/fr/news/001-un-nouveau-studio-indie.md

@@ -1,4 +1,5 @@
 ---
+id: 001-un-nouveau-studio-indie
 title: Frog Collective, un nouveau studio de développement de jeux indépendants !
 date: 21/04/2024
 ---

content/fr/news/002-coldridge-est-sorti.md

@@ -1,4 +1,5 @@
 ---
+id: 002-coldridge-est-sorti
 title: Notre premier jeu est sorti !
 date: 10/28/2024
 ---

content/fr/news/003-un-an-deja.md

@@ -1,4 +1,5 @@
 ---
+id: 003-un-an-deja
 title: Frog Collective fête son premier anniversaire !
 date: 03/31/2025
 ---

src/pages/index/news.html

@@ -9,10 +9,11 @@
 ) %}
   {% for news in glob("news/*.md") | sort(reverse=true, attribute='path') | map('markdown') %}
     <div class="news">
-      <div class="news--header">
+      <a class="section--anchor" id="{{news.meta.id}}"></a>
+      <a href="/{{ context.current_language }}/#{{news.meta.id}}" class="news--header-link">
         <h3 class="news--date">{{ news.meta.date }}</h3>
         <h2 class="news--title">{{ news.meta.title }}</h2>
-      </div>
+      </a>
       <div class="news--content">
         <style>{{ news.meta.css }}</style>
         {{ news }}

src/pages/index/news.scss

@@ -6,17 +6,22 @@
     display: flex;
     flex-direction: column;
     
-    &--header {
+    &--header-link {
         display: flex;
         color: var(--color-on-dark);
         background: var(--background-red);
         padding: var(--space-small) var(--space-medium);
         align-items: center;
         gap: var(--space-small);
+        text-decoration: none;
 
         @media($mobile-breakpoint) {
             flex-direction: column;
         }
+
+        &:hover {
+            background: var(--background-dark);
+        }
     }
 
     &--date {