"le css est une oeuvre diabolique" - Sun tzu

assets/css/menu.css

@@ -1,28 +1,75 @@
 .menu {
 	position: fixed;
-	bottom: -150px;
 	left: 0;
+	bottom: -15%;
 	width: 100%;
-	height: auto;
+	height: 25vh;
 	z-index: 2;
 	overflow: visible;
 	transition: transform 0.3s;
 }
-.menu-row{
+
-	display: flex;
-}
 .menu-svg{
-	width: 370px;
+	width: 	30vw;
-	margin-bottom: 0px;
+	height: 40vh;
+
 }
 
+#menu ul {
+	flex-wrap: wrap;
+	padding: 0;
+	margin: 0;
+	list-style: none;
+	display: flex;
+	justify-content: center;
+	background-color: transparent;
+	color: #fff;
+	height: 50px;
+	align-items: center;
+	background-color: rgba(0, 0, 0, 0.7); /* Add a semi-transparent background color for readability */
+
+}
+
+@media only screen and (max-width: 600px) {
+	/* Add styles for smartphones screens */
+	#menu ul {
+	  height: auto;
+	  flex-direction: column;
+	  justify-content: center;
+	}
+	
+	#menu li {
+	  margin: 5px 0;
+	}
+  }
+
+#menu li {
+margin: 0 10px;
+
+
+}
+
+#menu a {
+	display: block; /* Add this line to make the link fill the entire menu item */
+	padding: 10px; /* Add some padding for better readability and clickable area */
+	color: #c25151;
+	text-decoration: none;
+	background-image: url('/assets/img/colonne.svg'); /* Add this line to set the link background image */
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+}
+  
+
+
+
+
+
+
 .menu-link{
-	position: fixed;
+	margin-left: 10px;
-	margin-left: 10%;
-	bottom: 80px;
-	left: 0;
 	width: 100%;
-	z-index: 2;
+	position: absolute;
 }
 
 .menu-link use {

assets/css/page/index.css

@@ -1,7 +1,7 @@
 #msg_acc {
 	display: block;
 	background-color: rgba(88, 159, 218, 0.798);
-	width: 80%;
+	width: 80vw;
 	max-width: 800px;
 	margin-left: auto;
 	margin-right: auto;

assets/css/page/prevs.css

@@ -36,10 +36,11 @@ iframe {
 
 #desc {
 	display: block;
-	background-color: rgba(255,255,255,0.5);
+	background-color: rgba(88, 159, 218, 0.798);
 	width: 80vw;
 	margin: auto;
 	padding: 50px;
 	font-size: 1.2rem;
 	margin-top: 40px;
-}
+	border-radius: 15px;
+}

index.php

@@ -56,14 +56,9 @@ include "assets/scripts/globals.php";
         
         <div id="msg_acc">
             <p>
-                Bienvenue à l'<font color="red">INSA Toulouse</font> jeune aventurier, pour ta magnifique semaine d'accueil.
+                Bienvenue à l'<font color="red">INSA Toulouse</font> jeune gaulois, pour ta magnifique semaine d'accueil.
                 Ce site est fait pour t'aider à commencer l'aventure en toute sérénité.
             </p>
-            <p>
-                Toutes les photos de ta semaine sont disponibles <a href="photos.php" class="link"> ici </a>! Pendant cette semaine tu
-                pourras découvrir toutes les photos prises par la Com Photo pour te remémorer plein de
-                souvenirs.
-            </p>
             <p>
                 Tu vas pouvoir trouver ici des informations générales sur ta semaine, comme
                 <a href="planning.php" class="link">Le Planning</a>,

structure/menu.php

@@ -7,29 +7,20 @@ include "assets/scripts/globals.php"
 ?>
 
 
-<div class="menu">
+<div class="menu" id="menu">
 
-<div class="menu-row">
+    <ul>
 <?php 
 
 
-for($i = 0; $i <= 3; $i++){
+for($i = 0; $i <= 17; $i++){
-    echo "<div>";
+
-    echo "<img class=\"menu-svg\" src=\"assets/img/colonne.svg\">";
+
-    echo "</div>";
+    echo "<li><a href=\"".$SITE_MAP[$i][0]."\">".$SITE_MAP[$i][1]."</a></li>";
-    
-    // 4 links per colums
-    /*for($j=$i*4+1;$j<=$i*4+2;$j++){
-        echo "<a style='margin-left:".($i*30)."%;' class='menu-link' href=".$SITE_MAP[$j][0].">".$SITE_MAP[$j][1]."</a>";
-    }
-    for($j=$i*4+3;$j<=$i*4+4;$j++){
-        echo "<a style='margin-left:".($i*200)."px; bottom:50px;' class='menu-link' href=".$SITE_MAP[$j][0].">".$SITE_MAP[$j][1]."</a>";
-    }*/
 
 }
 ?>
-</div>
+    </ul>
-
 
 </div>