fix: revert global styles to unbreak site

This commit is contained in:
Juan Di Toro 2023-08-14 15:42:29 +02:00
parent 1356b66a99
commit 6b3626b6ac
1 changed files with 178 additions and 0 deletions

View File

@ -98,4 +98,182 @@ body {
transform: matrix(1, 0.04, -0.04, 1, 0, 0);
z-index: -1;
}
}
main {
@include fluid-font-size(0.625rem);
flex-grow: 1;
}
a, button {
transition: color $transition-duration;
}
.btn-main {
display: inline-block;
padding: 0.5em 0.8em;
color: $color-black;
background: $color-aquamarine;
border: 0.05em solid $color-aquamarine;
border-radius: 0.25em;
transition: color $transition-duration, background $transition-duration;
white-space: nowrap;
&:hover {
color: $color-white;
background: $color-blue-charcoal;
}
}
.feature-group {
h2 {
margin-bottom: 1em;
@include fluid-font-size(1.5625rem);
font-weight: 700;
line-height: 100%;
text-transform: uppercase;
color: $color-aquamarine;
}
h3 {
margin-bottom: 0.65em;
@include fluid-font-size(2.8125rem);
line-height: 109%;
}
h2, h3 {
text-shadow: 0.017em 0.017em 0.034em rgba($color-blue-charcoal, 0.65);
}
p, ul {
@include fluid-font-size(1.5rem);
font-family: $font-family-jaldi;
line-height: 148%;
color: $color-cloud;
transition: background $transition-duration;
}
p + p, ul + p {
margin-top: 0.78em;
}
ul {
list-style-type: disc;
margin-left: 1em;
}
.btn-main {
font-family: $font-family-jaldi;
@include fluid-font-size(1.5rem);
margin-top: 1.57em;
}
}
.feature-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 0.9em;
padding: 0 7.5%;
@include fluid-font-size(1.25rem);
@media screen and (min-width: 48rem) {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr;
}
@media screen and (min-width: 64rem) {
grid-template-columns: repeat(3, 1fr);
}
div {
display: flex;
flex-direction: column;
justify-content: center;
padding: 2.95em 1.95em;
background: $color-blue-charcoal;
border: 0.05em solid transparent;
border-radius: 0.5em;
font-family: $font-family-jaldi;
transition: border-color $transition-duration;
&:hover {
border-color: $color-aquamarine;
}
}
h3 {
@include fluid-font-size(2rem);
line-height: 109%;
}
p {
@include fluid-font-size(1.375rem);
margin-top: 0.67em;
line-height: 124%;
color: $color-cloud;
}
}
.tilted-bg {
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
right: -5%;
bottom: 0;
left: -5%;
margin: 2% 0;
background: $color-blue-charcoal;
transform: matrix(1, -0.04, 0.04, 1, 0, 0);
z-index: -1;
}
}
.tilted-bg-r {
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
right: -5%;
bottom: 0;
left: -5%;
margin: 2% 0;
background: $color-blue-charcoal;
transform: matrix(1, 0.04, -0.04, 1, 0, 0);
z-index: -1;
}
}
main.what {
&::before {
content: "";
position: absolute;
top: -2em;
left: 50%;
width: 151.3em;
height: 122.4em;
background: url("/src/assets/what-bg.png");
background-size: contain;
transform: translate(-50%, 0);
z-index: -1;
}
}
main.donate {
&::before {
content: "";
position: absolute;
top: -3em;
left: 50%;
width: 144em;
height: 93.3em;
background: url("/src/assets/donate-bg.png");
background-size: contain;
transform: translate(-50%, 0);
z-index: -1;
}
}