From a6c40157ad4c0071b5375dbe29f811ef402de902 Mon Sep 17 00:00:00 2001
From: Guillaume Joffre <guillaume.joffre12@gmail.com>
Date: Sun, 17 Apr 2022 16:18:38 +0200
Subject: [PATCH] =?UTF-8?q?.box-jaune=20design=20coh=C3=A9rent=20avec=20le?=
 =?UTF-8?q?=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/menu.css      |  9 +++-
 assets/css/page/coms.css |  4 +-
 assets/css/template.css  | 97 +++++++++++++++++++++++++++++++++-------
 blouse.php               |  2 +-
 clubs.php                | 18 ++++----
 coms.php                 | 16 ++++---
 index.php                | 16 ++++---
 info.php                 | 17 ++++---
 structure/menu.php       |  4 +-
 structure/template.php   |  4 ++
 10 files changed, 135 insertions(+), 52 deletions(-)

diff --git a/assets/css/menu.css b/assets/css/menu.css
index 2f041c8..52901e9 100644
--- a/assets/css/menu.css
+++ b/assets/css/menu.css
@@ -1,6 +1,6 @@
 .menu {
 	position: fixed;
-	bottom: 0;
+	bottom: -2px;
 	left: 0;
 	width: 100%;
 	height: auto;
@@ -12,9 +12,10 @@
 
 .tuyau {
 	position: fixed;
-	bottom: 0;
+	bottom: -2px;
 	right: 3vw;
 	width: 8%;
+	min-width: 6.3vmax;
 	height: auto;
 	z-index: 2;
 
@@ -26,6 +27,10 @@
 	transform-origin: center;
 }
 
+.menu-link.menu-bottom-line use {
+	transform-origin: bottom;
+}
+
 .menu-link text {
 	transition: transform 50ms;
 }
diff --git a/assets/css/page/coms.css b/assets/css/page/coms.css
index 7fc7ddd..367ff9a 100644
--- a/assets/css/page/coms.css
+++ b/assets/css/page/coms.css
@@ -3,8 +3,8 @@ body {
 	background-color: white;
 }
 
-#boxjaune h1 {
-	margin: 0;
+.box-jaune h1 {
+	margin: 0 0 0.5em;
 	padding: 0;
 }
 
diff --git a/assets/css/template.css b/assets/css/template.css
index c724ae1..54609a3 100644
--- a/assets/css/template.css
+++ b/assets/css/template.css
@@ -48,36 +48,101 @@ a.linkmail:hover {
 	-webkit-text-stroke: 1px white;
 }
 
-#boxjaune {
+/** START BOX JAUNE **/
+
+.box-jaune {
 	display: inline-block;
-	background-color: #FFDC00;
+	position: relative;
 	padding: 10px;
-	box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.61);
-	border: 3px solid black;
 	margin: 40px 10vw 0;
+	font-size: 2.5px;
+
+	background-color: #efd21f;
+	border-top: solid 2em #fbf322;
+	border-left: solid 2em #a29013;
+	border-right: solid 2em #f7e31c;
+	border-bottom: solid 2em #73590b;
+
+	clip-path: polygon(
+			0 2.00em,1em 1em,2.00em 0,
+			calc(100% - 2.00em) 0,calc(100% - 1em) 1em,100% 2.00em,
+			100% calc(100% - 2.00em),calc(100% - 1em) calc(100% - 1em),calc(100% - 2.00em) 100%,
+			2.00em 100%,1em calc(100% - 1em),0 calc(100% - 2.00em)
+	);
+}
+
+.corners-top::before {
+	top: -2em;
+	left: -2em;
+	background-color: #bfa018;
+}
+
+.corners-top::after {
+	top: -2em;
+	right: -2em;
+	background-color: #fbfa87;
+}
+
+.corners-bottom::before {
+	bottom: -1.9em;
+	left: -2em;
+	background-color: #44350d;
+}
+
+.corners-bottom::after {
+	bottom: -1.9em;
+	right: -2em;
+	background-color: #967912;
+}
+
+.corners::before,
+.corners:after {
+	content:"";
+	position: absolute;
+	display:block;
+	width: 2em;
+	height: 2em;
+	z-index: 2;
+}
+
+.box-jaune .title {
+	padding: 3vw 4.5vw;
+	color: black;
 	font-size: 1.5rem;
 }
 
-#title_in_box {
-	padding: 25px;
-	color: black;
+.circles-top {
+	top: 3em;
 }
 
-.circle {
-	width: 10px;
-	height: 10px;
-    border-radius: 5px;
-    background: black;
+.circles-bottom {
+	bottom: 3em;
 }
 
-#circle_l {
-    float: right;
+.circles::after,
+.circles::before {
+	content: "";
+	position: absolute;
+	display: block;
+	width: 2em;
+	height: 2em;
+	top: inherit;
+	bottom: inherit;
+	border-radius: 100%;
+	background: black;
+	opacity: .9;
 }
 
-#circle_r {
-	float: left;
+.circles::before {
+	left: 3em;
 }
 
+.circles::after {
+	right: 3em;
+}
+
+/** END BOX JAUNE **/
+
 .menu_space_bottom {
   position: sticky;
 	width: 100%;
diff --git a/blouse.php b/blouse.php
index f1b7f84..d0cd0e9 100755
--- a/blouse.php
+++ b/blouse.php
@@ -44,7 +44,7 @@ ob_start(); // Start reading html
             à-dire, <strong>vert flamboyant si tu es <strong class="score-boo">BOOMIFLORE</strong> et violet intense pour <strong class="score-pek">PEKSUREAU</strong></strong> .</li>
         <li>Décore ta blouse selon le thème des <strong>INSA Games</strong> et de ton équipe.</li>
     </ul>
-    <b><strong>Mais attention ! Tu ne peux pas faire n’importe quoi, il y a des règles à respecter si tu
+    <p><strong>Mais attention ! Tu ne peux pas faire n’importe quoi, il y a des règles à respecter si tu
     ne veux pas rester coincé à l’aéroport !</strong></p>
 
 
diff --git a/clubs.php b/clubs.php
index d2e22f2..396e203 100644
--- a/clubs.php
+++ b/clubs.php
@@ -3,15 +3,15 @@ ob_start(); // Start reading html
 ?>
 <main>
 	<section>
-		<div id="boxjaune">
-	        <div id="circle_l" class="circle"></div>
-	        <div id="circle_r" class="circle"></div>
-	        <div id="title_in_box">
-	        	<a href="https://amicale-insat.fr/clubs" target="_NEWWWWW" class="link_in_yellow_box">amicale-insat.fr/clubs</a>
-	        </div>
-	        <div id="circle_l" class="circle"></div>
-	        <div id="circle_r" class="circle"></div>
-	    </div>
+        <div class="box-jaune">
+            <span class="corners corners-top"></span>
+            <span class="corners corners-bottom"></span>
+
+            <div class="title"><a href="https://amicale-insat.fr/clubs" target="_NEWWWWW" class="link_in_yellow_box">amicale-insat.fr/clubs</a></div>
+
+            <span class="circles circles-top"></span>
+            <span class="circles circles-bottom"></span>
+        </div>
 	</section>
 	<section>
 		<iframe src="https://amicale-insat.fr/clubs" class="iframe_amicale" allow="fullscreen" scrolling="auto"></iframe>
diff --git a/coms.php b/coms.php
index 96f75a1..651fe4e 100755
--- a/coms.php
+++ b/coms.php
@@ -2,13 +2,17 @@
 ob_start(); // Start reading html
 ?>
 <main>
-	<div id="boxjaune">
-        <div id="circle_l" class="circle"></div>
-        <div id="circle_r" class="circle"></div>
-        <div id="title_in_box"><h1>Les Com's</h1><br>La liste des responsables (les meilleurs, objectivement ^^)</div>
-        <div id="circle_l" class="circle"></div>
-        <div id="circle_r" class="circle"></div>
+
+    <div class="box-jaune">
+        <span class="corners corners-top"></span>
+        <span class="corners corners-bottom"></span>
+
+        <div class="title"><h1>Les Com's</h1>La liste des responsables (les meilleurs, objectivement ^^)</div>
+
+        <span class="circles circles-top"></span>
+        <span class="circles circles-bottom"></span>
     </div>
+
     <div id="main_content">
 		<section>
 			<div class='title_com'>Le Bureau</div>
diff --git a/index.php b/index.php
index e62c2ad..82199cc 100755
--- a/index.php
+++ b/index.php
@@ -3,14 +3,16 @@ ob_start(); // Start reading html
 ?>
 <main>
 
-    <div id="boxjaune">
-        <div id="circle_l" class="circle"></div>
-        <div id="circle_r" class="circle"></div>
-        <div id="title_in_box">Semaine d'Accueil INSA Toulouse 2022</div>
-        <div id="circle_l" class="circle"></div>
-        <div id="circle_r" class="circle"></div>
+    <div class="box-jaune">
+        <span class="corners corners-top"></span>
+        <span class="corners corners-bottom"></span>
+
+        <div class="title">Semaine d'Accueil INSA Toulouse 2022</div>
+
+        <span class="circles circles-top"></span>
+        <span class="circles circles-bottom"></span>
     </div>
-    
+
     <div id="msg_acc">
         <p>
             Bienvenue à l'INSA Toulouse jeune aventurier, pour ta magnifique semaine d'accueil.
diff --git a/info.php b/info.php
index 538b012..5b87c08 100644
--- a/info.php
+++ b/info.php
@@ -2,13 +2,16 @@
 ob_start(); // Start reading html
 ?>
 <main>
-	<div id="boxjaune">
-		<div id="circle_l" class="circle"></div>
-		<div id="circle_r" class="circle"></div>
-		<div id="title_in_box">Informations (contact, crédits, vie privée)</div>
-		<div id="circle_l" class="circle"></div>
-		<div id="circle_r" class="circle"></div>
-	</div>
+
+    <div class="box-jaune">
+        <span class="corners corners-top"></span>
+        <span class="corners corners-bottom"></span>
+
+        <div class="title">Informations (contact, crédits, vie privée)</div>
+
+        <span class="circles circles-top"></span>
+        <span class="circles circles-bottom"></span>
+    </div>
 
 	<div id="main_content">
 		<section>
diff --git a/structure/menu.php b/structure/menu.php
index 5a37073..9cbe5c0 100644
--- a/structure/menu.php
+++ b/structure/menu.php
@@ -6,7 +6,7 @@ if(!isset($relativepath)) {
 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      class="tuyau" id="parent"
-     viewBox="0 0 44 78">
+     viewBox="0 0 44 76">
 
     <!-- espace de définition -->
     <defs>
@@ -147,7 +147,7 @@ if(!isset($relativepath)) {
     $lien_y_1 = ["", "photos.php","lydia.php", "clubs.php", "prevs.php", "map_com_ville.php", "", "", "downloads.php", "coms.php", "info.php"];
     for($i = 0; $i <= 10; $i++) {
         echo
-        '<a href="'.$lien_y_1[$i].'" class="menu-link">
+        '<a href="'.$lien_y_1[$i].'" class="menu-link menu-bottom-line">
             <use xlink:href="#Brick" width="47" height="17" x="'.$co_y_1[$i].'" y="17.85"/>
             <svg id="btn10" width="47" height="17" x="'.$co_y_1[$i].'" y="17.85">
                 <text x="50%" y="50%">
diff --git a/structure/template.php b/structure/template.php
index 5450158..946e2b2 100644
--- a/structure/template.php
+++ b/structure/template.php
@@ -61,6 +61,10 @@ $pagename = $infopage[4];      // nom de la page exact servant à appeler le css
         </footer>
 
          <!-- TODO un espace qui permet de couvrir la surface sous le menu, pour l'instant on utilise la même image pour pas oublier que l'espace doit être de la même taille que le menu mais faudra changer ça -->
+        <div style="height: 6.8vw">
+
+        </div>
+
     </body>
 </html>
 <?php