.js-loading *, .js-loading *:before, .js-loading *:after {
-webkit-animation-play-state: paused !important; animation-play-state: paused !important;
}
main.page-content {
min-height: 200px;
}
div.home-main {
height: 85vh; padding: 0 3rem; @include flexbox_parent(row, flex-start, center); p:first-of-type { margin-top: 1rem; }
}
div.home-latest-posts {
padding: 0 3rem;
}
div.home-main {
background: #888888; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 85vh; -webkit-box-pack: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; overflow: hidden; position: relative; text-align: flex-start; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 100px; perspective: 100px; h1 { -webkit-animation: no-transform 1s ease-in forwards; animation: no-transform 1s ease-in forwards; opacity: 0; } p { -webkit-animation: no-transform 1s 1.2s ease-in forwards; animation: no-transform 1s 1.2s ease-in forwards; opacity: 0; }
}
.home-main:before { -webkit-animation: spin 40s linear infinite; animation: spin 40s linear infinite; background-image: -webkit-linear-gradient(135deg, #858f96 4%, #596164 96%); background-image: linear-gradient(135deg, #858f96 4%, #596164 96%); background-size: cover; bottom: 0; content: ""; left: 0; opacity: 0; position: absolute; right: 0; top: 0; z-index: -1; } .home-main:after { -webkit-animation: spin 20s 10s linear infinite; animation: spin 20s 10s linear infinite; background-image: -webkit-linear-gradient(45deg, #dcdddf 0%, #ebebeb 100%); background-image: linear-gradient(45deg, #dcdddf 0%, #ebebeb 100%); background-size: cover; bottom: 0; content: ""; left: 0; opacity: 0; position: absolute; right: 0; top: 0; z-index: -1; }
.home-latest-posts {
-webkit-animation: no-transform 2s 1.5s ease-in forwards; animation: no-transform 2s 1.5s ease-in forwards; opacity: 0; margin-top: 3rem; *:hover, *:active, *:focus { text-decoration: none; outline: none; color: inherit !important; } h1 { margin-bottom: 2rem; } ul { margin-right: 3rem; li { margin-bottom: 1.5rem; border-bottom: solid #dcdddf; padding: 0.5rem; } }
}
.wrapper {
-webkit-animation: no-transform 1.5s ease-in forwards; animation: no-transform 1.5s ease-in forwards; opacity: 0;
}
/* Animations */
@-webkit-keyframes spin {
0% { opacity: 0; } 50% { opacity: 0.95; } 100% { opacity: 0; -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); }
}
@keyframes spin {
0% { opacity: 0; } 50% { opacity: 0.95; } 100% { opacity: 0; -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); }
}
@-webkit-keyframes no-transform {
100% { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes no-transform {
100% { opacity: 1; -webkit-transform: none; transform: none; }
}