116 lines
2.1 KiB
CSS
116 lines
2.1 KiB
CSS
@keyframes slideInLeft {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#greeter {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-content: space-around;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
height: 100vh;
|
|
width: 100%;
|
|
position: relative;
|
|
animation: 1s ease-out 0s 1 slideInLeft;
|
|
}
|
|
|
|
#greeter-sim {
|
|
flex-grow: 2;
|
|
}
|
|
|
|
#greeter-sim * {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
}
|
|
|
|
#greeter-content {
|
|
padding: 2%;
|
|
margin: 0;
|
|
flex-grow: 2;
|
|
}
|
|
|
|
@media (max-width: 950px){
|
|
#greeter-content {
|
|
margin: 5% 5% 5% 5%;
|
|
}
|
|
}
|
|
#greeter-content li {
|
|
font-size: 133%;
|
|
}
|
|
|
|
/* CSS scroll button */
|
|
.scroll-down-dude {margin: 12px 0px 0px 24px;}
|
|
.scroll-down-dude:before,
|
|
.scroll-down-dude:after {
|
|
content: "";
|
|
display: block;
|
|
width: 12px;
|
|
height: 12px;
|
|
transform: rotate(45deg);
|
|
border-bottom: 4px solid white;
|
|
border-right: 4px solid white;
|
|
}
|
|
|
|
.scroll-down-dude:before {
|
|
-webkit-animation: down-arrow-before 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
|
|
animation: down-arrow-before 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
|
|
}
|
|
|
|
.scroll-down-dude:after {
|
|
-webkit-animation: down-arrow-after 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
|
|
animation: down-arrow-after 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
|
|
}
|
|
|
|
@-webkit-keyframes down-arrow-before {
|
|
50% {
|
|
transform: rotate(45deg) translate(70%, 70%);
|
|
}
|
|
100% {
|
|
transform: rotate(45deg) translate(70%, 70%);
|
|
}
|
|
}
|
|
|
|
@keyframes down-arrow-before {
|
|
50% {
|
|
transform: rotate(45deg) translate(70%, 70%);
|
|
}
|
|
100% {
|
|
transform: rotate(45deg) translate(70%, 70%);
|
|
}
|
|
}
|
|
@-webkit-keyframes down-arrow-after {
|
|
50% {
|
|
transform: rotate(45deg) translate(110%, 110%);
|
|
opacity: 0;
|
|
}
|
|
51% {
|
|
transform: rotate(45deg) translate(-130%, -130%);
|
|
}
|
|
100% {
|
|
transform: rotate(45deg) translate(-70%, -70%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes down-arrow-after {
|
|
50% {
|
|
transform: rotate(45deg) translate(110%, 110%);
|
|
opacity: 0;
|
|
}
|
|
51% {
|
|
transform: rotate(45deg) translate(-130%, -130%);
|
|
}
|
|
100% {
|
|
transform: rotate(45deg) translate(-70%, -70%);
|
|
opacity: 1;
|
|
}
|
|
}
|