From bbdb1185012f9768ee966dea2587c8289f1b1980 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Wed, 30 Dec 2020 11:13:04 +0100
Subject: [PATCH] fix: ajout d'une navigation

---
 static/index.html | 49 +++++++++++++++++++++++++++++++----------------
 static/site.js    |  2 +-
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/static/index.html b/static/index.html
index b6afefd..c8143e9 100644
--- a/static/index.html
+++ b/static/index.html
@@ -51,26 +51,43 @@
 
 <section class="container">
 	<div class="row">
-		<main class="col-md-12">
+		<div class="col-md-12">
+			<h1><i class="fa fa-star"></i> Bienvenue sur Kobold City !</h1>
 
-	  <h1><i class="fa fa-star"></i> Bienvenue sur Kobold City !</h1>
-
-		<div class="card card-dark" id="welcome">
-			<div class="card-body">
-				<p>Kobold City (et son supplément Kobold Cafe, pour les sites plus "personnels") est un serveurs qui héberge différents services, site et projets. Le but est d'être à la fois dans une optique de décentralisation d'internet, permettant d'avoir un petit service fourni par un petit serveur, et de diffuser des projets qui pourront soit amuser, soit servir à d'autre :)</p>
-				<p>Faites juste attention aux kobolds qui font des bétises partout !</p>
+			<div class="card card-dark" id="welcome">
+				<div class="card-body">
+					<p>Kobold City (et son supplément Kobold Cafe, pour les sites plus "personnels") est un serveurs qui héberge différents services, site et projets. Le but est d'être à la fois dans une optique de décentralisation d'internet, permettant d'avoir un petit service fourni par un petit serveur, et de diffuser des projets qui pourront soit amuser, soit servir à d'autre :)</p>
+					<p>Faites juste attention aux kobolds qui font des bétises partout !</p>
+				</div>
 			</div>
 		</div>
+		<aside class="col-md-4">
+			<div class="card card-blue" id="welcome">
+				<div class="card-header"><i class="fa fa-list"></i> Navigation</div>
+				<div class="list-group list-group-flush">
+					<a href="#projets" class="list-group-item list-group-item-action">
+						<i class="fa fa-folder"></i> Projets
+					</a>
+					<a href="#services" class="list-group-item list-group-item-action">
+						<i class="fa fa-server"></i> Services
+					</a>
+					<a href="#hergement" class="list-group-item list-group-item-action">
+						<i class="fa fa-globe"></i> Sites hébergés
+					</a>
 
-		<h2><i class="fa fa-folder"></i> Projets</h2>
-		<div class="row site-cards">
-			<script>
-				renderSite({title: "Birb", description: "Un petit moteur de jeu utilisant le framework Löve.", color: "dark", url: "https://git.chlore.net/game-project/birb-engine", urlpoweredby: "https://love2D.org/", poweredby: "Löve"});
-				renderSite({title: "Rulebook", description: "Un systeme de règle de JDR, utilisant la base D100.", color: "dark", url: "https://rulebook.chlore.net/", urlpoweredby: "https://docsify.now.sh/", poweredby: "Docsify"});
-			</script>
-		</div>
+				</div>
+			</div>
+		</aside>
+		<main class="col-md-8">
+			<h2 id="projets"><i class="fa fa-folder"></i> Projets</h2>
+			<div class="row site-cards">
+				<script>
+					renderSite({title: "Birb", description: "Un petit moteur de jeu utilisant le framework Löve.", color: "dark", url: "https://git.chlore.net/game-project/birb-engine", urlpoweredby: "https://love2D.org/", poweredby: "Löve"});
+					renderSite({title: "Rulebook", description: "Un systeme de règle de JDR, utilisant la base D100.", color: "dark", url: "https://rulebook.chlore.net/", urlpoweredby: "https://docsify.now.sh/", poweredby: "Docsify"});
+				</script>
+			</div>
 
-			<h2><i class="fa fa-server"></i> Services</h2>
+			<h2 id="services"><i class="fa fa-server"></i> Services</h2>
 			<div class="row site-cards">
 				<script>
 					renderSite({title: "Kobold Cafe", description: "Un espace personnel, permettant un petit bout de décentralisation.", color: "orange", url: "https://kobold.cafe", urlpoweredby: "https://yunohost.org", poweredby: "yunohost"});
@@ -78,7 +95,7 @@
 				</script>
 			</div>
 
-			<h2><i class="fa fa-globe"></i> Sites hébergés</h2>
+			<h2 id="hergement"><i class="fa fa-globe"></i> Sites hébergés</h2>
 			<div class="row site-cards">
 				<script>
 					renderSite({title: "Quarante-douze", description: "Un blog qui parle d'informatique, de culture libre et d'internet.", color: "red", url: "https://quarante-douze.net", urlpoweredby: "https://wordpress.org/", poweredby: "Wordpress"});
diff --git a/static/site.js b/static/site.js
index 64d661a..80a3384 100644
--- a/static/site.js
+++ b/static/site.js
@@ -1,4 +1,4 @@
-let template = "<div class='col-md-4'><div class='card card-<%= color %> mb-4 box-shadow card-border'><div class='card-body'><h4 class='align-center'><%= title %></h4><p class='card-text'><%= description %></p><div class='align-center'><div class='btn-group'><a type='button' href='<%= url %>' class='btn btn-<%= color %>'>Accéder</a></div><div><p class='powered-text'>powered by <a href='<%= urlpoweredby %>'><%= poweredby %></a></p></div></div></div></div></div>"
+let template = "<div class='col-md-6'><div class='card card-<%= color %> mb-4 box-shadow card-border'><div class='card-body'><h4 class='align-center'><%= title %></h4><p class='card-text'><%= description %></p><div class='align-center'><div class='btn-group'><a type='button' href='<%= url %>' class='btn btn-<%= color %>'>Accéder</a></div><div><p class='powered-text'>powered by <a href='<%= urlpoweredby %>'><%= poweredby %></a></p></div></div></div></div></div>"
 
 function renderSite(data) {
   html = ejs.render(template, data);