From 6a964693f425db11b3845a3db81163d2873d36b3 Mon Sep 17 00:00:00 2001 From: Keplyx Date: Tue, 24 Apr 2018 00:15:37 +0200 Subject: [PATCH] Improved css and animations --- assets/css/hamburger.css | 59 +++++++++++++++++++++++++------- assets/css/photos.css | 17 ++++----- assets/css/sidenav.css | 17 +++++++-- assets/scripts/sidenavScript.js | 17 +++++++++ favicon.ico | Bin 4286 -> 16958 bytes includes/sidenav.html | 14 ++++---- includes/top_bar.html | 7 ++-- 7 files changed, 95 insertions(+), 36 deletions(-) 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 bdf48fc89abb1044c4b9e816ffb384e60da44fe3..78bb04fadca8e59d85afd0f8f72926660c55fa42 100644 GIT binary patch literal 16958 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 literal 4286 zcmbtYdu)@}75_f_^E-ZgpY7O*n>fzH&ck`wNeFphpdma1qO=-Ps;%qRiFRzX9W-Pq zVWiM??Pxm~1Hx$2l8usSW9om~I%#O_T6LYeNmW~Enl^+ws%>b{ECiCq{_ULWN6jPQ z(L^`Ck8^*&d(Y#Z<4BTBzhz|-|CLU-B&kr6q-tt3B`u-G^Plra36$tHPoZv|)g~Xd z704eLjnafHOG$3rr@8m3jj#;M5})!pIkVf_d`0>bW{W)Gbm^vP5(cA$J6BjhJfbaK zZV_|5#xgAH^XtcH+?EBojZf9?kdGTp(oD3`INkpp7g`sZ1kcvTT^ReN53v@bXx!&H zJ{QZdEbrmHbe2T_jLrzj``K^WM&BhAg6jm<{UxSu@(%djku zc`sv-%|532$jzLAY*W(>y4 z_(<&y&Jb1%(qw^M7H7}$Z0UExYL#(d)N@0AmSI`mlikmHAX|d4FV3R})nbu9s;)B# z8#L>XWq*gjKzMz*ksqUbcSpE!Df@k*j6u+ zzF22Fo>bA=PX1<)gxzT$qD@Au=(VEn{sLj+U`PQswl~l58q2UOafrQ)!B~vR*vvut zJ${uP+Q@gONl&T#dvO2TPpCqlE7w{PYc+vl5fooAnPtd2Ni^>B9Ivqq%d!mycc*^tf~WmpmVdw%3IpLzC>8$-lVUa8EeZuumg zL7{WH6h%K(9Sx#mNd>kKhq3maLeWojS0YgA5i_R?IXX#KmY@W_A@nnwrCTaKoM z8_=*|BNirFaNpM)`1+#`1cGI-+3&y?z8KE=%{})z(Ydq?)zLB-O~n^I{$4-54{NNp z(2VQ?Bx?Tf`)KakDf&EC3ZB8Lbruwcegnywmhn}+hc$P(VDY>P*_DD!^W1pd>N|r~ z>k}}zC&ZX>w+$5wJGL)LKT& z8y0V^PNjVrj*`09>AqjhjUz4ZpuT;S&N3_J%)WCdu6#MSUL6}mynO>gb$g+ArFrbW z-@$4#jF9iVTOY5$ocslkBih`X!{Rek#!sPR<#=vx=hJuM?!IEUO5PT8tc!5t4Qa~QYeia;5hj+y-Vj3%c|z&Hx%@vB=SOTAM=MA-y;7jLv3RS6_GNs zg@)G7PAJ+`j=y{DCg_}(Gvg%LW0Lx5{pi#gv@ZHG$KrX)pR<}bNV-ew#aj3l+<~nm zo7TU6!l|)XY;>-ny7(%$N+cKg#Tszfliyt+ zxfIH34~p1h-(0b-2VGrF@cG?;<@hTu4b9Hw|BPSN^cpsAb&?OA6P%&O*U`D`D>?q2 zb(^vFZVzn!ztMe@F#9IOJEzkJ>CUHxoXwy9H+gbjGH!-*;EcC+bM$$_`(R;*`6fw7G%{U%>*a0d$;S9W!J15JA zn_oj$q8J?=9jLA@@8|c|U@o0hC_ZJZZ1~b3`P!$XuUYcFBo;4k!gC{j6cqnU z*gVqmrg&3JDk;W9+z>Buvu;c4KERJ(DaY#dR@^~8nppiKfx}q5-uK`(^enGOdwYAT zt*vzx=KxhRj?tSu_59IB92~2~(Gwy3aI{IZ#pEaTF*A;x^pS5hVEdW#dHPUW|n^2H&ON%{->NcQ_T_j!)j zScczJ!oR8S-`FKnktAVOk``ZPbKAxLKDf;v-g_#8bDA(2n>m<^ HIhp(aVr04J 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