Compare commits

..

No commits in common. "f741ed4afcc5d6e7954a93ff5e6afa643a8b38ae" and "b6536ce19912f2400a928c3548e16b171e1394ff" have entirely different histories.

8 changed files with 194 additions and 159 deletions

View file

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

View file

@ -0,0 +1,64 @@
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;
}

View file

@ -19,13 +19,8 @@
#decompte{ #decompte{
font-size: 7vh; 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%;
} }
} }

View file

@ -4,7 +4,7 @@
width: 100%; width: 100%;
height: 200%; height: 200%;
font-size: 10vh; font-size: 10vh;
color: rgb(230, 11, 11); color: rgb(196, 23, 23);
} }
@ -13,12 +13,7 @@
#decompte{ #decompte{
font-size: 7vh; 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%;
} }

View file

@ -98,20 +98,6 @@ a.linkmail:hover {
border-radius: 10px; 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 { .pancarte .title {
padding: 3vw 4.5vw; padding: 3vw 4.5vw;
color: black; color: black;
@ -185,8 +171,6 @@ footer {
margin-top: 2vh; margin-top: 2vh;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
font-size: 3vh;
} }

View file

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

View file

@ -12,14 +12,13 @@ include "assets/scripts/globals.php"
<ul> <ul>
<?php <?php
for($i = 0; $i <= 17; $i++){ 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> </ul>
@ -30,45 +29,39 @@ for($i = 0; $i <= 17; $i++){
<!-- librairie d'icones libres de droit font-awesome pour mettre le petit logo hamburger--> <!-- Sur téléphone -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <nav class="mobile-menu" id="mobile-menu">
<!-- la barre de navigation --> <div class="containerF3g">
<div class="topnav"> <div class="mobile-grid">
<a href="/index.php" class="active">P'tit menu :)</a>
<!-- les liens (cachés par défaut) -->
<div id="mobile_menu_links">
<?php
for($i = 0; $i <= 21; $i++) {
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>
<?php <span id="close-mobile-menu" class="close-mobile-menu">
x
</span>
for($i = 0; $i <= 17; $i = $i + 2){ </nav>
// 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>

View file

@ -23,6 +23,12 @@ header("Cache-Control: no-cache, must-revalidate");
<link rel = "shortcut icon" href = "<?= $relativepath ?>assets/img/ico_promo_60.ico" > <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> <title><?= $pagetitle ?> | INSAT Accueil</title>
@ -54,7 +60,7 @@ header("Cache-Control: no-cache, must-revalidate");
</header> </header>
<?php <?php
if(isset($txt_pancarte) && $txt_pancarte != ""){ if(isset($txt_pancarte)){
echo "<div class=\"pc_container\"> echo "<div class=\"pc_container\">
<div class=\"pancarte\"> <div class=\"pancarte\">