Improved css and animations

assets/css/hamburger.css

@@ -1,37 +1,70 @@
 #hamburger {
     display: inline-block;
+    position: relative;
     cursor: pointer;
-    z-index: 2;
-    color: white;
     font-size: 32px;
     margin: 5px;
+    height: 40px;
+    width: 40px;
 }
 
-.bar1, .bar2, .bar3 {
+#bar1, #bar2-1, #bar2-2, #bar3 {
-    width: 35px;
+    position: absolute;
+    width: 40px;
     height: 5px;
     background-color: #fff;
-    margin: 6px 0;
+    margin: 5px 0;
-    transition: 0.4s;
+    transition: 0.3s;
     box-shadow: 1px 1px 3px #333;
 }
 
+#bar1 {
+    top: 0;
+}
+
+#bar2-1, #bar2-2 {
+    margin: 0;
+    width: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+#bar2-1 {
+    left: 0;
+}
+
+#bar2-2 {
+    right: 0;
+}
+
+#bar3 {
+    bottom: 0;
+}
+
 /* Rotate first bar */
 
-.change .bar1 {
+.change #bar1 {
-    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
+    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
-    transform: rotate(-45deg) translate(-9px, 6px);
+    transform: rotate(-45deg) translate(-8px, 8px);
 }
 
 /* Fade out the second bar */
 
-.change .bar2 {
+.change #bar2-1 {
     opacity: 0;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+
+.change #bar2-2 {
+    opacity: 0;
+    -webkit-transform: translateX(50%);
+    transform: translateX(50%);
 }
 
 /* Rotate last bar */
 
-.change .bar3 {
+.change #bar3 {
-    -webkit-transform: rotate(45deg) translate(-8px, -8px);
+    -webkit-transform: rotate(45deg) translate(-10px, -10px);
-    transform: rotate(45deg) translate(-8px, -8px);
+    transform: rotate(45deg) translate(-10px, -10px);
 }

assets/css/photos.css

@@ -58,27 +58,21 @@
     cursor: pointer;
     transition: 0.3s;
     padding: 0;
+    margin: 10px 2px 0 2px;
 }
 
 .photos img:hover {
     box-shadow: 0 0 5px #000;
+    -webkit-filter: blur(1px); /* Safari 6.0 - 9.0 */
+    filter: blur(1px);
     opacity: 0.7;
+    border-radius: 20px;
 }
 
 .photos img:active {
     box-shadow: 0 0 10px #000;
 }
 
-.no_photo {
-    font-size: 25px;
-    text-decoration: none;
-    border-radius: 10px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
 .photos_path {
     width: 100%;
     display: flex;
@@ -97,6 +91,7 @@
     justify-content: center;
     background-color: #1a1a1a;
     box-shadow: 0 0 4px #000;
+    text-shadow: 0 0 5px #1c1c1c;
     transition: 0.3s;
     color: #e0e0e0;
 }
@@ -204,6 +199,7 @@
     position: fixed;
     bottom: 0;
     right: 50%;
+    -webkit-transform: translateX(50%);
     transform: translateX(50%);
     background: #1c1c1c;
     height: 25px;
@@ -251,6 +247,7 @@
     justify-content: center;
     background-color: #1a1a1a;
     box-shadow: 0 0 4px #000;
+    text-shadow: 0 0 5px #1c1c1c;
     transition: 0.3s;
     color: #28ca2a;
     cursor: pointer;

assets/css/sidenav.css

@@ -18,19 +18,30 @@
 /* The navigation menu links */
 
 .sidenav a {
-    padding: 8px 0 8px 32px;
+    padding: 8px 0 8px 0;
-    margin-right: 30px;
+    margin: 0 30px 0 30px;
     text-decoration: none;
     font-size: 20px;
     font-family: 'Rubik', sans-serif;
     color: #f0f0f0;
-    display: block;
+    display: inline-flex;
     transition: 0.3s;
+    height: 30px;
+}
+
+.sidenav-icon {
+    left: 0;
+    margin-right: 5px;
+    -webkit-transform: translateY(5px);
+    transform: translateY(5px);
+    height: 20px;
+    width: 20px !important;
 }
 
 .sidenav a:hover {
     color: #c5af86;
     text-shadow: 0 0 5px #c5af86;
+    margin-left: 20px;
 }
 
 /* Style page content - use this if you want to push the page content to the right when you open the side navigation */

assets/scripts/sidenavScript.js

@@ -67,3 +67,20 @@ manager.on('swipe', function(e) {
         closeNav();
     }
 });
+
+// Animate hamburger on hover
+hamburger.hover(function(){
+    $("#bar1").css("background-color", "#c5af86");
+    $("#bar2-1").css("background-color", "#73b795");
+    $("#bar2-2").css("background-color", "#73b795");
+    $("#bar2-1").css("left", "-5px");
+    $("#bar2-2").css("right", "-5px");
+    $("#bar3").css("background-color", "#c5af86");
+}, function(){
+    $("#bar1").css("background-color", "white");
+    $("#bar2-1").css("background-color", "white");
+    $("#bar2-2").css("background-color", "white");
+    $("#bar2-1").css("left", "0");
+    $("#bar2-2").css("right", "0");
+    $("#bar3").css("background-color", "white");
+});

includes/sidenav.html

@@ -1,10 +1,10 @@
 <div id="menuSidenav" class="sidenav">
-    <a href="index.php" id="index" class="page-link"><i class="fas fa-home"></i> L'Accueil</a>
+    <a href="index.php" id="index" class="page-link"><i class="fas fa-home sidenav-icon"></i> L'Accueil</a>
-    <a href="planning.php" id="planning" class="page-link"><i class="fas fa-calendar-alt"></i> Le Planning</a>
+    <a href="planning.php" id="planning" class="page-link"><i class="fas fa-calendar-alt sidenav-icon"></i> Le Planning</a>
-    <a href="prevs.php" id="prevs" class="page-link"><i class="fas fa-medkit"></i> La Prévention</a>
+    <a href="prevs.php" id="prevs" class="page-link"><i class="fas fa-medkit sidenav-icon"></i> La Prévention</a>
-    <a href="parrainage.php" id="parrainage" class="page-link"><i class="fas fa-user-plus"></i> Le Parrainage</a>
+    <a href="parrainage.php" id="parrainage" class="page-link"><i class="fas fa-user-plus sidenav-icon"></i> Le Parrainage</a>
-    <a href="photos.php" id="photos" class="page-link"><i class="fas fa-camera"></i> Les Photos</a>
+    <a href="photos.php" id="photos" class="page-link"><i class="fas fa-camera sidenav-icon"></i> Les Photos</a>
     <br>
-    <a href="coms.php" id="coms" class="page-link"><i class="fas fa-users"></i> Les Coms</a>
+    <a href="coms.php" id="coms" class="page-link"><i class="fas fa-users sidenav-icon"></i> Les Coms</a>
-    <a href="infos.php" id="contact" class="page-link"><i class="fas fa-info"></i> Les Infos</a>
+    <a href="infos.php" id="contact" class="page-link"><i class="fas fa-info sidenav-icon"></i> Les Infos</a>
 </div>

includes/top_bar.html

@@ -1,8 +1,9 @@
 <div id="header_top">
     <div id="hamburger" onclick="toggleNav()">
-        <div class="bar1"></div>
+        <div id="bar1"></div>
-        <div class="bar2"></div>
+        <div id="bar2-1"></div>
-        <div class="bar3"></div>
+        <div id="bar2-2"></div>
+        <div id="bar3"></div>
     </div>
     <h4 id="menu_title">INSA Toulouse 2018</h4>
 </div>