Skip to content

V2.0 teaser #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
admin1111 wants to merge 9 commits into from
Closed

V2.0 teaser #42

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7dfe8ff
Initial commit
kimchouard Dec 24, 2013
230afbb
Bugfix minutes and more flip
kimchouard Dec 25, 2013
b8738fe
Bugfix counter part names
kimchouard Dec 25, 2013
991af7f
Managing minutes
kimchouard Dec 25, 2013
33b499c
Class on each item of the countdown
kimchouard Dec 25, 2013
62d9ce9
Countdown working!!!
kimchouard Dec 25, 2013
390ef13
Countdown stop
kimchouard Dec 25, 2013
b216c43
css update
kimchouard Dec 25, 2013
f83890c
Reindent
kimchouard Dec 26, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
css update
  • Loading branch information
@kimchouard
kimchouard committed Dec 25, 2013
commit b216c43e89fb13b49c53c67f26f03be50377ceee
97 changes: 54 additions & 43 deletions stylesheets/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7282,44 +7282,55 @@ a.th {
}

/* line 86, sass/app.scss */
body, html, .wrapper {
.footer {
position: fixed;
bottom: 0;
right: 0;
overflow: hidden;
}
/* line 92, sass/app.scss */
.footer img {
width: 400px;
position: relative;
top: 50px;
left: 180px;
}

/* line 104, sass/app.scss */
body, html {
background: #e9e9e9;
height: 100%;
}

/* line 92, sass/app.scss */
/* line 109, sass/app.scss */
.wrapper {
position: relative;
z-index: 99;
}
/* line 113, sass/app.scss */
.wrapper .punchline {
font-size: 1.5em;
margin: 130px 0 40px;
}
/* line 97, sass/app.scss */
/* line 118, sass/app.scss */
.wrapper .countdownWrapper {
text-align: center;
}
/* line 100, sass/app.scss */
/* line 121, sass/app.scss */
.wrapper .countdownWrapper .number {
color: red;
font-size: 7em;
}
/* line 105, sass/app.scss */
/* line 126, sass/app.scss */
.wrapper .countdownWrapper .caption {
font-size: 1.5em;
font-weight: 200;
text-transform: uppercase;
margin-top: 15px;
padding-left: 20px;
}

/* line 117, sass/app.scss */
.footer {
position: absolute;
bottom: 0;
right: 20px;
}
/* line 122, sass/app.scss */
.footer img {
width: 260px;
}

/* line 132, sass/app.scss */
/* line 141, sass/app.scss */
.wrapCounter {
text-align: center;
line-height: 100px;
Expand All @@ -7329,7 +7340,7 @@ body, html, .wrapper {
color: #939393;
}

/* line 141, sass/app.scss */
/* line 150, sass/app.scss */
.wrapCounter .counter {
font-size: 50px;
width: 100px;
Expand All @@ -7342,7 +7353,7 @@ body, html, .wrapper {
top: -7px;
}

/* line 153, sass/app.scss */
/* line 162, sass/app.scss */
.wrapCounter .counter > span {
display: block;
position: absolute;
Expand All @@ -7360,54 +7371,54 @@ body, html, .wrapper {
-webkit-transform-style: preserve-3d;
}

/* line 170, sass/app.scss */
/* line 179, sass/app.scss */
.wrapCounter .counter > span span {
color: red;
}

/* line 174, sass/app.scss */
/* line 183, sass/app.scss */
.wrapCounter .counter > span.decor.top {
box-shadow: 0 24px 43px -3px rgba(0, 0, 0, 0.45);
}

/* line 178, sass/app.scss */
/* line 187, sass/app.scss */
.wrapCounter .counter > span.decor.bottom {
box-shadow: 0 2px 0px -1px #d8d8d8, 0 4px 0px -2px #c7c7c7, 0 6px 0px -3px #d8d8d8, 0 8px 0px -4px #c6c6c6, 0 10px 0px -5px #d6d6d6, 0 12px 0px -6px #c9c9c9, 0 14px 0px -7px #d8d8d8, 0 14px 23px -9px rgba(0, 0, 0, 0.8);
}

/* line 182, sass/app.scss */
/* line 191, sass/app.scss */
.wrapCounter .counter > span.top {
box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.2);
border-radius: 3px 3px 0 0;
}

/* line 187, sass/app.scss */
/* line 196, sass/app.scss */
.wrapCounter .counter > span.top span {
position: relative;
bottom: 5px;
}

/* line 192, sass/app.scss */
/* line 201, sass/app.scss */
.wrapCounter .counter > span.bottom {
top: 46px;
box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.2);
border-radius: 0 0 3px 3px;
}

/* line 198, sass/app.scss */
/* line 207, sass/app.scss */
.wrapCounter .counter > span.bottom span {
position: relative;
top: -51px;
}

/* line 203, sass/app.scss */
/* line 212, sass/app.scss */
.wrapCounter .counter > span.from.bottom {
z-index: 1;
-webkit-transform-origin: 0% 0%;
-webkit-animation: from-flip 1s;
}

/* line 209, sass/app.scss */
/* line 218, sass/app.scss */
.wrapCounter .counter > span.to.top {
z-index: 1;
-webkit-transform-origin: 100% 100%;
Expand All @@ -7416,54 +7427,54 @@ body, html, .wrapper {
}

@-webkit-keyframes from-flip {
/* line 217, sass/app.scss */
/* line 226, sass/app.scss */
0% {
-webkit-transform: rotateX(180deg);
}

/* line 221, sass/app.scss */
/* line 230, sass/app.scss */
100% {
-webkit-transform: rotateX(0deg);
}
}

@-webkit-keyframes to-flip {
/* line 227, sass/app.scss */
/* line 236, sass/app.scss */
0% {
-webkit-transform: rotateX(0deg);
}

/* line 231, sass/app.scss */
/* line 240, sass/app.scss */
100% {
-webkit-transform: rotateX(-180deg);
}
}

@-webkit-keyframes fade-out {
/* line 237, sass/app.scss */
/* line 246, sass/app.scss */
0% {
opacity: 1;
}

/* line 241, sass/app.scss */
/* line 250, sass/app.scss */
100% {
opacity: 0;
}
}

@-webkit-keyframes fade-in {
/* line 247, sass/app.scss */
/* line 256, sass/app.scss */
0% {
opacity: 0;
}

/* line 251, sass/app.scss */
/* line 260, sass/app.scss */
100% {
opacity: 1;
}
}

/* line 256, sass/app.scss */
/* line 265, sass/app.scss */
.counter .shadow {
display: block;
width: 120px;
Expand All @@ -7475,33 +7486,33 @@ body, html, .wrapper {
opacity: 0;
}

/* line 267, sass/app.scss */
/* line 276, sass/app.scss */
.counter .top .shadow {
background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
}

/* line 271, sass/app.scss */
/* line 280, sass/app.scss */
.counter .bottom .shadow {
background: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

/* line 275, sass/app.scss */
/* line 284, sass/app.scss */
.counter .from.top .shadow {
-webkit-animation: fade-out 1s;
}

/* line 279, sass/app.scss */
/* line 288, sass/app.scss */
.counter .to.bottom .shadow {
-webkit-animation: fade-in 1s;
}

/* line 283, sass/app.scss */
/* line 292, sass/app.scss */
.hide .shadow {
-webkit-animation: none !important;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* line 288, sass/app.scss */
/* line 297, sass/app.scss */
.wrapCounter .counter > span span {
color: rgba(0, 0, 0, 0);
background: linear-gradient(#ff0000 0%, #f00000 100%);
Expand Down
39 changes: 24 additions & 15 deletions stylesheets/sass/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,16 +79,37 @@ $red-dark2-color: rgb(200 , 0, 50);
}
}

//---------------------------------------------------------------------------------
// Footer
//---------------------------------------------------------------------------------

.footer {
position: fixed;
bottom: 0;
right: 0;
overflow: hidden;

img {
width: 400px;
position: relative;
top: 50px;
left: 180px;
}
}

//---------------------------------------------------------------------------------
// Main
//---------------------------------------------------------------------------------

body, html, .wrapper {
body, html {
background: $secondary-color;
height: 100%;
}

.wrapper {
position: relative;
z-index: 99;

.punchline {
font-size: 1.5em;
margin: ($menu-height+80)+px 0 40px;
Expand All @@ -106,24 +127,12 @@ body, html, .wrapper {
font-size: 1.5em;
font-weight: 200;
text-transform: uppercase;
margin-top: 15px;
padding-left: 20px;
}
}
}

//---------------------------------------------------------------------------------
// Footer
//---------------------------------------------------------------------------------

.footer {
position: absolute;
bottom: 0;
right: 20px;

img {
width: 260px;
}
}


//---------------------------------------------------------------------------------
// Counter
Expand Down