From a3b10fd52e699c93c9872c1b6d7907232ad97ec9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Corentin=20S=C3=A9chet?= <corentin@ki-dour.org>
Date: Thu, 23 May 2024 00:24:42 +0200
Subject: [PATCH] feat: integrate links in nav (closes #4)

---
 src/lib/nav.html                  |  6 +++---
 src/lib/section.html              |  2 ++
 src/lib/section.scss              | 10 ++++++++++
 src/pages/index/games.html        |  9 +++++----
 src/pages/index/news.html         |  3 ++-
 src/pages/index/presentation.html |  1 +
 6 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/lib/nav.html b/src/lib/nav.html
index 46c64dd..6248c3f 100644
--- a/src/lib/nav.html
+++ b/src/lib/nav.html
@@ -11,9 +11,9 @@
   <div class="nav-bar--content">
     <img class="nav-bar--logo" src="/img/nav-logo.png"></img>
     <div class="nav-bar--menu">
-      <a href="#" class="nav-bar--menu-link">{{ gettext('Collective') }}</a>
-      <a href="#" class="nav-bar--menu-link">{{ gettext('Games') }}</a>
-      <a href="#" class="nav-bar--menu-link">{{ gettext('News') }}</a>
+      <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="#" class="nav-bar--menu-link">{{ gettext('Contact') }}</a>
     </div>
     <div class="nav-bar--separator"></div>
diff --git a/src/lib/section.html b/src/lib/section.html
index 3c26d42..a45b254 100644
--- a/src/lib/section.html
+++ b/src/lib/section.html
@@ -1,11 +1,13 @@
 {% macro section(
   title,
+  id,
   title_picture,
   title_picture_hover = None,
   title_picture_offset = "20px",
   title_color = "var(--color-text)")
 -%}
   <div class="section">
+    <a class="section--anchor" id="{{id}}"></a>
     <h1
       class="section--title"
       style="
diff --git a/src/lib/section.scss b/src/lib/section.scss
index 9c6df49..2a31a1e 100644
--- a/src/lib/section.scss
+++ b/src/lib/section.scss
@@ -7,6 +7,16 @@
         margin-bottom: var(--space-large);
     }
 
+    &--anchor {
+        position: relative;
+        top: -90px;
+        visibility: hidden;
+
+        @media($mobile-breakpoint) {
+            top: -50px;
+        }
+    }
+
     &--title {
         z-index: -1;
 
diff --git a/src/pages/index/games.html b/src/pages/index/games.html
index a720546..d604943 100644
--- a/src/pages/index/games.html
+++ b/src/pages/index/games.html
@@ -1,10 +1,11 @@
 {% from "lib/section.html" import section %}
 
 {% call section(gettext("Games"),
-    "/img/section-games.png",
-    title_picture_offset = "-20px",
-    title_color = "var(--color-primary)"
-  ) %}
+  "games",
+  "/img/section-games.png",
+  title_picture_offset = "-20px",
+  title_color = "var(--color-primary)"
+) %}
   {% for game in glob("games/*.md") | map('markdown') %}
     <div class="game">
       <div class="game--picture-wrapper">
diff --git a/src/pages/index/news.html b/src/pages/index/news.html
index 4fef5d4..2867ddc 100644
--- a/src/pages/index/news.html
+++ b/src/pages/index/news.html
@@ -2,10 +2,11 @@
 
 {% call section(
   gettext("News"),
+  "news",
   "/img/section-news.png",
   title_picture_offset="60px",
   title_color = "var(--color-primary)"
-  ) %}
+) %}
   {% for news in glob("news/*.md") | map('markdown') %}
     <div class="news">
       <div class="news--header">
diff --git a/src/pages/index/presentation.html b/src/pages/index/presentation.html
index 70275e7..eee62b5 100644
--- a/src/pages/index/presentation.html
+++ b/src/pages/index/presentation.html
@@ -9,6 +9,7 @@
 
 {% call section(
   gettext("Collective"),
+  "collective",
   "/img/section-collective.png",
   title_picture_hover = "/img/section-collective-hover.png",
   title_picture_offset = "170px"