modif template+ css

This commit is contained in:
2019-02-07 18:39:37 +01:00
parent cdd86a3845
commit 4a79849a36
48 changed files with 1217 additions and 886 deletions
+1 -1
View File
@@ -9,7 +9,7 @@ RewriteEngine On
# along the lines of: RewriteBase /<your_sub_folder>
##
# RewriteBase /
RewriteBase /
## End - RewriteBase
@@ -1,5 +0,0 @@
---
title: 'Secrétaire d''édition et de rédaction'
---
Limage de votre structure passe par la qualité de vos supports de communication ! Quel que soit votre projet PRINT et son avancée, je vous accompagne tout au long de sa réalisation. Je comprends vos besoins et suis là pour y répondre. Je vous fais gagner un temps précieux et respecte vos délais. Je coordonne tout avec professionnalisme et exigence : graphistes, illustrateurs, photographes, imprimeurs… Devis et factures, là aussi, je veille à tout et vous explique tout, à chaque étape.
@@ -0,0 +1,5 @@
---
title: ' Secrétaire d''édition et de rédaction'
---
Limage de votre structure passe par la qualité de vos supports de communication ! Quel que soit votre projet PRINT et son avancée, je vous accompagne tout au long de sa réalisation. Je comprends vos besoins et suis là pour y répondre. Je vous fais gagner un temps précieux et respecte vos délais. Je coordonne tout avec professionnalisme et exigence : graphistes, illustrateurs, photographes, imprimeurs… Devis et factures, là aussi, je veille à tout et vous explique tout, à chaque étape.
@@ -2,4 +2,4 @@
title: 'Chef de projet "PRINT"'
---
Riche dune expérience de plus de 26 ans dans le domaine des Industries graphiques, je connais parfaitement la chaîne graphique et minscris dans la famille des graphistes, illustrateurs, photographes, imprimeurs... Par deux fois rédacteur en chef de magazines, je veille également au texte et à sa qualité. Je le structure et le corrige. Lorsque votre projet le nécessite, je fais appel à "mon" équipe de prestataires extérieurs, vrais professionnels, éthiques, responsables et engagés. Ma formation en droit à limage et la pratique de la photographie enrichissent ma vision artistique et technique de lensemble des composantes dun document imprimé.
Riche dune expérience de plus de 26 ans dans le domaine des Industries graphiques, je connais parfaitement la chaîne graphique et minscris dans la famille des graphistes, illustrateurs, photographes, imprimeurs... Par deux fois rédacteur en chef de magazines, je veille également au texte et à sa qualité. Je le structure et le corrige. Lorsque votre projet le nécessite, je fais appel à "mon" équipe de prestataires extérieurs, vrais professionnels, éthiques, responsables et engagés. Ma formation en droit à limage et la pratique de la photographie enrichissent ma vision artistique et technique de lensemble des composantes dun document imprimé.
@@ -0,0 +1,15 @@
---
title: 'étape 1'
media_order: etape1.png
---
Quel public ?
Quel style ?
Quel format ?
Combien de pages ?
Quel type de papier ou autre support ?
Combien de couleurs ?
Quels délais ?
Quel graphiste ?
Quel imprimeur ?
Quel prix ?
@@ -1,16 +0,0 @@
---
title: 'étape 1'
media_order: etape1.png
---
Définir/préciser le projet ensemble
Quel public ?
Quel style ?
Quel format ?
Combien de pages ?
Quel type de papier ou autre support ?
Combien de couleurs ?
Quels délais ?
Quel graphiste ?
Quel imprimeur ?
Quel prix ?
@@ -0,0 +1,15 @@
---
title: 'Étape 2'
media_order: etape2.png
---
Secrétariat de rédaction :
* Relecture, vérification, uniformisation des textes
* Correction orthographique, typographique,
* grammaticale des textes Iconographie
* Vérification des mentions légales
Direction artistique :
* Mise en page, PAO
* Corrections maquettes, ajustements, chromie,
* Validation, bon à graver (BAG)
@@ -1,15 +0,0 @@
---
title: 'étape 2'
media_order: etape2.png
---
Le mettre en forme
Secrétariat de rédaction :
• Relecture, vérification, uniformisation des textes
• Correction orthographique, typographique, grammaticale des textes
Iconographie
Vérification des mentions légales
Direction artistique :
• Mise en page, PAO
• Corrections maquettes, ajustements, chromie
Validation, bon à graver (BAG)
@@ -3,7 +3,6 @@ title: 'étape 3'
media_order: etape3.png
---
Limprimer, le fabriquer
Demande de Bon à tirer (BAT)
Contrôle qualité
Impression, finition
@@ -1,9 +1,10 @@
---
title: 'étape 4'
media_order: etape4.png
hero_classes: ''
hero_image: ''
---
Le réceptionner
Délais initiaux respectés
Budget tenu
Document de qualité
+2 -1
View File
@@ -10,5 +10,6 @@ content:
pagination: true
url_taxonomy_filters: true
---
### FIABILITÉ - ÉCOUTE - ENGAGEMENT
### FIABILITÉ - ÉCOUTE - ENGAGEMENT
@@ -1,7 +0,0 @@
---
title: 'projet n°2'
media_order: LivretA5_ouvgroupe_EXE_HD3-1.jpg
---
Livret A5 32 pages réalisé pour les Scouts et Guides de France.
Secrétariat de rédaction, secrétariat d'édition et fabrication : www.lestyledelours.fr
@@ -0,0 +1,9 @@
---
title: 'Livret A5 32 pages'
media_order: LivretA5_ouvgroupe_EXE_HD3-1.jpg
hero_classes: ''
hero_image: ''
---
Réalisé pour les Scouts et Guides de France.
Secrétariat de rédaction, secrétariat d'édition et fabrication : www.lestyledelours.fr
@@ -1,7 +1,7 @@
---
title: 'projet n°3'
title: 'Affiche 60 x 80 cm'
media_order: affiche_AFS_cartedumonde_v13.jpg
---
Affiche 60 x 80 cm réalisée pour AFS Vivre sans frontière.
Réalisée pour AFS Vivre sans frontière.
Conception, secrétariat de rédaction, secrétariat d'édition et fabrication : www.lestyledelours.fr
@@ -1,7 +1,7 @@
---
title: 'projet n°4'
title: 'Livret A5, 36 pages'
media_order: 'RA SC Paris 2017_V6-1.jpg'
---
Livret A5, 36 pages, réalisé pour le Secours Catholique de Paris.
Réalisé pour le Secours Catholique de Paris.
Secrétariat de rédaction, secrétariat d'édition et fabrication : www.lestyledelours.fr
@@ -1,7 +1,7 @@
---
title: 'projet n°5'
title: 'Rapport d''activité A4'
media_order: Formations_SC_Paris2018_HD-1.jpg
---
Rapport d'activité A4, 52 pages, réalisé pour le Secours Catholique de Paris.
52 pages, réalisé pour le Secours Catholique de Paris.
Secrétariat de rédaction, secrétariat d'édition et fabrication : www.lestyledelours.fr
@@ -1,7 +1,7 @@
---
title: 'projet n°6'
title: 'Dépliant 4-pages A4'
media_order: SIGNAL_HD-1.jpg
---
Dépliant 4-pages A4 réalisé pour le Secours Catholique Paris.
Réalisé pour le Secours Catholique Paris.
Secrétariat d'édition et de rédaction + fabrication : www.lestyledelours.fr
@@ -1,7 +1,7 @@
---
title: 'projet n°7'
title: 'Brochure A4'
media_order: RA_Solifap2018.jpg
---
Brochure A4, 20 pages, réalisée pour SOLIFAP.
20 pages, réalisée pour SOLIFAP.
Secrétariat de rédaction, secrétariat d'édition, fabrication : www.lestyledelours.fr
@@ -1,7 +1,7 @@
---
title: ProjetN°1
title: 'Plaquette 3-volets A4'
media_order: depliant-v12_IMP_HD-1.jpg
---
Plaquette 3-volets A4 réalisée pour l'école Massillon à Paris.
Secrétariat de rédaction, secrétariat d'édition et fabrication : www.lestyledelours.fr
Réalisée pour l'école Massillon à Paris.
Secrétariat de rédaction, secrétariat d'édition et fabrication.
@@ -1,8 +1,8 @@
---
title: 'reco n°1'
title: 'Ludovic, Signal Expertise'
media_order: facebook.svg
---
![](facebook.svg)
Ludovic, Signal Expertise
[![](facebook.svg)](https://www.facebook.com)
« Parfait ! Merci Emmanuel pour ton travail réalisé dans les délais. »
@@ -1,9 +1,8 @@
---
title: 'reco n°2'
title: 'Antoine, Secours Catholique'
media_order: linkedin.svg
---
![](linkedin.svg)
**Antoine, Secours Catholique**
« Je travaille régulièrement avec Emmanuel sur l'édition de documents pour lassociation. J'apprécie son regard et sa capacité à traduire nos messages. Emmanuel est un conseil précieux pour améliorer la qualité de nos publications, dans le fond comme dans la forme. »
@@ -1,9 +1,8 @@
---
title: 'reco n°3'
title: 'Antoine, CCFD-Terre Solidaire'
media_order: mail.svg
---
![](mail.svg)
**Antoine, CCFD-Terre Solidaire**
[![](mail.svg)](https://www.facebook.com)
« J'ai travaillé avec Emmanuel lorsque j'étais DG du CCFD-Terre Solidaire. J'ai apprécié son grand professionnalisme et son souci à toujours trouver la bonne réponse à mes demandes en matière d'édition de documents. »
@@ -1,9 +1,8 @@
---
title: 'reco n°4'
title: 'Philippe, fondation Terre Solidaire'
media_order: malt.svg
---
![](malt.svg)
**Philippe, fondation Terre Solidaire**
[![](malt.svg)](https://www.facebook.com)
« Ce fut un très grand plaisir de travailler avec Emmanuel. Jai fortement apprécié ses capacités à conseiller, écouter, préciser et enrichir mes demandes de productions. Il faut souligner son respect des délais, la rigueur et la précision de son travail qui met en confiance et rassure. »
@@ -1,9 +1,8 @@
---
title: 'reco n°5'
title: 'Philippe, CCFD-Terre Solidaire'
media_order: oral.svg
---
![](oral.svg)
**Philippe, CCFD-Terre Solidaire**
[![](oral.svg)](https://www.facebook.com)
« J'ai collaboré avec Emmanuel lorsque j'étais directeur. Je n'ai eu qu'à m'en féliciter : réactivité, inventivité, clarté des suggestions, fiabilité des budgets, maîtrise technique. Et, derrière l'homme discret, une belle expérience humaine et une passion pour son métier. »
+1 -29
View File
@@ -4,7 +4,7 @@ media_order: EC_BD_modif.png
content:
items:
- '@self.children'
limit: 5
limit: 0
order:
by: date
dir: desc
@@ -12,31 +12,3 @@ content:
url_taxonomy_filters: true
---
![](EC_BD_modif.png)
**LE STYLE DE LOURS**
Emmanuel CAUCHOIS
10, rue Georges-Guynemer
78300 POISSY
Tél. : 06 03 23 08 42
Email : lestyledelours@sfr.fr
**NOM DU FICHIER :** 
Emmanuel Cauchois
**FORMAT :** 
à la française (47 ans x 182 cm)
**ASSEMBLAGE :** 
marié / papa dun petit garçon de 9 ans
NOMBRE DE PAGES : 
Rouen / Evreux / Lille / Poissy
**FAÇONNAGE :** 
BTS Industries graphiques
NATIFS : 
photograveur / opérateur PAO / animation / éducation / édition / fabrication
**FILIGRANE :** 
scoutisme+++ / théâtre+ / photo++
**PELLICULAGE :** 
emmanuelcauchois.fr
**RÉSOLUTION :**
mettre mon expérience au service de la qualité de vos projets.
**DÉPÔT LÉGAL :** 
Mai 2018
+24
View File
@@ -0,0 +1,24 @@
---
title: detail
---
**NOM DU FICHIER :**
Emmanuel Cauchois
**FORMAT :**
à la française (47 ans x 182 cm)
**ASSEMBLAGE :**
marié / papa dun petit garçon de 9 ans
NOMBRE DE PAGES :
Rouen / Evreux / Lille / Poissy
**FAÇONNAGE :**
BTS Industries graphiques
NATIFS :
photograveur / opérateur PAO / animation / éducation / édition / fabrication
**FILIGRANE :**
scoutisme+++ / théâtre+ / photo++
**PELLICULAGE :**
emmanuelcauchois.fr
**RÉSOLUTION :**
mettre mon expérience au service de la qualité de vos projets.
**DÉPÔT LÉGAL :**
Mai 2018
Binary file not shown.

After

Width:  |  Height:  |  Size: 558 KiB

+11
View File
@@ -0,0 +1,11 @@
---
title: profil
media_order: EC_BD_modif.png
---
**LE STYLE DE LOURS**
Emmanuel CAUCHOIS
10, rue Georges-Guynemer
78300 POISSY
Tél. : 06 03 23 08 42
Email : lestyledelours@sfr.fr
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,7 +1,7 @@
// @import 'theme/mixins';
@import 'theme/reset';
@import 'theme/fonts';
@import 'theme/variables';
@import 'theme/mixins';
@import 'theme/reset';
@import 'theme/typography';
@import 'theme/animation';
@@ -9,6 +9,7 @@
@import 'theme/start';
@import 'theme/footer';
@import 'theme/carousel';
@import 'theme/media-quieries';
// @import 'theme/mobile';
//
// @import 'theme/header';
@@ -51,6 +51,7 @@
display: block!important;
}
#recommandations{
.owl-carousel{
.owl-stage-outer{
@@ -62,25 +63,38 @@
.content{
width: 300px!important;
background: white;
padding: 0 20px;
position: relative;
h5{
padding-top: 10px;
padding-right: 10px;
}
p{
text-align: left!important;
padding: 0 20px;
margin: 0;
a{
position: absolute;
width: 20px;
top: 10px;
right: 10px;
}
& > img{
position: absolute;
width: 20px;
height: auto;
top: 10px;
right: 10px;
}
&:last-child{
padding-bottom: 20px;
}
strong{
width: 230px;
display: block;
}
}
img{
position: absolute;
top: 15px;
right: 20px;
width: 25px;
height: auto;
}
// img{
// position: absolute;
// top: 10px;
// right: 20px;
// width: 25px;
// height: auto;
// }
}
}
}
@@ -1,4 +1,6 @@
footer{
margin: 0 50px 0px 50px;
padding-bottom: 20px;
ul{
display: inline-flex;
justify-content: flex-end;
@@ -9,7 +11,41 @@ footer{
}
section{
width: 50%;
margin:auto;
}
}
.background-footer{
z-index: -1;
position: absolute;
bottom: 0;
width: 100%;
left: 0;
display: inline-flex;
& > div {
width: 55%;
display: inline-block;
position: relative;
padding-bottom: 100%;
vertical-align: middle;
}
.fond-g{
svg{
width: 110%;
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
}
}
.fond-d{
svg{
width: 110%;
display: inline-block;
position: absolute;
bottom: 0;
right: 0;
}
}
}
@@ -31,43 +31,11 @@
}
}
.background-footer{
z-index: -1;
position: absolute;
bottom: 0;
width: 100%;
left: 0;
display: inline-flex;
& > div {
width: 55%;
display: inline-block;
position: relative;
padding-bottom: 100%;
vertical-align: middle;
}
.fond-g{
svg{
width: 110%;
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
}
}
.fond-d{
svg{
width: 110%;
display: inline-block;
position: absolute;
bottom: 0;
right: 0;
}
}
}
header{
z-index: 999;
position: relative;
margin-bottom: 100px;
nav{
z-index: 999;
position: fixed;
@@ -0,0 +1,223 @@
@media screen and (max-width: 980px) {
#start{
.section{
&:not(:nth-last-child(1)){
margin-bottom: 100px;
}
&:not(#home){
.section-content{
h3, p{
margin: 100px auto 30px auto;
}
}
& > .sous-section{
&>section{
margin: 30px 0;
&:nth-last-child(1){
margin-bottom: 60px;
}
}
.no-gal{
&:not(#clients){
min-width: 70%;
}
}
}
}
}
}
}
@media screen and (max-width: 900px) {
Header{
.title{
height: 110px;
padding-top: 0;
}
.navbar{
top: 60px;
left: 50px;
right: 50px;
ul{
text-align: center;
}
}
.logo{
flex-direction: column-reverse;
.why_lsdo {
display: none;
}
#user{
margin-top: 50px;
margin-left: 0;
&>div{
text-align: center;
}
}
}
}
#home{
min-width: 100%!important;
}
#start{
.section{
&:not(#home){
& > .sous-section{
.no-gal{
&:not(#clients){
min-width: 90%;
}
}
}
.section-content{
p{
min-width: 90%;
}
}
}
}
}
footer{
section{
width: 90%
}
}
}
@media screen and (max-width: 600px) {
body{
padding: 0 10px;
}
header{
.title{
padding: 0 0 0 0;
h1{
a{
font-size: $font40;
}
}
}
}
#start{
.section:not(#home) {
& > .sous-section{
.no-gal:not(#clients):nth-of-type(n+3) {
.title{
top: -50px;
left: -50px;
border: 50px solid #0f265c;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
h3{
top:-40px!important;
left:-40px!important;
}
}
.content{
p,ul{
width: 65%;
}
}
}
}
}
section{
.section-content{
&> p{
min-width: 100%;
margin-bottom: 50px;
}
}
}
.section{
margin-bottom: 20px;
.sous-section{
&> section{
margin-bottom: 20px;
}
}
}
h2{
font-size: $font32;
}
h3{
font-size: $h3;
white-space: normal!important;
}
#m-tier{
section{
&:nth-of-type(n+3){
h3{
font-size: 1rem;
white-space: nowrap!important;
top: -50px!important;
}
}
}
}
#r-f-rences{
h3{
margin-bottom: 60px;
}
#clients{
.images{
img{
margin:10px 10px;
min-width: 70%;
}
}
}
}
#recommandations{
.owl-carousel{
.owl-stage-outer{
height: 350px!important;
}
.content{
width: 250px!important;
img{
bottom: 20px!important;
top: auto!important;
}
}
}
}
#contact{
& > div{
p{
min-width: 90%!important;
text-align: center!important;
&:not(:nth-of-type(1)){
margin-top: 20px!important;
}
}
}
}
}
footer{
& > section{
&:last-child{
p:last-child {
margin-bottom: 0;
}
}
}
h3{
font-size: 1.5rem;
white-space: normal;
}
ul{
justify-content: space-evenly;
li{
margin-left: 0;
a{
font-size: 1rem;
}
}
}
}
}
@@ -1,77 +1,82 @@
@mixin breakpoint($point) {
@if $point == 2x {
@media (min-width:$size-2x) {
@content;
}
} @else if $point == xl {
@media (max-width: $size-xl) {
@content;
}
} @else if $point == lg {
@media (max-width: $size-lg) {
@content;
}
} @else if $point == md {
@media (max-width: $size-md) {
@content;
}
} @else if $point == sm {
@media (max-width: $size-sm) {
@content;
}
} @else if $point == xs {
@media (max-width: $size-xs) {
@content;
}
} @else {
@warn "Breakpoint mixin supports: xs, sm, md, lg, xl, 2x";
@mixin filet{
width: 100%;
text-align: center;
display: inline-flex;
width: 100%;
align-items: center;
&::after{
right: 0;
content: " ";
width: 50%;
height: 0px;
border: $border-red;
margin-left: 20px;
}
&::before{
left: 0;
content: " ";
width: 50%;
height: 0px;
border: $border-red;
margin-right: 20px;
}
}
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
transform: translateY(-50%);
}
@mixin button-primary() {
background: $primary-color;
border-color: $primary-color-dark;
color: $light-color;
&:focus,
&:hover {
background: darken($primary-color-dark, 2%);
border-color: darken($primary-color-dark, 5%);
color: $light-color;
@mixin filet-b{
width: 100%;
text-align: center;
display: inline-flex;
width: 100%;
align-items: center;
&::after{
right: 0;
content: " ";
width: 50%;
height: 0px;
border: $border-blue;
margin-left: 20px;
}
&:active,
&.active {
background: darken($primary-color-dark, 4%);
border-color: darken($primary-color-dark, 7%);
color: $light-color;
&::before{
left: 0;
content: " ";
width: 50%;
height: 0px;
border: $border-blue;
margin-right: 20px;
}
}
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
@mixin triangle{
position: absolute;
z-index: 1;
transform: rotate(-135deg);
width: 0;
height: 0;
top: -70px;
left: -70px;
border: 70px solid $blue;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
$u1: unit($min-vw);
$u2: unit($max-vw);
$u3: unit($min-font-size);
$u4: unit($max-font-size);
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
& {
font-size: $min-font-size;
@media screen and (min-width: $min-vw) {
font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
}
@media screen and (min-width: $max-vw) {
font-size: $max-font-size;
}
}
}
@mixin rotateH{
transform: rotate(90deg);
position: absolute;
top: -8px;
left: -90px;
}
@mixin arrow{
width: 0!important;
height: 0;
top: 35px;
left: 50%;
right: 50%;
border: 50px solid white;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
position: absolute;
transform: translateX(-50%);
}
@@ -1,3 +1,6 @@
*{
box-sizing : border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
@@ -24,7 +27,7 @@ html {
body {
margin: 0;
padding: 0 50px 0 50px;
padding: 0;
}
/**
@@ -45,6 +48,10 @@ h1 {
margin:0;
}
h1,h2,h3,h4,h5,p,em,strong,ul,li,a{
margin:0;
padding:0;
}
/* Grouping content
========================================================================== */
@@ -1,263 +1,192 @@
body{
position:relative;
}
.arrow{
width: 0!important;
height: 0;
top: 35px;
left: 50%;
right: 50%;
border: 50px solid white;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
position: absolute;
transform: translateX(-50%);
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background-color: #964587!important;
}
.mCSB_scrollTools .mCSB_draggerRail{
background-color: $bkg-d!important;
}
#start{
.section{
margin-bottom: 150px;
}
.sous-section{
section{
margin-bottom: 100px;
}
}
section{
body {
position: relative;
h2{
text-align: center;
z-index: 1;
margin-top: -35px;
display: inline-flex;
width: 100%;
align-items: center;
&::after{
right: 0;
content: " ";
width: 50%;
height: 0px;
border: 1px solid $blue;
margin-left: 20px;
}
&::before{
left: 0;
content: " ";
width: 50%;
height: 0px;
border: 1px solid $blue;
margin-right: 20px;
}
}
h3{
width: 100%;
text-align: center;
display: inline-flex;
width: 100%;
align-items: center;
white-space:nowrap;
&::after{
right: 0;
content: " ";
width: 50%;
height: 0px;
border: 2px dashed #8d2815;
margin-left: 20px;
}
&::before{
left: 0;
content: " ";
width: 50%;
height: 0px;
border: 2px dashed #8d2815;
margin-right: 20px;
}
}
.section-content{
& > h3{
margin: 50px auto;
&::before{
border: 0px!important;
}
&::after{
border: 0px!important;
}
}
& > p{
margin: 20px;
width: 50%;
text-align: center;
min-width: 600px;
margin: 50px auto 100px auto;
}
}
}
}
#home{
#home {
width: 40%;
min-width: 700px;
margin-left: auto;
margin-right: auto;
}
.section:not(#home){
background:$section;
& > .sous-section{
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
& > .no-gal:nth-of-type(odd){
margin-right: 50px;
}
& > .no-gal:nth-of-type(even){
margin-left: 50px;
}
.no-gal:not(#clients){
width: 35%;
min-width: 350px;
&:nth-of-type(n+3){
position: relative;
.title{
position: absolute;
z-index: 1;
transform: rotate(-135deg);
width: 0;
height: 0;
top: -70px;
left: -120px;
border: 70px solid #0f265c;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
h3{
transform: rotate(90deg);
position: absolute;
top: -75px;
left: -50px;
&:before{
margin-right: 7px;
}
&:after{
margin-left: 0px;
}
}
}
& > .content{
display: none;
}
.images{
height: auto;
position: relative;
.content{
position: absolute;
top: 0;
left: 0;
display: none;
height: 100%;
width: 100%;
background: #0f265c;
p,ul,li{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-55%) translateX(-50%);
color: white;
}
}
&:hover{
.content{
display: block;
}
}
}
}
.content{
p{
text-align: justify;
}
}
}
section{
width: 100%;
.title{
margin: 0 50px;
}
}
}
}
}
#m-tier{
h3{
&::before{
border: 0px!important;
}
&::after{
border: 0px!important;
}
}
}
#r-f-rences{
h3{
margin-bottom: 100px;
}
#clients{
.images{
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
img{
margin: 0 20px;
width: 15%;
min-width: 150px;
height: 100%;
}
}
}
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #964587!important;
}
#contact{
background: transparent!important;
margin-bottom: 0!important;
h2{
background: transparent!important;
}
& > div {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.mCSB_scrollTools .mCSB_draggerRail {
background-color: $bkg-d!important;
}
.section-content {
p{
text-align: center;
}
.block{
width: 100%;
p{
width: 40%;
&:nth-of-type(1){
text-align: right;
margin-right: 50px;
}
&:nth-of-type(2){
text-align: left;
}
img{
margin-bottom: 20px;
border-radius: 150px;
width: 10%;
min-width: 180px;
height: auto;
}
}
section{
width: 50%
}
.content {
width: 50%;
margin: 70px auto;
}
}
.sous-section {
width: 100%;
display: inline-flex;
flex-wrap: wrap;
justify-content: space-evenly;
h3 {
@include filet;
}
& > section{
.title{
margin-bottom: 70px;
}
}
.item{
p{
text-align: justify;
}
}
}
.blocks {
width: 35%;
margin-bottom: 50px;
.title{
margin-bottom: 10px;
}
}
.item-etapes {
position: relative;
.title {
@include triangle;
pointer-events: none;
}
h4 {
@include rotateH;
}
.content {
.txt {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: $blue;
}
}
&:hover {
.txt {
display: inline-flex;
justify-content: center;
align-items: left;
flex-direction: column;
}
}
}
.arrow {
@include arrow;
}
.no-gal {
.section_n2 {
display: inline-flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
}
.galerie{
h5{
margin-bottom: 0;
}
}
#start {
margin: 0 50px;
& > section{
position: relative;
margin-bottom: 150px;
&:not(:first-child){
margin-bottom:150px;
}
&:last-child{
margin-bottom: 0px!important;
}
h2 {
@include filet-b;
}
.sous-section{
& > section{
padding: 0 50px;
}
}
#clients{
.images {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
img {
width: 15%;
min-width: 150px;
height: 100%;
}
}
}
}
.section:not(#home) {
background: $section;
& > .sous-section {
section {
width: 100%;
}
}
}
#contact {
background: transparent!important;
.blocks{
display: inline-flex;
flex-direction: column-reverse;
justify-content: center;
&:nth-of-type(1){
align-items: flex-end;
p{
text-align: right!important;
}
}
&:nth-of-type(2){
align-items: flex-start;
}
.title{
display: none;
}
.content{
margin-top: 20px;
}
.images {
width: 10%;
min-width: 180px;
height: auto;
img{
border-radius: 150px;
}
}
}
h2 {
background: transparent!important;
}
}
}
@@ -1,208 +1,218 @@
html,body{
font-size: 16px;
line-height: 22px;
body,
html {
font-size: 16px;
line-height: 22px;
}
h1, h2, h3{
font-family: $Regular-L;
font-weight: normal;
text-transform: uppercase;
}
h1,h2{
letter-spacing: $letterI1;
}
h3{
letter-spacing: 0.2rem;
white-space: nowrap;
}
ul,li,a,p,del{
font-family: $Roboto-R;
font-weight: normal;
font-size: $fontp;
}
em{
font-family: $Roboto-I;
font-weight: normal;
}
strong{
font-family: $Roboto-B;
font-weight: normal;
}
h1{
font-size: $fontH1;
line-height: $lineH96;
a{
color: $blue!important;
font-family: $Regular-L;
font-size: $fontH1;
line-height: $lineH96;
}
}
h2{
font-size: $fonth2;
line-height: $lineH30;
color: $blue!important;
background: white;
}
h3{
font-size: $font32;
}
header{
nav{
ul{
li{
a{
font-family: $Regular-L;
font-size: $fontnav;
line-height: $lineH40;
letter-spacing: $letterI1;
color: $blue!important;
}
}
}
}
.logo{
#user{
p{
font-size: $font32;
font-family: $Regular-L;
line-height: $lineH32;
letter-spacing: $letterI1;
}
}
.why_lsdo{
h3{
font-size: $h3;
letter-spacing: $letterI1;
&:hover{
text-decoration: underline;
}
}
}
}
}
#start{
&> section > div > h3{
// margin-top: 120px;
}
&> section > div > p{
// padding-top: 120px!important;
// padding-bottom: 100px;
}
section{
.block{
h3{
text-align: center;
color: #8d2815ff;
text-transform: inherit;
font-family: $Roboto-R;
letter-spacing: 0;
}
.content{
text-align: justify;
}
}
}
#home{
& > p{
font-family: $Roboto-L;
text-align: center;
font-size: $fontPi;
line-height: $lineH24;
}
}
#m-tier{
section{
&:nth-of-type(n+3){
h3{
font-size: 1.5rem;
color: white;
}
}
&:nth-of-type(-n+2){
h3{
text-transform: capitalize;
text-align: center;
color:$h3-color;
text-transform: inherit;
font-family: $Roboto-B;
letter-spacing: 0;
font-size: 1.5rem;
}
}
}
}
#r-f-rences{
& > p{
text-align: center;
font-size: 1.2rem;
line-height: 1.7rem;
}
.title{
// margin: 0 50px;
}
h3{
font-family: $Regular-L;
text-align: center;
color: $h3-color;
margin: auto;
background-color: $section;
}
#travaux_r-alis-s{
.galerie{
p{
font-size: 0.8rem;
line-height: 1.2rem;
}
}
}
#recommandations{
.owl-carousel{
.content{
p:first-of-type{
text-align: center;
}
}
}
}
}
}
#contact{
p{
strong{
h1,
h2,
h3 {
font-family: $Regular-L;
font-weight: normal;
font-size: $h3;
text-transform: uppercase;
margin: 0;
padding: 0;
}
h1,
h2 {
letter-spacing: $letterI1;
color: $blue;
}
}
}
footer{
ul{
li{
text-transform: uppercase;
letter-spacing: $letterI1;
a{
h1 {
font-size: $fontH1;
line-height: $lineH96;
a {
color: $blue!important;
font-family: $Regular-L;
font-size: $fontnav;
color: $blue;
}
font-size: $fontH1;
line-height: $lineH96;
}
}
h2 {
font-size: $fonth2;
line-height: $lineH30;
color: $blue!important;
background: white;
}
h3 {
letter-spacing: 0.2rem;
font-size: $font32;
}
h5 {
font-family: $Roboto-B;
font-weight: normal;
font-size: $fontH5;
margin: 10px 0;
}
a,
del,
li,
p,
ul {
font-family: $Roboto-R;
font-weight: normal;
font-size: $fontp;
line-height: 1.5rem;
margin: 0;
padding: 0;
}
em {
font-family: $Roboto-I;
font-weight: normal;
}
strong {
font-family: $Roboto-B;
font-weight: normal;
}
header {
nav {
ul {
li {
a {
font-family: $Regular-L;
font-size: $fontnav;
line-height: $lineH40;
letter-spacing: $letterI1;
color: $blue!important;
}
}
}
}
.logo {
#user {
p {
font-size: $font32;
font-family: $Regular-L;
line-height: $lineH32;
letter-spacing: $letterI1;
}
}
.why_lsdo {
h3 {
font-size: $h3;
letter-spacing: $letterI1;
&:hover {
text-decoration: underline;
}
}
}
}
}
#home {
& > p {
font-family: $Roboto-L;
text-align: center;
font-size: $fontPi;
line-height: $lineH24;
}
}
.grav-youtube {
margin-top: 20px;
}
.section-content {
h3 {
font-family: $Regular-L;
text-align: center;
color: black!important;
text-transform: inherit;
letter-spacing: 0.1rem!important;
white-space: nowrap;
}
}
.sous-section {
h3 {
font-family: $Regular-L;
text-align: center;
color: $h3-color;
background-color: $section;
white-space: nowrap;
}
}
.galerie {
p {
font-size: 0.8rem;
line-height: 1.2rem;
}
}
.item {
h4 {
font-family: $Roboto-B;
text-transform: none;
font-size: $h3;
text-align: center;
color: $red;
letter-spacing: normal!important;
font-weight: normal;
}
}
.item-etapes {
h4 {
font-size: $h3;
color: white;
}
.txt {
& > * {
color: white;
}
}
}
#contact {
p {
strong {
font-family: $Regular-L;
font-weight: normal;
font-size: $h3;
letter-spacing: $letterI1;
color: $blue;
}
}
}
footer {
h3 {
margin: 20px auto;
}
section {
margin: auto;
text-align: center;
p:last-child {
padding-bottom: 15px;
}
}
ul {
li {
text-transform: uppercase;
letter-spacing: $letterI1;
a {
font-family: $Regular-L;
font-size: $fontnav;
color: $blue;
}
}
}
}
}
@@ -9,9 +9,18 @@
// font-size
$fontp: 1rem;
$fontnav: 1.15rem;
$fontPi: 1.15rem;
$fzh1: 4rem;
$fzh2: 3rem;
$fzh3: 2rem;
$fzh4: 1.5rem;
$fontp: 1rem;
$fontH5: 0.9rem;
$h3: 1.5rem;
$font32: 2rem;
$fonth2: 3rem;
@@ -21,9 +30,16 @@ $font56: 4rem;
$fontH1: 4rem;
// interline
$lh1: 4.5rem;
$lh2: 3.5rem;
$lh3: 2.5rem;
$lh4: 1.5rem;
$lp: 1.2rem;
$lineH24: 2rem;
$lineH30: 2.5rem;
$lineH32: 3rem;
$lineH40: 4rem;
$lineH96:6rem;
@@ -31,7 +47,6 @@ $lineH96:6rem;
//interlettre
$letterI1: 0.1rem;
// color
$section: rgb(255, 250, 229);
$h3-color: #8d2815ff;
@@ -40,3 +55,8 @@ $bkg-g: rgb(255, 250, 229);
$bkg-d: rgb(243,150,85);
$blue: #0f265c;
$red: #8d2815ff;
// filet
$border-red: 2px dashed $red;
$border-blue: 1px solid $blue;
@@ -0,0 +1,17 @@
<div class="item-etapes blocks">
<div class="content">
{% for images in child.media.images %}
<div class="img">
{{ images.html }}
</div>
{% endfor %}
{% if child.content %}
<div class="txt">
{{ child.content }}
</div>
{% endif %}
</div>
</div>
@@ -35,7 +35,6 @@
{% include 'partials/sidebar.html.twig' %}
{% endblock %}
{% endembed %}
</section>
</section>
{% endblock %}
@@ -0,0 +1,21 @@
<div class="item blocks">
{% if child.title %}
<div class="title">
<h4>{{ child.title }}</h4>
</div>
{% endif %}
{% if child.content %}
<div class="content">
{{ child.content }}
</div>
{% endif %}
{% for images in child.media.images %}
<div class="images">
{{ images.html }}
</div>
{% endfor %}
</div>
@@ -46,32 +46,52 @@
{% endblock %}
{% block body %}
<section id="{{ macro.pageLinkName(page.menu) }}" class="section">
{{page.content}}
<div class="content section-content">
{{page.content}}
</div>
</section>
{% for module in page.collection() if module.template == 'blog' %}
<section id="{{ macro.pageLinkName(module.menu)|hyphenize }}" class="section">
<div class="content section-content">
<h2>{{ module.title }}</h2>
<div class="arrow"></div>
{{ module.content|raw }}
<div class="block">
<h2>{{ module.title }}</h2>
<div class="arrow"></div>
<div class="content">
{{ module.content|raw }}
</div>
</div>
</div>
<div class="sous-section">
{% for child in module.collection %}
{% for child in module.collection if child.template == 'items' %}
{% include 'items.html.twig' %}
{% endfor %}
{% for child in module.collection if child.template == 'item-etapes' %}
{% include 'item-etapes.html.twig' %}
{% endfor %}
{% for child in module.collection if child.template == 'blog' %}
{% set gal = child.header.blog.config %}
{% if gal %}
{% include 'partials/blog/sous-gal.html.twig' %}
{% include 'partials/sous-gal.html.twig' %}
{% else %}
{% include 'partials/blog/no-gal.html.twig' %}
{% include 'partials/no-gal.html.twig' %}
{% endif %}
{% endfor %}
</div>
</section>
</section>
{% endfor %}
{% endblock %}
@@ -59,9 +59,9 @@
</svg>
</div>
</div>
{% block header %}
<header>
{% block header %}
<header>
<nav class="navbar">
{% block header_navigation %}
{% include 'partials/navigation.html.twig' %}
@@ -72,8 +72,7 @@
<h1><a href="{{ home_url }}">{{site.title}}</a></h1>
</div>
<section class="logo">
<div class="logo">
<div id="user">
<div id="name">
<p>{{ theme_config.profile.name | default(site.author.name) }}</p>
@@ -87,66 +86,67 @@
{% for module in page.find('/home').children.order('date', 'desc') %}
<section class="why_lsdo ">
<h3>{{module.title}}</h3>
<h3>{{module.title}}</h3>
{{module.content}}
<svg>
<svg>
<path id='' d="M 0,0 100,0 0,20 0,20 Z" style="fill:#964587" />
</svg>
</section>
{% endfor %}
</header>
{% endblock %}
</div>
</header>
{% endblock %}
{% block hero %}{% endblock %}
<section id="start">
{% block body %}
{% block content %}{% endblock %}
{% endblock %}
</section>
<section id="start">
{% block body %}
{% block content %}{% endblock %}
{% endblock %}
</section>
{% block footer %}
<footer>
<ul>
{% for module in page.find('/pied-de-page').children.order('date', 'desc') %}
<li>
<a href="#{{ macro.pageLinkName(module.menu)|hyphenize }}">{{module.title}}</a>
</li>
{% endfor %}
</ul>
<footer>
<ul>
{% for module in page.find('/pied-de-page').children.order('date', 'desc') %}
<li>
<a href="#{{ macro.pageLinkName(module.menu)|hyphenize }}">{{module.title}}</a>
</li>
{% endfor %}
</ul>
{% for module in page.find('/pied-de-page').children.order('date', 'desc') %}
<section id="{{ macro.pageLinkName(module.menu)|hyphenize }}">
<h3>{{module.title}}</h3>
{{module.content}}
</section>
{% endfor %}
</footer>
{% endblock %}
{% for module in page.find('/pied-de-page').children.order('date', 'desc') %}
<section id="{{ macro.pageLinkName(module.menu)|hyphenize }}">
<h3>{{module.title}}</h3>
{{module.content}}
</section>
{% endfor %}
<div class="background-footer">
<div class="fond-g">
<svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path3336"
d="M 500,500 0,0 0,500 Z"
style="fill:#fff59b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.22091293px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;enable-background:new" />
</svg>
</div>
<div class="fond-d">
<svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path3336"
d="M 500,500 0,500 500,0 Z"
style="fill:#f39655;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.22091293px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;enable-background:new" />
</svg>
</div>
</div>
</footer>
{% endblock %}
<div class="background-footer">
<div class="fond-g">
<svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path3336"
d="M 500,500 0,0 0,500 Z"
style="fill:#fff59b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.22091293px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;enable-background:new" />
</svg>
</div>
<div class="fond-d">
<svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path3336"
d="M 500,500 0,500 500,0 Z"
style="fill:#f39655;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.22091293px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;enable-background:new" />
</svg>
</div>
</div>
{% block bottom %}
{{ assets.js('bottom')|raw }}
@@ -1,38 +0,0 @@
<section id="{{ macro.pageLinkName(child.menu)|hyphenize }}" class="no-gal">
{% if child.title %}
<div class="title">
<h3>{{ child.title }}</h3>
</div>
{% endif %}
{% if child.content %}
<div class="content">
{{ child.content }}
</div>
{% endif %}
<div class="images">
{% for images in child.media.images %}
{% if images.html %}
{{ images.html }}
{% if child.content %}
<div class="content">
{{ child.content }}
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
{% for item in child.collection %}
<h4>{{ item.title }}</h4>
{{ item.content }}
<div class="images">
{% for images in item.media.images %}
{{ images.html }}
{% endfor %}
</div>
{% endfor %}
</section>
@@ -0,0 +1,43 @@
<section id="{{ macro.pageLinkName(child.menu)|hyphenize }}" class="no-gal">
<!-- si item-text va chercher ce template -->
{% if child.title %}
<div class="title">
<h3>{{ child.title }}</h3>
</div>
{% endif %}
{% if child.content %}
<div class="content">
{{ child.content }}
</div>
{% endif %}
<div class="images">
{% for images in child.media.images %}
{% if images %}{% endif %}
{{ images.html }}
<div class="content">
{{ child.content }}
</div>
{% endfor %}
</div>
<div class="section_n2">
{% for item in child.collection %}
<div class="items blocks">
{% for images in item.media.images %}
<div class="images">
{{ images.html }}
</div>
{% endfor %}
<div class="content">
{{ item.content }}
</div>
</div>
{% endfor %}
</div>
</section>
@@ -24,12 +24,16 @@
<div class="owl-carousel">
{% for item in child.collection %}
<div class="galerie">
{% for images in item.media.images %}
<div class="images">
{{ images.html }}
</div>
{% endfor %}
<div class="content">
{% if item.title %}
<h5>{{ item.title}}</h5>
{% endif %}
{{ item.content }}
</div>
</div>