153 lines
3.7 KiB
SCSS
Executable File
153 lines
3.7 KiB
SCSS
Executable File
@charset "UTF-8";
|
|
|
|
|
|
|
|
@import "../bower_components/foundation/scss/normalize.scss";
|
|
|
|
|
|
|
|
|
|
@import "../bower_components/foundation/scss/foundation/functions";
|
|
|
|
$row-width: rem-calc(1250);
|
|
// $total-columns: 12;
|
|
$column-gutter: rem-calc(20);
|
|
|
|
//@import "../bower_components/foundation/scss/foundation/settings"; // this is not working, causing an error on compilation
|
|
@import "../bower_components/foundation/scss/foundation/components/global";
|
|
@import "../bower_components/foundation/scss/foundation/components/type";
|
|
@import "../bower_components/foundation/scss/foundation/components/clearing";
|
|
// @import "../bower_components/foundation/scss/foundation/components/inline-lists";
|
|
@import "../bower_components/foundation/scss/foundation/components/grid";
|
|
// @import "../bower_components/foundation/scss/foundation/components/top-bar";
|
|
@import "../bower_components/foundation/scss/foundation/components/block-grid";
|
|
// @import "../bower_components/foundation/scss/foundation.scss"; // without importing the whole foundation, the final css files is 75% less heavier
|
|
|
|
// @import "../bower_components/animate.scss/scss/animate.scss";
|
|
|
|
/*
|
|
* ESADHaR
|
|
*/
|
|
@import "communs.scss";
|
|
@import "fonts.scss";
|
|
|
|
|
|
|
|
html{
|
|
position:relative;
|
|
}
|
|
|
|
body{
|
|
position:relative;
|
|
height:100%!important;
|
|
|
|
|
|
/* IE10 Consumer Preview */
|
|
background-image: -ms-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
|
|
|
|
/* Mozilla Firefox */
|
|
background-image: -moz-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
|
|
|
|
/* Opera */
|
|
background-image: -o-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
|
|
|
|
/* Webkit (Safari/Chrome 10) */
|
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFDE9), color-stop(1, #BECFD9));
|
|
|
|
/* Webkit (Chrome 11+) */
|
|
background-image: -webkit-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
|
|
|
|
/* W3C Markup, IE10 Release Preview */
|
|
background-image: linear-gradient(to bottom, #FFFDE9 0%, #BECFD9 100%);
|
|
|
|
}
|
|
|
|
#root{
|
|
position:relative;
|
|
width:100%;
|
|
height:100%;
|
|
overflow: hidden;
|
|
// width:1125px;
|
|
// height:900px;
|
|
// margin:-450px auto 0;
|
|
// top:50%;
|
|
}
|
|
|
|
@keyframes introLogo{
|
|
0% {opacity:0;}
|
|
35% {opacity:1;}
|
|
50% {opacity:1;}
|
|
75% {opacity:0;}
|
|
100% {opacity:0;}
|
|
}
|
|
@keyframes introLogoBlured{
|
|
0% {opacity:0;}
|
|
50% {opacity:0;}
|
|
60% {opacity:0.8;}
|
|
100% {opacity:0.8;}
|
|
}
|
|
@keyframes introSlogan{
|
|
0% {opacity:0;}
|
|
50% {opacity:0;}
|
|
70% {opacity:1;}
|
|
90% {opacity:1;}
|
|
100% {opacity:0;}
|
|
}
|
|
|
|
$animeLogoDuration:12s;
|
|
|
|
#header{
|
|
position:absolute;
|
|
overflow:hidden;
|
|
width:700px;
|
|
height:310px;
|
|
top:50%; left:50%;
|
|
margin-left:-350px;
|
|
margin-top:-155px;
|
|
|
|
h1{
|
|
position:absolute;
|
|
width:100%; height:100%;
|
|
a{display:block;margin-top:-500%;}
|
|
// filter:url(#blur-effect);
|
|
&:after, &:before{
|
|
content:"";
|
|
display:block;
|
|
width:100%; height:100%;
|
|
position:absolute;
|
|
top:0; left:0;
|
|
opacity:0;
|
|
}
|
|
&:before{
|
|
background: transparent url('../assets/img/logo.svg') no-repeat center center;
|
|
animation: introLogo $animeLogoDuration linear 0s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
&:after{
|
|
background: transparent url('../assets/img/logo-blured.svg') no-repeat center center;
|
|
animation: introLogoBlured $animeLogoDuration linear 0s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
}
|
|
|
|
|
|
h2{
|
|
background: transparent url('../assets/img/slogan.svg') no-repeat center center;
|
|
position:absolute;
|
|
width:100%; height:100%;
|
|
a{display:block;margin-top:-500%;}
|
|
opacity:0;
|
|
animation: introSlogan $animeLogoDuration linear 0s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
}
|
|
|
|
#footer{
|
|
position:fixed;
|
|
bottom:0;
|
|
.block{
|
|
display:inline-block;
|
|
vertical-align: top;
|
|
}
|
|
} |