From 99533e340802f663b60dab95cbb6807e3908c52d Mon Sep 17 00:00:00 2001 From: "arthur.valin" Date: Wed, 7 Dec 2022 12:01:37 +0100 Subject: [PATCH] edit header style --- src/CraftSharp/Shared/CraftLayout.razor | 4 +- src/CraftSharp/Shared/CraftLayout.razor.css | 4 +- src/CraftSharp/Shared/HeaderLayout.razor | 85 ++++++++++--------- src/CraftSharp/Shared/HeaderLayout.razor.css | 57 +++++++++++-- src/CraftSharp/wwwroot/Images/nav_back.jpg | Bin 0 -> 7599 bytes 5 files changed, 96 insertions(+), 54 deletions(-) create mode 100644 src/CraftSharp/wwwroot/Images/nav_back.jpg diff --git a/src/CraftSharp/Shared/CraftLayout.razor b/src/CraftSharp/Shared/CraftLayout.razor index c12c6f4..eba1769 100644 --- a/src/CraftSharp/Shared/CraftLayout.razor +++ b/src/CraftSharp/Shared/CraftLayout.razor @@ -3,9 +3,7 @@ CraftSharp
- +
@Body
diff --git a/src/CraftSharp/Shared/CraftLayout.razor.css b/src/CraftSharp/Shared/CraftLayout.razor.css index 04f249a..5f28270 100644 --- a/src/CraftSharp/Shared/CraftLayout.razor.css +++ b/src/CraftSharp/Shared/CraftLayout.razor.css @@ -1,3 +1 @@ -.sidebar { - background-image: linear-gradient(180deg, rgb(120,51,174) 0%, #411186 90%); -} + \ No newline at end of file diff --git a/src/CraftSharp/Shared/HeaderLayout.razor b/src/CraftSharp/Shared/HeaderLayout.razor index bbd69d8..847a025 100644 --- a/src/CraftSharp/Shared/HeaderLayout.razor +++ b/src/CraftSharp/Shared/HeaderLayout.razor @@ -1,49 +1,50 @@ -
- + + + + @code { private bool collapseNavMenu = true; diff --git a/src/CraftSharp/Shared/HeaderLayout.razor.css b/src/CraftSharp/Shared/HeaderLayout.razor.css index 30a180b..46bc43c 100644 --- a/src/CraftSharp/Shared/HeaderLayout.razor.css +++ b/src/CraftSharp/Shared/HeaderLayout.razor.css @@ -1,44 +1,89 @@  +.topbar { + background: url("../Images/nav_back.jpg") top center/cover no-repeat fixed; + align-content: center; +} + .oi { width: 3rem; font-size: 1.7rem; top: -2px; } +.btn_wrap { + display: flex; + flex-direction: column; + justify-content: space-evenly; + height: 150px; +} + .bar{ display: flex; } +.nav-item { + height: 150px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.topbar_itemimg { + height: 3rem; +} + .nav-image { width: 18rem; color: #ffffff; margin-top: 100px; - width: 50%; + width: 20%; position: absolute; + left: 50%; + transform: translate(-50%, 0); +} + +.topbar_item { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .navbar { + background-color: transparent; overflow: visible; position: static; height: 150px; } +nav-link { + height: 100%; +} + +.topbar_content { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + .button { - height: 5rem; width: 11rem; text-decoration: none; text-align: center; color: white; cursor: pointer; - background: url('Images/btn1.png') no-repeat; + background: url('Images/btn1.png') center center/contain no-repeat; + background-size: 100% 100%; font-family: SilkscreenNormal; line-height: 26px; padding-top: 6px; } -.button:hover { - background: url('Images/btn2.png') no-repeat; -} + .button:hover { + background: url('Images/btn2.png')center center/contain no-repeat; + background-size: 100% 100%; + } .nav-item { font-size: 1.1rem; diff --git a/src/CraftSharp/wwwroot/Images/nav_back.jpg b/src/CraftSharp/wwwroot/Images/nav_back.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e086428e35840f3df3d22b2c9cd52a176e91f7c7 GIT binary patch literal 7599 zcmbt(2UJr_+wN=<2u&hI1O=jkz_9^>(n%1dS-_5kgNh0^s#1j=kc&HzCGK;RF+TY(dN`p-UdgZyVBz_;-Vpehf-zytwN1v07#K^4J2018~E?7zka z|NbB{1fr}QNnSxw33hlrAIKmCf((%$D@!E8-ZAj+fT${~w$#i~PJR1f(z0NUwQ*_p z<@GldR4&-@ZQQ{8NXP{RMa_j;+KZMO8X5n#!eZTeODk&|r;VGOU0mJVckbG~XRp`3 z{k}(!9ryD;aWeGmxv=nv$f)=~E?!EwoOmTYX?&bVB)BdsS|IM%q|6i8Ex%;?U>t`+@_ZI_?Q{1tTpsfjP-kUR_LS z%fy6%<4jqZuK8h`ad6&J=t)}sq-AjJNlP^szsMD)38()0yDoRWbFOkhYLMg3en;KQ z%z63B%fH?#7w-ybxgGoYm-J7|gjn{g(dItc&ccw<>fjPTZ4IP8vIhP2CW`yTDFp|6 z9m@9u4=Ehm`b$7LW_bpliS^=RO>HY5*DQ{# zuqFZ}%JEWc00-~tad3r6T>n$cdS@~YY*79#~f2IMX8zI8`T zl%;O8Z*uwX4G8-yam3>J6Zcmy*WMdkt6fWyjnme$s+iGc%Ez+L;lPe9m3m++=yuPp zSF((Zw6sQ1#{tP(5S4qW276z?LSJE-nYvVW(9D#fD}thuPS%#JSZBKFIkR+H8i@7>S&sq~Tx@*zhr!)kDU?fs`*CS*7pt zS20rBz>KlXMW6x5fhdnXM3aTLo&*j(a;$@HrBp35ElBDc%F4l$qHttU!Z;}6a4O`A88Ou-`9S-?bp4l zYOXR`_v2?gopk2swq4Qi;%@CUKeJKsX=(GVF6BbCNCOU$V|=FBv#GVgPuE{2Ea_0U z9NMn;j;n!aZ$RVFquOz!rSXA=nv?%S4_pBKEtrWHBlpHN?BXF zl5bmpcSkz~-yve#q}IG~CTZn1kF~YzBO{W+6gIzxsX`Jv?PN**FnPx~RRVE@TFrWr z9{S7neLMZv?d%g;ZJOzO*1A>(2-uyID&)n6PN~woR6}#%EwxuYxVvw-JSlsI}Sc@ zh~1ZwUB-}WwSWo$hky-`vp1Ic``2e*%6nViQtlmaRB_`YS8N8m(14sDWoxnC`6H${ z7{=apCIsN%BCzz0O8GK(bA0d<`b|ik_*pCsWh&oGXqCYA{5Po9Q?}2}b#nIYl{^%T z(X`R=f)pu2#*|q&SmG(WxSaC4`=`b`XY$H@Ob>ot*D*TZuxfr`bJF^ej^o46*PpSa zFTKjT^J(;B&dtyytZ%F+CeUSoriQ+c&dW%7dBTf2`F>c812!Mq1T1?AsH4Z0x$HO#WpP7s<<4(Cwk#M2%1BgS$$E+@&!~zDgPa&A5t$Lz2K&} z#CBJ$eklkHJ6!+*CCg*=alpI`1AVgzwuvc6(TvD2T9hbRHS94oeG=^EYrYM|-pzcO z!1~Udu3!9armfh!xurbXilw_1*ou93cs3UoM zu~-&H*pCDL9dNku^=Zarmf&Y?5f2ATJqgrq6~3jEK*C5TIwdz~N;r^DNQA+>7zY`% zC=Ql$h-neFAM%&!dp&d?ee%6F`be$T5hU$HxSIQRr0u;`ZwS(q)U*RRF0Oo2blY#8 zWX2}Cij-M;_-6NC4o4p=4wFwT(y^cy9Xx;kGLbG%vOAI);JEExNN2)0M#}&F0^QQ* z{hL%AWL{Or!I=OvQOsRNRZ0~2UNj!|WZZcuG?yOUrTu)bR+w%c`Jmr`2q=_y&-<|# z``rSIF)X2GpCRP|{RpRByH^FAHnok+)b8bCF=n$I0@}Txp`6F{fLJW1NUqTqly{SV zkTzelLR+I#u#FHRs=ClOr>SGopEy|NNlX*k?v80Ht*ok*IvDyuaBl53od9eFIlDhVAUT!m56)M2Dm*dHgP42$zsW>wsxc%HY zw7le%z1eJX8GTKP+{q8z5u0#~=#6eRr>WrJkCl5NB=c-B9JJ$LVgc9#+o*Fey+_5c zgXqL^;Cx>9$x$3UJkjnUDK4SpHd`^tdpbJGnRBVuvN*q=`kt;Hs>c(dE5Lic&@U5c-1?<)@P}M4Rtsw@GW&x1(HazsV7@FHJSFVCFV;>>;Ir zgYTB= z0gL{Cjyyy;9JzI^awTbL@q|L(6h z#;v*8#)MsLGWFe63|q?kITkA7K%~NP|AgZvViq8B9A*2LkM*F}fZlnEpv6QiWN>LD z21zmvUojHGux{I+AeA^_Ek-`#A;A=rtm|#Emq2Nb%EXX^0-heo$8TqN zS2hWXT@2Rh=lI>Y^y}QbPpQr>OL~JgfwMLNz5+?x{lJxaexI`q|@bGnzH$(3@mM-&sZ)F z7SOaF%rY8yvmD@zRuzk;2S#XsAi=@5s_~D&8wySCC`Eh%2Y+VMZMOE_E44$j%c41Q zUdOE~DBYqvAfRzl>LTRGZvGaxFrUqkgi5Y}`%oEK2d6Ov7&_a4um*+LHyC0?)>Al0 zi7109aX;ukuP1ko>N9EbMVe3L%=FQ1o>pGn7yAUASiznA2o8H97-|EI!9SYu-UDScP2;4Udw5H?0Z(QVJfv7s$rBi*zneqX9=ev6NWa7YSKllV+RVQ#_H_+F| z)&@ke7(z&R{9S4>6I6 zE+lTog=XI`^YM!Qm&zXplfHnINQgN_-nZJx{_qAK`#E4eL)XC_S)1JhRjk?`) z!Vm}QG|d+u{Ss zuy=BB$=|}wx3}RCqdjs5t!8IqEr6^Mq$=vqaVBwqrp*|?L!KovB=abcYZdK|k|poy zvmHq|7+3(7^1F(vE$FQ{7+hMs7#*oByw}mhDg%`97qwme35?mqSn4EMFZ)kA!Y5G# zvJ&)_3q`aHbqAmHRuQnn4_c*ASZ;QtY5MYwZpC3$#n#-B$Z7@M*iZJxPzjC0_YlYI!VXieR_cho|y8K0Lp%`Qs@1>k< z{c)W~^)nI%Cxs8uG<`mHu7q;CP&h}|qtSYu$DmK$0V_~*(DoMV)X{>Q%NI0;9oyix z+wZ{TDpM`x_ZG^IOBY%Jb+Y>4Mwvr}wScc9?DfN9=K-sT2iqwVW5;6)wxLjaX&YTV zXQg3tz$^X0@kJ}sO&#rJzh_rv-}9F-5pJDI5lz;kV?SWtH{{5q=nN4sZwt0q5Q>A^ zSBN{DKGgmD>(}(-t*I~CQcdqid~FQ_f^2`}2!G9e!x7HD^CjYfZ6$S~S#1mt-kjWa zijADVAMI4<3IugQF=jNtmz_2}GeR!D;XvX*|8VD|mBPFk$@pu?&~ToKO~6zbzrFUu z`dcG&8dfL;g!k{3LLnG6MV%1&4x$5tbOXJGe0dNX&j`lY>U|WA>?#(E^l!m zb~{()ZE$0M)FSY#LxZnld@RF5@#?j&({Bk$sSo1LhNjcHJc-mMn;PD51RH&|56+p^ zFY|4jkqB{6h=ag4=+Mb999nn`j!Ugtks@4Rs+!brQacM%Am zcK8cQ?M{&%^i~Q-=9>NvBBfA8>Q^*5eTS}dHqYaAiNvs&)w3mck_V9`Ub&MxF-q0W zOURY3W9R>(DM>RPPfd_0lPxd?l5w!cAG!ADNrCU@S9@CTHD@;mzts}gKM#$sw;F4q zFU#EYBk#zm#1Uc;t2kQvXEVR_rrE^9FRWD+K`Q1M6$W6(3Zd5TF*V$&KKlB_Rr|-g znlgs2-ZjBoHINk%(ffCSrY=F_AiE*EKCQEnt}BgumVJ|kgVrA~_9;vvNU>R`<)~OY|4vKq553WSh~6-N4I-e2NK9C(}SrPfapOdfrn8)|u>|qilHa zueb{5V#?=^Hx(Uc~M(4!vr3ZfBCE z{&RoiYxlezpY_gFXLkgIi9!w*tv}bM_XB-rmNZjmRYO$szjMb_zF>=dUH`9ZyL8fC zCH|dRQ(^bpLDfq}OMr_s7XttlL=l=_*^Bm_^A>h0gf zGY1A}N`KFie@gs8M+|8Qvp@pA-JQw8L1?}73CMqLhSj{~{Y`-Jc?eQEV~C~~RVUAV zJT!vAx=HlPbT{68`$+5oBMKaDZ#^NY#Lz~%?D5(fmacQm+deuaV-Pi`fmKoJP!h!c zoMQE$IsQm)(4a>jTn}ZZh#_b#1IVp#$Tz>2XF3hhbY2)~)kTYAW#~35HF2=vay(R1 z0QxRJE4I9jzGAR*VhkQo(CK^N=vbid6s7wL@aA!1p?;AQ^izGHZIP3dd?AOFso|YF z7-27>=A+}o$gqRv!H95=Y4JYEyr~-OEb^8nADV1~gQPpZ?juOL=bto$VCHdzqc99fS!_|-)p-yhvz@~4CmCS}+NP;fE%bF~j@_(oU%gu4O2=yK zV6+qWOL!U<=~UV_`t`Gp9|6{648`Yol1b{!C>2{qCl_~wiaYa1d${}wAyZEJZU&2j zx-KW!7v{HGYAOWmqhq&p0%}Gs9t^G*MnEcSK)ie0ytBPNoBOU7D0j)~{6=8v%7T4` zS1bf!ISzf!UXz_H0|8A_v3LF_SF0(lN;XswvAfWA=>dq>i3ix&U?-Qhz@Yfz!!zG9 z?me(&h@V(j`D!s$0za5qbn|2J<{Iy z_|%!u-_jKzve#1ASk!$!@o?uGi@jQBcUCELNlQ{`wl`nCCdO%+VQmbFk4OVBj=+%3 z_7O_%;h+mTE@(uVt>Lq5P5aYpO>I|LHu)FyB!-z_Ck^mTb>@4V;Vilxknb$VQXrv0ca)kB0+aLxc9W-8BE= zG3HmjCCRNKgOHyCt6uFnXN4_`mmEp#UHh`D_Kovy=hI*NELU7HmDlmpHb_;XoO+8v zjFm%C{=pNO{#+pO`$uT0(p2U)YUSpu)YF9wJ#P& z6lKy1RgXL@sX2O8>UUl2KGyze zeHfP>O4I#~-(*B>63w0@%rH{?WBbPAs^o;?Ho#eH;F9aU#19@NLXii^%oAIzWT0?<+P_2n-WmjtNL^J zcPzUBv6L9;V{rr=5Lk0{RahIcrA*3Eg*sG`9GxuO#*!i_7>Nw`hHSc|E4eIUpn;cB z%Wc&_?#oNxr<3?0WRI*#Eedyxrj`>~ZF|mYYT5!Za)=kegh~3}E=rKqv~+{ndB9#S zw8Gv7bEu}9!xN)|{+JNm57O!CU