|
@@ -1,19 +1,61 @@
|
|
|
@import '../bower_components/foundation/scss/normalize.scss';
|
|
|
+$include-xl-html-grid-classes: true;
|
|
|
@import '../bower_components/foundation/scss/foundation.scss';
|
|
|
|
|
|
-@import "settings";
|
|
|
+@import "_settings.scss";
|
|
|
+
|
|
|
+// $include-html-grid-classes: $include-html-classes;
|
|
|
+
|
|
|
+@import '../bower_components/foundation/scss/foundation/components/_global.scss';
|
|
|
+@import '../bower_components/foundation/scss/foundation/components/_grid.scss';
|
|
|
+
|
|
|
+
|
|
|
+$column-gutter: rem-calc(15);
|
|
|
|
|
|
$green: rgb(0, 255, 0);
|
|
|
|
|
|
$font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
|
|
|
|
|
-body{font-family: $font;}
|
|
|
+@mixin fontbold{
|
|
|
+ // TODO : media query
|
|
|
+ font: $font; font-size:0.87em; font-weight:bold;
|
|
|
+}
|
|
|
+@mixin fontnormal{
|
|
|
+ // TODO : media query
|
|
|
+ font: $font; font-size:0.8em; font-weight:normal;
|
|
|
+}
|
|
|
+
|
|
|
+body{font-family: $font; letter-spacing: 1px;}
|
|
|
|
|
|
h1,h2,h3,h4,h5,h6{font-family: $font;}
|
|
|
|
|
|
a, a:hover{color:inherit;}
|
|
|
|
|
|
-.row.fullwidth{max-width:80vw;}
|
|
|
+// @media $large-up {
|
|
|
+// .row.fullwidth{width:1200px;}
|
|
|
+// }
|
|
|
+
|
|
|
+#container{
|
|
|
+ display: block; position: relative;
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+@media #{$medium-up}{
|
|
|
+ .row{width:41rem;}
|
|
|
+}
|
|
|
+
|
|
|
+@media #{$large-up}{
|
|
|
+ .row{width:62rem;}
|
|
|
+}
|
|
|
+
|
|
|
+@media #{$xlarge-up}{
|
|
|
+ .row{width:83rem;max-width:83rem;}
|
|
|
+}
|
|
|
+
|
|
|
+// @media #{$xxlarge-up}{
|
|
|
+// .row{width:125rem;max-width:125rem;}
|
|
|
+// }
|
|
|
|
|
|
/*
|
|
|
_ _ _
|
|
@@ -24,9 +66,13 @@ a, a:hover{color:inherit;}
|
|
|
|_| |_|\___|\__,_|\__,_|\___|_|
|
|
|
*/
|
|
|
$headerborderH: 0.3em;
|
|
|
-$headerpaddingtopH:2em;
|
|
|
+$headerpaddingtopH:1.3em;
|
|
|
$titleareaH: 10em;
|
|
|
-$centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH;
|
|
|
+$titleareaHReduced: 5em;
|
|
|
+$centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH+1em;
|
|
|
+$footerheight: 5em;
|
|
|
+$centerpaddingbottom:$footerheight+1em;
|
|
|
+
|
|
|
header#top-bar{
|
|
|
position: fixed; top:0;
|
|
|
width:100%;
|
|
@@ -35,24 +81,32 @@ header#top-bar{
|
|
|
|
|
|
&:before{
|
|
|
content:"";
|
|
|
+ background: transparent!important;
|
|
|
border-top: $headerborderH solid $green;
|
|
|
display: block;
|
|
|
padding-bottom: $headerpaddingtopH;
|
|
|
- background: transparent!important;
|
|
|
}
|
|
|
|
|
|
+ >.bg{
|
|
|
+ background-color: rgba(255, 255, 255, 0.95);
|
|
|
+ }
|
|
|
>.row{
|
|
|
- background-color: rgba(255, 255, 255, 0.9);
|
|
|
position:relative; display:block;
|
|
|
}
|
|
|
|
|
|
#title-area{
|
|
|
- overflow: hidden;
|
|
|
+ // overflow: hidden;
|
|
|
position:relative;
|
|
|
height:$titleareaH;
|
|
|
+ padding:0.2em 0 0.7em;
|
|
|
+ transition: height 0.4s ease-in-out;
|
|
|
h1{
|
|
|
- height:100%;
|
|
|
- a{display: block; height:100%;
|
|
|
+ font-size: 1em; margin: 0;
|
|
|
+ height:100%; min-height:$titleareaH - 2.4em;
|
|
|
+ overflow: hidden;
|
|
|
+ a{display: block;
|
|
|
+ // height:100%;
|
|
|
+ height:$titleareaH - 0.9em;
|
|
|
background: transparent url("../images/logo.png") no-repeat center center;
|
|
|
background-size: contain;}
|
|
|
}
|
|
@@ -61,6 +115,18 @@ header#top-bar{
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ &.reduced{
|
|
|
+ #title-area{
|
|
|
+ // height:$titleareaH*0.4;
|
|
|
+
|
|
|
+ // @media screen and (min-width:$medium-breakpoint) {
|
|
|
+ height:$titleareaH*0.74;
|
|
|
+ // }
|
|
|
+ // TODO: a terminer diminuer plus le logo sur mobile
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
h1, h2{
|
|
|
text-align: center;
|
|
|
a{
|
|
@@ -68,26 +134,40 @@ header#top-bar{
|
|
|
}}
|
|
|
|
|
|
.nav{
|
|
|
+ padding:0 0.7em;
|
|
|
position:relative;
|
|
|
height:100%;
|
|
|
ul{padding: 0; margin: 0;}
|
|
|
li{list-style: none;}
|
|
|
- .wrapper{padding-top: $titleareaH/2-1.5em;}
|
|
|
+ // @include breakpoint(medium) {
|
|
|
+ @media screen and (min-width:$small-breakpoint) {
|
|
|
+ .wrapper{padding-top: $titleareaH/2-.5em;}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
#left-nav{
|
|
|
+ // margin-left: -0.1rem;
|
|
|
+ a{@include fontbold;}
|
|
|
+ a:hover{@include fontbold; text-decoration: underline;}
|
|
|
}
|
|
|
#right-nav{
|
|
|
+ // margin-right: -0.1rem;
|
|
|
text-align: right;
|
|
|
|
|
|
- h4{font-size: 1em; margin:0; }
|
|
|
- ul{background-color: #fff;}
|
|
|
+ h4{
|
|
|
+ @include fontbold; margin:0; line-height: 1.6;
|
|
|
+ a:hover{text-decoration: underline;}
|
|
|
+ }
|
|
|
+ ul{background-color: transparent;}
|
|
|
li{
|
|
|
line-height: 1;
|
|
|
// &:not(.active){
|
|
|
overflow: hidden; height:1px; transition: height 0.3s ease-in;
|
|
|
// }
|
|
|
- a{display:block;}
|
|
|
+ a{
|
|
|
+ display:block;
|
|
|
+ @include fontnormal;
|
|
|
+ }
|
|
|
// &.active span{
|
|
|
// display:inline-block;
|
|
|
// position:relative;
|
|
@@ -108,6 +188,7 @@ header#top-bar{
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
|
|
|
/*
|
|
@@ -120,15 +201,31 @@ header#top-bar{
|
|
|
*/
|
|
|
div#center{
|
|
|
padding-top:$centerpaddingtop;
|
|
|
+ padding-bottom: $centerpaddingbottom;
|
|
|
.columns{
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
+ p{
|
|
|
+ @include fontnormal;
|
|
|
+ span.stab{
|
|
|
+ display:inline-block; position:relative;
|
|
|
+ font-weight:bold;
|
|
|
+ &:after{
|
|
|
+ content: ""; height:0;
|
|
|
+ display: block; margin-top:-1em; //margin-bottom:.9em;
|
|
|
+ border-top:0.5em solid $green;
|
|
|
+ // transition:border-color 0.3s ease-in;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
/*
|
|
|
* LIST PROJET
|
|
|
*/
|
|
|
.projet-block{
|
|
|
- padding:1em;
|
|
|
+ padding:0.7em;
|
|
|
text-align: center;
|
|
|
|
|
|
a{display: block;}
|
|
@@ -136,13 +233,16 @@ div#center{
|
|
|
header{
|
|
|
position:relative;
|
|
|
// margin-top:0;padding-top:0;
|
|
|
- margin-top: -3em; padding-top: 3.5em;
|
|
|
- transition:background-color 0.5s ease-in;}
|
|
|
+ margin-top: -3em; padding-top: 3.5em; padding-bottom: 0.7em;
|
|
|
+ transition:background-color 0.3s 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;
|
|
|
+ // font-size: 1em; font-weight: bold;
|
|
|
+ @include fontbold;
|
|
|
+ margin:0; line-height: 1; height:auto;
|
|
|
display:inline-block; position:relative;
|
|
|
&:after{
|
|
|
content: ""; height:0;
|
|
@@ -150,12 +250,16 @@ div#center{
|
|
|
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;}
|
|
|
+ h2{@include fontnormal; margin:-0.4em 0 0; line-height: 1;}
|
|
|
|
|
|
&.projet-block-text{
|
|
|
text-align: left;
|
|
|
h1{margin-bottom: 0.3em;}
|
|
|
- h2{font-weight:bold;margin-bottom: 0.3em;}
|
|
|
+ h2{
|
|
|
+ // font-weight:bold;
|
|
|
+ @include fontbold;
|
|
|
+ margin-bottom: 0.3em;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
&:hover{
|
|
@@ -171,26 +275,29 @@ div#center{
|
|
|
* PAGE PROJET
|
|
|
*/
|
|
|
.projet{
|
|
|
+ .row{margin:0;}
|
|
|
h1{
|
|
|
- font-family: $font; font-size: 1.3em;font-weight: bold;line-height:1;
|
|
|
- display:inline-block; position:relative;
|
|
|
- margin:0; padding:0;
|
|
|
+ // font-family: $font; font-size: 1.05em; font-weight: bold;
|
|
|
+ @include fontbold;
|
|
|
+ line-height:0.6; display:inline-block; position:relative;
|
|
|
+ margin:0; padding:0 0.7em;
|
|
|
// $green overline
|
|
|
&:after{
|
|
|
content: "";
|
|
|
- display: block; margin-top:-.7em; margin-bottom:.7em;
|
|
|
+ display: block; margin-top:-.5em; margin-bottom:.5em;
|
|
|
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;}
|
|
|
+ h2{@include fontnormal; margin:0; padding:0 0.7em;}
|
|
|
// .block{
|
|
|
// display: inline-block;
|
|
|
// }
|
|
|
|
|
|
+ p{padding:0.7em; margin:0;}
|
|
|
|
|
|
#images{
|
|
|
// .row{margin:0;}
|
|
|
- .block{margin-bottom: 1.2em;}
|
|
|
+ .block{padding:0.7em;}
|
|
|
}
|
|
|
|
|
|
img{
|
|
@@ -199,6 +306,14 @@ div#center{
|
|
|
|
|
|
}
|
|
|
|
|
|
+ body.projet{
|
|
|
+ nav.categories{
|
|
|
+ ul.tags li a:hover span{
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
/*
|
|
|
* Catégories
|
|
|
*/
|
|
@@ -210,11 +325,12 @@ div#center{
|
|
|
list-style: none; display:inline-block;
|
|
|
margin:0 1em;
|
|
|
a{display:block;}
|
|
|
- span{font-size: 1.3em;}
|
|
|
+ span{@include fontnormal;}
|
|
|
&.active span{
|
|
|
display:inline-block;
|
|
|
position:relative;
|
|
|
- font-weight: bold;
|
|
|
+ // font-weight: bold;
|
|
|
+ @include fontbold;
|
|
|
border-bottom: 1px solid #000;
|
|
|
line-height: 0.2;
|
|
|
&:after{
|
|
@@ -251,19 +367,27 @@ div#center{
|
|
|
|_| \___/ \___/ \__\___|_|
|
|
|
*/
|
|
|
footer#bottom-bar{
|
|
|
+ position:absolute; bottom:0;
|
|
|
+ width:100%; height:$footerheight;
|
|
|
background-color: $green;
|
|
|
text-align: center;
|
|
|
- padding: 1em 0;
|
|
|
-
|
|
|
+ padding:1em 0;
|
|
|
+ // margin: 5vh 0 0;
|
|
|
h1{
|
|
|
- font-size: 1.3em;font-weight: bold; margin:0; line-height: 1; height:auto;
|
|
|
- display:inline-block; position:relative;
|
|
|
+ @include fontbold; height:auto; display:inline-block; position:relative; margin:0;
|
|
|
+ a{
|
|
|
+ font-weight: inherit;
|
|
|
+ }
|
|
|
&:after{
|
|
|
content: ""; height:0;
|
|
|
- display: block; margin-top:-.7em; margin-bottom:.7em;
|
|
|
+ display: block; margin-top:-.9em; margin-bottom:1em;
|
|
|
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;}
|
|
|
-
|
|
|
+ address{
|
|
|
+ // font-size: 1em; font-weight: normal;
|
|
|
+ @include fontnormal;
|
|
|
+ margin:-0.7em 0 0; line-height: 1.1; font-style: normal;
|
|
|
+ a{text-decoration: underline;}
|
|
|
+ }
|
|
|
}
|