aronmal/liljudd-website
1
0
Fork 0
mirror of https://git.moonleay.net/Websites/liljudd-website.git synced 2025-07-26 11:22:04 +02:00
Code Issues Projects Releases Packages Wiki Activity

WIP: continued work on the feature page

Browse source
This commit is contained in:
moonleay 2023-11-16 09:12:57 +01:00
parent 3d43c23399
commit 5d12017b0c
No known key found for this signature in database
GPG key ID: 82667543CCD715FB
5 changed files with 151 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/styles/components/ImageSection.scss
View file

@ -1,34 +1,56 @@
.ImageSection {
//background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/tapes-bg.png"), linear-gradient(180deg,rgba(2,0,36,.1) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.25) 100%);
border-radius: 0.5rem;
.backgroundImage{
border-radius: 0.5rem;
max-width: 100vw;
max-height: 550px;
height: 550px;
width: 550px;
position: relative;
background-size: contain;
background-color: rgba(183, 183, 183, 0.4);
backdrop-filter: blur(5px);
background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/tapes-bg.png"), linear-gradient(180deg,rgba(2,0,36,.1) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.25) 100%);
padding: 1rem;
.cutout {
//background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/cutout.png");
background-size: contain;
background-color: rgb(25 215 25);
-webkit-mask-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/card-header.svg");
mask-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/card-header.svg");
-webkit-mask-position: top;
mask-position: top;
-webkit-mask-size: 2000px auto;
mask-size: 2000px auto;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-repeat: no-repeat;
//height: 3rem;
margin: auto;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.imgDiv {
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
h1 {
padding: 0.5rem;
border-radius: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
img {
border-radius: 0.5rem;
max-width: 80%;
max-height: 280px;
}
p {
padding-top: 2px;
font-size: 0.8rem;
}
}
img {
}
p {
}
}

33
src/styles/pages/features.scss Normal file
View file

@ -0,0 +1,33 @@
.container {
display: flex;
flex-direction: column;
align-items: center;
.title {
font-size: 3rem;
text-align: center;
margin-bottom: 1.2rem;
}
.centered {
display: flex;
flex-direction: column;
align-items: center;
}
.gridlayout div {
margin: 1rem;
}
}
@media (min-width: 1100px) {
.gridlayout {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
div {
grid-column: span 1;
}
}
}