ajustement du décompte

assets/css/menu.css

@@ -1,12 +1,11 @@
 .menu {
 	position: fixed;
-	left: 0;
-	bottom: -12vh;
 	width: 100%;
-	height: 25vh;
+	height: fit-content;
 	z-index: 2;
 	overflow: visible;
 	transition: transform 0.3s;
+	bottom: 0;
 }
 
 
@@ -21,22 +20,9 @@
 	height: auto;
 	align-items: center;
 	background-color: rgba(64, 98, 63, 0.7); /* Add a semi-transparent background color for readability */
-	bottom: 5vh;
 }
 
-@media all and (max-width: 800px) {
-	/* 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;
@@ -47,90 +33,100 @@ 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;
+	color: #c32c2c;
 	text-decoration: none;
-	background-image: url('/assets/img/buisson.svg'); /* Add this line to set the link background image */
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: cover;
+	background-image: url('/assets/img/buisson.svg'); 
+
 }
 
 #menu a:hover{
-	color: #c22828;
+	color: #e01111;
 	transform: translateY(-2px);
 }
 
 
 
-.mobile-menu {
+
-	display: block;
+/*hide the mobile menu by default*/
+
+.topnav{
+	visibility: hidden;
+	height: 0px;
+}
+
+
+
+/* Add styles for smartphones screens */
+@media all and (max-width: 800px) {
+
+
+	.menu{
+		visibility: hidden;
+		height: 0px;
+	}
+
+
+	/* Style the navigation menu */
+.topnav {
+	visibility: visible;
+	overflow-y: scroll;
+	background-color: #333;
 	position: fixed;
-	top: 0; left: 0;
+	width: 95%;
-	overflow: hidden;
+	z-index: 100;
-	width: 100%;
+	border-radius: 10px;
-	z-index: 20;
+	margin-top: 1vh;
+	height: auto;
+	margin-left: 2.5%;
+	margin-right: 2.5%;
+  }
   
-	height: 0;
+  /* Hide the links inside the navigation menu (except for logo/home) */
-	background: rgba(15, 15, 23, 0);
+  .topnav #mobile_menu_links {
+	display: none;
+  }
   
-	transition: background-color 0.2s linear;
+  /* Style navigation menu links */
-}
+  .topnav a {
+	color: white;
+	padding: 1vh 1vw;
+	text-decoration: none;
+	font-size: 4vh;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	text-align: center;
+  }
 
-.mobile-menu .containerF3g {
+  .topnav li {
-	width: 100%; height: 100%;
-	overflow: auto;
-}
-
-.mobile-grid {
 	display: flex;
-	flex-wrap: wrap;
+	text-align: center;
-	padding: 2vh 60px;
+  }
-	min-height: 100vh;
-	justify-content: center;
-	align-content: center;
-}
   
-.mobile-menu-link {
+  /* Style the hamburger menu */
-	min-width: 100px;
+  .topnav a.icon {
-	width: 50%;
+	background: black;
-	display: block;
-	opacity: 0;
-    cursor: pointer;
-	transform: translateY(10%);
-	transition: transform 0.2s ease-out, opacity 0.2s linear 0.05s;
-}
-
-nav.mobile-menu.open .mobile-menu-link {
-	transform: translateY(0);
-	opacity: 1;
-}
-
-.menu-link:hover text {
-	fill: #FFDC00;
-}
-
-.mobile-brick {
-	display: block;
-}
-
-
-span.close-mobile-menu {
-	color: #FFF;
-	font-size: 80px;
 	display: block;
 	position: absolute;
-    -webkit-user-select: none; /* Safari */
+	right: 0;
-    -moz-user-select: none; /* Firefox */
+	top: 0;
-    -ms-user-select: none; /* IE10+/Edge */
+  }
-    user-select: none; /* Standard */
-    cursor: pointer;
-	bottom: 0;
-	right: 20px;
-    transition: color 0.5s;
-}
   
-span.close-mobile-menu:hover {
+  /* Add a grey background color on mouse-over */
-	color: #FFDC00;
+  .topnav a:hover {
+	background-color: #ddd;
+	color: black;
+  }
+  
+  .active {
+	background-color: rgb(27, 170, 22);;
+	color: white;
+  }
 
 }
 
+
+

assets/css/page/coms.css

@@ -1,64 +0,0 @@
-body {
-	color: white;
-	background-color: white;
-}
-
-.box-jaune h1 {
-	margin: 0 0 0.5em;
-	padding: 0;
-}
-
-section h1 {
-	margin: 0;
-	padding: 10px;
-}
-
-section h4 {
-	margin: 0;
-	padding: 10px;
-}
-
-#main_content {
-	display: block;
-	background-color: rgba(255,255,255,0); //pour mettre un magnifique fond
-	width: 40%;
-	margin-left: auto;
-	margin-right: auto;
-	font-size: 1.2rem;
-}
-
-section {
-	display: block;
-	width: 80%;
-	padding: 0;
-	margin: 20px auto auto;
-	align-items: center;
-	border: 5px solid white;
-	background: rgba(0,0,0,0.5);
-}
-
-section ul {
-  list-style-type: none;
-}
-
-section li {
-	margin-bottom: 30px;
-}
-
-section .title_com {
-	width: 100%;
-	background-color: white;
-	color: black;
-	margin: 0px;
-	padding: 10px 0px 10px 0px;
-
-}
-
-.fonction_bureau {
-	display: inline-block;
-	background-color: white;
-	color: black;
-	padding: 10px;
-	margin-top: 0;
-	font-size: 1.5rem;
-}

assets/css/page/construction.css

@@ -19,7 +19,12 @@
 
 	#decompte{
 		font-size: 7vh;
-
+		color: rgb(40, 230, 11);
+		background-color: rgba(27, 187, 205, 0.188);
+		border-radius: 10px;
+		width: 95%;
+		margin-left: 2.5%;
+		margin-right: 2.5%;
 	}
 	
 

assets/css/page/index.css

@@ -4,7 +4,7 @@
 	width: 100%;
 	height: 200%;
 	font-size: 10vh;
-	color: rgb(196, 23, 23);
+	color: rgb(230, 11, 11);
 
 }
 
@@ -13,7 +13,12 @@
 
 	#decompte{
 		font-size: 7vh;
-
+		color: rgb(40, 230, 11);
+		background-color: rgba(27, 187, 205, 0.188);
+		border-radius: 10px;
+		width: 95%;
+		margin-left: 2.5%;
+		margin-right: 2.5%;
 	}
 	
 

assets/css/template.css

@@ -98,6 +98,20 @@ a.linkmail:hover {
 	border-radius: 10px;
 }
 
+
+/* 
+ajoute une petite marge au dessus de la pancarte sur mobile pour laisser
+de la place a la navbar 
+
+ajuste aussi la taille du texte de la pancarte
+*/
+@media all and (max-width: 800px) {
+
+	.pancarte{
+		margin-top: 10vh;
+	}
+}
+
 .pancarte .title {
 	padding: 3vw 4.5vw;
 	color: black;
@@ -171,6 +185,8 @@ footer {
 	margin-top: 2vh;
 	margin-left: auto;
 	margin-right: auto;
+	font-size: 3vh;
+
 }
 
 

coms.php

@@ -1,11 +1,14 @@
 <?php
 ob_start(); // Start reading html
+include "assets/fonts/color.php";
+
 ?>
 <main>
 
     <div id="main_content">
 		<div class="zone_txt">
-			<div class='title_com'>Le Bureau</div>
+			<div class='title_com'><?= colored_text("Le Bureau") ?></div>
+			<hr>
 			<?php
 			$fonction = ["Président", "Vice présidente", "Trésorier", "Secrétaire"];
 			$prenom = ["Eléa", "Arthur", "Paul", "Cannelle"];
@@ -19,6 +22,7 @@ ob_start(); // Start reading html
 					echo "<h4>".$prenom[$i]." ".$nom[$i]."</h4>";
 					echo "<a href='mailto:".$mail[$i]."' class='linkmail'>".$mail[$i]."</a>";
 					echo "</li>";
+					echo "<hr>";
 				}
 			echo "</ul>";
 			?>
@@ -26,8 +30,9 @@ ob_start(); // Start reading html
 
 		<?php 
 		function respo($name, $prenom, $nom, $mail) {
-			echo "<section>";
+			echo "<div class=\"zone_txt\">";
-			echo "<div class='title_com'>".$name."</div>";
+			echo "<div class='title_com'>".colored_text($name)."</div>";
+			echo "<hr>";
 			echo "<ul>";
 			for($i = 0; $i < count($prenom); $i++) {
 				echo "<li>";
@@ -36,7 +41,8 @@ ob_start(); // Start reading html
 				echo "</li>";
 			}
 			echo "</ul>";
-			echo "</section>";
+
+			echo "</div>";
 		}
 		?>
 			

structure/menu.php

@@ -12,13 +12,14 @@ include "assets/scripts/globals.php"
     <ul>
 <?php 
 
-
 for($i = 0; $i <= 17; $i++){
 
 
-    echo "<li><a href=\"".$SITE_MAP[$i][0]."\">".$SITE_MAP[$i][1]."</a></li>";
+  echo "<li><a href=\"".$SITE_MAP[$i][0]."\">".$SITE_MAP[$i][1]."</a></li>";
 
 }
+
+
 ?>
     </ul>
 
@@ -29,39 +30,45 @@ for($i = 0; $i <= 17; $i++){
 
 
 
-<!-- Sur téléphone -->
+<!-- librairie d'icones libres de droit font-awesome pour mettre le petit logo hamburger-->
-<nav class="mobile-menu" id="mobile-menu">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
-    <div class="containerF3g">
+<!-- la barre de navigation -->
-        <div class="mobile-grid">
+<div class="topnav">
+  <a href="/index.php" class="active">P'tit menu :)</a>
   
-            <?php
+  <!-- les liens (cachés par défaut) -->
-            for($i = 0; $i <= 21; $i++) {
+  <div id="mobile_menu_links">
-                if($i%2 == 0) {
-                    // pair
-                    $link = $lien_y_0[$i/2];
-                    $text = $texte_y_0[$i/2];
-                } else {
-                    //impair
-                    $link = $lien_y_1[($i-1)/2];
-                    $text = $texte_y_1[($i-1)/2];
-                }
-                echo
-                '<a href="'.$link.'" class="mobile-menu-link">
-                    <svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
-                    <use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
-                        <text x="23.8" y="8.5">
-                            '.$text.'
-                        </text>
-                    </svg>
-                </a>';
-            }
-            ?>
-        </div>
-    </div>
 
-    <span id="close-mobile-menu" class="close-mobile-menu">
-        x
-    </span>
 
-</nav>
+    <?php
+
+    for($i = 0; $i <= 17; $i = $i + 2){
+
+      // affiche les liens 2 par 2
+      echo "<li><a href=\"".$SITE_MAP[$i][0]."\">".$SITE_MAP[$i][1]."</a>
+      <a href=\"".$SITE_MAP[$i+1][0]."\">".$SITE_MAP[$i+1][1]."</a></li>";
+    
+    }
+    ?>
+
+
+  </div>
+  <!-- appelle la fonction de changement d'etat du menu quand cliqué -->
+  <a href="javascript:void(0);" class="icon" onclick="toggle_mobile_menu()">
+    <i class="fa fa-bars"></i>
+  </a>
+</div>
+
+
+<script>
+    /* Change l'etat entre visible et non visible du menu déroulant */
+function toggle_mobile_menu() {
+  var x = document.getElementById("mobile_menu_links");
+  if (x.style.display === "block") {
+    x.style.display = "none";
+  } else {
+    x.style.display = "block";
+  }
+}
+</script>

structure/template.php

@@ -23,12 +23,6 @@ header("Cache-Control: no-cache, must-revalidate");
     <link rel = "shortcut icon" href = "<?= $relativepath ?>assets/img/ico_promo_60.ico" >
 
 
-	<!-- EDIT : la police (modifiée) est host dans assets/fonts/*.otf, et définie dans assets/css/template.css il n'y a plus besoin de la charger depuis cdnfonts -->
-    <!-- ICI C'EST LA POLICE QU'IL FAUDRA CHANGER SUIVANT LE THEME, il faudra penser à modifier le fichier css car ici on importe seulement la police mais dans le css on l'attribut au texte -->
-    <!--link href="http://fonts.cdnfonts.com/css/new-super-mario-font-u" rel="stylesheet"-->
-                
-
-
     <title><?= $pagetitle ?> | INSAT Accueil</title>
 
 
@@ -60,7 +54,7 @@ header("Cache-Control: no-cache, must-revalidate");
             </header>
 
             <?php 
-            if(isset($txt_pancarte)){
+            if(isset($txt_pancarte) && $txt_pancarte != ""){
 
             echo "<div class=\"pc_container\">
                 <div class=\"pancarte\">