H-O-O-T-S/Open-RSC-Docker-Home
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Major website overhaul

Browse Source
This commit is contained in:
Marwolf
2018-08-03 23:24:48 -04:00
parent 94ee33c14e
commit 8b1bf24555
79 changed files with 5444 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
etc/ghost/themes/casper/assets/scss/modules/_effects.scss Executable file
View File

@@ -0,0 +1,197 @@
/* Grow Rotate */
.hvr-grow-rotate {
display: inline-block;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
vertical-align: middle;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hvr-grow-rotate:hover,
.hvr-grow-rotate:focus,
.hvr-grow-rotate:active {
-webkit-transform: scale(1.1) rotate(4deg);
transform: scale(1.1) rotate(4deg);
}
/* Buzz Out */
@-webkit-keyframes hvr-buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}
@keyframes hvr-buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}
.hvr-buzz-out {
display: inline-block;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translateZ(0);
transform: translateZ(0);
vertical-align: middle;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hvr-buzz-out:hover,
.hvr-buzz-out:focus,
.hvr-buzz-out:active {
-webkit-animation-name: hvr-buzz-out;
animation-name: hvr-buzz-out;
-webkit-animation-duration: .75s;
animation-duration: .75s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes move {
0% {
transform: translate(0, 50px);
}
50% {
transform: translate(20px, 100px);
}
100% {
transform: translate(0, 50px);
}
}
@keyframes blink {
0% {
top: 50px;
left: 0;
}
50% {
top: 100px;
left: 20px;
}
100% {
top: 50px;
left: 0;
}
}
@keyframes flicker {
0% {
opacity: .9;
}
30% {
opacity: .97;
}
40% {
opacity: 1;
}
80% {
opacity: .9;
}
88% {
opacity: .98;
}
90% {
opacity: .94;
}
93% {
opacity: .9;
}
95% {
opacity: .99;
}
96% {
opacity: .93;
}
98% {
opacity: 1;
}
99% {
opacity: .93;
}
}