localisation: move presentation back to the jinja template

babel.cfg

@@ -1,2 +1,3 @@
 [jinja2: src/**.html]
 encoding = utf-8
+trimmed = True

content/en/presentation/presentation.md

@@ -1,29 +0,0 @@
-### This is a markdown title
-
-* You can
-* Use
-* Markdown
-
-Welcome to the cozy world of the Frog Collective, where big dreams come in
-small packages! We're not your typical gaming behemoth with a massive team and
-towering office buildings. Nope, we're just two passionate souls huddled
-around a couple of computers, fueled by an insatiable love for crafting little
-nuggets of joy that won't break the bank.
-
-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.
-
-Whether it's brainstorming ideas over a late-night pizza session or duking it
-out over the perfect shade of blue for our protagonist's cape, 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! 

content/fr/presentation/presentation.md

@@ -1,4 +0,0 @@
-### Et ici c'est en français
-
-Bienvenu blablabla blablabla
-

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-21 15:20+0200\n"
+"POT-Creation-Date: 2024-05-22 02:27+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: fr\n"
@@ -19,23 +19,78 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.15.0\n"
 
-#: src/lib/nav.html:6
+#: src/lib/nav.html:18
 msgid "Collective"
 msgstr "Collectif"
 
-#: src/lib/nav.html:9 src/pages/index/games.html:1
+#: src/lib/nav.html:21 src/pages/index/games.html:1
 msgid "Games"
 msgstr "Jeux"
 
-#: src/lib/nav.html:12
+#: src/lib/nav.html:24
 msgid "News"
 msgstr "Actualités"
 
-#: src/lib/nav.html:15
+#: src/lib/nav.html:27
 msgid "Contact Us"
 msgstr "Nous Contacter"
 
-#: src/pages/index/presentation.html:13
+#: src/pages/index/presentation.html:9
+msgid ""
+"Welcome to the cozy world of the Frog Collective, where big dreams come "
+"in small packages! We're not your typical gaming behemoth with a massive "
+"team and towering office buildings. Nope, we're just two passionate souls"
+" 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:19
+msgid ""
+"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."
+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:33
+msgid ""
+"Whether it's brainstorming ideas over a late-night pizza session or "
+"duking it out over the perfect shade of blue for our protagonist's cape, "
+"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 ""
+
+#: src/pages/index/presentation.html:45
 msgid "Members"
 msgstr "Membres"
-

src/lib/css/content.scss

@@ -5,6 +5,7 @@ body {
     text-align: justify;
     line-height: 25px;
     color: var(--color);
+    font-weight: 300;
 }
 
 * {

src/lib/css/variables.scss

@@ -6,7 +6,7 @@ $mobile-breakpoint: "max-width: 768px";
     --primary-color: #E04855;
     --on-primary: white;
 
-    --dark: #161616;
+    --dark: #282828;
     --on-dark: #E04855;
 
     --space-xsmall: 5px;
@@ -23,5 +23,13 @@ $mobile-breakpoint: "max-width: 768px";
     --fz-4: 1.125rem;
 
     --box-shadow: 0px 5px 5px 0px rgba(22,22,22,0.5);
+    --button-shadow: inset 0 0 0.5px 1px hsla(0, 0%,  
+              100%, 0.075),
+              /* shadow ring 👇 */
+              0 0 0 1px hsla(0, 0%, 0%, 0.05),
+              /* multiple soft shadows 👇 */
+              0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
+              0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
+              0 3.5px 6px hsla(0, 0%, 0%, 0.09);;
 }
 

src/lib/nav.html

@@ -1,3 +1,15 @@
+{% macro language_button(code, label) -%}
+<a class="
+    nav-bar--language-link
+    {% if context.current_language == code %}nav-bar--language-link__active{% endif %}
+    "
+   href="/{{code}}/"
+    aria-label="{{label}}"
+>
+  {{ code }}
+</a>
+{%- endmacro %}
+
 <nav-bar class="nav-bar" id="nav-bar">
   <div class="nav-bar--content">
     <div class="nav-bar--menu">
@@ -26,6 +38,11 @@
         <img class="nav-bar--logo" src="/img/nav-logo.png"></img>
       </div>
     </div>
+    <div class="nav-bar--language-section">
+    {{ context.language() }}
+      {{ language_button('fr', 'Site en français') }}
+      {{ language_button('en', 'English version') }}
+    </div>
     <toggle-nav-bar-button class="nav-bar--toggle-button">
       <s class="bar"></s>
       <s class="bar"></s>

src/lib/nav.scss

@@ -131,12 +131,54 @@
         }
     }
 
+    &--language-section {
+        grid-area: 1 / 3 / 2 / 4;
+        display: flex;
+        align-items: center;
+        gap: var(--space-small);
+    }
+
+    &--language-link {
+       border-radius: 3px;
+       border: 1px solid transparent;
+       padding: var(--space-small);
+
+       display: flex;
+       flex-direction: column;
+       
+       background: var(--dark);
+       color: var(--primary-color);
+       
+       font-size: var(--fz-4);
+       font-weight: bold;
+       text-decoration: none;
+       text-transform: uppercase;
+
+        @media ($mobile-breakpoint) {
+            padding: var(--space-xsmall);
+        }
+       
+       &:hover, &:focus {
+          border-color: var(--primary-color);
+       }
+
+       &:after {
+          content: "";
+          background: transparent;
+          height: 3px;
+       }
+
+       &__active:after {
+          background: var(--primary-color);
+       }
+    }
+
     &--toggle-button {
         display: none;
         cursor: pointer;
-        margin: 0 var(--space-small);
+        margin: 0 var(--space-small) 0 var(--space-medium);
         align-self: center;
-        grid-area: 1 / 3 / 2 / 4;
+        grid-area: 1 / 4 / 2 / 5;
 
         @media ($mobile-breakpoint) {
             display: block;

src/pages/index.html

@@ -6,7 +6,7 @@
         <meta name="description" content="A set of horizontal menus that switch to vertical and which hide at small window widths.">
         <title>Frog Collective</title>
         <link href="https://fonts.googleapis.com/css2?family=Knewave&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="//brick.freetls.fastly.net/Montserrat:300">
+        <link rel="stylesheet" href="//brick.freetls.fastly.net/Montserrat:400,300">
         <link rel="stylesheet" href="/style.css"/>
         <script type="module" src="/js/index.js"></script>
     </head>

src/pages/index/presentation.html

@@ -5,9 +5,43 @@
 {% extends "lib/section.html.j2" %}
 
 {% block content %}
-  {% with presentation = load("presentation/presentation.md") | markdown %}
+  <p>
-    {{ presentation }}
+    {% trans %}
-  {% endwith %}
+      Welcome to the cozy world of the Frog Collective, where big dreams come
+      in small packages! We're not your typical gaming behemoth with a massive
+      team and towering office buildings. Nope, we're just two passionate souls
+      huddled around a couple of computers, fueled by an insatiable love for
+      crafting little nuggets of joy that won't break the bank.
+    {% endtrans %}
+  </p>
+
+  <p>
+    {% trans %}
+      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.
+    {% endtrans %}
+  </p>
+
+    <p>
+    {% trans %}
+      Whether it's brainstorming ideas over a late-night pizza session or
+      duking it out over the perfect shade of blue for our protagonist's cape,
+      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! 
+    {% endtrans %}
+  </p>
 
   <h3>{{ gettext('Members') }}</h3>
   <div class="members">