This repository has been archived on 2022-11-29. You can view files and clone it, but cannot push or open issues or pull requests.
socialtree-jigsaw/source/_assets/sass/blurywhite.scss
2022-05-03 13:41:45 +02:00

99 lines
1.9 KiB
SCSS

@import "enoded-images";
// Colors
@import "global-colors";
@import "brand-colors";
$gradient1: #e0f3ff;
$gradient2: #d5efff;
$gradient3: #a6d0ff;
$gradient4: #c1dbff;
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
background-image:
linear-gradient(120deg, $gradient1, $gradient2, $gradient3, $gradient4, $gradient3, $gradient2, $gradient1);
min-height: 100vh;
font-family: sans-serif;
z-index: 10;
}
body::before{
content: '';
background-image: url($noiseTexture);
opacity: 7.5%;
filter: blur(.5px);
position: absolute;
height: 100%;
width: 100%;
}
.mainContainer {
z-index: 11;
margin-top: 3rem;
width: 95%;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
z-index: 12;
text-align: center;
font-weight: 800;
font-size: 1.5rem;
color: $g_black;
}
img {
height: 8rem;
width: 8rem;
border-radius: 50%;
object-fit: cover;
}
.linkBox {
display: flex;
flex-direction: column;
width: 750px;
max-width: 90%;
align-items: center;
a {
$height: 3rem;
$transitionDuration: 0.15s;
$timingFunction: cubic-bezier(0,1.5,1,1.5);
margin-top: 0.5rem;
margin-bottom: 0.5rem;
width: 100%;
height: $height;
line-height: $height;
text-align: center;
color: $g_black;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
background-color: $g_white;
border-radius: .25rem;
box-shadow: 0px 5px 14px -2px rgba(0, 0, 0, 0.25);
transition: transform $transitionDuration $timingFunction, box-shadow $transitionDuration $timingFunction;
&:hover{
transform: scale(102%, 105%);
box-shadow: 0px 5px 14px -2px rgba(0, 0, 0, 0.35);
}
}
@each $name, $color in $brandcolors {
.#{$name} {
border-color: $color;
color: $color;
&:hover {
background-color: $color;
}
}
}
}