feat: integrate links in nav (closes #4)

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="#collective" class="nav-bar--menu-link">{{ gettext('Collective') }}</a>
-      <a href="#" class="nav-bar--menu-link">{{ gettext('Games') }}</a>
+      <a href="#games" class="nav-bar--menu-link">{{ gettext('Games') }}</a>
-      <a href="#" class="nav-bar--menu-link">{{ gettext('News') }}</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>

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="

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;
 

src/pages/index/games.html

@@ -1,10 +1,11 @@
 {% from "lib/section.html" import section %}
 
 {% call section(gettext("Games"),
-    "/img/section-games.png",
+  "games",
-    title_picture_offset = "-20px",
+  "/img/section-games.png",
-    title_color = "var(--color-primary)"
+  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">

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">

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"