theme updated : webfont, colored cats, titles : home near ok
This commit is contained in:
Bachir Soussi Chiadmi
@@ -8,20 +8,39 @@
|
||||
|
||||
$column-gutter: rem-calc(15);
|
||||
|
||||
$maincolor: #5b2d87;
|
||||
// colors
|
||||
$maincolor: #5b2d87;
|
||||
$secondcolor: #e30613;
|
||||
$cat1: #e30613;
|
||||
$cat2: #00acba;
|
||||
$cat3: #5b2d87;
|
||||
$cat4: #f7a939;
|
||||
$cat5: #95c11f;
|
||||
$cat6: #e5007d;
|
||||
$cat7: #009641;
|
||||
$cat8: #009fe3;
|
||||
|
||||
$font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
$catRadius: 12px;
|
||||
|
||||
// $font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
$font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
|
||||
@mixin fontbold{
|
||||
// TODO : media query
|
||||
font: $font; font-size:0.95em; font-weight:bold;
|
||||
font: $font; font-size:0.95em; font-weight:500; font-variant: normal;
|
||||
}
|
||||
@mixin fontnormal{
|
||||
// TODO : media query
|
||||
font: $font; font-size:0.8em; font-weight:normal;
|
||||
font: $font; font-size:0.8em; font-weight:300; font-variant: normal;
|
||||
}
|
||||
|
||||
body{font-family: $font; letter-spacing: 1px;}
|
||||
body{
|
||||
font-family: $font;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 300;
|
||||
font-variant: normal;
|
||||
color: $maincolor;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6{font-family: $font;}
|
||||
a, a:hover{color:inherit;}
|
||||
@@ -36,7 +55,6 @@ ul,li{padding:0; margin:0; list-style: none;}
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
@media #{$medium-up}{
|
||||
.row{width:41rem;}
|
||||
}
|
||||
@@ -69,7 +87,7 @@ $logo_mb:0.5em;
|
||||
$titleareaH: $logoH+$logo_mb+$logo_mt;
|
||||
$titleReducedFactor:0.7555;
|
||||
$titleReducedFactorSmall:0.5;
|
||||
$centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH+1em;
|
||||
$centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH;
|
||||
$footerheight: 5em;
|
||||
$centerpaddingbottom:$footerheight+1em;
|
||||
|
||||
@@ -79,18 +97,21 @@ header#top-bar{
|
||||
// TODO: flou sous le haeder
|
||||
z-index: 9;
|
||||
|
||||
&:before{
|
||||
content:"";
|
||||
background: transparent!important;
|
||||
border-top: $headerborderH solid $maincolor;
|
||||
display: block;
|
||||
padding-bottom: $headerpaddingtopH;
|
||||
}
|
||||
// &:before{
|
||||
// content:"";
|
||||
// background: transparent!important;
|
||||
// border-top: $headerborderH solid $maincolor;
|
||||
// display: block;
|
||||
// padding-bottom: $headerpaddingtopH;
|
||||
// }
|
||||
|
||||
>.bg{
|
||||
padding-top: $headerpaddingtopH;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
>.row{
|
||||
position:relative; display:block;
|
||||
padding:0 0.7em;
|
||||
// box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -131,11 +152,11 @@ header#top-bar{
|
||||
h1, h2{
|
||||
text-align: center;
|
||||
a{
|
||||
color: #000;
|
||||
color: inherit;
|
||||
}}
|
||||
|
||||
.nav{
|
||||
padding:0 0.7em;
|
||||
padding:0;
|
||||
position:relative;
|
||||
height:100%;
|
||||
ul{padding: 0; margin: 0;}
|
||||
@@ -147,28 +168,59 @@ header#top-bar{
|
||||
}
|
||||
|
||||
#left-nav{
|
||||
// margin-left: -0.1rem;
|
||||
line-height:0.5;
|
||||
a{@include fontbold;}
|
||||
a:hover{@include fontbold; text-decoration: underline;}
|
||||
}
|
||||
#right-nav{
|
||||
// margin-right: -0.1rem;
|
||||
text-align: right;
|
||||
text-align: left;
|
||||
|
||||
h4{
|
||||
@include fontbold; margin:0; line-height: 1.9;
|
||||
a:hover{text-decoration: underline;}
|
||||
@include fontnormal; margin:0; line-height: 1.9;
|
||||
a{color:$maincolor;}
|
||||
// a:hover{text-decoration: underline;}
|
||||
}
|
||||
ul{background-color: transparent;}
|
||||
ul{background-color: transparent; padding-bottom: 1em;}
|
||||
li{
|
||||
line-height: 1;
|
||||
// &:not(.active){
|
||||
overflow: hidden; height:0.01px; transition: height 0.3s ease-in;
|
||||
// }
|
||||
position: relative;
|
||||
// line-height: $catRadius;
|
||||
// min-width:$catRadius; height:$catRadius;
|
||||
a{
|
||||
display:block;
|
||||
@include fontnormal;
|
||||
display: block;
|
||||
&:before{
|
||||
content:"";
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
display:inline-block;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
// line-height: $catRadius;
|
||||
width:$catRadius; height:$catRadius;
|
||||
border-radius: $catRadius/2;
|
||||
}
|
||||
&.tag-1:before{ border-color: $cat1;}
|
||||
&.tag-2:before{ border-color: $cat2;}
|
||||
&.tag-3:before{ border-color: $cat3;}
|
||||
&.tag-4:before{ border-color: $cat4;}
|
||||
&.tag-5:before{ border-color: $cat5;}
|
||||
&.tag-6:before{ border-color: $cat6;}
|
||||
&.tag-7:before{ border-color: $cat7;}
|
||||
&.tag-8:before{ border-color: $cat8;}
|
||||
span{
|
||||
// position: absolute;
|
||||
// z-index: -1;
|
||||
// font-size: 0.7em;
|
||||
@include fontnormal;
|
||||
font-weight: 300;
|
||||
white-space: nowrap;
|
||||
// opacity: 0;
|
||||
// transition: opacity 0.3s ease-in-out;
|
||||
padding:0.15em 0.3em;
|
||||
// width:0;
|
||||
}
|
||||
// &:hover{
|
||||
// span{ opacity: 1; width:auto; z-index: 10;}
|
||||
// }
|
||||
}
|
||||
// &.active span{
|
||||
// display:inline-block;
|
||||
@@ -191,6 +243,24 @@ header#top-bar{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#right-nav{
|
||||
text-align: right;
|
||||
// margin-left: -0.1rem;
|
||||
line-height:0.5;
|
||||
a{@include fontnormal;}
|
||||
a:hover{@include fontnormal; text-decoration: underline;}
|
||||
}
|
||||
|
||||
div.line{
|
||||
// position: absolute;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
// width: 100%;
|
||||
// box-sizing: border-box;
|
||||
content:" ";
|
||||
border-bottom: 1px solid $secondcolor;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -204,6 +274,7 @@ header#top-bar{
|
||||
div#center{
|
||||
padding-top:$centerpaddingtop;
|
||||
padding-bottom: $centerpaddingbottom;
|
||||
|
||||
.columns{
|
||||
padding: 0;
|
||||
}
|
||||
@@ -232,41 +303,100 @@ div#center{
|
||||
* LIST PROJET
|
||||
*/
|
||||
.projet-block{
|
||||
padding:0.7em;
|
||||
padding:0.7em 0.7em 2em;
|
||||
|
||||
text-align: left;
|
||||
|
||||
nav.categories{
|
||||
margin:0;
|
||||
ul{
|
||||
margin: 0;
|
||||
li{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
// line-height: $catRadius;
|
||||
min-width:$catRadius; height:$catRadius;
|
||||
margin-right: -0.2em;
|
||||
a{
|
||||
display: block;
|
||||
&:before{
|
||||
content:"";
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
display:inline-block;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
// line-height: $catRadius;
|
||||
width:$catRadius; height:$catRadius;
|
||||
border-radius: $catRadius/2;
|
||||
}
|
||||
&.tag-1:before{ border-color: $cat1;}
|
||||
&.tag-2:before{ border-color: $cat2;}
|
||||
&.tag-3:before{ border-color: $cat3;}
|
||||
&.tag-4:before{ border-color: $cat4;}
|
||||
&.tag-5:before{ border-color: $cat5;}
|
||||
&.tag-6:before{ border-color: $cat6;}
|
||||
&.tag-7:before{ border-color: $cat7;}
|
||||
&.tag-8:before{ border-color: $cat8;}
|
||||
span{
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
font-size: 0.7em;
|
||||
font-weight: 300;
|
||||
background-color: #fff;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
padding:0.2em 0.3em;
|
||||
width:0;
|
||||
}
|
||||
&:hover{
|
||||
span{ opacity: 1; width:auto; z-index: 10;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.image-link{display: block;}
|
||||
|
||||
header{
|
||||
position:relative;
|
||||
// margin-top:0;padding-top:0;
|
||||
margin-top: -3em; padding-top: 3.5em; padding-bottom: 0.7em;
|
||||
transition:background-color 0.3s ease-in;}
|
||||
// transition:background-color 0.3s ease-in;
|
||||
}
|
||||
|
||||
header>*{
|
||||
font-family: $font; text-align: left;
|
||||
padding:0; margin:0;}
|
||||
font-family: $font; text-align: center;
|
||||
padding:0; margin:0;
|
||||
}
|
||||
h1{
|
||||
// font-size: 1.3em;
|
||||
@include fontbold;
|
||||
color: $maincolor;
|
||||
margin:0 0 0.5em 0; line-height: 1.4; height:auto;
|
||||
display:inline-block; position:relative;
|
||||
// &:after{
|
||||
// content: ""; height:0;
|
||||
// display: block; margin-top:-.7em; margin-bottom:.7em;
|
||||
// // border-top:0.5em solid $maincolor;
|
||||
// transition:border-color 0.3s ease-in;}
|
||||
margin:0.4em 0 0.5em 0;
|
||||
line-height: 1.6;
|
||||
height:auto;
|
||||
span.date{
|
||||
font-weight: normal;
|
||||
&:before{
|
||||
content: "|";
|
||||
padding-right:0.5em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
font-weight: 200;
|
||||
border-left: 1px solid $maincolor;
|
||||
// font-size: 0.7em;
|
||||
// line-height: 0.5;
|
||||
// &:before{
|
||||
// content: "|";
|
||||
padding:0.2em 0 0 0.5em;
|
||||
margin-left: 0.2em;
|
||||
// display: inline-block;
|
||||
// }
|
||||
}
|
||||
}
|
||||
h2{@include fontnormal; margin:-0.4em 0 0; line-height: 1;}
|
||||
h2{
|
||||
@include fontnormal;
|
||||
margin:0.4em 0 0;
|
||||
line-height: 1;
|
||||
|
||||
a{color: $maincolor;}
|
||||
}
|
||||
|
||||
&.projet-block-text{
|
||||
text-align: left;
|
||||
|
||||
Reference in New Issue
Block a user