theme updated : webfont, colored cats, titles : home near ok

This commit is contained in:
Bachir Soussi Chiadmi
2017-12-19 17:07:33 +01:00
parent 263aaf4ae7
commit 1250dbbc9d
59 changed files with 6441 additions and 201 deletions
+187 -83
View File
@@ -7122,11 +7122,14 @@ th.hide-for-touch {
display: table-cell !important; } }
body {
font-family: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
letter-spacing: 1px; }
font-family: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
letter-spacing: 1px;
font-weight: 300;
font-variant: normal;
color: #5b2d87; }
h1, h2, h3, h4, h5, h6 {
font-family: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
font-family: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
a, a:hover {
color: inherit; }
@@ -7167,17 +7170,13 @@ header#top-bar {
top: 0;
width: 100%;
z-index: 9; }
header#top-bar:before {
content: "";
background: transparent !important;
border-top: 0.3em solid #5b2d87;
display: block;
padding-bottom: 0.9em; }
header#top-bar > .bg {
padding-top: 0.9em;
background-color: rgba(255, 255, 255, 0.95); }
header#top-bar > .bg > .row {
position: relative;
display: block; }
display: block;
padding: 0 0.7em; }
header#top-bar #title-area {
position: relative;
height: 10.1em;
@@ -7204,9 +7203,9 @@ header#top-bar {
header#top-bar h1, header#top-bar h2 {
text-align: center; }
header#top-bar h1 a, header#top-bar h2 a {
color: #000; }
color: inherit; }
header#top-bar .nav {
padding: 0 0.7em;
padding: 0;
position: relative;
height: 100%; }
header#top-bar .nav ul {
@@ -7218,44 +7217,86 @@ header#top-bar {
header#top-bar .nav .wrapper {
padding-top: 4.55em; } }
header#top-bar #left-nav {
line-height: 0.5; }
header#top-bar #left-nav a {
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.95em;
font-weight: bold; }
header#top-bar #left-nav a:hover {
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.95em;
font-weight: bold;
text-decoration: underline; }
header#top-bar #right-nav {
text-align: right; }
header#top-bar #right-nav h4 {
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.95em;
font-weight: bold;
text-align: left; }
header#top-bar #left-nav h4 {
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8em;
font-weight: 300;
font-variant: normal;
margin: 0;
line-height: 1.9; }
header#top-bar #right-nav h4 a:hover {
text-decoration: underline; }
header#top-bar #right-nav ul {
background-color: transparent; }
header#top-bar #right-nav li {
header#top-bar #left-nav h4 a {
color: #5b2d87; }
header#top-bar #left-nav ul {
background-color: transparent;
padding-bottom: 1em; }
header#top-bar #left-nav li {
line-height: 1;
overflow: hidden;
height: 0.01px;
transition: height 0.3s ease-in; }
header#top-bar #right-nav li a {
display: block;
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8em;
font-weight: normal; }
transition: height 0.3s ease-in;
position: relative; }
header#top-bar #left-nav li a {
display: block; }
header#top-bar #left-nav li a:before {
content: "";
opacity: 1;
position: relative;
display: inline-block;
border-width: 3px;
border-style: solid;
width: 12px;
height: 12px;
border-radius: 6px; }
header#top-bar #left-nav li a.tag-1:before {
border-color: #e30613; }
header#top-bar #left-nav li a.tag-2:before {
border-color: #00acba; }
header#top-bar #left-nav li a.tag-3:before {
border-color: #5b2d87; }
header#top-bar #left-nav li a.tag-4:before {
border-color: #f7a939; }
header#top-bar #left-nav li a.tag-5:before {
border-color: #95c11f; }
header#top-bar #left-nav li a.tag-6:before {
border-color: #e5007d; }
header#top-bar #left-nav li a.tag-7:before {
border-color: #009641; }
header#top-bar #left-nav li a.tag-8:before {
border-color: #009fe3; }
header#top-bar #left-nav li a span {
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8em;
font-weight: 300;
font-variant: normal;
font-weight: 300;
white-space: nowrap;
padding: 0.15em 0.3em; }
@media only screen and (min-width: 40.0625em) {
header#top-bar #right-nav:hover li {
header#top-bar #left-nav:hover li {
height: 1.1em;
transition: height 0.5s ease-out; }
header#top-bar #right-nav:hover li:hover span {
header#top-bar #left-nav:hover li:hover span {
text-decoration: underline; } }
header#top-bar #right-nav {
text-align: right;
line-height: 0.5; }
header#top-bar #right-nav a {
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8em;
font-weight: 300;
font-variant: normal; }
header#top-bar #right-nav a:hover {
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8em;
font-weight: 300;
font-variant: normal;
text-decoration: underline; }
header#top-bar div.line {
bottom: 0;
height: 1px;
content: " ";
border-bottom: 1px solid #e30613; }
/*
_____ _
@@ -7266,7 +7307,7 @@ header#top-bar {
\_____\___|_| |_|\__\___|_|
*/
div#center {
padding-top: 12.3em;
padding-top: 11.3em;
padding-bottom: 6em;
/*
* LIST PROJET
@@ -7282,9 +7323,10 @@ div#center {
div#center p {
line-height: 1.5;
position: relative;
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8em;
font-weight: normal; }
font-weight: 300;
font-variant: normal; }
div#center p span.stab {
display: inline-block;
position: relative;
@@ -7292,66 +7334,122 @@ div#center {
div#center p a {
text-decoration: underline; }
div#center .projet-block {
padding: 0.7em;
padding: 0.7em 0.7em 2em;
text-align: left; }
div#center .projet-block nav.categories {
margin: 0; }
div#center .projet-block nav.categories ul {
margin: 0; }
div#center .projet-block nav.categories ul li {
position: relative;
display: inline-block;
min-width: 12px;
height: 12px;
margin-right: -0.2em; }
div#center .projet-block nav.categories ul li a {
display: block; }
div#center .projet-block nav.categories ul li a:before {
content: "";
opacity: 1;
position: relative;
display: inline-block;
border-width: 3px;
border-style: solid;
width: 12px;
height: 12px;
border-radius: 6px; }
div#center .projet-block nav.categories ul li a.tag-1:before {
border-color: #e30613; }
div#center .projet-block nav.categories ul li a.tag-2:before {
border-color: #00acba; }
div#center .projet-block nav.categories ul li a.tag-3:before {
border-color: #5b2d87; }
div#center .projet-block nav.categories ul li a.tag-4:before {
border-color: #f7a939; }
div#center .projet-block nav.categories ul li a.tag-5:before {
border-color: #95c11f; }
div#center .projet-block nav.categories ul li a.tag-6:before {
border-color: #e5007d; }
div#center .projet-block nav.categories ul li a.tag-7:before {
border-color: #009641; }
div#center .projet-block nav.categories ul li a.tag-8:before {
border-color: #009fe3; }
div#center .projet-block nav.categories ul li a 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; }
div#center .projet-block nav.categories ul li a:hover span {
opacity: 1;
width: auto;
z-index: 10; }
div#center .projet-block a.image-link {
display: block; }
div#center .projet-block header {
position: relative;
margin-top: -3em;
padding-top: 3.5em;
padding-bottom: 0.7em;
transition: background-color 0.3s ease-in; }
padding-bottom: 0.7em; }
div#center .projet-block header > * {
font-family: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
text-align: left;
font-family: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
text-align: center;
padding: 0;
margin: 0; }
div#center .projet-block h1 {
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.95em;
font-weight: bold;
font-weight: 500;
font-variant: normal;
color: #5b2d87;
margin: 0 0 0.5em 0;
line-height: 1.4;
height: auto;
display: inline-block;
position: relative; }
margin: 0.4em 0 0.5em 0;
line-height: 1.6;
height: auto; }
div#center .projet-block h1 span.date {
font-weight: normal; }
div#center .projet-block h1 span.date:before {
content: "|";
padding-right: 0.5em;
margin-left: 0.5em; }
font-weight: 200;
border-left: 1px solid #5b2d87;
padding: 0.2em 0 0 0.5em;
margin-left: 0.2em; }
div#center .projet-block h2 {
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8em;
font-weight: normal;
margin: -0.4em 0 0;
font-weight: 300;
font-variant: normal;
margin: 0.4em 0 0;
line-height: 1; }
div#center .projet-block h2 a {
color: #5b2d87; }
div#center .projet-block.projet-block-text {
text-align: left; }
div#center .projet-block.projet-block-text h1 {
margin-bottom: 0.3em; }
div#center .projet-block.projet-block-text h2 {
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.95em;
font-weight: bold;
font-weight: 500;
font-variant: normal;
margin-bottom: 0.3em; }
div#center .projet .row {
margin: 0; }
div#center .projet h1 {
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.95em;
font-weight: bold;
font-weight: 500;
font-variant: normal;
margin: 0;
padding: 0 0.7em;
line-height: 1;
display: inline-block; }
div#center .projet h2 {
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8em;
font-weight: normal;
font-weight: 300;
font-variant: normal;
margin: -0.2em 0 0.7em;
line-height: 1;
padding: 0 0.7em; }
@@ -7381,15 +7479,17 @@ div#center {
div#center nav.categories ul.tags li a {
display: block; }
div#center nav.categories ul.tags li span {
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8em;
font-weight: normal; }
font-weight: 300;
font-variant: normal; }
div#center nav.categories ul.tags li.active span {
display: inline-block;
position: relative;
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.95em;
font-weight: bold;
font-weight: 500;
font-variant: normal;
border-bottom: 1px solid #000;
line-height: 0.2; }
div#center #diaporama {
@@ -7413,9 +7513,10 @@ div#center {
margin: 0 0 1em;
padding: 0.7em; }
div#center .client-block h3 {
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.95em;
font-weight: bold;
font-weight: 500;
font-variant: normal;
line-height: 0.6;
display: inline-block;
position: relative;
@@ -7423,9 +7524,10 @@ div#center {
padding: 0; }
div#center .client-block h4 {
margin: 0;
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8em;
font-weight: normal; }
font-weight: 300;
font-variant: normal; }
div#center .client-block h4 a:hover {
text-decoration: underline; }
@@ -7461,7 +7563,7 @@ div#center {
header#top-bar #right-nav {
right: 0; }
div#center {
padding-top: 11.2em;
padding-top: 10.2em;
padding-bottom: 6em; }
body.categories a.projet-img {
display: none; } }
@@ -7484,9 +7586,10 @@ footer#bottom-bar {
text-align: center;
padding: 1em 0; }
footer#bottom-bar h1 {
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.95em;
font-weight: bold;
font-weight: 500;
font-variant: normal;
height: auto;
display: inline-block;
position: relative;
@@ -7496,9 +7599,10 @@ footer#bottom-bar {
font-weight: inherit;
color: inherit; }
footer#bottom-bar address {
font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8em;
font-weight: normal;
font-weight: 300;
font-variant: normal;
margin: -0.7em 0 0;
line-height: 1.1;
font-style: normal; }
@@ -0,0 +1,121 @@
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on December 19, 2017 */
@font-face {
font-family: 'cocogoose';
src: url('zetafonts_-_cocogoosepro-ultralightitalic-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-ultralightitalic-webfont.woff') format('woff');
font-weight: 100;
font-style: italic;
font-variant: normal;
}
@font-face {
font-family: 'cocogoose';
src: url('zetafonts_-_cocogoosepro-ultralight-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-ultralight-webfont.woff') format('woff');
font-weight: 100;
font-style: normal;
font-variant: normal;
}
@font-face {
font-family: 'cocogoose';
src: url('zetafonts_-_cocogoosepro-thinitalic-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-thinitalic-webfont.woff') format('woff');
font-weight: 200;
font-style: italic;
font-variant: normal;
}
@font-face {
font-family: 'cocogoose';
src: url('zetafonts_-_cocogoosepro-thin-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-thin-webfont.woff') format('woff');
font-weight: 200;
font-style: normal;
font-variant: normal;
}
@font-face {
font-family: 'cocogoose';
src: url('zetafonts_-_cocogoosepro-lightitalic-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-lightitalic-webfont.woff') format('woff');
font-weight: 300;
font-style: italic;
font-variant: normal;
}
@font-face {
font-family: 'cocogoose';
src: url('zetafonts_-_cocogoosepro-light-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-light-webfont.woff') format('woff');
font-weight: 300;
font-style: normal;
font-variant: normal;
}
@font-face {
font-family: 'cocogoose';
src: url('zetafonts_-_cocogoosepro-semilightitalic-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-semilightitalic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
font-variant: normal;
}
@font-face {
font-family: 'cocogoose';
src: url('zetafonts_-_cocogoosepro-semilight-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-semilight-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-variant: normal;
}
@font-face {
font-family: 'cocogoose';
src: url('zetafonts_-_cocogoosepro-regular-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-regular-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
font-variant: normal;
}
@font-face {
font-family: 'cocogoose';
src: url('zetafonts_-_cocogoosepro-italic-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-italic-webfont.woff') format('woff');
font-weight: 500;
font-style: italic;
font-variant: normal;
}
/*@font-face {
font-family: 'cocogoose';
src: url('zetafonts_-_cocogoosepro-outlined-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-outlined-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
font-variant: outlined;
}
@font-face {
font-family: 'cocogoose';
src: url('zetafonts_-_cocogoosepro-letterpress-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-letterpress-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
font-variant: letterpress;
}
@font-face {
font-family: 'cocogoose';
src: url('zetafonts_-_cocogoosepro-inline-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-inline-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
font-variant: inline;
}
@font-face {
font-family: 'cocogoose';
src: url('zetafonts_-_cocogooseproblock-blockinnerl-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogooseproblock-blockinnerl-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
font-variant: bblockinnerline;
}
@font-face {
font-family: 'cocogoose';
src: url('zetafonts_-_cocogooseproblock-blockborder-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogooseproblock-blockborder-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
font-variant: blocblockborder;
}*/
@@ -0,0 +1,5 @@
# Font Squirrel Font-face Generator Configuration File
# Upload this file to the generator to recreate the settings
# you used to create these fonts.
{"mode":"optimal","formats":["woff","woff2"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}
@@ -0,0 +1,60 @@
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on December 19, 2017 */
@font-face {
font-family: 'cocogoose_prolight_italic';
src: url('zetafonts_-_cocogoosepro-lightitalic-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-lightitalic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'cocogoose_prolight';
src: url('zetafonts_-_cocogoosepro-light-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-light-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'cocogoose_proletterpress';
src: url('zetafonts_-_cocogoosepro-letterpress-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-letterpress-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'cocogoose_proitalic';
src: url('zetafonts_-_cocogoosepro-italic-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'cocogoose_proinline';
src: url('zetafonts_-_cocogoosepro-inline-webfont.woff2') format('woff2'),
url('zetafonts_-_cocogoosepro-inline-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
-49
View File
@@ -1,49 +0,0 @@
/**
* @license
* MyFonts Webfont Build ID 3101542, 2015-10-02T04:13:40-0400
*
* The fonts listed in this notice are subject to the End User License
* Agreement(s) entered into by the website owner. All other parties are
* explicitly restricted from using the Licensed Webfonts(s).
*
* You may obtain a valid license at the URLs below.
*
* Webfont: CiutadellaRounded-Medium by Emtype Foundry
* URL: http://www.myfonts.com/fonts/emtype/ciutadella-rounded/medium/
*
* Webfont: CiutadellaRounded-Light by Emtype Foundry
* URL: http://www.myfonts.com/fonts/emtype/ciutadella-rounded/light/
*
*
* License: http://www.myfonts.com/viewlicense?type=web&buildid=3101542
* Licensed pageviews: 10,000
* Webfonts copyright: Copyright (c) 2015 by Eduardo Manso. All rights reserved.
*
* © 2015 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
/*@import url("//hello.myfonts.net/count/2f5366");*/
@font-face {
font-family:'CiutadellaRounded';
src: url('webfonts/2F5366_0_0.eot');
src: url('webfonts/2F5366_0_0.eot?#iefix') format('embedded-opentype'),
url('webfonts/2F5366_0_0.woff2') format('woff2'),
url('webfonts/2F5366_0_0.woff') format('woff'),
url('webfonts/2F5366_0_0.ttf') format('truetype');
font-weight: bold;
}
@font-face {
font-family:'CiutadellaRounded';
src: url('webfonts/2F5366_1_0.eot');
src: url('webfonts/2F5366_1_0.eot?#iefix') format('embedded-opentype'),
url('webfonts/2F5366_1_0.woff2') format('woff2'),
url('webfonts/2F5366_1_0.woff') format('woff'),
url('webfonts/2F5366_1_0.ttf') format('truetype');
font-weight: normal;
}
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large Load Diff
+7 -6
View File
@@ -11,10 +11,11 @@
"license": "MIT",
"homepage": "http://labonneadresse.graphics",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-jsmin": "^0.1.5",
"gulp-sass": "^2.3.2",
"gulp-watch": "^4.2.4"
}
"gulp": "latest",
"gulp-autoprefixer": "latest",
"gulp-jsmin": "latest",
"gulp-sass": "latest",
"gulp-watch": "latest"
},
"dependencies": {}
}
+177 -47
View File
@@ -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;
@@ -37,7 +37,7 @@
{# % do assets.add('theme://app/bower_components/foundation/css/foundation.min.css',101) % #}
{# Custom font for this theme #}
{% do assets.add('theme://font/fontwebkit.css',100) %}
{% do assets.add('theme://font/cocogoose/cocogoose.css',100) %}
{# Custom styles for this theme #}
{% do assets.add('theme://css/styles.css',100) %}
@@ -8,8 +8,17 @@
</section>
<nav id="left-nav" class="nav small-6 medium-2 medium-pull-8 columns">
{% if config.plugins.taxonomylist.enabled %}
<div class="wrapper">
<h4><a href="/categories">Catégories</a></h4>
{% include 'partials/tagslist.html.twig' with {'base_url':"/categories/", 'taxonomy':'tag'} %}
</div>
{% endif %}
</nav>
<nav id="right-nav" class="nav small-6 medium-2 columns">
<div class="wrapper">
<ul class="left">
<ul class="right">
{% for page in pages.children %}
{% if page.menu != "home" and page.menu != "Catégories" %}
<li><a href="{{ page.url }}">{{ page.menu }}</a></li>
@@ -19,14 +28,8 @@
</div>
</nav>
<nav id="right-nav" class="nav small-6 medium-2 columns">
{% if config.plugins.taxonomylist.enabled %}
<div class="wrapper">
<h4><a href="/categories">Catégories</a></h4>
{% include 'partials/tagslist.html.twig' with {'base_url':"/categories/", 'taxonomy':'tag'} %}
</div>
{% endif %}
</nav>
<div class="line small-6 medium-12 columns"></div>
</div>
</div>
</header>
@@ -11,7 +11,7 @@
<ul>
{% for tag in page.taxonomy.tag %}
<li>
<a class="tag-{{ catlist[(tag|e('url'))] }}" href="/categories/tag{{ config.system.param_sep }}{{ tag|e('url') }}">{{ tag }}</a>
<a class="tag-{{ catlist[(tag|e('url'))] }}" href="/categories/tag{{ config.system.param_sep }}{{ tag|e('url') }}"><span>{{ tag }}</span></a>
</li>
{% endfor %}
</ul>
@@ -2,16 +2,16 @@
{% if taxlist %}
<ul class="tags">
{% for tax,value in taxlist[taxonomy] %}
{% set active = uri.param(taxonomy) == tax ? 'active' : '' %}
{% for tag,value in taxlist[taxonomy] %}
{% set active = uri.param(taxonomy) == tag ? ' active' : '' %}
{% if not loop.first and display == "inline" %}
<span>-</span>
{% endif %}
<li class="{{ active }}">
<a
class="{{ active }}"
href="{{ base_url }}{{ taxonomy }}{{ config.system.param_sep }}{{ tax|e('url') }}">
<span>{{ tax }}</sapn>
class="tag-{{ catlist[(tag|e('url'))] }}{{ active }}"
href="{{ base_url }}{{ taxonomy }}{{ config.system.param_sep }}{{ tag|e('url') }}">
<span>{{ tag }}</sapn>
</a>
</li>
{% endfor %}