bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-22 09:46:57 +01:00
Code Releases Activity

ipdb rocket tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2017-05-30 23:10:27 +02:00
parent ee016e101d
commit 85035f610d
Signed by: m
GPG Key ID: BD3C1F3EDD7831FC
1 changed files with 212 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
_src/_assets/styles/_ipdb.scss
View File

@ -1,7 +1,6 @@
.ipdb {
text-align: center;
background: linear-gradient(-45deg, #114656 0%, #062e38 100%);
overflow: hidden;
a {
font-weight: $font-weight-light;
@ -13,6 +12,10 @@
&:hover {
background: none;
color: #fff;
.ipdb-rocket {
animation: shake .1s ease-in-out infinite;
}
}
}
}
@ -23,20 +26,220 @@
}
.ipdb-rocket {
@include transition;
fill: #fff;
position: absolute;
right: 0;
top: -.5rem;
width: 4rem;
height: 2.8rem;
top: -1.2rem;
width: 5rem;
height: 3.7rem;
opacity: .3;
transform: scaleX(-1); // lazy flip it around
@media ($screen-sm) {
opacity: 1;
right: -5rem;
}
@media ($screen-md) {
right: -4.5rem;
}
}
@keyframes shake {
2% {
transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
}
4% {
transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
}
6% {
transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
}
8% {
transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
}
10% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
12% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
14% {
transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
}
16% {
transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
}
18% {
transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
}
20% {
transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
}
22% {
transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
}
24% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
26% {
transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
}
28% {
transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
}
30% {
transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
}
32% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
34% {
transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
}
36% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
38% {
transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
}
40% {
transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
}
42% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
44% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
46% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
48% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
50% {
transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
}
52% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
54% {
transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
}
56% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
58% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
60% {
transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
}
62% {
transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
}
64% {
transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
}
66% {
transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
}
68% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
70% {
transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
}
72% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
74% {
transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
}
76% {
transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
}
78% {
transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
}
80% {
transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
}
82% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
84% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
86% {
transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
}
88% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
90% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
92% {
transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
}
94% {
transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
}
96% {
transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
}
98% {
transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
}
0%, 100% {
transform: scaleX(-1) translate(0, 0) rotate(0)
}
}