add titles

src/lib/styles/styles.css

@@ -13,6 +13,8 @@ html {
 
     background-color: var(--bg-color);
     width: 100%;
+
+    scroll-behavior: smooth;
 }
 
 body {
@@ -20,20 +22,20 @@ body {
 }
 
 header {
+    width: 100%;
     position: fixed;
     height: max-content;
     bottom: 0;
 
     padding-left: 2rem;
 
-    &>* {}
-
     & h1 {
         font-weight: 500;
         border-top: solid 1px white;
-        font-size: 10rem;
+        font-size: 8rem;
         background-color: var(--bg-color);
         letter-spacing: 0.6rem;
+        line-height: 7rem;
     }
 }
 
@@ -70,6 +72,9 @@ section {
     & h2 {
         margin-bottom: 3rem;
         margin-top: 1rem;
+        position: relative;
+        left: -2rem;
+        text-decoration: underline;
     }
 }
 
@@ -85,6 +90,10 @@ article h1 {
 }
 
 article+article {
+    margin-top: 5rem;
+}
+
+article+h2 {
     margin-top: 6rem;
 }
 

src/routes/+page.svelte

@@ -9,19 +9,30 @@
 <header>
 	<nav>
 		<ul>
-			<li><a href="#events">Événements</a></li>
+			<li><a href="#evenements">Événements</a></li>
 			<li><a href="#archives">Archives</a></li>
-			<li><a href="#">Déclaration de principes</a></li>
-			<li><a href="#">bibliographie sélective</a></li>
+			<li><a href="#principes">Déclaration de principes</a></li>
+			<li><a href="#bibliographie">bibliographie sélective</a></li>
 		</ul>
 	</nav>
 	<h1>Alliances Transcoloniales</h1>
 </header>
 
 <section>
-	<h2 id="events">Événements</h2>
+	<h2 id="evenements">Événements</h2>
 	{#each data.documents as d}
 		<Article document={d} />
 	{/each}
 	<h2 id="archives">Archives</h2>
+	<h2 id="principes">Déclaration de principes</h2>
+	<h2 id="bibliographie">Bibliographie sélective</h2>
+	<article>
+		<p>
+			Retrouvez ressources bibliographiques partagées par les intervenants de nos différents
+			événements sur le <a
+				href="https://www.zotero.org/groups/5871768/alliances-transcoloniales/library">Zotero</a
+			>
+			des <i>Alliances Transcoloniales</i>
+		</p>
+	</article>
 </section>