From 280e9e1d36d3d1e4f9f872fc13e21e1c5b6817ad Mon Sep 17 00:00:00 2001 From: Yohan Boujon Date: Sat, 24 Jun 2023 17:15:11 +0200 Subject: [PATCH] Added favicon, animation for menu selection, responsiveness for the footer element --- assets/favicon.ico | Bin 0 -> 34056 bytes components/navbar.html | 9 +++- css/footer.css | 98 +++++++++++++++++++++++++++++------------ css/navbar.css | 12 ++++- index.html | 2 +- js/base.js | 1 + js/navbar.js | 45 +++++++++++++++++-- 7 files changed, 132 insertions(+), 35 deletions(-) create mode 100644 assets/favicon.ico diff --git a/assets/favicon.ico b/assets/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..3fff135e54069ec538bc12c468d8bdf8bebe7a8d GIT binary patch literal 34056 zcmeFa2UJzbvM{{QA?KiEB`7FK0R;gii6Tj|2R3{_=c|0>did9XIzc&kvy95n2or75(*@55sQBg?=35lco4;-+SmzNJ!IC#){ z-@bi#DJdz;(8vh0vbH8tQBhGksHhmBq@eUj69NHW=gVjvYIy zfzF58Iy#ezii+yccOwA7*u;bYbzVzKNiiIdk@=;)wKWEPsQ~RWKm!3_?eO8leK6(} zy<^AbVXP-%j9&~4488%5Hn@Kabr=EG+uPXKpmFSiZv(*NHE6R4wA916Pr~?DfF4J{ zpL^)=;SmiDjTRVh=BZPsh@G6A*4sNm8FT(T4&FxrPYH&Gh6H_m{qyjw2=p$(*yEwk zW5ByPi^nnOcF*W06i;2q}R;II|O&|++COaPuGK)Qg z96WfCR6#-ExArji81%)42~h~ESPVWY|aiV~57U;&3=VF-wRDXZcBH-LA2@cbKa z{n7@tLwW{O6$a`EL;7d^0-g2$h@Sa{-v4+1#ep6nqotvtXJuvG0{T*jmzP&oKv2*? zSXg);0469X_A0G^K+Hd$_Z6aMrq^hc_3~Mo2UO}M>^w3*acV9pc zjzgQpWBU4QptA{}3ka}&kgg)Y`arM-Yh)ha2f$ZYi;-xp{Jch?4$^ZJ(54)TAP#2@1prF~jd9wt}p9T{XlPK^+2=EVq4kiHZIN0|v5fPCCu&>nZ*}Hcb z_K$C{w={8ba_Vi{whe=M`#aPyPnfQ*F0q`vyavqQGnk7hXtx47bZF0>JytNTR?zDN znBR0WGc#J)XA03=SOQOh?*ufzun#-~{M5p`cKr?hBveG*ryI0I8X|E&_4M79nCSSw^2gd*PyEzK%V{vKkygL0Xx+Dfa)Ur0L##J zRYOw~;Y9n&Jwzvr>ov%fG<+L?ehBdW4b1xu7z?WZ0`O2n-M_&P?~#m>LHP*AO_1Kd zAK@H>K4!pHAb`BtLc1s=Um*8=@J#^fKSB6+@810$zQ?0)c6N5j8R_Xb7gyK6!SCko zj@d$=U=OGQ{Zr5$@nn4*u=k8Wdtt!ujK-#PWA2^l;M64fFEyB7;8C&^*F?uk#h=t$Z5~4=Lc+1sp5NDk>`=D?YIQF+$xO z#4|Kz!22BJnZe1~`R{O}7iXiQ5d9d?B@A^xp*cWpVJ*j!lasT-`aTZyFM-WP*s^8I z92*;3G>j_>_`dS%xT-*&6=`W{G0-Rfun(XKn_XSSK+ex2{GcBQpufI@T=xRr37~(S zRw-#|0?6$uz!LPo{tk2+ft#B<1tI=f|NPt$;J}oXl{rBE8Tj)u^r$Oj2X?@6adm)lkmI>wiyBJ)Ae}) z9u5J#1$YhL8=-s-r7uDT>*P0_Ki|N2r0Yll_Q8BA07yYQQ7HGryJAEq%*h(`g>;-a z=q^S82ADHCm^(_aKS+`O^adUMM=xl*KJUiq)_pt<-B z7Ray(j0~&Z03tGM1&`hlVSPUVs)JwwVCB~m-6J4;{s|x8Ms^rCfC9j8b{IH-f7xNc zkiV|~2@Vi}4MYik`zB^)W^ULQ_JNM(0GsI~$u2>_0MKQ|Z9I z=?JlhuwA=%Uj^GM2W-7su!-8iru}+YNof-H=|!+#){xDB_F!ahqCFDrWuPn90c_ns zCl?op)gbTaZ!fUVkWM9ny;~LRw0q#6egMC881}3g*pHUMt|35s0$cR-CE!AP!4kj}z&C(ypveVnRt#*AzwI2Jpe?eqkWX6llP&#sc%dG$uNMK|`reM} z0^Uh$@R8v?ijiCd2mr7KK(;Zm$M^v_06zuLj{R2~2@!+#8uSh7g#&y6XaT4Mcm#XT zb%00!cfer|`X%lEBZ;zXEITBha7@wiyPp{7-2>G!hdL;lQri2e`7prWye}E3gg- zK*s_A@}aZ=7Lgpn`kI6O6cJMJv63K8^qXyutgWV6BgCV*f1QAbBdANv1+zQH7fiIYajQH?U7N;JFvo0iA;0xx$=?!!ufM z>+Rq>T7zhvtp5709{5EA@OOQq7btF446+98QZ{h>S|U7)sDFr~q4^#FogfMErzZ3r zbPoaee-`@Zh35gp6XXMckDdqeVGDkE7pe#COP~%J;_*Ma&>Dn#sDEoHSC9@vaWaUV zEyH-*;QcbPoq^xYFnm_PQ;28+y+;69y90euK)WaC9g35IK7Iv0sxGt{MepqG?PHKH ziu{$|yI>BHE?@)PO%@4VaTzlc6A9R= zhVX6?{8$3a^%Cd?6vJHuUd=#!@(9BJ&n`bdKNR;vG}r?EC1m^a3kaM&LNC$y!{|43{gO867J?JN-w+QMm2MEwT$W*nvyF2Ya8~X-bNDe(bJm>&V z0h&uBb7(FQ9vEv6_@Uc?r$}GhqIYPG0H3B{-8upe67c0TfVL^L_R#u-I;()|1k}S~ zFI?E@=6B1~l$7;#2tI=>@NF33LGpue!FcY$I7y01N-&TsOC%>~pM!V;0d(FR=!Pg* z-#bATo}xAg;QJV?4|^77=56pD1KIiAzBfL2d3$4*FJH#Pd`6-%B0#ZPz}*7<+yz~h z0ekvK#2*BZ13>=bx_*N1eW1H05noU{*q>LS-z8`hfMP8FX#d;jccUaCBEsS?Uc_Kr z$3Z77qj5kxgnu1CuGe)h!oM+2@Pi2uZzCW*39%9a(6{~#?1Xi_1-dj6^cRNm6#wdi z^^N$nLq=A%3$0}|Mx_6ckBtD?0jO`Z_K;7Eo)H}|C+mP>?i;!j?GXq-W+Ktv3%cT8 zb&qra0s+7|v@t%^-_L;FgDzU<$A+B4cNDi<0GR#>zQg?}jKLq|5QBLBAMKw8+JyjI z1$j;ah(ga$27z4OgZ`J$7*QMu$sjxiQvf^uy8hz8UmW<01OJi(5GTMx zTz~=Wf1-aUzVI&*|A`6^v%nzMfP)++5!_P&Fv2r8*ydtjLmviujldpv1Dibx?B%-< zlXwg^J1fAS==F~^MKKVd1JOpz%ECeov@ydwK6obyv?&8^mcU0}h*iXa9e*EatArRz zGsG`?!S@-1*xwxZ0;}MMtsy@b<*FcWIRtSK0f0Y7#P8Jll{P%kMh3Le0c|J_DF``v zS)ff5c;*1Kg#yo#z`xFhSV#@e{o~gV+eJBRGBmG1mov=gS>RbJ@T?GcRu4S;05P#) zaS4fOh`TI7ymSr4OOQ{4a^^qBG=Gmau&>u?MKu2&fN#1C{*pF|qyCW#_=16NkB3t8 z;K75B;cU@2@YmKLM@j%Z>oJ9mI4<&g{}Ipr2wlHJ@888{0e?OCMRG6?e}w$?SS7?L zh@oB9e>ZI~F66r*pRF4JU@Q1SbP(Gh{=FRXe;pLWH#XwEVZXzp zpXVCo?@>;53}6u8J@oey%ASq3hzDriK;|33H&g&$Zx_UywnDsT6Yz-wXd}wFe;*47 z4E(R8{728hAt4(+vKr8V;?*C3rdI%k5bL=QWjy$tA>f}m0vrQ+lmNtlmYo1Ba4vuv z-urCOk7OTY5XJGH1JL{tAN@Zf{HI3HKL+t`3g8hh#2z_d?&u-DP3G(COLXSU87$c}PuxDamk1zv1FSu_3 z9?rsEwFb}YaU!4{oe}AV{X!AWjG}l<`v(1R#sZz8S_aTV^n*NM5a&nn;~7{>1eh}d zDna(vbpu*6DDH*k4fa43ce{uPhrRIMrXS@_pdB9i-4F4!a)>9cqSzYB@1XcD%3q*9 zQ2Y;#1@_(|;5ReSQn^7ticdlu8jZmb_>A%x3_x?$2E7|{_H&8m4FNi11^agq@QW1Y z>ffT@7GxQ83Jt{gykHOc`fJShxBVUUkN5_BBnSx$Bid2Cb_i%iXOHe~(2sZtxhzEg z8L(+kEfb<{$I@9xhqaRcvUjGEB4`j2f+mFb$1RL`!@Om4_xDLEu-vbbR zkQ+ku*MkgGLwg?h){EL9KzR&UXYjUfm0^X&BoEdH=FR zb%A~&z<+b29~2WtIsxoD1ZxnRE`oaf=sThj+3c`Bn}GkcK))pPi_U1R(|~MKp#LKP z2b^amhW8K9H$)?{S3x(T7=J$KI6A+#>cP);0lIf_L;-oS_W2>KYE%OgMzW1Y4Q8enc# zLATpNJ_CasJK6)@p>I&G=QDtIw1>%qoS|GHI>%PK@g4ax;8!4?jKe(tW_!S1m=hKj zMvn4#|L%qMQnZdCFCY)L+ZgH#>P6foyc zH|RsTNT7WMzyM&~#)X`VJ=9s(ZAku*j{2D=fO`pYljt`A*y+=!|6TIe>!Wc;oH;`Z zdha@-6#wIBwKd=DxrOdD&(b6&hgJ& zA>b1nfb*ds)5n1~>uYX9KcIfl+=DI}0@`7SWbK@S=;>}|+KLbe9V zr=Eux0Ch@A3JJ*Qtqq=U)Q9pr%-I1rYt9JcB?0&|LqO{o@d2F~E%>RA^|?lR3D)g1 z(0}~U4;O+h92}ysPK(gkP<^DIAn#6qIL5lI1oWfxB5CmK2fDw|)YNo+A3=4|SU|?m zZ+YsVPCb+&Fz!D^|HG^-q)X9SmI1l`Eq96fL;fMGhbf@D7y3i;(F^(5VVIMR^BL=7 zK(-jNF`&-h0i4ZRuY>TRF{8NxJZQcafiFivU;HWhQDgKw4X^`QAqQN)!B?~fHu^&S zAwYWr`h69mZ3V9`WWqFs1C9Rw?n=feFwXL8F--$WB60_15FsL zJu-+_#ljd?H}u5%ISSB4$o514-`3AxZ;TJok8~3PbdTsmV@CO9&_x7vei{L?oq#Xv zb$-=l>*sGkj+P;Iqm6#U_h&Ak6N580C=ND(>;!b457C3<8uf?t3t9(=cj(;)ttgHq zC?rIH-`cFVLG+_<2+$bO^9F3Z-)M{8L!D*lTN~E$pCNzUb^?7O0XWD1QGe@w|4PdS z9jG3hkyu}|VArhshv?nL_diqu{V-qJV4wbX(9Z#Ve*C##paL;pv8{NHYb zd_*{pi-Yno%nACPXZ5de14?w34+rpnn~Xn&|MTb182F6XDGv`4kT*)87s3Bpp8u)A z{?+&|4*bP||6g+8mxDv-cjoB&W96Fsdc6f~y_~?-%RXQqJg*@xLJ4P?{-#`k$4~-> zK?#SIprl)%!=NM(7HF|hC@09Nf5r1l8HSN#T<{*wv%WHYFgZSe|_*rJy5;AU+5zM`RmUc<;MGeQW61C1i}jL7k;e}{mQrXas4}d zMD3!rHI->7*(rev8da6UkYvTdEe<0mg~H6^fdl;1Oj`Bu!DD_O$142&I6C~t39@@T zOPu-mbeIdea)nK!J4SD8=c_1o?9T8`-jQoxpDb<>qSkU%c%4opleUU02$0xP zM+{VGkcWw3WNE>3(uMDac=%~~FlMpk`Eg5%z5|nfPkESQNCYH`S&umN5%C`e#%`&8 zh=q{$F<_$~j;HMv3Jy74%7C|G$aCwhbkNtoO0SsOEURwS}hRKTJ+058n1O`|y}wEZ&iw_z9_OXlVqC!uBw8>`3p*;MU5!%JH-Y zODiP#4D8k0KEo6kDGCI)i8q_l)be|s9A{R>M*ZhL3|VA*$&JR04^SSG3!J(-bM=K9$;#uvBH z^P^kREz9c=^Iku#Qbd;K;U9N6-alOow<1MaF z>BvLXOhThwC*0+wU3!TkRJeIP1M#Zcih6nFkDsO8Dj2BH)Kd{?qS3liY0b(tFqVm1 zqYKj_zfrxSx5-yox^%2a%N0LCq6%?KwizN+EqUq z%%GjDzF^d){py~dnX7HAH0R1(xQHt8c}BAI%``ML*u^5Nmltdq6ng|z-^s6hQw|N? z9`@w!R!T~Tx6YVkZ&0iKlWpy0o1-GBXq1&3=ow>iu}lRKk|HbfobhDm?{KqU_%hI- zr>)OqXtBsFTBmJjc($x;|F^OqA1CdMkC>aU=E!oE5^+ztJQn5p z1Cr_?Ip1O}oy2l|{nb5AZ@5REjZ{2ZPUNMC6^o5atzVoTIyE5k})zzVD)>^)+W?ziRvFX5Fqxkesiuc)x@|X*;2SqVD6bsxA zu{`V-!gcpMPqf$%*v48r?9iQMCJ(aTH*NRrT{RYt5wtf3usnE5ck2Fq_)gL^G9lnbw>4@$Rs2n*t;iQzD7c)>n+zPf)>A?a%YE{)CiA{+g45=C`&sv?&Uy2E;zPUM%kRom0O3=N$J8T6Uh z9!Y;%9h_dg^?m=*)}wkCJlXJLIA!E#hD*t4{~xW$+)?X8T=rfxs{zwE0;#c8Nc)U7cR{Vos0Ad z)Kr=-I>UNdYNMAfv_HF(f)|ad;*D^5#p1PxrQJtNJyQ4l;NXtu{f+c7FB0^^+rnN4 z|A-ZPWLiwyRcuLGE6RK{O_&+F;f{C-JD7Dfe&Ll&nEVG_!tp@2WQU$xS3R7WPtu65 ziFb(8%+7j4KsYSJQCnYvt>;E#j+VfSx(gh+!OQk<#2-Hz65^+eF~DBtt&G{$mu0{6 zuAm9iAh)A6+s&%0?PT-fJktqR*JkNAizEAt=kAS3%1$+X3>{f@`5rJgPknMXah?Z- zHZdOe$fAOB(r?S8pNu1YQ-m0)n!rBSkBNR$Hzb%=wyWfx$T3n^j~STs^9iWvsZwUh z#b7vQrHoh2eb`1u@Y2P(gD+-JxVSX!PaD*WPh1vW&2M7inlZD@4b>EgbllGs5hSZ1 zldag{y+zuCI4kS4ZgR$0L1Cfw_xFz#=OG zjtgsA^0$8N+F@ALetP1`yL$b!TP6i~414x@!Y?pzSs7cA4ST#;^i`{)uI`9Rg1C@T zU7T#d$;GL!-^Ruwv%lMy;`r0gy-2)C<#Rrg3WrSuR9MB@Ob<49mYh1Y$LgF|k~n?Y zl~8Wxm=AJ9qi4GMCvTOO@{Q$>`fw!8OI;sdbk6psJ$bP-w#>w+?U#O?VYpmG6Tw)Q zhpRGq&BsFLT-UC2lE;4iLZkamemZykI$K2T=R9&uHNkyp#*tp}Nl5S;37+bf@P|2h zF8;Bl?(VJR5FC!~unZ+Sf5)ynBR7}9(Cm~_o<`;{{T>$~A5--ywa!W{imQC;NxYH9 zyGO5I(hW}dc)Vy#dM?p1mZ!8j>!Z=kFVqMDHN`kT(rWt;MLZFG3F^BAoT_5QSfk=V zqqlW*Y-f%stu%_FTiAR2HTGoB?903ZpEEw3G?H|)sbhU=A@cg>@F8L5#?o;hTZXVQ zoxSy{?s@0zQufD>AA6qsKItbaCl{WX*>Ko$r)iqh*@C@lmAwUy+eb!56f*e|gXBc) zjG5UL3K?n75*}7mtoqwAfDF2P$YXm^S7ti$kj44^BODL>oR#QYeSfw*1v$?f@2!Up z)f(kzbW7m0HA_b1rKBRRU%&n|_>05y9qF5E`t}zT6l~t|Bj|^j{OeR2CgG8BEw{BUcPxFT2@we%h6=dm{Dmw4W@o|w-Pr!Kfil} zD7BeK1K+vBcdlK##;-yyTIc@bQ>n2<+WYqg;u88DUs{zoC~sbHm-u% z-n~Luo*3>-$7%vw9R%}VIZ(gz-U=iB_Wi&O7q`NiWj8y!%{w)>Xwj~D)aG<&XxwXO~t-ripGebI7TS5D1){o6>zs}lq3jYolzeD1{^ZT-iBk6&Y=`}d!>t&cm{kuM+K_|~D0 z)!>m)_*hpli`^=j?z30o&8JC@Jmw)*V20&W{qp5Yt{ls%&xSYlxq6IF<@G8g9eHb% z>Sd_N>%rRGPeoG)kDUaZi4m_x+*a~dk)zy4h;6)@Ai~HbF zuFXo}y!x7(`s%OPv%yv?6|!>J}v`k5^!W!1@_OnyDx%@Gxzl*A0V8D1jOBw=ISq@tZuorgNS4{u}e@|{=E`7|%H z`8=;GD;HP&+q*fR!R!I`%-!C#tEPH+`Adw5&#@Qh2tKzFQ@%_t**$+HeV zqZ?Jvx)>`4YsmKNt1JGVeFqMN9ZYt95->ZGki*wuP~=wiNHBO&lOE4~CU|*nk(?)VYmAcVr&ArqRUP8a*pzfB zuj&bB=UQN*nPFtC@PM5#c zR1;VUk%vW?u-j~BunGLBsG^XEn-wv;Ti=)LFTHFEs4RQEi$C2c-@)61vmuhomnO+p zyUs?8|2)2`H~xe;NQrPUht}fPL9sENg(QYYuFWy}BR^0XRjhg){(Jop=j+UZrot@vxoEql2qQPYf zS3tiWmGYnBjXHbQoT~D(9&2T+)E3(Q&fNZMsj0j9Pv@AOfwkt+UB=XywCk+3lx4|t z)-%21^7&)qBFV>(A72gT#nktMCI_7$ z6&gaV9JfUY4o$veA3r8RON_tB%Lb_sDUSjE9XofLM|<-Zx+dxt6cwRO_gp=b;ZkBT zA3eF%*vB~%TQd6F)f7Lf2y4C3FYXXD^cy#2Q5oT_8WPf3+1OGF<3eB~*$YES)7xy% z{)5j+jMa8t@Vtkst?hOyVthn-P1ITCCyuQS^_8y1Nt1OP^`fS9{+=!9!zOlaY;inx*CqSKZHh1R<nWKu|JT6|JTnAzL>+O&P;T*7dq0{KC4_TbM~ zt5)pq-APHTxs!%pS*R!QzvzFJo@?Y%nBi#O;#$x8`ii{pT5PT>Us5b^B1#SF^W~%~%nU zly2NUm4vpj>BWGR5Q2l6vB|shx-A0Co)*J9uD;=m2m){!Li9060_x}9MC@}MLSEPb~l6oVfuzA@`2c)s@^QykeSo?%oDH*f( zZ3A=A%S(p)dznv;^|$3?`YFYk7lTt@kyHm|v_a<+({BEarYGr$@x9iu(t<;c-9ZVw zw=**Zj;rM`f@2*BrcoKyYE5PE@;U2ofp_1&eCNT;|9N-!`}bF1ozKpvhAef-H+{;e zs7S#UsxX7?SLBc4-Jc3y@Tk7Sgq39nYP3ETW52L8bl`qPFilXBZIx|Dwz(wX3rm$> zwpo4XY`bBo=U8FKO#}UQYuWK*<+7Y~>>L~n(T8u&+3yVNLj9k2qTsQ7BYt-~XMBr# zNvbvLgr7`W`SOqQ16-jildW^(&pwM1P1G{_%H{~0Z0AlNeQPA_Ly;!Ld?=uD?b+ue zyshFo;B3y#%@z2C5jS4kE^^ycW3Lgbj!vCd+*-t&Gkm9m`ijiq~@4xX0J^-t>1 zCDLCIENm*!p)eTzSoqLIE6+%{%rfaKUE+T2(O|2c^yIg0-@e`EQ1ObjJY38tqmxVU z{1l0K$4TwYzNbSdUx<3KM&36*Z(}fd?`!oT2cHBEa;J0uvKzF0}V@(aNxV8IC^|qi=o=#ert>i z4l+~I(9$x`)>bXVR2gM{U!qmgF%!_$<$o{6${Q`y-R_-NF-j)9DMl0fRu*z5D@!sl zuk9*X*ilVQ8<$c1%9_GkNz+$bPk@SI7PhREdB|MND%4eYyUptb2^^fgZgAn8i0AHY zr|Q0Al@xtRV5k_X9e|B(ckLVbS2;r~ieU6q2seiM5mx8h@5#FAP=t|j1-Zv$I7-&p zsHqx<_ziZ~)bK2;IF)B8)G!@WppiIxm}9cDzJ7Uv^2!yD{KI#3yu4E)cvZo7Ii2CicedJOcDCSV^5HMR z>e5T6bsxqiZStVN0_V1O`MdA1B6<0g?)}r=8tFF@$r3wfiA*g9X-SW~ zq0Hqct_~+6GdbG2VlB=-du6GBG_1c~i?^d=TJieRlV)O)m%3@eTV4qX{rH8k>sVhG zV&u1zmZNU?C+|}D@;BPTB;*4kJ`Ls((IsI57#$cg zV_3*wowR6OPe#^=U}auj;(hrlx*$2rJ?&Qy-7W!{AnTT@TC}U7!s(f}H7L8;$Eq{nRKIB#X zHax8AC*ghN&VL#-(1g%>uvGN04GAXx>&-`x+p zd-ty6nbwfjs+o7{4T-(!)nnNE>ZUB79Q;Ig$^qXpkH`EHpQFgQISnZr76NN7>?5k~ zsGKV~EKs4S-`{wXc=aCjUY%PY$eQ2YMIlDyh&e! zUYi~#t*(bdmg*htu5gY$#HeF7&?eW&Wa5|rjPmAwZ$atD{dD9OxRSOtRl5*~`~L7- z_)KV#c>MULunG<=*ut{x@%R^aM4P{iX=YyR6^Ky0Z9MtIhn(lZ!-wj1QCIO=rYYA2 zn_Mer(&a68H@>@a(!L?(AqP%Mi-oukv_Nx|^;2~nn}o}^xYiC>h=k7*rElK5w-v$( zm&E85o;_&fjC*nCYWb-jUma>F&=?yFSZ)9;uqU%ch*;gZ%8fBQBM z9EajHzh0Jow~DYOgDsOoNe^3d;0c7+?J&>?~Et0d#}yCr<-=E=NU#0qfcQPy@e z`h+-RpMJ1<>9s^%_-i!wb%R5Plk7q6l_O=3>64^8RPxoOf(Y$r_s(!E`GPN4y1Rl$ zOqHwaoQFvLA<5LWJmEt+iFWPV0(ozNXSHR^VX!VAb+4ybe6DAdJ{nCKxJa@cqve!Q zp{_OB3TpmNmY~2_2i3?G&K8qrLR^VSsmBtX;TKLA$3B;rS9k|%vC6)C@%-s=hRqC$ z5OIieFIjlT`l7hQWiNHVnv%}B){B|Kg5oy1W4SX1+M1qYczA8+PSvF z+dBLr%+$wctbsX~<@hD36tU6XDnfUZb&#@t`)oRGh-!l9zI{o|Q&gMRc%K-MEp0hV z(nVsFlvy2mwlJ~i1oCO@<LflX{1VFo3JxYbYP^cC_!xQh3>MIoDn@8UTt%>J;9G#U@own@@EQn2Xy3Y2~AsHr?92S7SOk z&*vJElL@x&1}WXW8-^zPcP8YHrJudFq!zbxXzX)l!NPLWIL^f?mTAl~ zqm72;*4N!a$C>(ag1!oID(MtCCx86%+~U$ZVhZ@ZV{5|Wfr(N6ODY2=>pDZfmBnRe z@2>a3LS!X0oY$tVR>_EvsGm>IAgLD0*-}|2K5Xdc@KN{6sz5pfp!y1N>J@!K;YVe% z_p@`q|8i^QXu0v4Mab%G2MeF$CnJ)V^P6I%^Txh@eHKZ@C9csQvQsOx#}Hg^@P5I` zPA$|(y7*%}MaF;1QIVYFk(Fp#&Ww9Vh)8A@sai7!lhOyhB27<)X3DVD<@pZq{l@v# znoP4=(&+ITt#7)!&7V}svn23ZTXDx~^CuqTQdiw{L_i~JM4D8d)i$19@w^GQof6xA zEn>zPrMJDkmPwA)!Smg)(nmCf__GR%rsSslWX`>?QMHz+_ufi65oA+tsm2)19u?lu zpvqE!JtU3D{yy$EQFHcvNsl9KrZJBG!Vv@ZsL4fLqQibK$Ey|mH2by1Ugnu;=f#@2 zBryMsSo9pO&WO92u2tQ59;X8nkVXJws9yW@WL7Jnja1x*6b5|b2^GI=q^>I ze3EKz)__?4QN1&Ji4Sh&88`s(h$pN^?{o=&Nl34 z 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
- +
diff --git a/css/footer.css b/css/footer.css index c207a28..53c0adf 100644 --- a/css/footer.css +++ b/css/footer.css @@ -1,57 +1,101 @@ -.footer-container -{ - display: flex; - height: 15rem; - background-color: var(--color-dark); - color: var(--color-white); - overflow: clip; +@media screen and (min-width: 700px) { + .footer-container { + display: flex; + height: 15rem; + background-color: var(--color-dark); + color: var(--color-white); + overflow: clip; + } + + .footer-bottom_grid { + flex: 1; + padding: 1rem 4rem; + word-wrap: break-word; + } + + .legal{ + border-radius: .5rem; + height: 80%; + width: 50%; + position: relative; + top: 10%; + left: 25%; + background-color: var(--color-white); + box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; + z-index: 100; + } } -.footer-container_grid -{ +@media screen and (max-width: 700px) { + .footer-container { + display: flex; + height: 15rem; + background-color: var(--color-dark); + color: var(--color-white); + overflow: clip; + flex-direction: column; + } + + .footer-bottom_grid { + flex: 1; + padding: 0.5rem; + word-wrap: break-word; + font-size: small; + } + + .footer-bottom_grid.right-align{ + padding-right: 1rem; + } + + .footer-bottom_grid.left-align{ + padding-left: 1rem; + } + + .legal{ + border-radius: .5rem; + height: 80%; + width: 60%; + position: relative; + top: 10%; + left: 20%; + background-color: var(--color-white); + box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; + z-index: 100; + } +} + +.footer-container_grid { flex: 1; padding: 1rem 2rem; word-wrap: break-word; } -.footer-bottom -{ +.footer-bottom { background-color: var(--color-gray); color: var(--color-white); display: flex; - align-items:center; + align-items: center; height: 2.5rem; vertical-align: middle; overflow: clip; } -.footer-bottom_grid -{ - flex: 1; - padding: 1rem 4rem; - word-wrap: break-word; -} - -.footer-bottom_grid a:link -{ +.footer-bottom_grid a:link { text-decoration: none; color: var(--color-white); } -.footer-bottom_grid a:visited -{ +.footer-bottom_grid a:visited { text-decoration: none; color: var(--color-white); } -.footer-bottom_grid a:hover -{ +.footer-bottom_grid a:hover { text-decoration: none; color: var(--color-light); } -.footer-bottom_grid.right-align:hover -{ +.footer-bottom_grid.right-align:hover { transform: translateY(-2px); transition: all .3s ease 0s; } \ No newline at end of file diff --git a/css/navbar.css b/css/navbar.css index 14004bc..409c587 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -109,7 +109,7 @@ } #navbar_menu svg:hover{ - color: var(--color-white); + color: var(--color-main); } .navbar_menu-close svg{ @@ -118,6 +118,10 @@ transition: all .3s ease 0s; } + .navbar_menu-close svg:hover{ + color: var(--color-main); + } + .navbar_dropdown { align-items: center; background-color: rgba(255, 255, 255, 0.75); @@ -164,4 +168,10 @@ button { transform: translateX(5px) !important; background-color: var(--color-light) !important; color: var(--color-white) !important; +} + +.navbar_menu-close-btn:hover{ + transform: translateY(-1px) !important; + background-color: rgba(255, 255, 255, 0)!important; + box-shadow: none !important; } \ No newline at end of file diff --git a/index.html b/index.html index 906a98a..4d5383f 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,10 @@ Saoul Bonmonsieur | Site Web Officiel + - diff --git a/js/base.js b/js/base.js index dcd450b..23fcdc2 100644 --- a/js/base.js +++ b/js/base.js @@ -116,6 +116,7 @@ function popUpPlacement(className) { //During the loading process we need a loading status bar var headTag = document.getElementsByTagName("head")[0]; window.addEventListener('load', function () { + loadJS("//code.iconify.design/1/1.0.6/iconify.min.js", headTag) loadCSS(urlStr + "css/base.css", headTag); loadCSS(urlStr + "css/navbar.css", headTag); load(urlStr + "components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr + "js/navbar.js", headTag); diff --git a/js/navbar.js b/js/navbar.js index bfa7a24..80cf764 100644 --- a/js/navbar.js +++ b/js/navbar.js @@ -6,18 +6,20 @@ var mobileMode = false //enterAnimation is a status linked to mouseenter/leave of the icon var enterAnimation = false; +//same but for menu +var enterMenuAnimation = false; //each
  • tag of the navbar_text-container var dropdownList = document.getElementById("navbar_text-container").children[1].children; //each tag in the navbar var aTagList = getNavbarTextContainer(); //a list var dropdownStatus = Array(aTagList.length).fill(false); -//list of dropdown links -var dropdownLinks = ["droits/penal.html", "droits/affaire.html", "join/contact.html", "join/coordonees.html"]; -//list of container links -var containerLinks = ["avocat"]; //navbarDropdown Element var navbarDropdown = document.getElementsByClassName("navbar_dropdown"); +//menu close SVG Element +var menuCloseElement = document.getElementsByClassName("navbar_menu-close-btn")[0].children[0]; +//menu hamburger SVG Element +var menuOpenElement = document.getElementsByClassName("navbar_menu-click")[0].children[0]; /****************************************/ /* animjs */ @@ -42,6 +44,17 @@ var logoRotate = anime({ } }); +var menuAnimation = anime({ + targets: '.navbar_menu-click polygon', + points: [ + { value: '3,6 21,6 21,8 3,8 3,6 3,11 21,11 21,13 3,13 3,11 3,16 21,16 21,18 3,18 3,16', duration: 10, delay: 0 }, + { value: '15.410 16.580, 10.830 12.000, 15.410 7.410, 14.000 6.000, 8.000 12.000, 14.000 18.000, 15.410 16.580', duration: 200, delay: 10 } + ], + scale: 1, + easing: 'easeOutExpo', + autoplay: false, +}); + /****************************************/ /* functions */ /****************************************/ @@ -192,4 +205,28 @@ window.addEventListener('resize', function (e) { closeMenu(); mobileMode = true; } +}); + +//Animation to be played when hovering the menu +menuOpenElement.addEventListener("mouseenter", function () { + //enterAnimation is now true (see update in logoRotate) + enterMenuAnimation = true; + //Will play the animation and when finished set enterAnimation to false + menuAnimation.play(); + menuAnimation.finished.then(() => { + enterMenuAnimation = false; + }) +}); + +//Animation to be played when leaving the menu +menuOpenElement.addEventListener("mouseleave", function () { + //enterAnimation is now false (see update in logoRotate) + enterMenuAnimation = false; + menuAnimation.reverse(); + menuAnimation.play(); + //Will play the reversed animation and when finished set enterAnimation to true and and cancel the reverse + menuAnimation.finished.then(() => { + menuAnimation.reverse(); + enterMenuAnimation = true; + }) }); \ No newline at end of file