From 2d4e8d0c0fd125c02792f5d41b3a7f275ceb8824 Mon Sep 17 00:00:00 2001 From: utarwyn Date: Sun, 19 May 2024 17:34:31 +0200 Subject: [PATCH] Update header design --- src/assets/icons/trophy.svg | 1 + src/assets/img/logo-dark.webp | Bin 0 -> 2540 bytes src/assets/img/logo.webp | Bin 1416 -> 1472 bytes src/assets/variables.css | 4 +- src/components/global/BoxInfo.vue | 2 +- src/components/global/Header.vue | 120 ++++++++---------- .../global/header/BurgerMenuButton.vue | 29 ++--- src/components/global/header/NavItem.vue | 60 +++++++++ 8 files changed, 129 insertions(+), 87 deletions(-) create mode 100644 src/assets/icons/trophy.svg create mode 100644 src/assets/img/logo-dark.webp create mode 100644 src/components/global/header/NavItem.vue diff --git a/src/assets/icons/trophy.svg b/src/assets/icons/trophy.svg new file mode 100644 index 0000000..b8feece --- /dev/null +++ b/src/assets/icons/trophy.svg @@ -0,0 +1 @@ + diff --git a/src/assets/img/logo-dark.webp b/src/assets/img/logo-dark.webp new file mode 100644 index 0000000000000000000000000000000000000000..81cade9745627097a064311472c580c2e576005c GIT binary patch literal 2540 zcmV<|BMM6+kP&il$0000m0001$000;O06|PpNCXD}00ATcNs6q9 z2rY}YZPSr%*+$#8ZQHhO+xRQnwr$(CZAGOdXQbb|x1H~ZaOAd)B-!z)duFm{-XK8$ zz%r6DTHCg5+qQkSZQHhOF3z{MZH}?Fx6SO~0};W%Z6ifF=57b>4{&YUHuij9Y&+>} z+qRR+m7P>SMk+soZQDj=+s>z7WsLjt2_iya+crqyfbniX|1!BXtnG}&aDS-{r>d(Y zurNlfobWF|X34dWztX=xJ>bOiR|uuF#&H0@dD~-u^zVbH7chCvmZgfM9@AXmVj+V;BdG6ar$#`b z^@MiA01LZoER2BHc5pW2VwYM9HjcUiD1d0y?Yx|{M7a4|O~5ETUL6KN(HVqRg%{o% z@iQ!V=@XY6VSjrBJ)oJ-U81vpJln1c0FaKmk(!zQey=$f0J!xXX?E;JhT8MH_&GBx z?UoNW3NDL7Z+>T{T#YsW02>#y&aN$VQ>?|fIA$y6y~dMz;10DuM@aExYT^A65uj7Acxq8TxFcH8@`N`9)Vae-2OB-q(4;XOS+nA%&n=1_Q2*?;gS3`u^7TR}8Snusg=0R@@k86l1 zJ3+P)UQF9HB2>b+WetBtW2_i~YpFiqF}D<7Nh(g10ss(9?$X~FC)7RBnFkx<@LE*8 zh;5}+dSSGFbYC~ZBXL+({Ed(li(dNt<^HQ~--@+?GbHKM<~1Fg2+{3nT;SIi16YdF zlCw6X`8z&-H=Cp8iD5rCz?ig;kvRvC*6M5HGETGvwb%XYwzOSUnupKR2cbk2-8u3> zbbbFvq<#@67e6B;&$S~Tuo|$@D9cs&-}-Hy)A2D~>^TU~lGh7hC2)^m*pE804K^*I zb9pwL|Hv>Q3{nI+RUeXo+eN*8u;IQY1iGgBr_})Dw-u|>^*MDTEXi^jAtf@F0@wm_ ztY>BYS8HB-{V9R4jJ;(7@bY7LFl;D-1@gK%e>xp8+}4URj7<1!*>a!Iu8YSXu&Jup znm60>)9ukfxj9W?W1L1&)1s^v4;bYtq&Vk`#UUW z%Ps&&*+$R^5zO&RjhXXAu@)PN&^BiNY8>Xt#4S*67$x_u92HcY#||}5^}G8 zh9bs4gf|lvSOs8rm~qudD@MTAW^F^ z=IiO+!42!A;P1!apb4+6m63?jZoLiwe*O0;luL7s9+E`gnlm3JHuqHpJ(wXyb7S_c zz`E|Xl=X@PfR_omTS+J9Y%%47G|I={DWx!5()QSh;Q$b_IbT9!Ro`(CL4}*wbk{E; zz3gVN9(g?jf<*N*hA#1kr4kQCA#U#x^}w>~?aFNn1czA|kkqeZEsDLzj}3>~uoq8kjmUNS!W{GpTjvND`N@eK^NI_jWMd<=t@H>KMX%o`@6IG_e>C!%TmFq)}{n1=KTm8t2Q4oOqFUcDP%8u z8r4u=Rk;>IO`*2=6#(d4@%0$0?9VsPG0w_E(~tN0e-FhK=JWZD6K|?->D_mW&&``d z8nhCtOLsh-c&qSE%7J`n;P2g=)o)lqjf#GbLEq4ChKmR;xBr$W1lRfcrT@?S>wjg? zynpib_rHO(f;vkvl64K|`q0F~ou@_d9Q$9=fGljFDy))sHGh%vd2C+KnSR(yUn;hJ z6MjTs$Pyc`jsI>&0Ct4eOTJayC`rk>-$%( zh&61|gk2vFjoT~E#{ODiBiWlXe8@|m%LrTJZu^_3)qu?SCuCy@aWd+jF~c}O0000s CF5M*n literal 0 HcmV?d00001 diff --git a/src/assets/img/logo.webp b/src/assets/img/logo.webp index 2f342f10237ef1df0c78bb50f78db1934044fda4..aaf4d5756467d35965196c868d1c8a52a575c903 100644 GIT binary patch literal 1472 zcmV;x1wZ;yNk&Gv1pok7MM6+kP&il$0000m0001$000;O06|PpNJ9kx00ATcNs6q9 z2rY@)w&QW0%f(=VYY-KI4hSe-im--@hR22Kc&j z#q`pI>IRzqTmt$zPk;$LJsqMB&6*Fq?306pn}urs-|rwpKM=o z#zSX4Qv)YG2PUt10K*k@HQZk{_2@U==97wZUS5rO46ZGjb@n&+lKt1g;q8uz+uz`K zfFVBy9P~6TeBi>BE%Y$YM?zZON51#+s|ghxMpvb!bo90Y$h3>@!axx>k7SkGaD zn!(2=k`!+@?~`aW1H2M&FHcHIQihA%2`^Q_Gbxm$5cNM`4B|YMh{$RR7lw?`BRn4o zY3BDNlSsb+6&yx4g<^(Y8$!!&o&(NvFXY*Aa>^KB2b;Bm>RzeGhqy9^xXx&WdPXmq z3mM^fawJyi1@sUh^a#&KLK=FLr2i<%NCC<_jBc`Z+yH5umjw#*YdVF6jFmO^7vgQE zj8{(3RMs544_cSAfh^+7Sfo)@5~um^mj;C%;kgLNH<08JC&>sA$~%m1k_Q}CU4EH^ zhH@ViACt?by)>9ZQ!j+^5Xq*evtG5u; zB6F1Q`lO47(99KGiq_Nn& zVUg-EFTtU$$%fiqy@jbS$v*KU=}%+QwlO{qiXo4=H%t(F_G^7$JU>?ygsq~Gk69AR zP~amiCDn&v!A*g?eyN*sXR&ptU!DJIyB(-a_OS0&0p1QN4wpVWfpf)*Y z5zR{gK-Kv%; z)vE)sZ`byvIX=X+k@0azX3_f;pUVLNA?pG(UQaD$zKhWr8%V~SC$U~BCaLUejNjVp z|HwNrPsKCH?-=Yu+QhTg!EgX6oBK)nx2J)*%*i+;+uq~Iv(L9SHL^fle9e_N4>s2i zEJ;C|Y=7|j;`mf@S!D9rXD=?yDicuuhwXgu$;(rNW6N56@vXNvmqd}nULO&WT+YWl ahyVY$NB{rZ`vIr_yn-wL{!FL<0001cM8O~c literal 1416 zcmV;31$X*VNk&G11pok7MM6+kP&il$0000G0001{000;O06|PpNC*W000E$eZTtB) zyPLG>YGZ0=o5j4&wr$(CZQI`38SP%Bm~Gody5{Xa_lN)Q_fI-~j))1sFW;wb_wEe? zkkRf{OW|kj((2bxD@GwnOI$O%j0vUjXK{Ib=vUx=gfyLAvnncyj1KrUO=61E&*yua z9|t=FfT7z<9{yz*LbU`ZlXU^;D*j9k(YzW2sox6EUxgtut&+_CKa%4BtWrAIz%HcQ z;Ff_}GPfGsy_`;@3+q0pg}-P3p9jEdLqzZX4c)Zl?=Yl80WJ2GdJb&roiT<;#<A*60J~nVNK)CC6M*A8)`zu@6TgyV+Dac$d1w2wi)nmU)@F{8 zjCO%EB$a$;;ujS{zbPFxE#$ZEIsjSsF}Vm(G?`J^0O$ta2*MgB_5gt3v;3MD^Et&D z-Fd#M2LL6n^N}aef|g}20Gt*pRPEv0766d|iHcKdk&h~`1aL#Tv7Xm^T{*u&P=bmF%l2%YY7K3v{#9K<74wU|^ALc>LFw~b>I zqg^0%j3b$ToTQ5YA>WivvQ=CIsi%nri||W;hOJx(X|@ywN3wx6vFr(HD8Cvy^0Ho{ zi=z=oIT6xamj8Wh;TXjW&XBJm$*4q<&LV_-Q#wiRb5Ire-|RP#hoJE#!(}+nE*sd> z3O5UVWO&Wc&71`JSQ?Scc2(qe*u)m)QrQ;rN+kJx5y?bI^~V{f7bR2s>^YpQL8s6~ z!$OW5#2r@T<8x??V)HX>sG$yx9<*|xEl?xX+*o!-wd57adlLOlCU`;oj>dCZ`%L6Y z4M<{64LdkEHxqreWu-~4A%V3Iv4@5(G&)!qb53guo1jLjxv|L8Lh{xek~}KX?_z=% zr03WRnw#*F79(40c)$o8<0@^sPb?{OHZ%KluGg@dM%-lsWPA;ixrv|}$%p~wQ|D`rCnxDc1?k(W_k~>@kRTJ44KxcAR zCXxNf?`?xkoS_$VR9GF@%Nscb!B+&{3gvs0lKm<8s9@Pr~K);*u zp3qz(iBGx}@+dUy6`uzIx=1R^tNR!4`I2K0V&bFj#R6-uwQ!Fe0Q52Q#rSf5J|%}g zpk*vtTNu|SUr^)2Ue`{E#p05WwCn{U&sjnhE)~{?-l{dJf=`tsE05tj?!DT05tqaVd`M0eNR(-wvh^z zUQ&F>9~oKws1pG1#_1%}cl$wI_OvIgcIXoI^wZ64_3R)nvEtUJXOW%l0l?7XIG W?f?J1Xl?)AWViqRJn#Sj00006F05n# diff --git a/src/assets/variables.css b/src/assets/variables.css index ac7153f..c952720 100644 --- a/src/assets/variables.css +++ b/src/assets/variables.css @@ -10,9 +10,11 @@ --color-on-tertiary: #ffffff; --color-quaternary: #5374c9; --color-on-quaternary: #ffffff; + --color-additionnal-1: hsl(40, 100%, 89%); + --color-additionnal-1-hover: hsl(40, 100%, 81%); + --color-surface: white; --color-on-surface: #022826; - --color-card-background: white; /* Shadows */ --shadow-small: 0px 2px 2px rgba(0, 0, 0, .04); diff --git a/src/components/global/BoxInfo.vue b/src/components/global/BoxInfo.vue index d1f4225..6a6c27a 100644 --- a/src/components/global/BoxInfo.vue +++ b/src/components/global/BoxInfo.vue @@ -52,7 +52,7 @@ defineProps<{ title: string; text: string }>(); line-height: normal; letter-spacing: normal; text-align: center; - background-color: var(--color-card-background); + background-color: var(--color-surface); margin-top: 10px; } diff --git a/src/components/global/Header.vue b/src/components/global/Header.vue index 55df8a8..32adb82 100644 --- a/src/components/global/Header.vue +++ b/src/components/global/Header.vue @@ -1,11 +1,11 @@ @@ -48,9 +44,26 @@ const currentColor = computed(() => { header { height: 60px; display: flex; - position: relative; + position: sticky; + top: 0; justify-content: space-between; - padding: 0 2rem; + align-items: center; + padding: 0 20px; + background-color: var(--color-surface); + color: var(--color-on-surface); + box-shadow: var(--shadow-border-small); + z-index: 1; + + .left { + display: flex; + gap: 3rem; + } + + .right { + display: flex; + gap: 1rem; + align-items: center; + } .go-to-home, .menu-burger { display: flex; @@ -61,45 +74,15 @@ header { nav { display: none; align-items: center; - gap: 4rem; - - > a { - color: white; - position: relative; - text-transform: uppercase; - opacity: 0.8; - - svg { - position: absolute; - opacity: 0; - transition: transform ease-in-out .2s, opacity ease-in-out .2s; - } - - svg.left { - left: -1.5rem; - bottom: 0.3rem; - transform: translateY(1rem); - } - - svg.right { - right: -1.5rem; - top: 0.3rem; - transform: translateY(-1rem); - } - - &.router-link-active { - opacity: 1; - text-shadow: 0 0 1px white; - - svg { - opacity: 1; - transform: rotateZ(35deg) translateY(0); - } - } - } + gap: 1.25rem; + background-color: var(--color-surface); } @media screen and (min-width: 920px) { + header { + padding: 0 60px; + } + nav { display: flex; } @@ -114,8 +97,7 @@ nav { display: none; flex-direction: column; padding: 1rem; - gap: 1.5rem; - z-index: 1; + gap: 1rem; position: absolute; width: 100%; left: 0; @@ -125,5 +107,9 @@ nav { display: flex; } } + + .right a { + display: none; + } } diff --git a/src/components/global/header/BurgerMenuButton.vue b/src/components/global/header/BurgerMenuButton.vue index 68c7bdd..3d2545c 100644 --- a/src/components/global/header/BurgerMenuButton.vue +++ b/src/components/global/header/BurgerMenuButton.vue @@ -5,26 +5,23 @@ defineProps<{ modelValue: boolean }>()