fix: issue where games were not sorted correctly

Reviewed-on: #31

.gitattributes

@@ -0,0 +1 @@
+webm filter=lfs diff=lfs merge=lfs -text

.vscode/extensions.json

@@ -1,5 +1,4 @@
 {
     "recommendations": [
-        "ms-vscode.live-server"
     ]
 }

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-    "livePreview.autoRefreshPreview": "On Changes to Saved Files"
+    "livePreview.autoRefreshPreview": "On Changes to Saved Files",
+    "cSpell.words": [
+        "Fulfill"
+    ]
 }

.vscode/tasks.json

@@ -6,7 +6,8 @@
         {
             "label": "Start dev server",
             "type": "shell",
-            "command": "browser-sync start --server build/ --watch"
+            "command": "browser-sync start --server build/ --watch",
+            "problemMatcher": []
         },
         {
             "label": "Build",
@@ -17,7 +18,14 @@
         {
             "label": "Extract localization messages",
             "type": "shell",
-            "command": "nox -R -s extract_messages"
+            "command": "nox -R -s extract_messages",
+            "problemMatcher": []
+        },
+        {
+            "label": "Compile localization messages",
+            "type": "shell",
+            "command": "nox -R -s compile_messages",
+            "problemMatcher": []
         }
     ]
 }

README.md

@@ -43,25 +43,45 @@ Date used for the news is the date the file was created in git.
 
 ### HTML generation
 
-We use https://git.collectivit.org/collectivit/jean-web to generate the
+We use <https://git.frog-collective.com/collectivit/jean-web> to generate the
 website. Jinja2 templates are stored in the src directory, and use the content
 loaded from the 'content' folder to generate static pages. Content can be
 markdown document with metadata, or json files.
 
 ### CSS
+
 We use the BEM naming convention with the scheme
 
 ```css
 .block--element__modifier
 ```
 
-See https://getbem.com/naming/ for insigths on the BEM naming convention.
+See <https://getbem.com/naming/> for insigths on the BEM naming convention.
 
-We use SASS as a CSS extension language (https://sass-lang.com/).
+We use SASS as a CSS extension language (<https://sass-lang.com/>).
 
 ### Dev env
 
 Install the following dependencies to be able to test the website locally:
+
 ```sh
 npm install -g browser-sync
 ```
+
+Then it's possible to start a local server using the command:
+
+```sh
+browser-sync start --server build/ --watch
+```
+
+To extract localization messages:
+
+```sh
+nox -s extract_messages
+```
+
+Then to compile them once localization is done:
+
+```sh
+nox -s compile_messages
+```

config/.htaccess

@@ -4,7 +4,7 @@ Options -Indexes -MultiViews
 # assets.
 RewriteEngine on
 
-RewriteRule \.(css|js|jpg|png|gif|woff|woff2|svg)$ - [NC,L]
+RewriteRule \.(css|js|jpg|png|gif|woff|woff2|svg|ico|webm)$ - [NC,L]
 
 RewriteCond %{HTTP:Accept-Language} ^(fr) [NC]
 RewriteCond %{REQUEST_URI} !^/(fr|en)/

content/en/games/01-coldridge.md

@@ -0,0 +1,15 @@
+---
+title: ColdRidge
+picture: games/coldridge.png
+picture_alt: in-game screenshot of a cow-boy riding in wilderness
+website: https://store.steampowered.com/app/3052500/ColdRidge/
+steam_widget_url: https://store.steampowered.com/widget/3052500/
+itch_io_url: https://frog-collective.itch.io/coldridge
+itch_io_widget_url: https://itch.io/embed/3308356?link_color=ed1e1e
+presskit_url: presskits/coldridge.html
+discord_url: https://discord.gg/GzmYu7Vu4s
+---
+
+Step into the rugged boots of a prospector and venture into the untamed wilderness of ColdRidge, a land shrouded in mystery and plagued by a sinister curse.
+Your mission: uncover precious resources, tackle intricate puzzles, and strategically manage contracts to maximize your gains.
+Unveil the enigmatic secrets of the guild and their grip on ColdRidge in this captivating adventure.

content/en/games/02-dieforadie.md

@@ -0,0 +1,13 @@
+---
+title: Die for a Die
+picture: games/dieforadie.jpg
+picture_alt: illustration of a mysterious city in the sky of the realm of Amartia
+website: https://store.steampowered.com/app/4107940/Die_for_a_Die/
+steam_widget_url: https://store.steampowered.com/widget/4107940/
+itch_io_url:
+itch_io_widget_url:
+presskit_url:
+discord_url: https://discord.gg/GzmYu7Vu4s
+---
+
+Explore a choose-your-own-adventure book, fight your enemies with powerful dice, craft a unique bag of dice and choose your path in the realm of Amartia.

content/en/games/the-guild.md

@@ -1,13 +0,0 @@
----
-title: The Guild
-picture: games/the-guild.png
-picture_alt: in-game screenshot of a cow-boy riding in wilderness
-website: https://the-guild.frog-collective.com
----
-
-Saddle up, partner! Welcome to "Frontier Fortune: Prospector's Quest" where the
-dusty trails of the Old West lead to riches beyond your wildest dreams. In this
-thrilling adventure, you step into the boots of a rugged prospector, venturing
-into uncharted territories to uncover precious resources for a greedy guild
-hungry for wealth and power.
-

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

@@ -0,0 +1,41 @@
+---
+id: 001-a-new-indie-studio
+title: Frog Collective a new indie game development studio!
+date: 04/21/2024
+---
+
+**Hi everyone and welcome!**
+We are Adrien and Aurel, two friends passionate about video games. We've been working in the game industry for the past 12 years.
+We met at Amplitude Studios about 10 years ago (maybe more). We've worked on all strategy games made by Amplitude!
+These are huge and complex projects, so we started doing some game jams to have a fresh approach and try some crazy ideas.
+It's been a long time since we spoke around a beer about "Someday we'll try to go indie and make our games".
+
+**This time has come!** Last year we started to plan this project seriously (mostly by doing administrative stuff and planning for our future company).
+We plan to make games on a whole smaller scope than what we did before, to be able to test new ideas and to change the context more regularly.
+We started to work on our project in April, at first it was a wild mix of crazy game design ideas, administrative papers and technical setups.
+
+Talking about technical setup, the first step was to define the whole tech stack (the software we'll use to make our games).
+The open source software is not as strong in the video game industry as in other domains like web development.
+As a side goal, we aim to help this community and projects grow, so we choose to use as much open-source software as we can and hope to contribute in the future.
+
+<center>
+    <img src="/img/godot-logo.svg" alt="Godot Engine Logo" class="news--image" style="height: 200px;">
+</center>
+
+**We also want to thank Corentin** (a close friend). He set up all the toolchain we use to develop our games, and he did that with some panache.
+We use only self-hosted open-source tools.
+
+But enough ramble, after this luxurious technical setup, we started to work on a prototype and things aligned themself from week to week.
+At the end of the first month, we asked our friends to test our prototype.
+Guided by their priceless feedback, we continued the development of our first game.
+We are almost ready to announce it, but I'll keep that for a later post :).
+
+Nevertheless, we are proud to present our game studio: **Frog Collective.**
+
+<center>
+    <img src="/img/logo-black.png" alt="Frog Collective Logo" class="news--image" style="height: 300px;">
+</center>
+
+We hope you'll like what we will do together.
+
+Thanks for the reading!

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

@@ -0,0 +1,36 @@
+---
+id: 002-coldridge-is-out
+title: Our first game is out
+date: 10/28/2024
+---
+
+**Hi everyone! Big announcement today!**
+
+At the time of writing the last post, we wanted to share our adventure with this blog a lot more often, but I think we were quite busy making our first game 😄.
+It's never too late though, so here is a recap of what we did.
+
+As described in the last post, we started to work on Frog Collective in April.
+We did the pre-production of our first project during this first month while dealing with administrative stuff (we are in France; it's a known fact that administrative paperwork is quite intense here).
+The company was officially created in May.
+
+At that time, we started to know where we wanted to go with our first game, so we started to work on its title, the Steam page and trailer to start to communicate as soon as possible.
+The game: "[Coldridge](https://store.steampowered.com/app/3052500/ColdRidge/)", is a blend between board game and roguelite mechanisms.
+You need to explore a procedurally generated map to discover resources requested by the all powerful guild of the city of Coldridge.
+
+<center>
+    <img src="/img/coldridge/screenshot03.jpg" alt="Screenshot of Coldridge game" class="news--image" style="width: 90%;">
+</center>
+
+Our initial plan was to develop the game in five months; making a small game was quite liberating for us!
+We published [Coldridge Trailer](https://www.youtube.com/watch?v=XYTgZaV4av4) on June 24 and the demo one month later, on July 23.
+The reception was amazing, so we decided to put two more months on the project to add a lot more content and a narrative storyline.
+
+In October, we attended GodotCon, where we gave a talk about [how we approach the Godot engine to make Coldridge](https://www.youtube.com/watch?v=_7pzX737mok).
+Watch it if you want to know a bit more about how we did it.
+Don't hesitate to come ask us questions about details on our social networks; the presentation is quite dense, so we don't delve into details.
+
+**The game is out today!** We hope you'll enjoy it as much as we liked working on it.
+
+<center>
+  <iframe src="https://store.steampowered.com/widget/3052500/" frameborder="0" width="646" height="190"></iframe>
+</center>

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

@@ -0,0 +1,46 @@
+---
+id: 003-one-year-already
+title: Frog Collective is just over a year old!
+date: 03/31/2025
+---
+
+It's been one year already since we started working on Frog Collective.
+So it's time to make a quick recap of what we did last year.
+
+As described in the last posts, we started our adventures last year in April.
+We worked on our first game [Coldridge](https://store.steampowered.com/app/3052500/ColdRidge/) and published it seven months later.
+
+After the release, we continued working on balancing things and adding some content to offer to the community.
+And finally, took some rest and enjoyed the holiday season.
+
+Going back to work, we wanted to test new things, leaving board games to test the first person exploration genre.
+We did know that the topic was ambitious, especially knowing that we were only two people on the team.
+So we put ourselves on a deadline of three months to see what was achievable in a reasonable time span.
+
+We worked on different ideas; some were very convincing, others needed a lot more work to be playable.
+To illustrate a bit, here is a sneak peek of what the prototype looks like:
+
+<center>
+  <video controls style="width: 90%; max-width: 1280">
+    <source src="/videos/the_outpost.webm" type="video/webm">
+    <img src="/img/the-outpost/screenshot.jpg" alt="Screenshot of outpost prototype" class="news--image" style="width: 90%;">
+  </video>
+</center>
+
+At the end of this research phase, we were quite happy with what we did, but starting to list everything we needed to do, we planned that we would not finish anything in years.
+So we made the hard choice to stop the project (maybe we will continue later?) and moved to another game idea we had (a more reasonable one).
+We'll start working on it next week, so stay tuned; the next blog post will tell you more about it 😉.
+Just for teasing, we can say that we are coming back to some roguelite stuff!
+
+While working on this prototype, we also did a thing that we wanted to do since the Steam release of Coldridge.
+**We published Coldridge on Itch.io!**
+
+<center>
+  <div class="game--widget">
+    <iframe frameborder="0" src="https://itch.io/embed/3308356?link_color=ed1e1e" width="646" height="175"><a href="https://frog-collective.itch.io/coldridge">Coldridge</a></iframe>
+  </div>
+</center>
+
+Itch.io is one of the most creative video game places you can find; we are so happy to have our game on it!
+
+*PS: If you want to know more about what we did, Aurel talked about it in [a conference](https://www.youtube.com/watch?v=_6uYOMKb-QM) (in French).*

content/en/news/004-do-you-like-playing-with-dice.md

@@ -0,0 +1,49 @@
+---
+id: 004-do-you-like-playing-with-dice
+title: Do you like playing with dice?
+date: 10/28/2025
+---
+
+**Hi everyone! 🎲**
+
+As promised in the last post, we are ready to announce our new project!
+
+<center>
+    <img src="/img/die-for-a-die/capsule.jpg" alt="Die for a Die" class="news--image" style="width: 60%;">
+</center>
+
+I love dice! I'll always remember playing dice games with my grandmother during family reunions.
+It is **the** object that represents the randomness, the chaos.
+
+There are a lot of dice in video games, but they are often secondary, used as a representation of the RNG, but not really at the heart of the game.
+What we want with this game is to put the pleasure of playing with dice at the center of the experience.
+
+We started to prototype things in April, using ... real dice and paper.
+
+<center>
+    <img src="/img/die-for-a-die/prototype.jpg" alt="Paper prototype of the game" class="news--image" style="width: 90%;">
+</center>
+
+Once we were happy with the core gameplay, we started to prototype it in Godot and started to iterate on the gameplay loop.
+
+In the meantime, we worked on the artistic direction, trying to find the best visuals for this game.
+After trying a lot of things, one idea kept our attention: the idea to play in a book! And more specifically in a choose-your-own-adventure book.
+We loved reading these books while being younger and thought that they fit well with the dice and role-play theme.
+
+<center>
+    <img src="/img/die-for-a-die/screenshot_combat.png" alt="Screenshot of Die for a Die combat" class="news--image" style="width: 90%;">
+</center>
+
+We believe that this game can be a great one! If you are interested, you can wishlist it on Steam and come join us on our discord server to talk with us about the development of the game.
+
+<div class="contact--button-group">
+    <a class="game--button" href="https://discord.gg/GzmYu7Vu4s" target="_blank">
+      <img class="contact--button-icon" src="/img/discord-fill.svg"></img>
+      Discord
+    </a>
+
+    <a class="game--button" href="https://store.steampowered.com/app/4107940/Die_for_a_Die/" target="_blank">
+      <img class="contact--button-icon" src="/img/steam-fill.svg"></img>
+      Steam
+    </a>
+</div>

content/en/news/2024-21-05-test-news.md

@@ -1,15 +0,0 @@
----
-title: This is a long news title to test how it presents on little resolutions
----
-
-Here we specialize in creating bite-sized adventures that anyone can pick up
-and play, but only the true gaming aficionados can conquer. Think of us as the
-David to the Goliaths of the gaming industry. Our games might be small, but
-they will keep you coming back for more. Now, you might be wondering, how on
-earth do two people manage to steer the ship in this vast ocean of pixels?
-Well, let me tell you, it's all about that sweet, sweet collective
-decision-making magic. We're like yin and yang, balancing each other's quirks
-and strengths as we navigate the treacherous waters of game development.
-
-**markdown here too**
-

content/fr/games/01-coldridge.md

@@ -0,0 +1,15 @@
+---
+title: ColdRidge
+picture: games/coldridge.png
+picture_alt: Capture d'écran d'un prospecteur chevauchant les contrées sauvages de ColdRidge.
+website: https://store.steampowered.com/app/3052500/ColdRidge/
+steam_widget_url: https://store.steampowered.com/widget/3052500/
+itch_io_url: https://frog-collective.itch.io/coldridge
+itch_io_widget_url: https://itch.io/embed/3308356?link_color=ed1e1e
+presskit_url: presskits/coldridge.html
+discord_url: https://discord.gg/GzmYu7Vu4s
+---
+
+Enfilez les bottes d'un prospecteur et aventurez-vous dans les étendues sauvages de ColdRidge, une terre entourée de mystère et frappée par une sinistre malédiction.
+Votre mission : découvrir de précieuses ressources, résoudre des énigmes complexes et gérer stratégiquement des contrats pour maximiser vos gains.
+Découvrez les secrets énigmatiques de la guilde et son emprise sur ColdRidge dans cette aventure captivante.

content/fr/games/02-dieforadie.md

@@ -0,0 +1,13 @@
+---
+title: Die for a Die
+picture: games/dieforadie.jpg
+picture_alt: Illustration dd'une mystérieuse cité dans le ciel d'Amartia
+website: https://store.steampowered.com/app/4107940/Die_for_a_Die/
+steam_widget_url: https://store.steampowered.com/widget/4107940/
+itch_io_url:
+itch_io_widget_url:
+presskit_url:
+discord_url: https://discord.gg/GzmYu7Vu4s
+---
+
+Explorez un livre dont vous êtes le héros, combattez vos ennemis avec de puissants dés, assemblez un sac de dés unique et choisissez votre chemin dans le royaume d'Amartia.

content/fr/games/the-guild.md

@@ -1,22 +0,0 @@
----
-title: The Guild
-picture: games/the-guild.png
-picture_alt: Image de jeux avec un cowboy
-website: https://the-guild.frog-collective.com
----
-
-En selle, cher collaborateur !
-
-Bienvenue dans "Frontière Fortune : la quête du prospecteur" où des traces
-poussiéreuses dans le vieil ouest américan vous mèneront a des richesses au
-delà de vos rêves les plus fous¹ ! Dans cette aventure palpiteuse, vous
-marcherez dans les bottes d'un solide prospecteur, s'aventurant en terre
-inconnue afin de dévoiler de précieuses resources pour le compte d'une guilde
-assoifée de pouvoir illégitime et de plus-value : *La guilde des gens de
-droite*.
-
-¹ <sup>Sans couverture sociale. Vous êtes responsable de l'achat et de
-l'entretien de votre cheval. La guilde des gens de droite ne peux être tenue
-pour responsable si vous vous faỉtes manger par un ours. La guilde des gens de
-droite se réserve le droit de modifier unilatéralement les termes de votre
-contrat même si vous n'en avez pas signé.</sup>

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

@@ -0,0 +1,39 @@
+---
+id: 001-un-nouveau-studio-indie
+title: Frog Collective, un nouveau studio de développement de jeux indépendants !
+date: 21/04/2024
+---
+
+**Salut à toutes et tous et bienvenue !**
+Nous sommes Adrien et Aurel, deux amis passionnés de jeux vidéo. Nous travaillons dans l'industrie du jeu depuis plus de 12 ans.
+Nous nous sommes rencontrés chez Amplitude Studios il y a environ 10 ans (peut-être un peu plus). Nous avons travaillé ensemble sur tous les jeux de stratégie réalisés par Amplitude, des projets énormes et complexes.
+Petit à petit, nous avons commencé à faire des game jams pour essayer les idées qui nous passaient par la tête et tenter de nouvelles approches.
+Cela faisait un moment que nos discussions autour d’une bière finissaient par "Un jour, on lancera notre studio indépendant pour faire nos propres jeux"
+
+**Le moment tant attendu est arrivé !** L'année dernière, nous avons commencé à planifier ce projet sérieusement (principalement en faisant des démarches administratives et en planifiant notre futur projet).
+Notre but : faire des jeux à taille humaine afin de pouvoir tester de nouvelles idées et de changer de contexte plus régulièrement.
+Nous avons commencé à travailler sur notre premier jeu en avril. C’était au début un mélange d'idées plus ou moins saugrenues de game design entremêlées d’administratifs et de mises en place techniques.
+
+En ce qui concerne la configuration technique, la première étape a consisté à définir l'ensemble de l’écosystème technologique que nous utiliserons pour créer nos jeux.
+Les logiciels libres ne sont pas aussi répandus dans l'industrie du jeu vidéo que dans d'autres domaines tels que le développement web.
+Nous avons également comme objectif de soutenir les communautés et projets open source. C’est la raison pour laquelle nous avons donc choisi d'utiliser autant de logiciels libres que possible et espérons y contribuer à l'avenir.
+
+<center>
+    <img src="/img/godot-logo.svg" alt="Logo du Godot Engine" class="news--image" style="height: 200px;">
+</center>
+
+**Nous tenons également à remercier Corentin** (un ami proche) qui a mis en place, avec un certain panache, toute la chaîne d'outils que nous utilisons pour développer nos jeux.
+Nous n'utilisons que des outils open-source et tout est auto-hébergé.
+
+Mais trêve de bavardage, confortée par la mise en place de cette luxueuse installation technique, nous avons commencé à travailler sur un prototype et les choses se sont assemblées petit à petit.
+A la fin du premier mois, nous avons demandé à nos amis de tester notre prototype. Guidés par leurs précieux commentaires, nous avons poursuivi le développement de notre premier jeu. 
+
+Nous sommes fiers de vous présenter notre studio de jeu : **Frog Collective.**
+
+<center>
+    <img src="/img/logo-black.png" alt="Logo de Frog Collective" class="news--image" style="height: 300px;">
+</center>
+
+Nous espérons que vous aimerez ce que nous ferons ensemble.
+
+Merci pour votre lecture !

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

@@ -0,0 +1,36 @@
+---
+id: 002-coldridge-est-sorti
+title: Notre premier jeu est sorti !
+date: 28/10/2024
+---
+
+**Salut tout le monde ! Aujourd'hui on a une annonce importante**
+
+Au moment on l'on écrivait notre précédent post, notre objectif était de vous partager nos aventures plus souvent, mais je crois que nous étions trop occupés à développer notre premier jeu 😄.
+Il n'est jamais trop tard ! voici donc le résumé de ce qu'il s'est passé.
+
+Comme décrit dans le post précédent, nous avons commencé à travailler pour Frog Collective en avril.
+Nous avons travaillé sur la pré-production de notre premier projet pendant le premier mois tout en avançant sur les dossiers administratifs (vous savez qu'en France, on ne rigole pas avec ça).
+L'entreprise a été officiellement créée en mai.
+
+À ce moment, nous commençions à savoir où nous voulions aller avec notre premier jeu. On a donc commencé à chercher son nom, travailler sur la page Steam et le trailer pour commencer à communiquer le plus rapidement possible.
+Le jeu : "[Coldridge](https://store.steampowered.com/app/3052500/ColdRidge/)", est un jeu de plateau mixé avec des éléments de roguelite.
+Vous devez explorer une carte générée procéduralement pour découvrir des resources demandées par la toute puissante guilde de la ville de Coldridge.
+
+<center>
+    <img src="/img/coldridge/screenshot03.jpg" alt="Screenshot of Coldridge game" class="news--image" style="width: 90%;">
+</center>
+
+Notre plan initial était de développer le jeu en cinq mois; créer un petit jeu a été libérateur pour nous !
+Nous avons publié le [trailer de Coldridge](https://www.youtube.com/watch?v=XYTgZaV4av4) le 24 juin et la démo un mois plus tard, le 23 juillet.
+La réception a été excellente, nous avons donc décidé d'investir deux mois supplémentaires dans le projet pour ajouter plus de contenu et une trame narrative.
+
+En octobre, nous avons participé à la GodotCon, où nous avons donné une conférence sur la [manière dont nous avons approché le moteur Godot pour faire Coldridge](https://www.youtube.com/watch?v=_7pzX737mok) (conférence en anglais).
+Regardez là si vous souhaitez en savoir plus sur comment le jeu a été développé.
+N'hésitez pas à venir nous poser des questions sur les réseaux sociaux ; la présentation est assez dense, nous n'avons pas eu le temps de rentrer dans les détails.
+
+**Le jeu est sorti aujourd'hui !** Nous espérons que vous aimerez y jouer autant que nous avons aimé travailler dessus.
+
+<center>
+  <iframe src="https://store.steampowered.com/widget/3052500/" frameborder="0" width="646" height="190"></iframe>
+</center>

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

@@ -0,0 +1,47 @@
+---
+id: 003-un-an-deja
+title: Frog Collective fête son premier anniversaire !
+date: 31/03/2025
+---
+
+Ça fait déjà un an que l'on a commencé l'aventure Frog Collective.
+Il est temps de faire un point sur ce que l'on a fait l'année passée.
+
+Comme décris dans les posts précédents, nous nous sommes lancé dans l'aventure en avril dernier.
+Nous avons développé notre premier jeu [Coldridge](https://store.steampowered.com/app/3052500/ColdRidge/) en sept mois.
+
+Après la sortie, nous avons continué à travailler sur l'équilibrage et sur l'ajout de nouveaux contenus à offrir à la communauté.
+Et finalement, un repos bien mérité pour les fêtes de fin d'années.
+
+De retour au travail, nous voulions tester de nouvelles choses, s'éloigner des jeux de plateaux et expérimenter dans le genre des jeux d'exploration à la première personne.
+Nous savions que l'objectif était très ambitieux, compte tenu du fait que nous ne sommes que deux dans l'équipe.
+Nous nous sommes donné trois mois pour explorer le sujet et trouver ce qu'il était possible de faire dans un délai raisonnable.
+
+Nous avons travaillé différentes idées ; certaines très réussies, d'autres nécessitait beaucoup plus de travail pour être réellement jouable.
+Pour illustrer un peu, voici un petit extrait de notre prototype:
+
+<center>
+  <video controls style="width: 90%; max-width: 1280">
+    <source src="/videos/the_outpost.webm" type="video/webm">
+    <img src="/img/the-outpost/screenshot.jpg" alt="Screenshot of outpost prototype" class="news--image" style="width: 90%;">
+  </video>
+</center>
+
+À la fin de cette phase de recherche, nous étions très contents du résultat accompli.
+Mais en listant le travail nécessaire pour finir ce projet, notre plan montrait que nous ne sortirions rien avant plusieurs années.
+Nous avons pris la difficile décision d'arrêter ce projet (peut-être qu'on le relancera un jour ?) et nous sommes partis sur une autre idée de jeu (plus raisonnable).
+Nous allons commencer à travailler dessus la semaine prochaine, restez attentif ; le prochain post vous en dira plus 😉.
+Juste pour attiser votre curiosité, nous revenons sur le genre du roguelite !
+
+Pendant que nous travaillions sur ces recherches, nous avons aussi fait une chose que nous voulions faire depuis la sortie Steam de Coldridge.
+**Nous avons sorti Coldridge sur Itch.io**
+
+<center>
+  <div class="game--widget">
+    <iframe frameborder="0" src="https://itch.io/embed/3308356?link_color=ed1e1e" width="646" height="175"><a href="https://frog-collective.itch.io/coldridge">Coldridge</a></iframe>
+  </div>
+</center>
+
+Itch.io est une des plateforme de jeu vidéo les plus créatives que l'on puisse trouver ; nous sommes très content d'avoir notre jeu dessus !
+
+*PS: Si vous voulez en savoir plus sur ce que l'on a fait, Aurel à donnée [une conférence](https://www.youtube.com/watch?v=_6uYOMKb-QM) détaillant nos expérimentations.*

content/fr/news/004-est-ce-que-vous-aimez-les-des.md

@@ -0,0 +1,49 @@
+---
+id: 004-est-ce-que-vous-aimez-les-des
+title: Est-ce que vous aimez les dés ?
+date: 28/10/2025
+---
+
+**Salut tout le monde ! 🎲**
+
+Comme promis dans le billet précédent, nous sommes prêts à annoncer notre nouveau projet !
+
+<center>
+    <img src="/img/die-for-a-die/capsule.jpg" alt="Die for a Die" class="news--image" style="width: 60%;">
+</center>
+
+J'aime les dés ! Je me souviens encore des parties de jeu de dés avec ma grand-mère pendant les réunions familiales.
+C'est l'objet par excellence qui représente l'aléatoire, le chaos.
+
+Il y a beaucoup de dés dans les jeux vidéos, mais ils restent souvent secondaires, utilisés comme représentation de l'aléatoire, mais pas réellement au coeur du gameplay.
+Dans ce jeu, nous avons envie de mettre le plaisir de jouer avec des dés au centre de l'expérience.
+
+Nous avons commencé le prototypage en avril, en utilisant ... des vrai dés et du papier.
+
+<center>
+    <img src="/img/die-for-a-die/prototype.jpg" alt="Prototype papier du jeu" class="news--image" style="width: 90%;">
+</center>
+
+Une fois satisfait de la boucle de gameplay principale, nous avons commencé le développement d'un prototype dans Godot.
+
+Pendant ce temps, nous avons travaillé sur la direction artistique, essayant de trouver le visuel le plus adapté pour ce jeu.
+Après avoir essayé de nombreuses choses, une idée a gardé notre attention : l'idée de jouer directement dans un livre ! Plus précisément dans un livre dont vous êtes le héros.
+Nous gardons un souvenir formidable de ces bouquins et pensons qu'ils seront le support parfait pour le thème des dés et du jeu de rôle.
+
+<center>
+    <img src="/img/die-for-a-die/screenshot_combat.png" alt="Screenshot d'un combat de Die for a Die" class="news--image" style="width: 90%;">
+</center>
+
+Nous croyons que cet assemblage peut faire un excellent jeu ! Si vous êtes intéressé, vous pouvez ajouter le jeu dans votre liste de souhait sur Steam et venir sur notre serveur Discord pour parler avec nous de son développement.
+
+<div class="contact--button-group">
+    <a class="game--button" href="https://discord.gg/GzmYu7Vu4s" target="_blank">
+      <img class="contact--button-icon" src="/img/discord-fill.svg"></img>
+      Discord
+    </a>
+
+    <a class="game--button" href="https://store.steampowered.com/app/4107940/Die_for_a_Die/" target="_blank">
+      <img class="contact--button-icon" src="/img/steam-fill.svg"></img>
+      Steam
+    </a>
+</div>

content/fr/news/2024-21-05-test-news.md

@@ -1,15 +0,0 @@
----
-title: Obtention du KBis
----
-
-Le KBis a été obtenu et par voix de conséquence, Aurel et Adri sont désormais
-chefs d'entreprise. Le chemin a été long et compliqué, mais la preuve est là
-encore une fois : quand on veut on peut. L'évènement a été célébré rapidemment
-en envoyant quelques "bangers" sur Discord, puis ils se sont remis au travail,
-car dans la vie rien n'est gratuit, on a rien sans rien.
-
-La suite très bientôt puisqu'Adri ne se repose pas sur ses lauriers et projette
-de voter Raphaël Glucksman dès prochaines élections européennes. On ne peut
-qu'admirer un tel mindset, et on a hâte de le voir aller aux soirées petit
-fours de Guillaume de Fondaumière pour courtiser quelques subventions au
-ministre de la culture.

locale/fr/LC_MESSAGES/site.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2024-06-06 16:07+0200\n"
+"POT-Creation-Date: 2025-06-30 17:07+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: fr\n"
@@ -17,7 +17,7 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Generated-By: Babel 2.15.0\n"
+"Generated-By: Babel 2.17.0\n"
 
 #: src/lib/nav.html:14
 msgid "Collective"
@@ -31,31 +31,58 @@ msgstr "Jeux"
 msgid "News"
 msgstr "Actus"
 
-#: src/lib/nav.html:17 src/pages/index/footer.html:6
+#: src/lib/nav.html:17 src/pages/index/contact.html:4
 msgid "Contact"
 msgstr "Contact"
 
-#: src/pages/index.html:6
+#: src/lib/page.html:6
 msgid "Frog Collective is a french indie computer game studio."
 msgstr ""
 "Frog Collective est un studio indépendant de développement de jeux vidéos"
 " basé en France."
 
-#: src/pages/index/presentation.html:11
+#: src/pages/index/contact.html:13
-#, fuzzy
+msgid ""
-msgid "Frog Collective"
+"If you want to contact us about our games, for business inquiries, press "
-msgstr "Collectif"
+"or anything else please click on the button below."
+msgstr ""
+"Si vous souhaitez nous contacter au sujet de nos jeux, pour des questions"
+" commerciales, presse ou autres, veuillez cliquer sur le bouton ci-"
+"dessous."
 
-#: src/pages/index/presentation.html:18
+#: src/pages/index/contact.html:20
-msgid "Who are we ?"
+msgid "Contact Us"
-msgstr "Qui est nous ?"
+msgstr "Nous Contacter"
+
+#: src/pages/index/contact.html:26
+msgid "ColdRidge Press Kit"
+msgstr ""
+
+#: src/pages/index/footer.html:5
+msgid "Copyright © Frog Collective 2025. All rights reserved."
+msgstr "Copyright © Frog Collective 2025. Tous droits réservés."
+
+#: src/pages/index/games.html:45
+msgid "Discord"
+msgstr ""
+
+#: src/pages/index/games.html:52
+msgid "Press Kit"
+msgstr ""
+
+#: src/pages/index/presentation.html:11
+msgid "Frog Collective"
+msgstr ""
 
 #: src/pages/index/presentation.html:20
 msgid ""
-"We are Frog Collective, a very small indie game development company with "
+"We are Frog Collective, a small indie game development company with years"
-"years of experience under our belts. We've decided to team up to make "
+" of experience under our belts. We've decided to team up to make games "
-"games together, driven by our passion and guided by collective decisions."
+"together, driven by our passion."
 msgstr ""
+"Nous sommes Frog Collective, un petit studio de développement de jeux "
+"vidéo indépendants. Après plusieurs années d'expérience à notre actif, "
+"nous avons décidé de nous associer pour créer nos propres jeux vidéo."
 
 #: src/pages/index/presentation.html:26
 msgid ""
@@ -65,28 +92,36 @@ msgid ""
 "can pick up and play, yet remain challenging for those who wish to "
 "explore every corner."
 msgstr ""
+"Loin des gros studios typiques avec des équipes massives et des open "
+"spaces en enfilade, nous sommes seulement deux âmes passionnées munies de"
+" nos ordinateurs. Nous voulons créer des aventures à taille humaine, "
+"accessible mais restant un défi pour celles et ceux qui souhaitent en "
+"explorer tous les recoins."
 
 #: src/pages/index/presentation.html:33
 msgid ""
 "So, if you're tired of the same old cookie-cutter games and fancy a "
 "little dose of indie charm, strap in and join us on this wild ride!"
 msgstr ""
+"Alors, si vous en avez assez des jeux un peu trop formatés, que vous avez"
+" envie d'une petite dose de charme indé, attachez vos ceintures et "
+"décollez avec nous dans cette aventure !"
 
 #: src/pages/index/presentation.html:38
 msgid "Let's have some fun!"
-msgstr ""
+msgstr "C'est parti !"
 
 #: src/pages/index/presentation.html:42
 msgid "The team"
-msgstr "L’équipe"
+msgstr "L'équipe"
 
 #: src/pages/index/presentation.html:46
 msgid "Aurel works on art"
-msgstr "Aurel s’occupe de l’art"
+msgstr "Aurel s'occupe de l'art"
 
 #: src/pages/index/presentation.html:47
 msgid "drawing of Aurel's face"
-msgstr "Dessin du visage d’Aurel"
+msgstr "Dessin du visage d'Aurel"
 
 #: src/pages/index/presentation.html:52
 msgid "Adrien works on programming"
@@ -94,5 +129,5 @@ msgstr "Adrien s'occupe de la programmation"
 
 #: src/pages/index/presentation.html:53
 msgid "drawing of Adrien's face"
-msgstr "dessin du visage d’Adrien"
+msgstr "dessin du visage d'Adrien"
 

noxfile.py

@@ -25,7 +25,7 @@ def build(session: Session) -> None:
     """Run unit tests."""
     session.install(
         "nodeenv",
-        "git+https://git.collectivit.org/collectivit/jean-web",
+        "git+https://git.frog-collective.com/collectivit/jean-web",
         "babel",
         "jinja2"
     )
@@ -63,7 +63,7 @@ def build(session: Session) -> None:
 
 @session
 def extract_messages(session: Session) -> None:
-    session.install("babel", "jinja2")
+    session.install("babel", "jinja2", "setuptools")
 
     with TemporaryDirectory() as tmp_dir:
         messages_file = Path(tmp_dir) / "messages.po"

site.py

@@ -10,3 +10,4 @@ if "FROG_LOCALE_DIR" in environ:
     site.load_translations("site", environ["FROG_LOCALE_DIR"], "fr")
 
 site.render('pages/index.html', 'index.html')
+site.render('pages/presskits/coldridge.html', 'presskits/coldridge.html')

src/assets/img/bluesky-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 11.3884C11.0942 9.62673 8.62833 6.34423 6.335 4.7259C4.13833 3.17506 3.30083 3.4434 2.75167 3.69256C2.11583 3.9784 2 4.95506 2 5.52839C2 6.10339 2.315 10.2367 2.52 10.9276C3.19917 13.2076 5.61417 13.9776 7.83917 13.7309C4.57917 14.2142 1.68333 15.4017 5.48083 19.6292C9.65833 23.9542 11.2058 18.7017 12 16.0392C12.7942 18.7017 13.7083 23.7651 18.4442 19.6292C22 16.0392 19.4208 14.2142 16.1608 13.7309C18.3858 13.9784 20.8008 13.2076 21.48 10.9276C21.685 10.2376 22 6.10256 22 5.52923C22 4.95423 21.8842 3.97839 21.2483 3.6909C20.6992 3.44256 19.8617 3.17423 17.665 4.72423C15.3717 6.34506 12.9058 9.62756 12 11.3884Z"></path></svg>

src/assets/img/discord-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.3034 5.33716C17.9344 4.71103 16.4805 4.2547 14.9629 4C14.7719 4.32899 14.5596 4.77471 14.411 5.12492C12.7969 4.89144 11.1944 4.89144 9.60255 5.12492C9.45397 4.77471 9.2311 4.32899 9.05068 4C7.52251 4.2547 6.06861 4.71103 4.70915 5.33716C1.96053 9.39111 1.21766 13.3495 1.5891 17.2549C3.41443 18.5815 5.17612 19.388 6.90701 19.9187C7.33151 19.3456 7.71356 18.73 8.04255 18.0827C7.41641 17.8492 6.82211 17.5627 6.24904 17.2231C6.39762 17.117 6.5462 17.0003 6.68416 16.8835C10.1438 18.4648 13.8911 18.4648 17.3082 16.8835C17.4568 17.0003 17.5948 17.117 17.7434 17.2231C17.1703 17.5627 16.576 17.8492 15.9499 18.0827C16.2789 18.73 16.6609 19.3456 17.0854 19.9187C18.8152 19.388 20.5875 18.5815 22.4033 17.2549C22.8596 12.7341 21.6806 8.80747 19.3034 5.33716ZM8.5201 14.8459C7.48007 14.8459 6.63107 13.9014 6.63107 12.7447C6.63107 11.5879 7.45884 10.6434 8.5201 10.6434C9.57071 10.6434 10.4303 11.5879 10.4091 12.7447C10.4091 13.9014 9.57071 14.8459 8.5201 14.8459ZM15.4936 14.8459C14.4535 14.8459 13.6034 13.9014 13.6034 12.7447C13.6034 11.5879 14.4323 10.6434 15.4936 10.6434C16.5442 10.6434 17.4038 11.5879 17.3825 12.7447C17.3825 13.9014 16.5548 14.8459 15.4936 14.8459Z"></path></svg>

src/assets/img/information-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 9.5C12.8284 9.5 13.5 8.82843 13.5 8C13.5 7.17157 12.8284 6.5 12 6.5C11.1716 6.5 10.5 7.17157 10.5 8C10.5 8.82843 11.1716 9.5 12 9.5ZM14 15H13V10.5H10V12.5H11V15H10V17H14V15Z"></path></svg>

src/assets/img/instagram-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.0281 2.00073C14.1535 2.00259 14.7238 2.00855 15.2166 2.02322L15.4107 2.02956C15.6349 2.03753 15.8561 2.04753 16.1228 2.06003C17.1869 2.1092 17.9128 2.27753 18.5503 2.52503C19.2094 2.7792 19.7661 3.12253 20.3219 3.67837C20.8769 4.2342 21.2203 4.79253 21.4753 5.45003C21.7219 6.0867 21.8903 6.81337 21.9403 7.87753C21.9522 8.1442 21.9618 8.3654 21.9697 8.58964L21.976 8.78373C21.9906 9.27647 21.9973 9.84686 21.9994 10.9723L22.0002 11.7179C22.0003 11.809 22.0003 11.903 22.0003 12L22.0002 12.2821L21.9996 13.0278C21.9977 14.1532 21.9918 14.7236 21.9771 15.2163L21.9707 15.4104C21.9628 15.6347 21.9528 15.8559 21.9403 16.1225C21.8911 17.1867 21.7219 17.9125 21.4753 18.55C21.2211 19.2092 20.8769 19.7659 20.3219 20.3217C19.7661 20.8767 19.2069 21.22 18.5503 21.475C17.9128 21.7217 17.1869 21.89 16.1228 21.94C15.8561 21.9519 15.6349 21.9616 15.4107 21.9694L15.2166 21.9757C14.7238 21.9904 14.1535 21.997 13.0281 21.9992L12.2824 22C12.1913 22 12.0973 22 12.0003 22L11.7182 22L10.9725 21.9993C9.8471 21.9975 9.27672 21.9915 8.78397 21.9768L8.58989 21.9705C8.36564 21.9625 8.14444 21.9525 7.87778 21.94C6.81361 21.8909 6.08861 21.7217 5.45028 21.475C4.79194 21.2209 4.23444 20.8767 3.67861 20.3217C3.12278 19.7659 2.78028 19.2067 2.52528 18.55C2.27778 17.9125 2.11028 17.1867 2.06028 16.1225C2.0484 15.8559 2.03871 15.6347 2.03086 15.4104L2.02457 15.2163C2.00994 14.7236 2.00327 14.1532 2.00111 13.0278L2.00098 10.9723C2.00284 9.84686 2.00879 9.27647 2.02346 8.78373L2.02981 8.58964C2.03778 8.3654 2.04778 8.1442 2.06028 7.87753C2.10944 6.81253 2.27778 6.08753 2.52528 5.45003C2.77944 4.7917 3.12278 4.2342 3.67861 3.67837C4.23444 3.12253 4.79278 2.78003 5.45028 2.52503C6.08778 2.27753 6.81278 2.11003 7.87778 2.06003C8.14444 2.04816 8.36564 2.03847 8.58989 2.03062L8.78397 2.02433C9.27672 2.00969 9.8471 2.00302 10.9725 2.00086L13.0281 2.00073ZM12.0003 7.00003C9.23738 7.00003 7.00028 9.23956 7.00028 12C7.00028 14.7629 9.23981 17 12.0003 17C14.7632 17 17.0003 14.7605 17.0003 12C17.0003 9.23713 14.7607 7.00003 12.0003 7.00003ZM12.0003 9.00003C13.6572 9.00003 15.0003 10.3427 15.0003 12C15.0003 13.6569 13.6576 15 12.0003 15C10.3434 15 9.00028 13.6574 9.00028 12C9.00028 10.3431 10.3429 9.00003 12.0003 9.00003ZM17.2503 5.50003C16.561 5.50003 16.0003 6.05994 16.0003 6.74918C16.0003 7.43843 16.5602 7.9992 17.2503 7.9992C17.9395 7.9992 18.5003 7.4393 18.5003 6.74918C18.5003 6.05994 17.9386 5.49917 17.2503 5.50003Z"></path></svg>

src/assets/img/itchio-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="235.452" width="261.728" viewBox="0 0 245.371 220.736"><path d="M31.99 1.365C21.287 7.72.2 31.945 0 38.298v10.516C0 62.144 12.46 73.86 23.773 73.86c13.584 0 24.902-11.258 24.903-24.62 0 13.362 10.93 24.62 24.515 24.62 13.586 0 24.165-11.258 24.165-24.62 0 13.362 11.622 24.62 25.207 24.62h.246c13.586 0 25.208-11.258 25.208-24.62 0 13.362 10.58 24.62 24.164 24.62 13.585 0 24.515-11.258 24.515-24.62 0 13.362 11.32 24.62 24.903 24.62 11.313 0 23.773-11.714 23.773-25.046V38.298c-.2-6.354-21.287-30.58-31.988-36.933C180.118.197 157.056-.005 122.685 0c-34.37.003-81.228.54-90.697 1.365zm65.194 66.217a28.025 28.025 0 0 1-4.78 6.155c-5.128 5.014-12.157 8.122-19.906 8.122a28.482 28.482 0 0 1-19.948-8.126c-1.858-1.82-3.27-3.766-4.563-6.032l-.006.004c-1.292 2.27-3.092 4.215-4.954 6.037a28.5 28.5 0 0 1-19.948 8.12c-.934 0-1.906-.258-2.692-.528-1.092 11.372-1.553 22.24-1.716 30.164l-.002.045c-.02 4.024-.04 7.333-.06 11.93.21 23.86-2.363 77.334 10.52 90.473 19.964 4.655 56.7 6.775 93.555 6.788h.006c36.854-.013 73.59-2.133 93.554-6.788 12.883-13.14 10.31-66.614 10.52-90.474-.022-4.596-.04-7.905-.06-11.93l-.003-.045c-.162-7.926-.623-18.793-1.715-30.165-.786.27-1.757.528-2.692.528a28.5 28.5 0 0 1-19.948-8.12c-1.862-1.822-3.662-3.766-4.955-6.037l-.006-.004c-1.294 2.266-2.705 4.213-4.563 6.032a28.48 28.48 0 0 1-19.947 8.125c-7.748 0-14.778-3.11-19.906-8.123a28.025 28.025 0 0 1-4.78-6.155 27.99 27.99 0 0 1-4.736 6.155 28.49 28.49 0 0 1-19.95 8.124c-.27 0-.54-.012-.81-.02h-.007c-.27.008-.54.02-.813.02a28.49 28.49 0 0 1-19.95-8.123 27.992 27.992 0 0 1-4.736-6.155zm-20.486 26.49l-.002.01h.015c8.113.017 15.32 0 24.25 9.746 7.028-.737 14.372-1.105 21.722-1.094h.006c7.35-.01 14.694.357 21.723 1.094 8.93-9.747 16.137-9.73 24.25-9.746h.014l-.002-.01c3.833 0 19.166 0 29.85 30.007L210 165.244c8.504 30.624-2.723 31.373-16.727 31.4-20.768-.773-32.267-15.855-32.267-30.935-11.496 1.884-24.907 2.826-38.318 2.827h-.006c-13.412 0-26.823-.943-38.318-2.827 0 15.08-11.5 30.162-32.267 30.935-14.004-.027-25.23-.775-16.726-31.4L46.85 124.08C57.534 94.073 72.867 94.073 76.7 94.073zm45.985 23.582v.006c-.02.02-21.863 20.08-25.79 27.215l14.304-.573v12.474c0 .584 5.74.346 11.486.08h.006c5.744.266 11.485.504 11.485-.08v-12.474l14.304.573c-3.928-7.135-25.79-27.215-25.79-27.215v-.006l-.003.002z" color="#000"/></svg>

src/assets/img/steam-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.0052 2C6.75435 2 2.44852 6.05 2.04102 11.1975L7.40102 13.4125C7.85518 13.1033 8.40352 12.9208 8.99435 12.9208C9.04685 12.9208 9.09852 12.9242 9.15102 12.9258L11.5352 9.47417V9.425C11.5352 7.34583 13.2252 5.655 15.3052 5.655C17.3835 5.655 19.0752 7.3475 19.0752 9.4275C19.0752 11.5075 17.3835 13.1983 15.3052 13.1983H15.2177L11.821 15.6242C11.821 15.6675 11.8243 15.7117 11.8243 15.7567C11.8243 17.3192 10.5618 18.5867 8.99935 18.5867C7.63685 18.5867 6.48602 17.6092 6.22352 16.3142L2.38602 14.725C3.57435 18.9225 7.42768 22 12.0052 22C17.5277 22 22.0043 17.5225 22.0043 12C22.0043 6.4775 17.5268 2 12.0052 2ZM7.07852 16.6667C7.29685 17.1192 7.67352 17.4992 8.17352 17.7083C9.25435 18.1575 10.501 17.645 10.9502 16.5625C11.1693 16.0375 11.1702 15.4633 10.9543 14.9383C10.7385 14.4133 10.3293 14.0042 9.80685 13.7858C9.28685 13.5692 8.73185 13.5783 8.24185 13.7608L9.51102 14.2858C10.3077 14.6192 10.6852 15.5358 10.3518 16.3317C10.021 17.1292 9.10435 17.5067 8.30685 17.175L7.07852 16.6667ZM17.8185 9.4225C17.8185 8.0375 16.691 6.91 15.306 6.91C13.9185 6.91 12.7935 8.0375 12.7935 9.4225C12.7935 10.81 13.9185 11.935 15.306 11.935C16.6918 11.935 17.8185 10.81 17.8185 9.4225ZM15.3118 7.53C16.3527 7.53 17.2002 8.375 17.2002 9.41833C17.2002 10.4608 16.3527 11.3058 15.3118 11.3058C14.2677 11.3058 13.4243 10.4608 13.4243 9.41833C13.4243 8.375 14.2685 7.53 15.3118 7.53Z"></path></svg>

src/assets/img/threads-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.7051 11.1081C16.543 8.12137 14.911 6.41148 12.1708 6.39398C10.5193 6.3838 9.13771 7.08389 8.29233 8.36664L9.79941 9.40046C10.4334 8.43852 11.4342 8.24015 12.1593 8.24685C13.0616 8.2526 13.7425 8.51494 14.1832 9.02653C14.5038 9.39899 14.7183 9.91367 14.8245 10.5632C14.0246 10.4273 13.1594 10.3855 12.2345 10.4385C9.62919 10.5886 7.95426 12.1081 8.06675 14.2194C8.12384 15.2904 8.65739 16.2118 9.56906 16.8137C10.3399 17.3225 11.3326 17.5713 12.3644 17.515C13.727 17.4403 14.7959 16.9205 15.5416 15.9699C16.1079 15.248 16.4661 14.3125 16.6243 13.1338C17.2737 13.5257 17.7549 14.0414 18.0207 14.6613C18.4726 15.7151 18.499 17.4469 17.086 18.8587C15.848 20.0955 14.3598 20.6306 12.1108 20.6471C9.61601 20.6286 7.72924 19.8285 6.50253 18.269C5.35381 16.8088 4.76014 14.6996 4.73799 12C4.76014 9.30038 5.35381 7.19117 6.50253 5.73092C7.72924 4.17147 9.61597 3.37141 12.1107 3.35287C14.6236 3.37155 16.5433 4.17547 17.8169 5.74244C18.4415 6.51086 18.9123 7.47721 19.2227 8.60394L20.9888 8.13274C20.6125 6.74587 20.0205 5.55078 19.2148 4.55966C17.582 2.55073 15.1816 1.52134 12.1046 1.5C9.03385 1.52127 6.6725 2.55457 5.08614 4.57117C3.67451 6.3657 2.94634 8.87742 2.92188 12.0074C2.94634 15.1373 3.67451 17.6343 5.08614 19.4289C6.6725 21.4454 9.04616 22.4788 12.1169 22.5C14.847 22.4811 16.7713 21.7663 18.3566 20.1825C20.4307 18.1103 20.3682 15.513 19.6846 13.9185C19.1595 12.6943 18.1141 11.7129 16.7051 11.1081ZM12.2669 15.6648C11.125 15.7291 9.93869 15.2166 9.88019 14.1188C9.83684 13.3048 10.4595 12.3966 12.3369 12.2884C13.2594 12.2352 14.1138 12.2976 14.8701 12.463C14.6538 15.1648 13.3848 15.6035 12.2669 15.6648Z"></path></svg>

src/lib/css/typo.scss

@@ -2,7 +2,7 @@
   font-family: 'Knewave';
   font-style: normal;
   font-weight: 400;
-  src: url(/fonts/Knewave.woff) format('woff');
+  src: url(/fonts/Knewave-Light.woff) format('woff');
 }
 
 @mixin montserrat($style, $weight, $file) {
@@ -41,16 +41,20 @@ h1 {
 h2 {
     margin: 0 0 var(--space-medium) 0;
 
+    font-family: 'Knewave';
     font-size: var(--fz-2);
     font-weight: bold;
+    letter-spacing: 0.1rem;
     text-transform: uppercase;
 }
 
 h3 {
     margin: 0 0 var(--space-medium) 0;
 
+    font-family: 'Knewave';
     font-size: var(--fz-3);
     font-weight: bold;
+    letter-spacing: 0.1rem;
 }
 
 h4 {

src/lib/css/variables.scss

@@ -1,4 +1,4 @@
-$mobile-breakpoint: "max-width: 768px";
+$mobile-breakpoint: "max-width: 970px";
 
 :root {
     --background-dark: url("/img/background-black-red.jpg");
@@ -25,7 +25,7 @@ $mobile-breakpoint: "max-width: 768px";
 
     --fz-1: 4rem;
     --fz-2: 2rem;
-    --fz-3: 1.5rem;
+    --fz-3: 1.3rem;
     --fz-4: 1.125rem;
 
     --border-radius-small: 3px;
@@ -38,7 +38,7 @@ $mobile-breakpoint: "max-width: 768px";
     @media ($mobile-breakpoint) {
         --fz-1: 2.8rem;
         --fz-2: 1.825rem;
-        --fz-3: 1.5rem;
+        --fz-3: 1.25rem;
         --fz-4: 1.125rem;
     }
 }

src/lib/nav.html

@@ -11,31 +11,15 @@
   <div class="nav-bar--content">
     <img class="nav-bar--logo" src="/img/nav-logo.png"></img>
     <div class="nav-bar--menu">
-      <a href="#collective" class="nav-bar--menu-link">{{ gettext('Collective') }}</a>
+      <a href="/{{ context.current_language }}/#collective" class="nav-bar--menu-link">{{ gettext('Collective') }}</a>
-      <a href="#games" class="nav-bar--menu-link">{{ gettext('Games') }}</a>
+      <a href="/{{ context.current_language }}/#games" class="nav-bar--menu-link">{{ gettext('Games') }}</a>
-      <a href="#news" class="nav-bar--menu-link">{{ gettext('News') }}</a>
+      <a href="/{{ context.current_language }}/#news" class="nav-bar--menu-link">{{ gettext('News') }}</a>
-      <a href="#" class="nav-bar--menu-link">{{ gettext('Contact') }}</a>
+      <a href="/{{ context.current_language }}/#contact" class="nav-bar--menu-link">{{ gettext('Contact') }}</a>
     </div>
-    <div class="nav-bar--separator"></div>
     <div class="nav-bar--links">
-      <a class="nav-bar--link" href="mailto:contact@frog-collective.com">
+      {% with class_prefix="nav-bar" %}
-          <img class="nav-bar--link-icon" src="/img/mail-fill.svg" alt-text="{{ gettext('Mail') }}"></img>
+      {% include "lib/social_links.html" %}
-      </a>
+      {% endwith %}
-      <a class="nav-bar--link" href="https://www.youtube.com/@FrogCoGames" target="_blank">
-          <img class="nav-bar--link-icon" src="/img/youtube-fill.svg" alt-text="Youtube"></img>
-      </a>
-      <a class="nav-bar--link" href="https://www.twitch.tv/frogcollective" target="_blank">
-          <img class="nav-bar--link-icon" src="/img/twitch-fill.svg" alt-text="Twitch"></img>
-      </a>
-      <a class="nav-bar--link" href="https://mastodon.social/@frogcollective" target="_blank">
-          <img class="nav-bar--link-icon" src="/img/mastodon-fill.svg" alt-text="Mastodon"></img>
-      </a>
-      <a class="nav-bar--link" href="https://x.com/FrogCoGames" target="_blank">
-          <img class="nav-bar--link-icon" src="/img/twitter-x-line.svg" alt-text="Twitter - X"></img>
-      </a>
-      <a class="nav-bar--link" href="https://www.facebook.com/profile.php?id=61560180067337" target="_blank">
-          <img class="nav-bar--link-icon" src="/img/facebook-circle-fill.svg" alt-text="Facebook"></img>
-      </a>
     </div>
     <div class="nav-bar--separator"></div>
     <div class="nav-bar--languages">

src/lib/nav.scss

@@ -111,6 +111,7 @@
     }
 
     &--separator {
+        grid-area: 1 / 4 / 2 / 5;
         align-self: center;
         height: 40%;
         width: 2px;
@@ -124,6 +125,7 @@
     }
 
     &--languages {
+        grid-area: 1 / 5 / 2 / 6;
         align-self: center;
         padding: 0 var(--space-xsmall);
 
@@ -184,23 +186,24 @@
     }
 
     &--links {
+        grid-area: 1 / 3 / 2 / 4;
         display: flex;
         justify-self: end;
         align-self: center;
 
-        padding: var(--space-small);
-
         @media($mobile-breakpoint) {
             display: none;
         }
     }
 
     &--link {
+        @extend %nav-button;
         display: flex;
+        padding: var(--space-xsmall);
     }
 
     &--link-icon {
-        width: 2em;
+        width: 1.8em;
         filter: invert(100%);
     }
 }

src/lib/page.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="description" content="{{ gettext('Frog Collective is a french indie computer game studio.') }}">
+        <title>Frog Collective</title>
+        <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
+        <link rel="stylesheet" href="/style.css"/>
+        <script type="module" src="/js/index.js"></script>
+        {% if context.current_language == "fr" %}
+            <style>
+                p {
+                    text-align: justify;
+                }
+            </style>
+        {% endif %}
+    </head>
+    <body>
+        {% include "lib/nav.html" %}
+
+        <div class="content">
+            {% block content %}
+            {% endblock %}
+        </div>
+        {% include "pages/index/footer.html" %}
+    </body>
+</html>

src/lib/section.html

@@ -3,7 +3,8 @@
   id,
   title_picture,
   title_picture_hover = None,
-  title_picture_offset = "20px",
+  title_picture_active = None,
+  title_picture_offset = "0px",
   title_color = "var(--color-text)")
 -%}
   <div class="section">
@@ -14,6 +15,7 @@
         color: {{ title_color }};
         --picture-url:url('{{ title_picture }}');
         --picture-hover-url:url('{{ title_picture_hover or title_picture }}');
+        --picture-active-url:url('{{ title_picture_active or title_picture }}');
         --picture-offset: {{ title_picture_offset }};
       "
     >

src/lib/section.scss

@@ -18,18 +18,14 @@
     }
 
     &--title {
-        z-index: -1;
-
         background: transparent;
         position: relative;
-        margin-top: 120px;
+        margin-top: 110px;
         align-self: center;
 
         &::before {
-            z-index: -1;
-
             position: absolute;
-            top: -120px;
+            top: -110px;
             left: var(--picture-offset);
             width: 150px;
             height: 125px;
@@ -42,6 +38,10 @@
             background-image: var(--picture-hover-url);
         }
 
+        &:active::before {
+            background-image: var(--picture-active-url);
+        }
+
         @media ($mobile-breakpoint) {
             margin-top: 70px;
 

src/lib/social_links.html

@@ -0,0 +1,15 @@
+{% macro social_link(name, icon_name, link) %}
+  <a class="{{class_prefix}}--link" target="_blank" href="{{link}}">
+    <img class="{{class_prefix}}--link-icon" src="/img/{{icon_name}}" alt-text="{{name}}"></img>
+  </a>
+{% endmacro %}
+
+{{ social_link('Steam', 'steam-fill.svg', 'https://store.steampowered.com/dev/frog-collective') }}
+{{ social_link('Itch.io', 'itchio-fill.svg', 'https://frog-collective.itch.io/') }}
+{{ social_link('Discord', 'discord-fill.svg', 'https://discord.gg/GzmYu7Vu4s') }}
+{{ social_link('Youtube', 'youtube-fill.svg', 'https://www.youtube.com/@frog-collective') }}
+{{ social_link('Twitch', 'twitch-fill.svg', 'https://www.twitch.tv/frogcollective') }}
+{{ social_link('Mastodon', 'mastodon-fill.svg', 'https://mastodon.social/@frogcollective') }}
+{{ social_link('Bluesky', 'bluesky-fill.svg', 'https://bsky.app/profile/frogcollective.bsky.social') }}
+{{ social_link('Twitter - X', 'twitter-x-line.svg', 'https://x.com/FrogCoGames') }}
+

src/pages/index.html

@@ -1,30 +1,8 @@
-<!doctype html>
+{% extends "lib/page.html" %}
-<html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="description" content="{{ gettext('Frog Collective is a french indie computer game studio.') }}">
-        <title>Frog Collective</title>
-        <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
-        <link rel="stylesheet" href="/style.css"/>
-        <script type="module" src="/js/index.js"></script>
-        {% if context.current_language == "fr" %}
-            <style>
-                p {
-                    text-align: justify;
-                }
-            </style>
-        {% endif %}
-    </head>
-    <body>
-        {% include "lib/nav.html" %}
 
-        <div class="content">
+{% block content %}
     {% include "pages/index/presentation.html" %}
     {% include "pages/index/games.html" %}
     {% include "pages/index/news.html" %}
-        </div>
+    {% include "pages/index/contact.html" %}
-        {% include "pages/index/footer.html" %}
+{% endblock %}
-    </body>
-</html>
-

src/pages/index/_style.scss

@@ -2,3 +2,4 @@
 @import 'games.scss';
 @import 'news.scss';
 @import 'presentation.scss';
+@import 'contact.scss';

src/pages/index/contact.html

@@ -0,0 +1,32 @@
+{% from "lib/section.html" import section %}
+
+{% call section(
+  gettext("Contact"),
+  "contact",
+  "/img/section-collective.png",
+  title_picture_hover = "/img/section-collective-hover.png",
+  title_picture_active = "/img/section-collective-active.png",
+  title_picture_offset = "50px"
+  ) %}
+<div class="contact--content">
+  <p>
+    {% trans %}
+      If you want to contact us about our games, for business inquiries, press or anything else please click on the button below. 
+    {% endtrans %}
+  </p>
+  <div class="contact--button-group">
+    <a class="contact--button" href="mailto:contact@frog-collective.com">
+      <img class="contact--button-icon" src="/img/mail-fill.svg"></img>
+      {% trans %}
+      Contact Us
+      {% endtrans %}
+    </a>
+    <a class="contact--button" href="presskits/coldridge.html">
+      <img class="contact--button-icon" src="/img/information-fill.svg"></img>
+      {% trans %}
+      ColdRidge Press Kit
+      {% endtrans %}
+    </a>
+  </div>
+</div>
+{% endcall %}

src/pages/index/contact.scss

@@ -0,0 +1,32 @@
+.contact {
+
+    &--content {
+        @extend %card;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &--button-group {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+
+        @media($mobile-breakpoint) {
+            display: contents;
+        }
+    }
+
+    &--button {
+        @extend %button;
+        align-self: center;
+        align-items: center;
+        display: flex;
+        margin: var(--space-xsmall) var(--space-large);
+    }
+
+    &--button-icon {
+        width: 2.2em;
+        filter: invert(100%);
+        padding-right: var(--space-small);
+    }
+}

src/pages/index/footer.html

@@ -1,25 +1,15 @@
 <div class="footer">
     <div class="footer--content">
         <img class="footer--logo" src="/img/footer-logo.png">
+        <div class="footer--copyright">
+            {% trans %}
+                Copyright © Frog Collective 2025. All rights reserved.
+            {% endtrans %}
+        </div>
         <div class="footer--links">
-            <a href="mailto:contact@frog-collective.com">
+            {% with class_prefix="footer" %}
-                <img src="/img/mail-fill.svg" alt-text=="{{ gettext('Mail') }}"></img>
+            {% include "lib/social_links.html" %}
-            </a>
+            {% endwith %}
-            <a href="https://www.youtube.com/@FrogCoGames" target="_blank">
-                <img src="/img/youtube-fill.svg" alt-text=="Youtube"></img>
-            </a>
-            <a href="https://www.twitch.tv/frogcollective" target="_blank">
-                <img src="/img/twitch-fill.svg" alt-text=="Twitch"></img>
-            </a>
-            <a href="https://mastodon.social/@frogcollective" target="_blank">
-                <img src="/img/mastodon-fill.svg" alt-text=="Mastodon"></img>
-            </a>
-            <a href="https://x.com/FrogCoGames" target="_blank">
-                <img src="/img/twitter-x-line.svg" alt-text=="Twitter - X"></img>
-            </a>
-            <a href="https://www.facebook.com/profile.php?id=61560180067337" target="_blank">
-                <img src="/img/facebook-circle-fill.svg" alt-text=="Facebook"></img>
-            </a>
         </div>
     </div>
 </div>

src/pages/index/footer.scss

@@ -28,20 +28,34 @@
         width: 100px;
     }
 
-    &--links {
+    &--copyright {
-        flex: 1 1 1px;
         display: flex;
+        flex-grow: 1;
+        align-self: center;
+        justify-content: center;
+        padding: var(--space-medium);
+    }
+
+    &--links {
+        flex: 0 1 1px;
+        display: flex;
+        align-self: center;
         align-items: center;
         justify-content: end;
 
         @media($mobile-breakpoint) {
-            flex-direction: column;
+            display: block;
         }
 
         img {
-            width: 2em;
+            width: 1.8em;
             filter: invert(100%);
         }
     }
 
+    &--link {
+        @extend %button;
+        display: inline-block;
+        padding: var(--space-xsmall);
+    }
 }

src/pages/index/games.html

@@ -6,7 +6,7 @@
   title_picture_offset = "0px",
   title_color = "var(--color-primary)"
 ) %}
-  {% for game in glob("games/*.md") | map('markdown') %}
+  {% for game in glob("games/*.md") | sort(reverse=true, attribute='path') | map('markdown') %}
     <div class="game">
       <div class="game--picture-wrapper">
         <img
@@ -21,7 +21,41 @@
       </div>
       <div class="game--description">
         {{ game }}
-        <a class="game--more-button" href="{{ game.meta.website }}">Learn More</a>
+
+        {% if game.meta.steam_widget_url %}
+        <div class="game--widget">
+          <iframe src="{{ game.meta.steam_widget_url }}" frameborder="0" width="646" height="190"></iframe>
+        </div>
+        {% endif %}
+
+        {% if game.meta.itch_io_widget_url %}
+        <div class="game--widget">
+          <iframe frameborder="0" src="{{ game.meta.itch_io_widget_url }}" width="646" height="175"><a href="{{ game.meta.itch_io_url }}">{{ game.meta.title }} by Frog Collective</a></iframe>
+        </div>
+        {% endif %}
+
+        <div class="game--buttons">
+            <a class="game--steam-button" href="{{ game.meta.website }}" target="_blank">
+              <img class="game--link-icon" src="/img/steam-fill.svg" alt-text="{{name}}"></img>
+              Learn More
+            </a>
+
+            <a class="game--button" href="{{ game.meta.discord_url }}" target="_blank">
+              <img class="contact--button-icon" src="/img/discord-fill.svg"></img>
+              {% trans %}
+              Discord
+              {% endtrans %}
+            </a>
+
+            {% if game.meta.presskit_url %}
+            <a class="game--button" href="{{ game.meta.presskit_url }}">
+              <img class="contact--button-icon" src="/img/information-fill.svg"></img>
+              {% trans %}
+              Press Kit
+              {% endtrans %}
+            </a>
+            {% endif %}
+        </div>
       </div>
     </div>
   {% endfor %}

src/pages/index/games.scss

@@ -5,6 +5,7 @@
     flex-direction: column;
     background: transparent;
     padding: 0;
+    margin-bottom: 50px;
 
     &--picture-wrapper {
         display: flex;
@@ -19,8 +20,6 @@
         background: var(--background-red);
         color: var(--color-on-dark);
         padding: var(--space-small) var(--space-xlarge);
-        font-family: 'Knewave';
-        font-size: 40px;
     }
 
     &--description {
@@ -33,8 +32,53 @@
         }
     }
 
-    &--more-button {
+    &--buttons {
+        display: flex;
+        flex-direction: row;
+        align-self: center;
+
+        @media($mobile-breakpoint) {
+            flex-direction: column;
+        }
+    }
+
+    &--button {
         @extend %button;
-        align-self: end;
+        display: flex;
+        align-self: center;
+        margin: var(--space-small);
+
+        img {
+            width: 2em;
+            filter: invert(100%);
+            margin-right: var(--space-small);
+        }
+    }
+
+    &--steam-button {
+        @extend %button;
+        display: none;
+        
+        @media($mobile-breakpoint) {
+            display: flex;
+            align-self: center;
+            align-items: center;
+            margin-bottom: var(--space-small);
+        }
+
+        img {
+            width: 2em;
+            filter: invert(100%);
+            margin-right: var(--space-small);
+        }
+    }
+
+    &--widget {
+        align-self: center;
+        padding: var(--space-small);
+
+        @media($mobile-breakpoint) {
+            display: none;
+        }
     }
 }

src/pages/index/news.html

@@ -7,18 +7,17 @@
   title_picture_offset="0px",
   title_color = "var(--color-primary)"
 ) %}
-  {% for news in glob("news/*.md") | map('markdown') %}
+  {% 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>
-        {% with creation_date = news | git_creation_date %}
+      <a href="/{{ context.current_language }}/#{{news.meta.id}}" class="news--header-link">
-          <div class="news--date">{{ creation_date.strftime('%d/%m/%Y') }}</div>
+        <h3 class="news--date">{{ news.meta.date }}</h3>
-        {% endwith %}
+        <h2 class="news--title">{{ news.meta.title }}</h2>
-        <h3 class="news--title">{{ news.meta.title }}</h3>
+      </a>
-      </div>
       <div class="news--content">
+        <style>{{ news.meta.css }}</style>
         {{ news }}
       </div>
     </div>
-    </div>
   {% endfor %}
 {% endcall %}

src/pages/index/news.scss

@@ -5,27 +5,29 @@
 
     display: flex;
     flex-direction: column;
-    margin-bottom: var(--space-medium);
     
-    &--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);
-        font-family: 'Knewave';
+        text-decoration: none;
-        font-size: 24px;
 
         @media($mobile-breakpoint) {
             flex-direction: column;
         }
+
+        &:hover {
+            background: var(--background-dark);
+        }
     }
 
     &--date {
         border-right: 2px solid var(--color-on-dark);
         padding-right: var(--space-small);
-        font-weight: bold;
+        margin: 0;
 
         @media($mobile-breakpoint) {
             border-right: 0;
@@ -39,8 +41,7 @@
     &--title {
         flex-grow: 1;
         margin: 0;
-        font-family: 'Knewave';
+        text-transform: none;
-        font-size: 32px;
 
         @media($mobile-breakpoint) {
             text-align: center;
@@ -54,4 +55,9 @@
             padding: var(--space-medium) var(--space-medium);
         }
     }
+
+    &--image {
+        max-width: 100%;
+        margin-bottom: 1em;
+    }
 }

src/pages/index/presentation.html

@@ -12,14 +12,14 @@
   "collective",
   "/img/section-collective.png",
   title_picture_hover = "/img/section-collective-hover.png",
+  title_picture_active = "/img/section-collective-active.png",
   title_picture_offset = "170px"
   ) %}
 <div class="presentation--content">
-  <h2>{{ gettext("Who are we ?") }}</h2>
   <p>
     {% trans %}
-      We are Frog Collective, a very small indie game development company with years of experience under our belts. 
+      We are Frog Collective, a small indie game development company with years of experience under our belts. 
-      We've decided to team up to make games together, driven by our passion and guided by collective decisions.
+      We've decided to team up to make games together, driven by our passion.
     {% endtrans %}
   </p>
   <p>

src/pages/presskits/_style.scss

@@ -0,0 +1,34 @@
+.presskit {
+    &--button {
+        @extend %button;
+        display: block;
+        width: fit-content;
+        margin-bottom: var(--space-medium);
+    }
+
+    &--grid-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+        margin-bottom: var(--space-large);
+
+        @media ($mobile-breakpoint) {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    &--logo-grid-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        gap: 20px;
+        margin-bottom: var(--space-large);
+
+        @media ($mobile-breakpoint) {
+            grid-template-columns: 1fr 1fr;
+        }
+    }
+
+    &--image {
+        width: 100%;
+    }
+}

src/pages/presskits/coldridge.html

@@ -0,0 +1,90 @@
+{% extends "lib/page.html" %}
+
+{% block content %}
+
+<h1 class="section--title">Coldridge - Press Kit</h1>
+
+<h2>Factsheet</h2>
+<ul>
+    <li>Developer: <a href="http://frog-collective.com">Frog Collective</a></li>
+    <li>Publisher: <a href="https://bark.games/">BARK</a></li>
+    <li>Release Date: Q4 2024</li>
+    <li>Platforms: <a href="https://store.steampowered.com/app/3052500/ColdRidge/">PC/Steam (Windows & Linux)</a></li>
+</ul>
+
+<h2>About the Studio</h2>
+<p>
+    Welcome! We're <a href="http://frog-collective.com">Frog Collective</a>, a new indie studio based in France and formed by two AMPLITUDE Studios veterans.
+</p>
+<p>
+    We worked on all of AMPLITUDE Studios' strategy games for the past 13 years (HUMANKIND, ENDLESS franchise) and have now decided to go indie, making 1-2 small but fully fleshed games per year.
+</p>
+<p>
+    We decided to build on Godot because we're believers in open source initiatives for gaming, we hope to do our part and contribute in the future.
+</p>
+
+<h2>About the Publisher</h2>
+<p>
+    The game is published by <a href="https://bark.games/">BARK</a>, a new indie Steam publisher bringing years of experience from mobile publishing and dedicated to help indie games find their audience. They are based in France.
+</p>
+
+<h2>About the Game</h2>
+
+<p>Our first game, Coldridge, is a turn-based exploration game made with Godot, and set in the mystical Wild West.</p>
+
+<p>Coldridge's cosy and relaxing atmosphere is an untraditionnal take on the rogue-lite genre, moving away from fighting mechanics and leaning into exploration.</p>
+
+<p>In this game, players will have to carefully chose contracts, take smart bets and plan their expeditions to fulfill them.</p>
+
+<p>The higher the reward, the higher the risk and players will have to utilize the terrain and their equipment to gain an edge.</p>
+
+<p>As they unlock new characters and objects, players will unlock gameplay depth and unique ways to wander through the plains of Coldridge.</p>
+
+<p>Each playthrough offers fresh challenges and opportunities. See how long you can survive and how deep you can delve into the secrets of Coldridge!</p>
+
+<h2>Trailer</h2>
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/XYTgZaV4av4?si=61UGOTrbNnmIPB2s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+<h2>Images</h2>
+
+<div class="presskit--grid-container">
+    <video autoplay loop class="presskit--image">
+        <source src="/img/coldridge/capsule01.webm" type="video/webm" />
+        <a href="/img/coldridge/capsule01.webm">Download</a>
+    </video>
+    
+    <video autoplay loop class="presskit--image">
+        <source src="/img/coldridge/capsule02.webm" type="video/webm" />
+        <a href="/img/coldridge/capsule02.webm">Download</a>
+    </video>
+
+    <img class="presskit--image" src="/img/coldridge/keyart01.jpg" />
+    <img class="presskit--image" src="/img/coldridge/keyart02.jpg" />
+    <img class="presskit--image" src="/img/coldridge/keyart03.jpg" />
+    <img class="presskit--image" src="/img/coldridge/screenshot01.jpg" />
+    <img class="presskit--image" src="/img/coldridge/screenshot02.jpg" />
+    <img class="presskit--image" src="/img/coldridge/screenshot03.jpg" />
+    <img class="presskit--image" src="/img/coldridge/screenshot04.jpg" />
+    <img class="presskit--image" src="/img/coldridge/coldridge-character-bill.png" />
+    <img class="presskit--image" src="/img/coldridge/coldridge-character-chipeta.png" />
+    <img class="presskit--image" src="/img/coldridge/coldridge-character-david.png" />
+    <img class="presskit--image" src="/img/coldridge/coldridge-character-eddie.png" />
+    <img class="presskit--image" src="/img/coldridge/coldridge-character-harold.png" />
+    <img class="presskit--image" src="/img/coldridge/coldridge-player-explorer.png" />
+    <img class="presskit--image" src="/img/coldridge/coldridge-player-gambler.png" />
+</div>
+
+<h2>Logos</h2>
+
+<img class="presskit--image" src="/img/coldridge/logo-coldridge.png" />
+<div class="presskit--logo-grid-container">
+    <img class="presskit--image" src="/img/logo-bark.png" />
+    <img class="presskit--image" src="/img/nav-logo.png" />
+    <img class="presskit--image" src="/img/logo-black.png" />
+    <img class="presskit--image" src="/img/logo-black-bg.png" />
+</div>
+
+<a class="presskit--button" href="{{ 'presskits/coldridge.zip' | load | write }}">Download All Assets</a>
+
+{% endblock %}

src/style.scss

@@ -9,3 +9,4 @@
 @import 'lib/section.scss';
 
 @import 'pages/index/_style.scss';
+@import 'pages/presskits/_style.scss';