socialtree/src/public/util/blurred-basic.scss

102 lines
2.0 KiB
SCSS

@import './fonts/open-sans.scss';
@import './encodedImages/noise.scss';
body {
font-family: 'Open Sans', sans-serif;
display: flex;
justify-content: center;
min-height: 100vh;
&::before {
content: '';
background-image: url($noiseTexture);
opacity: 7.5%;
filter: blur(.5px);
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
}
}
.container {
padding-top: 3rem;
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
}
.headingbox{
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
margin-bottom: 1.5rem;
h1 {
font-size: 1.5rem;
font-weight: 800;
}
.summaryBox {
max-width: 90vw;
width: 750px;
.summaryText {
font-weight: 600;
font-size: 1rem;
text-align: center;
}
}
}
.imgbox>img {
height: 10rem;
width: 10rem;
border-radius: .5rem;
}
.mainLinkbox {
display: flex;
flex-direction: column;
gap: 1rem;
>a{
>button {
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: .25rem;
width: 750px;
max-width: 90vw;
height: 3rem;
cursor: pointer;
transition: transform .25s ease-in-out;
filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
&:hover {
transform: scale(1.05);
}
}
}
}
.smallLinkbox {
margin: 1rem 0;
width: 500px;
max-width: 90vw;
justify-content: center;
display: flex;
flex-wrap: wrap;
gap: 1rem;
a {
font-size: 2rem;
text-decoration: none;
filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
transition: transform .25s ease-in-out;
&:hover {
transform: scale(1.15);
}
}
}