diff --git a/assets/css/hamburger.css b/assets/css/hamburger.css
index 2ff427d..a0a2429 100644
--- a/assets/css/hamburger.css
+++ b/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 {
- width: 35px;
+#bar1, #bar2-1, #bar2-2, #bar3 {
+ position: absolute;
+ width: 40px;
height: 5px;
background-color: #fff;
- margin: 6px 0;
- transition: 0.4s;
+ margin: 5px 0;
+ 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 {
- -webkit-transform: rotate(-45deg) translate(-9px, 6px);
- transform: rotate(-45deg) translate(-9px, 6px);
+.change #bar1 {
+ -webkit-transform: rotate(-45deg) translate(-10px, 10px);
+ 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 {
- -webkit-transform: rotate(45deg) translate(-8px, -8px);
- transform: rotate(45deg) translate(-8px, -8px);
+.change #bar3 {
+ -webkit-transform: rotate(45deg) translate(-10px, -10px);
+ transform: rotate(45deg) translate(-10px, -10px);
}
diff --git a/assets/css/photos.css b/assets/css/photos.css
index 229d251..cae8200 100644
--- a/assets/css/photos.css
+++ b/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;
diff --git a/assets/css/sidenav.css b/assets/css/sidenav.css
index 6000b19..2f0bd26 100644
--- a/assets/css/sidenav.css
+++ b/assets/css/sidenav.css
@@ -18,19 +18,30 @@
/* The navigation menu links */
.sidenav a {
- padding: 8px 0 8px 32px;
- margin-right: 30px;
+ padding: 8px 0 8px 0;
+ 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 */
diff --git a/assets/scripts/sidenavScript.js b/assets/scripts/sidenavScript.js
index 215a8bf..2010a03 100644
--- a/assets/scripts/sidenavScript.js
+++ b/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");
+});
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
index bdf48fc..78bb04f 100644
Binary files a/favicon.ico and b/favicon.ico differ
diff --git a/includes/sidenav.html b/includes/sidenav.html
index 1008aba..c7b2547 100644
--- a/includes/sidenav.html
+++ b/includes/sidenav.html
@@ -1,10 +1,10 @@
diff --git a/includes/top_bar.html b/includes/top_bar.html
index 8379484..1120d92 100644
--- a/includes/top_bar.html
+++ b/includes/top_bar.html
@@ -1,8 +1,9 @@
\ No newline at end of file