Release Candidate 0.1
This commit is contained in:
Bachir Soussi Chiadmi
@@ -70,7 +70,7 @@
|
||||
|
||||
// We use this to control whether or not CSS classes come through in the gem files.
|
||||
$include-html-classes: true;
|
||||
// $include-print-styles: true;
|
||||
$include-print-styles: true;
|
||||
$include-html-global-classes: $include-html-classes;
|
||||
|
||||
// b. Grid
|
||||
@@ -79,7 +79,7 @@ $include-html-global-classes: $include-html-classes;
|
||||
// $include-html-grid-classes: $include-html-classes;
|
||||
// $include-xl-html-grid-classes: false;
|
||||
|
||||
// $row-width: rem-calc(1000);
|
||||
//$row-width: rem-calc(2000);
|
||||
// $total-columns: 12;
|
||||
// $column-gutter: rem-calc(30);
|
||||
|
||||
@@ -88,7 +88,7 @@ $include-html-global-classes: $include-html-classes;
|
||||
|
||||
// We use these to define default font stacks
|
||||
// $font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
$font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
// $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
// $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
|
||||
|
||||
// We use these to define default font weights
|
||||
|
||||
@@ -3,7 +3,17 @@
|
||||
|
||||
@import "settings";
|
||||
|
||||
$green: #31cd11;
|
||||
$green: rgb(0, 255, 0);
|
||||
|
||||
$font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
|
||||
body{font-family: $font;}
|
||||
|
||||
h1,h2,h3,h4,h5,h6{font-family: $font;}
|
||||
|
||||
a, a:hover{color:inherit;}
|
||||
|
||||
.row.fullwidth{max-width:80vw;}
|
||||
|
||||
/*
|
||||
_ _ _
|
||||
@@ -13,26 +23,89 @@ $green: #31cd11;
|
||||
| | | | __/ (_| | (_| | __/ |
|
||||
|_| |_|\___|\__,_|\__,_|\___|_|
|
||||
*/
|
||||
$headerborderH: 0.3em;
|
||||
$headerpaddingtopH:2em;
|
||||
$titleareaH: 10em;
|
||||
$centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH;
|
||||
header#top-bar{
|
||||
position: fixed;
|
||||
width:100%; top:0;
|
||||
background-color: rgba(250, 250, 250, 0.8);
|
||||
position: fixed; top:0;
|
||||
width:100%;
|
||||
// TODO: flou sous le haeder
|
||||
z-index: 10;
|
||||
h1{
|
||||
z-index: 9;
|
||||
|
||||
&:before{
|
||||
content:"";
|
||||
border-top: $headerborderH solid $green;
|
||||
display: block;
|
||||
padding-bottom: $headerpaddingtopH;
|
||||
background: transparent!important;
|
||||
}
|
||||
|
||||
>.row{
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
position:relative; display:block;
|
||||
}
|
||||
|
||||
#title-area{
|
||||
overflow: hidden;
|
||||
position:relative;
|
||||
height:$titleareaH;
|
||||
h1{
|
||||
height:100%;
|
||||
a{display: block; height:100%;
|
||||
background: transparent url("../images/logo.png") no-repeat center center;
|
||||
background-size: contain;}
|
||||
}
|
||||
h1 span, h2{
|
||||
position:absolute; margin-left:-3000px;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2{
|
||||
text-align: center;
|
||||
a{
|
||||
color: #000;
|
||||
}}
|
||||
|
||||
#right-nav{
|
||||
|
||||
.nav{
|
||||
position:relative;
|
||||
height:100%;
|
||||
ul{padding: 0; margin: 0;}
|
||||
li{list-style: none;}
|
||||
.wrapper{padding-top: $titleareaH/2-1.5em;}
|
||||
}
|
||||
|
||||
#left-nav{
|
||||
ul{padding: 0; margin: 0;}
|
||||
}
|
||||
#right-nav{
|
||||
text-align: right;
|
||||
|
||||
h4{font-size: 1em; margin:0; }
|
||||
ul{background-color: #fff;}
|
||||
li{
|
||||
list-style: none;
|
||||
line-height: 1;
|
||||
// &:not(.active){
|
||||
overflow: hidden; height:1px; transition: height 0.3s ease-in;
|
||||
// }
|
||||
a{display:block;}
|
||||
// &.active span{
|
||||
// display:inline-block;
|
||||
// position:relative;
|
||||
// &:after{
|
||||
// content: ""; height:0;
|
||||
// display: block; margin-top:-.7em; margin-bottom:.7em;
|
||||
// border-top:0.5em solid $green;}
|
||||
// }
|
||||
}
|
||||
|
||||
&:hover{
|
||||
li{
|
||||
height:1.1em; transition: height 0.5s ease-out;
|
||||
&:hover span{
|
||||
// border-bottom: 1px solid #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -46,12 +119,126 @@ header#top-bar{
|
||||
\_____\___|_| |_|\__\___|_|
|
||||
*/
|
||||
div#center{
|
||||
padding-top:10em;
|
||||
padding-top:$centerpaddingtop;
|
||||
.columns{
|
||||
padding: 0;
|
||||
}
|
||||
.projet{
|
||||
|
||||
/*
|
||||
* LIST PROJET
|
||||
*/
|
||||
.projet-block{
|
||||
padding:1em;
|
||||
text-align: center;
|
||||
|
||||
a{display: block;}
|
||||
|
||||
header{
|
||||
position:relative;
|
||||
// margin-top:0;padding-top:0;
|
||||
margin-top: -3em; padding-top: 3.5em;
|
||||
transition:background-color 0.5s ease-in;}
|
||||
header>*{
|
||||
font-family: $font; text-align: center;
|
||||
padding:0; margin:0;}
|
||||
h1{
|
||||
font-size: 1.3em;font-weight: bold; margin:0; line-height: 1; height:auto;
|
||||
display:inline-block; position:relative;
|
||||
&:after{
|
||||
content: ""; height:0;
|
||||
display: block; margin-top:-.7em; margin-bottom:.7em;
|
||||
border-top:0.5em solid $green;
|
||||
transition:border-color 0.3s ease-in;}
|
||||
}
|
||||
h2{font-size: 1em;font-weight: normal; margin:-0.7em 0 0; line-height: 1;}
|
||||
|
||||
&.projet-block-text{
|
||||
text-align: left;
|
||||
h1{margin-bottom: 0.3em;}
|
||||
h2{font-weight:bold;margin-bottom: 0.3em;}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
header{
|
||||
background-color: rgba($green, 0.7); transition-timing-function: ease-out;
|
||||
h1:after{border-top:0.5em solid #FFF;transition-timing-function: ease-out;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* PAGE PROJET
|
||||
*/
|
||||
.projet{
|
||||
h1{
|
||||
font-family: $font; font-size: 1.3em;font-weight: bold;line-height:1;
|
||||
display:inline-block; position:relative;
|
||||
margin:0; padding:0;
|
||||
// $green overline
|
||||
&:after{
|
||||
content: "";
|
||||
display: block; margin-top:-.7em; margin-bottom:.7em;
|
||||
border-top:0.5em solid $green;
|
||||
transition:border-color 0.3s ease-in;}
|
||||
}
|
||||
h2{font-family: $font;font-size: 1em;font-weight: bold; margin:0; padding:0;}
|
||||
// .block{
|
||||
// display: inline-block;
|
||||
// }
|
||||
|
||||
|
||||
#images{
|
||||
// .row{margin:0;}
|
||||
.block{margin-bottom: 1.2em;}
|
||||
}
|
||||
|
||||
img{
|
||||
width:100%; max-width:100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Catégories
|
||||
*/
|
||||
nav.categories{
|
||||
margin: 1em 0;
|
||||
ul.tags{
|
||||
margin:0; padding:0; text-align:center;
|
||||
li{
|
||||
list-style: none; display:inline-block;
|
||||
margin:0 1em;
|
||||
a{display:block;}
|
||||
span{font-size: 1.3em;}
|
||||
&.active span{
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #000;
|
||||
line-height: 0.2;
|
||||
&:after{
|
||||
content: ""; height:0;
|
||||
display: block; margin-top:-0.2em; margin-bottom:0.2em;
|
||||
border-top:0.5em solid $green;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#diaporama{
|
||||
position:relative;
|
||||
height:20vw;
|
||||
>*{
|
||||
position:absolute; top:0; left:0;
|
||||
height:100%; width:100%;
|
||||
text-align: center;
|
||||
opacity:0;
|
||||
transition: opacity 0.2s ease-in;
|
||||
&.visible{opacity:1;}
|
||||
|
||||
img{height:100%;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,4 +254,16 @@ footer#bottom-bar{
|
||||
background-color: $green;
|
||||
text-align: center;
|
||||
padding: 1em 0;
|
||||
|
||||
h1{
|
||||
font-size: 1.3em;font-weight: bold; margin:0; line-height: 1; height:auto;
|
||||
display:inline-block; position:relative;
|
||||
&:after{
|
||||
content: ""; height:0;
|
||||
display: block; margin-top:-.7em; margin-bottom:.7em;
|
||||
border-top:0.5em solid #fff;
|
||||
transition:border-color 0.3s ease-in;}
|
||||
}
|
||||
address, a{font-size: 0.9em;font-weight: normal; margin:-0.7em 0 0; line-height: 1;}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user