moved metro slide animation out of vanilla into cerulean, and rejigged the home page a bit

v1.18.x
psychobunny 12 years ago
parent 0b0b06e8b9
commit a38ace0df9

@ -3434,3 +3434,72 @@
-o-animation-name: rollOut; -o-animation-name: rollOut;
animation-name: rollOut; animation-name: rollOut;
} }
@-webkit-keyframes scroll-2 /* Safari and Chrome */
{
0% {top: 0px;}
3% {top:-130px;}
25% {top: -130px;}
28% {top:-260px;}
50% {top: -260px;}
53% {top: -390px;};
75% {top: -390px;}
78% {top: -520px;}
100% {top: -520px;}
}
@keyframes scroll-2
{
0% {top: 0px;}
3% {top:-130px;}
25% {top: -130px;}
28% {top:-260px;}
50% {top: -260px;}
53% {top: -390px;};
75% {top: -390px;}
78% {top: -520px;}
100% {top: -520px;}
}
@-webkit-keyframes scroll-1 /* Safari and Chrome */
{
0% {top: 0px;}
3% {top:-130px;}
33% {top: -130px;}
36% {top: -260px;}
66% {top: -260px;}
69% {top: -390px;}
100% {top: -390px;}
}
@keyframes scroll-1
{
0% {top: 0px;}
3% {top:-130px;}
33% {top: -130px;}
36% {top: -260px;}
66% {top: -260px;}
69% {top: -390px;}
100% {top: -390px;}
}
@-webkit-keyframes scroll-0 /* Safari and Chrome */
{
0% {top: 0px;}
3% {top:-130px;}
50% {top: -130px;}
53% {top: -260px;}
100% {top: -260px;}
}
@keyframes scroll-0
{
0% {top: 0px;}
3% {top:-130px;}
50% {top: -130px;}
53% {top: -260px;}
100% {top: -260px;}
}

@ -3,15 +3,49 @@
.home { .home {
h4 { h4 {
color: #555; color: #fff;
padding-left: 10px;
} }
.icon { .icon {
> div > div { margin-top: -37px;
height: 150px;
.category-box {
.animated-long; .animated-long;
.pulse; .pulse;
height: 130px;
} }
border-radius: 0; border-radius: 0;
padding-top: 50px;
}
.badge {
position: absolute;
bottom: 15px;
right: 20px;
background: none;
}
.category-slider-2:hover {
position:relative;
-webkit-animation: scroll-2 10s ease-in 0.5s infinite normal;
animation: scroll-2 10s ease-in 0.5s infinite normal;/* Safari and Chrome: */
}
.category-slider-1:hover {
position:relative;
-webkit-animation: scroll-1 8s ease-in 0.5s infinite normal;
animation: scroll-1 8s ease-in 0.5s infinite normal;/* Safari and Chrome: */
}
.category-slider-0:hover {
position:relative;
-webkit-animation: scroll-0 6s ease-in 0.5s infinite normal;
animation: scroll-0 6s ease-in 0.5s infinite normal;/* Safari and Chrome: */
} }
} }

@ -18,8 +18,32 @@
.pointer; .pointer;
margin-bottom: 10px; margin-bottom: 10px;
overflow:hidden; overflow:hidden;
.category-box {
height:90px;
.post-preview {
padding-left:10px;
padding-right:10px;
text-align:left;
img {
width:60px;
height:60px;
padding-right:5px;
}
p {
overflow: hidden;
text-overflow:ellipsis;
height:60px;
}
}
}
} }
} }
@ -89,111 +113,3 @@
} }
} }
.category-box {
height:90px;
.post-preview {
padding-left:10px;
padding-right:10px;
text-align:left;
img {
width:60px;
height:60px;
padding-right:5px;
}
p {
overflow: hidden;
text-overflow:ellipsis;
height:60px;
}
}
}
@-webkit-keyframes scroll-2 /* Safari and Chrome */
{
0% {top: 0px;}
3% {top:-90px;}
25% {top: -90px;}
28% {top:-180px;}
50% {top: -180px;}
53% {top: -270px;};
75% {top: -270px;}
78% {top: -360px;}
100% {top: -360px;}
}
@keyframes scroll-2
{
0% {top: 0px;}
3% {top:-90px;}
25% {top: -90px;}
28% {top:-180px;}
50% {top: -180px;}
53% {top: -270px;};
75% {top: -270px;}
78% {top: -360px;}
100% {top: -360px;}
}
@-webkit-keyframes scroll-1 /* Safari and Chrome */
{
0% {top: 0px;}
3% {top:-90px;}
33% {top: -90px;}
36% {top: -180px;}
66% {top: -180px;}
69% {top: -270px;}
100% {top: -270px;}
}
@keyframes scroll-1
{
0% {top: 0px;}
3% {top:-90px;}
33% {top: -90px;}
36% {top: -180px;}
66% {top: -180px;}
69% {top: -270px;}
100% {top: -270px;}
}
@-webkit-keyframes scroll-0 /* Safari and Chrome */
{
0% {top: 0px;}
3% {top:-90px;}
50% {top: -90px;}
53% {top: -180px;}
100% {top: -180px;}
}
@keyframes scroll-0
{
0% {top: 0px;}
3% {top:-90px;}
50% {top: -90px;}
53% {top: -180px;}
100% {top: -180px;}
}
.category-slider-2:hover {
position:relative;
-webkit-animation: scroll-2 10s ease-in 0.5s infinite normal;
animation: scroll-2 10s ease-in 0.5s infinite normal;/* Safari and Chrome: */
}
.category-slider-1:hover {
position:relative;
-webkit-animation: scroll-1 8s ease-in 0.5s infinite normal;
animation: scroll-1 8s ease-in 0.5s infinite normal;/* Safari and Chrome: */
}
.category-slider-0:hover {
position:relative;
-webkit-animation: scroll-0 6s ease-in 0.5s infinite normal;
animation: scroll-0 6s ease-in 0.5s infinite normal;/* Safari and Chrome: */
}

Loading…
Cancel
Save