LumeWeb
/
lumeweb.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: pure css tilted background

This commit is contained in:
cymon 2023-05-27 11:31:19 +00:00
parent 4935177908
commit 05eb109938
7 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/tilted-rectangle.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.7 KiB

2
src/components/Home/Meme/Meme.astro
View File

@ -7,7 +7,7 @@ import meme3 from '../../../assets/meme-3.png';
import meme4 from '../../../assets/meme-4.png'; import meme4 from '../../../assets/meme-4.png';
--- ---
<div id="home-meme"> <div id="home-meme" class="tilted-bg">
<div class="meme-text feature-group"> <div class="meme-text feature-group">
<h2>TITLE</h2> <h2>TITLE</h2>
<h3>Building a new world for your data</h3> <h3>Building a new world for your data</h3>

2
src/components/Home/Meme/Meme.scss
View File

@ -6,8 +6,6 @@
align-items: center; align-items: center;
padding: 8% 12%; padding: 8% 12%;
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.3125rem);
background-image: url("../../../assets/tilted-rectangle.webp");
background-size: 100% 100%;
} }
.meme-text { .meme-text {

2
src/components/Home/WhatIsWeb3/WhatIsWeb3.astro
View File

@ -2,7 +2,7 @@
import "./WhatIsWeb3.scss"; import "./WhatIsWeb3.scss";
--- ---
<section id="home-whatisweb3"> <section id="home-whatisweb3" class="tilted-bg">
<div class="background"></div> <div class="background"></div>
<div class="feature-group"> <div class="feature-group">
<h2> <h2>

3
src/components/Home/WhatIsWeb3/WhatIsWeb3.scss
View File

@ -29,12 +29,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
position: relative;
height: 32.42em; height: 32.42em;
margin-top: 2.48em; margin-top: 2.48em;
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.3125rem);
background-image: url("../../../assets/tilted-rectangle.webp");
background-size: 100% 100%;
.background { .background {
position: absolute; position: absolute;

1
src/styles/colors.scss
View File

@ -1,4 +1,5 @@
$body-bg: #031418; $body-bg: #031418;
$body-bg-darker: #020d11;
$primary-dark: #000; $primary-dark: #000;
$primary-light: #fff; $primary-light: #fff;

20
src/styles/global.scss
View File

@ -234,10 +234,11 @@ main.vision {
justify-content: center; justify-content: center;
padding: 2.95em 1.95em; padding: 2.95em 1.95em;
color: var(--white); color: var(--white);
background: #020e10; background: $body-bg-darker;
border: 0.05em solid transparent; border: 0.05em solid transparent;
border-radius: 0.5em; border-radius: 0.5em;
font-family: var(--font-family-jaldi); font-family: var(--font-family-jaldi);
transition: border-color 200ms;
&:hover { &:hover {
border-color: var(--aquamarine); border-color: var(--aquamarine);
@ -256,3 +257,20 @@ main.vision {
color: var(--cloud); color: var(--cloud);
} }
} }
.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;
}
}