119 lines
1.8 KiB
SCSS
119 lines
1.8 KiB
SCSS
@import "../../styles/global";
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 64em;
|
|
margin-top: 14em;
|
|
margin-bottom: 10em;
|
|
@include fluid-position-left(68em, 58em);
|
|
color: #fff;
|
|
opacity: 0;
|
|
transition: opacity 500ms;
|
|
|
|
&.connected {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.content-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(1, 1fr);
|
|
gap: 4em;
|
|
margin: 4em 0;
|
|
|
|
@media screen and (min-width: 36rem) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-auto-rows: 1fr;
|
|
gap: 10em;
|
|
margin-top: 3em;
|
|
}
|
|
|
|
@media screen and (max-width: 80rem) {
|
|
> div {
|
|
background: rgba(#080808, 0.7);
|
|
border-radius: 0.5em;
|
|
padding: 0.8em 1.5em 1em;
|
|
margin: -0.8em -1.5em -1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
main {
|
|
position: relative;
|
|
animation: 1000ms fade-in;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(127.54deg);
|
|
}
|
|
|
|
20% {
|
|
transform: rotate(127.54deg);
|
|
}
|
|
|
|
30% {
|
|
transform: rotate(420deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(420deg);
|
|
}
|
|
|
|
60% {
|
|
transform: rotate(360deg);
|
|
}
|
|
|
|
90% {
|
|
transform: rotate(360deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(540deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotate-full {
|
|
0% {
|
|
transform: rotate(-52.46deg);
|
|
}
|
|
|
|
20% {
|
|
transform: rotate(-52.46deg);
|
|
}
|
|
|
|
30% {
|
|
transform: rotate(240deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(240deg);
|
|
}
|
|
|
|
60% {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
90% {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|