feat: french traduction

.vscode/extensions.json

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

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-11 17:28+0200\n"
+"POT-Creation-Date: 2024-06-12 16:55+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: fr\n"
@@ -31,9 +31,9 @@ msgstr "Jeux"
 msgid "News"
 msgstr "Actus"
 
-#: src/lib/nav.html:20 src/pages/index/footer.html:11
-msgid "Mail"
-msgstr "Mail"
+#: src/lib/nav.html:17 src/pages/index/contact.html:4
+msgid "Contact"
+msgstr "Contact"
 
 #: src/pages/index.html:6
 msgid "Frog Collective is a french indie computer game studio."
@@ -41,6 +41,15 @@ msgstr ""
 "Frog Collective est un studio indépendant de développement de jeux vidéos"
 " basé en France."
 
+#: src/pages/index/contact.html:13
+msgid ""
+"If you want to contact us about our games, for business inquiries, press "
+"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 autre, veuillez cliquer sur le bouton ci-"
+"dessous."
+
 #: src/pages/index/footer.html:5
 msgid "Copyright © Frog Collective 2024. All rights reserved."
 msgstr "Copyright © Frog Collective 2024. Tous droits réservés."

src/lib/nav.html

@@ -14,6 +14,7 @@
       <a href="#collective" class="nav-bar--menu-link">{{ gettext('Collective') }}</a>
       <a href="#games" class="nav-bar--menu-link">{{ gettext('Games') }}</a>
       <a href="#news" class="nav-bar--menu-link">{{ gettext('News') }}</a>
+      <a href="#contact" class="nav-bar--menu-link">{{ gettext('Contact') }}</a>
     </div>
     <div class="nav-bar--links">
       {% with class_prefix="nav-bar" %}

src/lib/social_links.html

@@ -4,7 +4,6 @@
   </a>
 {% endmacro %}
 
-{{ social_link(gettext('Mail'), 'mail-fill.svg', 'mailto:contact@frog-collective.com') }}
 {{ social_link('Itch.io', 'itchio-fill.svg', 'https://frog-collective.itch.io/') }}
 {{ social_link('Youtube', 'youtube-fill.svg', 'https://www.youtube.com/@FrogCoGames') }}
 {{ social_link('Twitch', 'twitch-fill.svg', 'https://www.twitch.tv/frogcollective') }}

src/pages/index.html

@@ -23,6 +23,7 @@
             {% include "pages/index/presentation.html" %}
             {% include "pages/index/games.html" %}
             {% include "pages/index/news.html" %}
+            {% include "pages/index/contact.html" %}
         </div>
         {% include "pages/index/footer.html" %}
     </body>

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,22 @@
+{% 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>
+  <a class="contact--button" href="mailto:contact@frog-collective.com">
+    <img class="contact--button-icon" src="/img/mail-fill.svg"></img>
+    Contact Us
+  </a>
+</div>
+{% endcall %}

src/pages/index/contact.scss

@@ -0,0 +1,21 @@
+.contact {
+
+    &--content {
+        @extend %card;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &--button {
+        @extend %button;
+        align-self: center;
+        align-items: center;
+        display: flex;
+    }
+
+    &--button-icon {
+        width: 2.2em;
+        filter: invert(100%);
+        padding-right: var(--space-small);
+    }
+}

src/pages/index/footer.scss

@@ -43,10 +43,6 @@
         align-items: center;
         justify-content: end;
 
-        @media($mobile-breakpoint) {
-            flex-direction: column;
-        }
-
         img {
             width: 1.8em;
             filter: invert(100%);

src/pages/index/news.html

@@ -13,10 +13,9 @@
         <h3 class="news--date">{{ news.meta.date }}</h3>
         <h2 class="news--title">{{ news.meta.title }}</h2>
       </div>
-        <div class="news--content">
-          <style>{{ news.meta.css }}</style>
-          {{ news }}
-        </div>
+      <div class="news--content">
+        <style>{{ news.meta.css }}</style>
+        {{ news }}
       </div>
     </div>
   {% endfor %}

src/pages/index/news.scss

@@ -5,7 +5,6 @@
 
     display: flex;
     flex-direction: column;
-    margin-bottom: var(--space-medium);
     
     &--header {
         display: flex;