fix: change domain name to frog-collective.com

.vscode/tasks.json

@@ -0,0 +1,23 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Start dev server",
+            "type": "shell",
+            "command": "browser-sync start --server build/ --watch"
+        },
+        {
+            "label": "Build",
+            "group": "build",
+            "type": "shell",
+            "command": "nox -R -s build"
+        },
+        {
+            "label": "Extract localization messages",
+            "type": "shell",
+            "command": "nox -R -s extract_messages"
+        }
+    ]
+}

README.md

@@ -58,3 +58,10 @@ We use the BEM naming convention with the scheme
 See https://getbem.com/naming/ for insigths on the BEM naming convention.
 
 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
+```

content/en/games/the-guild.md

@@ -2,7 +2,7 @@
 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.org
+website: https://the-guild.frog-collective.com
 ---
 
 Saddle up, partner! Welcome to "Frontier Fortune: Prospector's Quest" where the

content/fr/games/the-guild.md

@@ -2,7 +2,7 @@
 title: The Guild
 picture: games/the-guild.png
 picture_alt: Image de jeux avec un cowboy
-website: https://the-guild.frog-collective.org
+website: https://the-guild.frog-collective.com
 ---
 
 En selle, cher collaborateur !

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-05-23 02:12+0200\n"
+"POT-Creation-Date: 2024-06-06 16:07+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: fr\n"
@@ -19,7 +19,7 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.15.0\n"
 
-#: src/lib/nav.html:14 src/pages/index/presentation.html:11
+#: src/lib/nav.html:14
 msgid "Collective"
 msgstr "Collectif"
 
@@ -41,94 +41,58 @@ msgstr ""
 "Frog Collective est un studio indépendant de développement de jeux vidéos"
 " basé en France."
 
+#: src/pages/index/presentation.html:11
+#, fuzzy
+msgid "Frog Collective"
+msgstr "Collectif"
+
 #: src/pages/index/presentation.html:18
 msgid "Who are we ?"
 msgstr "Qui est nous ?"
 
 #: src/pages/index/presentation.html:20
 msgid ""
-"Welcome to the cozy world of the Frog Collective, where big dreams come "
+"We are Frog Collective, a very small indie game development company with "
-"in small packages! We're not your typical gaming behemoth with a massive "
+"years of experience under our belts. We've decided to team up to make "
-"team and towering office buildings. Nope, we're just two passionate souls"
+"games together, driven by our passion and guided by collective decisions."
-" huddled around a couple of computers, fueled by an insatiable love for "
-"crafting little nuggets of joy that won't break the bank."
 msgstr ""
-"Bienvenue dans le monde soyeux de la compagnie des grenouilles, où les "
-"gros rêves sont livrés dans des petits paquets. Nous ne sommes pas votre "
-"turbo-corporation habituelle avec des équipes de fifous et des bureaux au"
-" cœur du 16ème arrondissement. Non, nous sommes justes deux âmes "
-"PASSIONNÉES lovées près de quelques transistors, animés par l'envie "
-"insatiable de confectionner des pépites de joie, que nous vendrons "
-"ensuite au baudaud  contre une somme relativement anectodique."
 
-#: src/pages/index/presentation.html:30
+#: src/pages/index/presentation.html:26
 msgid ""
-"Here we specialize in creating bite-sized adventures that anyone can pick"
+"We're not the typical gaming behemoth with a massive team and towering "
-" up and play, but only the true gaming aficionados can conquer. Think of "
+"office buildings. Nope, we're just two passionate souls huddled around a "
-"us as the David to the Goliaths of the gaming industry. Our games might "
+"couple of computers. We want to create bite-sized adventures that anyone "
-"be small, but they will keep you coming back for more. Now, you might be "
+"can pick up and play, yet remain challenging for those who wish to "
-"wondering, how on earth do two people manage to steer the ship in this "
+"explore every corner."
-"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."
 msgstr ""
-"Nous sommes les spécialiste de l'aventure façon canapé-cocktail, que "
-"n'importe qui peu picorer mais que seuls les vrais PGM peuvent maîtriser,"
-" façon peu subtile de marketter une cible aussi large que le Nevada. "
-"Voyez-nous comme les Davids du Goliath de l'industrie du jeu vidéo "
-"(https://stjv.fr). Nos jeux sont petits, mais vous ne pourrez vous "
-"empêcher d'y revenir, tels de jolis cachets d'oxycodone. Mais, vous vous "
-"demandez peut-être comment deux personnes peuvent se partager la barre "
-"dans cet océan de pixels ? C'est grâce à cette douce, douce magie de la "
-"prise de décision collective. (N.D.T : Chat GPT n'a clairement jamais "
-"fait partie d'une organisation de gauche pour sortir des trucs aussi "
-"cons). Nous sommes le yin et yang, nous tempérant l'un l'autre nos "
-"écueils et nos force, lorsque nous navigons dans les eaux scabreuses du "
-"développement de logiciels vidéo-ludiques (N.D.T, mais par contre il sait"
-" admirablement amener une pointe d'érotisme là où on en attend pas)."
 
-#: src/pages/index/presentation.html:44
+#: src/pages/index/presentation.html:33
 msgid ""
-"Whether it's brainstorming ideas over a late-night pizza session or "
+"So, if you're tired of the same old cookie-cutter games and fancy a "
-"duking it out over the perfect shade of blue for our protagonist's cape, "
+"little dose of indie charm, strap in and join us on this wild ride!"
-"every decision is a team effort. And hey, when you've only got two heads "
-"in the game, you learn to trust each other's instincts real quick. 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 through the "
-"pixelated cosmos. Who knows, you might just discover your new favorite "
-"addiction in the unlikeliest of places. Welcome to Frog Collective – "
-"where small is mighty, and fun knows no bounds!"
 msgstr ""
-"Que ça soit un remue-méninge (pendant les heures de bureau) ou croiser le"
-" fer à propos de la couleur parfaite pour la cape de notre héros, chaque "
-"décision est un travail d'équipe. Et quand vous n'êtes que deux dans le "
-"game, vous apprenez prestement à faire confiance aux instincts de  "
-"l'autre, sauf quand il a tort. Donc, si vous en avez ras la couette des "
-"mêmes vieux jeux à l'emporte-pièce et que vous avez envie d'une petite "
-"dose de charme indé ou de fentanyl, attachez votre ceinture et rejoignez-"
-"nous dans cette chevauchée fantastique dans le cosmos pixelisé. Qui sait,"
-" vous trouverez peut-être votre nouvelle addiction là où vous ne "
-"l'attendiez pas. Bienvenu dans le collectif des batraciens, où le modeste"
-" devient majestueux et le fun ne connaît aucune limite ! Belle journée."
 
-#: src/pages/index/presentation.html:56
+#: src/pages/index/presentation.html:38
+msgid "Let's have some fun!"
+msgstr ""
+
+#: src/pages/index/presentation.html:42
 msgid "The team"
 msgstr "L’équipe"
 
-#: src/pages/index/presentation.html:60
+#: src/pages/index/presentation.html:46
 msgid "Aurel works on art"
 msgstr "Aurel s’occupe de l’art"
 
-#: src/pages/index/presentation.html:61
+#: src/pages/index/presentation.html:47
 msgid "drawing of Aurel's face"
 msgstr "Dessin du visage d’Aurel"
 
-#: src/pages/index/presentation.html:66
+#: src/pages/index/presentation.html:52
 msgid "Adrien works on programming"
 msgstr "Adrien s'occupe de la programmation"
 
-#: src/pages/index/presentation.html:67
+#: src/pages/index/presentation.html:53
 msgid "drawing of Adrien's face"
 msgstr "dessin du visage d’Adrien"
 

src/lib/css/controls.scss

@@ -1,7 +1,7 @@
 %button {
-    --background: var(--color-accent);
+    --background: var(--color-dark);
-    --background-hover: var(--background);
+    --background-hover: var(--color-primary);
-    --color: var(--color-on-accent);
+    --color: var(--color-on-primary);
 
     border-radius: var(--border-radius-small);
     padding: var(--space-small) var(--space-medium);

src/lib/css/variables.scss

@@ -2,20 +2,16 @@ $mobile-breakpoint: "max-width: 768px";
 
 :root {
     --background-dark: url("/img/background-black-red.jpg");
+    --background-red: url("/img/background-red.jpg");
 
     --color-text: #161616;
+    --color-surface: #ffffff;
 
     --color-primary: #DB2937;
-    --color-on-primary: white;
+    --color-on-primary: #ffffff;
-
-    --color-accent: #303030;
-    --color-on-accent: #EA8189;
 
     --color-dark: #161616;
-    --color-dark-gradient: linear-gradient(0deg, var(--color-accent) 0%, var(--color-dark) 22%);
+    --color-on-dark: #ffffff;
-    --color-on-dark: #E35965;
-
-    --color-surface: #fff3f3;
 
     --color-link: var(--color-primary);
 

src/lib/nav.scss

@@ -1,7 +1,7 @@
 %nav-button {
     @extend %button;
     --background: transparent;
-    --background-hover: var(--color-accent);
+    --background-hover: var(--color-primary);
 }
 
 .nav-bar {
@@ -116,7 +116,7 @@
         width: 2px;
         margin: 0 var(--space-small);
 
-        background: var(--color-on-accent);
+        background: var(--color-on-primary);
 
         @media($mobile-breakpoint) {
             display: none;
@@ -162,7 +162,7 @@
             margin: 5px 0;
 
             display: block;
-            background-color: var(--color-on-accent);
+            background-color: var(--color-on-primary);
             transition: all 0.3s ease-out;
         }
     }

src/lib/section.scss

@@ -22,14 +22,14 @@
 
         background: transparent;
         position: relative;
-        margin-top: 110px;
+        margin-top: 120px;
         align-self: center;
 
         &::before {
             z-index: -1;
 
             position: absolute;
-            top: -110px;
+            top: -120px;
             left: var(--picture-offset);
             width: 150px;
             height: 125px;

src/pages/index/footer.html

@@ -2,7 +2,7 @@
     <div class="footer--content">
         <img class="footer--logo" src="/img/footer-logo.png">
         <div class="footer--links">
-            <a href="mailto:contact@frog-collective.org">
+            <a href="mailto:contact@frog-collective.com">
                 {{ gettext("Contact") }}
             </a>
             <img src="/img/social.png"></img>

src/pages/index/games.html

@@ -3,7 +3,7 @@
 {% call section(gettext("Games"),
   "games",
   "/img/section-games.png",
-  title_picture_offset = "-20px",
+  title_picture_offset = "0px",
   title_color = "var(--color-primary)"
 ) %}
   {% for game in glob("games/*.md") | map('markdown') %}

src/pages/index/games.scss

@@ -3,7 +3,7 @@
 
     display: flex;
     flex-direction: column;
-    background: var(--color-surface);
+    background: transparent;
     padding: 0;
 
     &--picture-wrapper {
@@ -16,8 +16,11 @@
         @extend h2;
         margin: 0;
         padding: var(--space-small);
-        background: var(--background-dark);
+        background: var(--background-red);
         color: var(--color-on-dark);
+        padding: var(--space-small) var(--space-xlarge);
+        font-family: 'Knewave';
+        font-size: 40px;
     }
 
     &--description {

src/pages/index/news.html

@@ -4,7 +4,7 @@
   gettext("News"),
   "news",
   "/img/section-news.png",
-  title_picture_offset="60px",
+  title_picture_offset="0px",
   title_color = "var(--color-primary)"
 ) %}
   {% for news in glob("news/*.md") | map('markdown') %}

src/pages/index/news.scss

@@ -10,10 +10,12 @@
     &--header {
         display: flex;
         color: var(--color-on-dark);
-        background: var(--background-dark);
+        background: var(--background-red);
         padding: var(--space-small) var(--space-medium);
         align-items: center;
         gap: var(--space-small);
+        font-family: 'Knewave';
+        font-size: 24px;
 
         @media($mobile-breakpoint) {
             flex-direction: column;
@@ -37,6 +39,8 @@
     &--title {
         flex-grow: 1;
         margin: 0;
+        font-family: 'Knewave';
+        font-size: 32px;
 
         @media($mobile-breakpoint) {
             text-align: center;

src/pages/index/presentation.html

@@ -8,65 +8,51 @@
 {% endmacro %}
 
 {% call section(
-  gettext("Collective"),
+  gettext("Frog Collective"),
   "collective",
   "/img/section-collective.png",
   title_picture_hover = "/img/section-collective-hover.png",
   title_picture_offset = "170px"
   ) %}
-  <div class="presentation--content">
+<div class="presentation--content">
-    <h2>{{ gettext("Who are we ?") }}</h2>
+  <h2>{{ gettext("Who are we ?") }}</h2>
-    <p>
+  <p>
-      {% trans %}
+    {% trans %}
-        Welcome to the cozy world of the Frog Collective, where big dreams come
+      We are Frog Collective, a very small indie game development company with years of experience under our belts. 
-        in small packages! We're not your typical gaming behemoth with a massive
+      We've decided to team up to make games together, driven by our passion and guided by collective decisions.
-        team and towering office buildings. Nope, we're just two passionate souls
+    {% endtrans %}
-        huddled around a couple of computers, fueled by an insatiable love for
+  </p>
-        crafting little nuggets of joy that won't break the bank.
+  <p>
-      {% endtrans %}
+    {% trans %}
-    </p>
+      We're not the typical gaming behemoth with a massive team and towering office buildings. 
-
+      Nope, we're just two passionate souls huddled around a couple of computers. 
-    <p>
+      We want to create bite-sized adventures that anyone can pick up and play, yet remain challenging for those who wish to explore every corner.
-      {% trans %}
+    {% endtrans %}
-        Here we specialize in creating bite-sized adventures that anyone can pick
+  </p>
-        up and play, but only the true gaming aficionados can conquer. Think of
+  <p>
-        us as the David to the Goliaths of the gaming industry. Our games might
+    {% trans %}
-        be small, but they will keep you coming back for more. Now, you might be
+      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!
-        wondering, how on earth do two people manage to steer the ship in this
+    {% endtrans %}
-        vast ocean of pixels? Well, let me tell you, it's all about that sweet,
+  </p>
-        sweet collective decision-making magic. We're like yin and yang,
+  <p>
-        balancing each other's quirks and strengths as we navigate the
+    {% trans %}
-        treacherous waters of game development.
+      Let's have some fun!
-      {% endtrans %}
+    {% endtrans %}
-    </p>
+  </p>
-
+  <h2 class="comrades--title">{{ gettext("The team") }}</h2>
-      <p>
+  <div class="comrades">
-      {% trans %}
+    {{ comrade(
-        Whether it's brainstorming ideas over a late-night pizza session or
+        "Aurel",
-        duking it out over the perfect shade of blue for our protagonist's cape,
+        gettext('Aurel works on art'),
-        every decision is a team effort. And hey, when you've only got two heads
+        gettext("drawing of Aurel's face"),
-        in the game, you learn to trust each other's instincts real quick. So, if
+        "/img/aurel.png"
-        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 through the
+    {{ comrade(
-        pixelated cosmos. Who knows, you might just discover your new favorite
+      "Adrien",
-        addiction in the unlikeliest of places. Welcome to Frog Collective –
+      gettext('Adrien works on programming'),
-        where small is mighty, and fun knows no bounds! 
+      gettext("drawing of Adrien's face"),
-      {% endtrans %}
+      "/img/adrien.png"
-    </p>
+    ) }}
-    <h2 class="comrades--title">{{ gettext("The team") }}</h2>
-    <div class="comrades">
-      {{ comrade(
-          "Aurel",
-          gettext('Aurel works on art'),
-          gettext("drawing of Aurel's face"),
-          "/img/aurel.png"
-      ) }}
-      {{ comrade(
-        "Adrien",
-        gettext('Adrien works on programming'),
-        gettext("drawing of Adrien's face"),
-        "/img/adrien.png"
-      ) }}
-    </div>
   </div>
+</div>
 {% endcall %}