fix: 📝 Updated the ReadMe to test if codepens works on it. Not sure thought.

Changed the 'View' toolbar to square buttons instead of text links. There is no images yet.

README.md

@@ -6,21 +6,28 @@ Ce project est une maquette interactive visant à mieux définir le publicportem
 
 Par ailleurs, ce project est aussi un exercice de conception visuel et de design original et inspiré des codes de l'application One, visant a stimuler ma créativité et à me former sur les technologies du web. Cette exercice es uniquement présenté sous forme de suggestion.  
 
+<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="YzNjwjB" data-preview="true" data-user="SimonPriet" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+  <span>See the Pen <a href="https://codepen.io/SimonPriet/pen/YzNjwjB">
+  Lightbox Remastered demo</a> by Simon (<a href="https://codepen.io/SimonPriet">@SimonPriet</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+
 ## Galeries d'images
 
-![Exemple de lightbox avec beaucoup de hauteur disponible](./public/Lightbox%201.png)
+![Exemple de lightbox avec beaucoup de hauteur disponible](./public/readme_assets/Lightbox%201.png)
 
-![Exemple de lightbox avec pas mal de hauteur disponible](./public/Lightbox%202.png)
+![Exemple de lightbox avec pas mal de hauteur disponible](./public/readme_assets/Lightbox%202.png)
 
-![Exemple de lightbox avec suffisamment de hauteur disponible](./public/Lightbox%203.png)
+![Exemple de lightbox avec suffisamment de hauteur disponible](./public/readme_assets/Lightbox%203.png)
 
-![Exemple de lightbox avec peu de hauteur disponible](./public/Lightbox%204.png)
+![Exemple de lightbox avec peu de hauteur disponible](./public/readme_assets/Lightbox%204.png)
 
-![Exemple de lightbox avec étroitement peu de hauteur disponible](./public/Lightbox%205.png)
+![Exemple de lightbox avec étroitement peu de hauteur disponible](./public/readme_assets/Lightbox%205.png)
 
-![Exemple de lightbox avec insuffisamment de hauteur disponible](./public/Lightbox%206.png)
+![Exemple de lightbox avec insuffisamment de hauteur disponible](./public/readme_assets/Lightbox%206.png)
 
 
-* Polices : Microsoft, Apple
+* Polices : Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula
 * Conception : Open Digital Education
 

public/index.html

@@ -16,11 +16,11 @@
 		<div class="lb-container">
 			<div class="lb-header">
 				<h2>Importer des documents</h2>
-				<a href="" class="close-button"><img src="./assets/closebutton.png"></a>
+				<a href="#" class="close-button"><img src="./assets/closebutton.png"></a>
 				<div id="tabs-container">
 					<span></span>
-					<span><a href="">Intégrer un contenu externe</a></span>
-					<span><a href="">Filmer depuis la caméra</a></span>
+					<span><a href="#">Intégrer un contenu externe</a></span>
+					<span><a href="#">Filmer depuis la caméra</a></span>
 					<span class="active"><a href="">Parcourir son Espace Doc</a></span>
 					<span></span>
 				</div>
@@ -31,10 +31,9 @@
 					<button>🔍</button>
 				</div>
 				<div id="doc-file-viewmode">
-					Vue :
-					<a href="" class="active">Mosaïque</a>
-					<a href="">Grille</a>
-					<a href="">Liste</a>
+					<a href="#" class="active"></a>
+					<a href="#"></a>
+					<a href="#"></a>
 				</div>
 				<div id="doc-file-nav" class="list-nav scrollable">
 					<ul class="">

public/main.css

@@ -184,6 +184,19 @@ input {
 	font-family: Calibri, Mallanna, "Segoe UI", sans-serif;
 }
 
+#doc-file-viewmode a {
+  background-image: linear-gradient(#fff, #e9ebef);
+  border-radius: 15px;
+  height: 40px;
+  min-width: 40px;
+  display: inline-block;
+}
+
+#doc-file-viewmode a.active {
+  background-image: linear-gradient(#3889c1, #43b9e7);
+}
+
+
 button {
   /* height: 40px; */
   box-sizing: border-box;