From a38ace0df9b2bac038c7fcb5aad19864d3f1648d Mon Sep 17 00:00:00 2001 From: psychobunny Date: Wed, 18 Sep 2013 16:56:34 -0400 Subject: [PATCH] moved metro slide animation out of vanilla into cerulean, and rejigged the home page a bit --- public/themes/cerulean/animations.less | 69 +++++++++++++ public/themes/cerulean/home.less | 38 ++++++- public/themes/vanilla/home.less | 132 +++++-------------------- 3 files changed, 129 insertions(+), 110 deletions(-) diff --git a/public/themes/cerulean/animations.less b/public/themes/cerulean/animations.less index c5b3bcdb51..34c95580e8 100644 --- a/public/themes/cerulean/animations.less +++ b/public/themes/cerulean/animations.less @@ -3434,3 +3434,72 @@ -o-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;} +} diff --git a/public/themes/cerulean/home.less b/public/themes/cerulean/home.less index 448bf4ac8a..e313ee1e71 100644 --- a/public/themes/cerulean/home.less +++ b/public/themes/cerulean/home.less @@ -3,15 +3,49 @@ .home { h4 { - color: #555; + color: #fff; + padding-left: 10px; } .icon { - > div > div { + margin-top: -37px; + height: 150px; + .category-box { .animated-long; .pulse; + height: 130px; } 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: */ } + } \ No newline at end of file diff --git a/public/themes/vanilla/home.less b/public/themes/vanilla/home.less index 8c26ba2081..6664f4e47a 100644 --- a/public/themes/vanilla/home.less +++ b/public/themes/vanilla/home.less @@ -18,8 +18,32 @@ .pointer; margin-bottom: 10px; 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: */ -}