162 lines
2.3 KiB
CSS
162 lines
2.3 KiB
CSS
.App {
|
|
text-align: center;
|
|
background-color: black;
|
|
min-height: 100vh;
|
|
width: 100vw !important;
|
|
max-width: 100vw !important;
|
|
font-size: calc(20px);
|
|
color: white;
|
|
}
|
|
|
|
.row {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
html {
|
|
background-color: black;
|
|
}
|
|
|
|
/* we do this because scroll snapping is broken on moz://a for some reason */
|
|
@supports (-moz-appearance:none){
|
|
html {
|
|
scroll-snap-type: none !important;
|
|
}
|
|
}
|
|
|
|
/* mobile won't play with snapping too well so we need to make it prox not mandatory */
|
|
@media only screen and (max-width: 600px) {
|
|
html {
|
|
scroll-snap-type: none !important;
|
|
}
|
|
|
|
.child {
|
|
scroll-snap-align: none !important;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
@keyframes fade-up-anim {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
100% {
|
|
opacity:1;
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 993px) {
|
|
.fade-up-md {
|
|
opacity: 0;
|
|
animation: fade-up-anim 2s forwards 200ms !important;
|
|
}
|
|
|
|
.fade-up-md-2 {
|
|
opacity: 0;
|
|
animation: fade-up-anim 2s forwards 400ms !important;
|
|
}
|
|
|
|
.fade-up-md-3 {
|
|
opacity: 0;
|
|
animation: fade-up-anim 2s forwards 600ms !important;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.fade-up {
|
|
opacity: 0;
|
|
animation: fade-up-anim 2s forwards 200ms;
|
|
}
|
|
|
|
.fade-up-2 {
|
|
opacity: 0;
|
|
animation: fade-up-anim 2s forwards 400ms;
|
|
}
|
|
|
|
.fade-up-3 {
|
|
opacity: 0;
|
|
animation: fade-up-anim 2s forwards 600ms;
|
|
}
|
|
}
|
|
|
|
.fade-up {
|
|
opacity: 0;
|
|
animation: fade-up-anim 2s forwards 200ms;
|
|
}
|
|
|
|
.fade-up-d3s {
|
|
opacity: 0;
|
|
animation: fade-up-anim 2s forwards 3s;
|
|
}
|
|
|
|
@keyframes fade-in-tx-anim {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity:1;
|
|
}
|
|
}
|
|
|
|
.fade-in-tx {
|
|
animation: fade-in-tx-anim 1s ease-in;
|
|
}
|
|
|
|
@keyframes fade-out{
|
|
0% {
|
|
opacity: 1;
|
|
z-index: 500;
|
|
}
|
|
|
|
99% {
|
|
opacity: .1;
|
|
z-index: 500;
|
|
}
|
|
|
|
100% {
|
|
opacity:0;
|
|
z-index: -500;
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.fade-out {
|
|
animation: fade-out 1s ease-in forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes move-left-atx-anim {
|
|
0% {
|
|
margin-left: 0;
|
|
}
|
|
100% {
|
|
margin-left: -17px;
|
|
}
|
|
}
|
|
|
|
.move-left-atx {
|
|
animation: move-left-atx-anim 1s forwards;
|
|
}
|
|
|
|
|
|
|
|
html {
|
|
scroll-snap-type: y mandatory;
|
|
}
|
|
|
|
.child {
|
|
scroll-snap-align: center;
|
|
|
|
}
|
|
|
|
.pfp {
|
|
border-radius: 100%;
|
|
width: 25%
|
|
}
|