From 05eb1099386f3cdf1f300a82d6bb2eee4c60f861 Mon Sep 17 00:00:00 2001 From: cymon Date: Sat, 27 May 2023 11:31:19 +0000 Subject: [PATCH] feat: pure css tilted background --- src/assets/tilted-rectangle.webp | Bin 3824 -> 0 bytes src/components/Home/Meme/Meme.astro | 2 +- src/components/Home/Meme/Meme.scss | 2 -- .../Home/WhatIsWeb3/WhatIsWeb3.astro | 2 +- .../Home/WhatIsWeb3/WhatIsWeb3.scss | 3 --- src/styles/colors.scss | 1 + src/styles/global.scss | 22 ++++++++++++++++-- 7 files changed, 23 insertions(+), 9 deletions(-) delete mode 100644 src/assets/tilted-rectangle.webp diff --git a/src/assets/tilted-rectangle.webp b/src/assets/tilted-rectangle.webp deleted file mode 100644 index 8fb7a452be62572de727a75221924d4494a7cd1f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3824 zcmeHKc{r478-LM^eW}hQ9Q#Spu@tf$F}6@@5{3|oNVarH$Y`SMhEVotn31)}GPbM- zQMONpX~r5MBO_aqIj>Hg@4EWxi0DRyLg#ww(0Q?xju!Y?st1+vYl*GsrTnB=-}fRF6rl=v zTtCrg;qWChQtWHIE$AKbF=uuSdv?|7iVi4Bu ze+neXSMkU)K3bbgoQSXKO3y*tgH{c4arTYMu|wA!ds2@VSfJ)+BVQz3T=#+RE~Q;| zwxc-U!buROUUcnr&rHwS*e*F5Q7$aKrOGs3mY{gC&!7SZOcC_X5gugM- zL>i;z=U<}oKk;Z-YIwVN1f;-aqcL(o&2<||;UCe-x3PfPq=XzSyDNp~!Ks6jOYOqTC z0+gESUzE_+IZuKJDg_VqUB>HSZkEU)ay%)i5!Q0j8skzncGT3o0e&0lxYDj^lO@{F zdy3WUu4NVl#U|7$FJn~8DVf1$Ii|IKi!m>{@yYh@2Ol^cmL%~<K!?oO7Dq|uRYrJETSD$GtCE!uDjFm zC#{OY3wm zb=={g>itg(zJX1|b}w+!&7)bXzuolDN(lA9nQjr=-tBS~vicn{ed2AbI4QkVtc%ib z=ymgR@VU=9eNCi)`9`hpCu|j4DkuU9pcuR2^j%)B!an1zVo!7Peiq^Pc!?G>d$x)# zgxbVaY91m#0^l~?h0zo$?R^!~kjUedm5Iex$)_f>D4 zkegrU2khFDhg5TMgFBlM+f!cs$KUtBGvx4<D6~#SD0tC6;(|>KnApo$!NGTNqn0eE$ zv6Y@+4aUx%!VO7JhJJJwS6~QPKFIQ#5=$S>k4<#9DS~_)A zG@^e#__UQQ$`Pd4Y2C&^U|*z~_!%CXK+U?c43yIG;fYd%X`ZMx_LOQ)-7=*b+W#S*y%(DQ`0!hE;qWxZxW)!%iZ)F}) zczhznkJ+2hEY9jQm}nyg2>MrRIq#B)()Fa<{SXd{nK z+FciI@SFj$BW8>jGn74h@%AVgL*``iP1*%R*YQ+U65L3gcda-0S)eS}YWysn6erfv zM{Fx#6nbeT?lE4x9zyL~L{1LHcVUy#wd)*&n)26_s9C2?Qjpyb2+@Qn$zYJ5_x9e) z`#Bz!cRSZ_4gqML7yvM#*ua@L&pBLowErohemjlMher;jBHcU z%v^;TiY!`cvi=cGjn2b#`am9Pz=!YT1#$pk{bem|FsbO?F5f{s_B?uO%ut51k~`Qk z4hxCe_^m!j^tP*eA^9 z9oqTUNGUhX-SB5Dk78_c-c@i2t^WNPlz~YHrwr1mme%<+CMz4}LhcTs7mWy=vKh`A zDjc?xdX5`qoEe)fJ2o+I8b*kloaS0&Q;A@D5K;E_cnakl*6b{tb9 +

TITLE

Building a new world for your data

diff --git a/src/components/Home/Meme/Meme.scss b/src/components/Home/Meme/Meme.scss index 0a6fc3a..ec60bfb 100644 --- a/src/components/Home/Meme/Meme.scss +++ b/src/components/Home/Meme/Meme.scss @@ -6,8 +6,6 @@ align-items: center; padding: 8% 12%; @include fluid-font-size(1.3125rem); - background-image: url("../../../assets/tilted-rectangle.webp"); - background-size: 100% 100%; } .meme-text { diff --git a/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro b/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro index 5f83d9b..338a759 100644 --- a/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro +++ b/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro @@ -2,7 +2,7 @@ import "./WhatIsWeb3.scss"; --- -
+

diff --git a/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss b/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss index 8534eb8..c800189 100644 --- a/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss +++ b/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss @@ -29,12 +29,9 @@ display: flex; flex-direction: column; justify-content: center; - position: relative; height: 32.42em; margin-top: 2.48em; @include fluid-font-size(1.3125rem); - background-image: url("../../../assets/tilted-rectangle.webp"); - background-size: 100% 100%; .background { position: absolute; diff --git a/src/styles/colors.scss b/src/styles/colors.scss index a3df13d..b1af6b1 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -1,4 +1,5 @@ $body-bg: #031418; +$body-bg-darker: #020d11; $primary-dark: #000; $primary-light: #fff; diff --git a/src/styles/global.scss b/src/styles/global.scss index c3e7638..ec2bd88 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -234,10 +234,11 @@ main.vision { justify-content: center; padding: 2.95em 1.95em; color: var(--white); - background: #020e10; + background: $body-bg-darker; border: 0.05em solid transparent; border-radius: 0.5em; font-family: var(--font-family-jaldi); + transition: border-color 200ms; &:hover { border-color: var(--aquamarine); @@ -255,4 +256,21 @@ main.vision { line-height: 123.81%; color: var(--cloud); } -} \ No newline at end of file +} + +.tilted-bg { + position: relative; + + &::before { + content: ""; + position: absolute; + top: 0; + right: -5%; + bottom: 0; + left: -5%; + margin: 2% 0; + background: $body-bg-darker; + transform: matrix(1, -0.04, 0.04, 1, 0, 0); + z-index: -1; + } +}