kevin/lours.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css

Browse Source
This commit is contained in:
kevin
2019-02-04 18:20:04 +01:00
parent a9ece64292
commit cdd86a3845
12 changed files with 353 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/config/site.yaml
+2 -3
View File
@@ -1,14 +1,13 @@
title: 'Le style de l’ours' title: 'Le style de l’ours'
default_lang: fr default_lang: fr
author: author:
name: 'Emmanuel Cauchois' name: 'Emmanuel CAUCHOIS'
email: joe@example.com email: joe@example.com
profession: 'Secretaire d''édition et de rédaction chef de projet " print "'
taxonomies: taxonomies:
- category - category
- tag - tag
metadata: metadata:
description: 'Grav is an easy to use, yet powerful, open source flat-file CMS' Description: 'Secretaire d''édition et de rédaction </br> Chef de projet " PRINT "'
summary: summary:
enabled: true enabled: true
format: short format: short
user/themes/le_style_de_lours_modif/css-compiled/theme.css
+55 -49
View File
File diff suppressed because one or more lines are too long
user/themes/le_style_de_lours_modif/css-compiled/theme.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
user/themes/le_style_de_lours_modif/scss/theme/_carousel.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.owl-carousel{ .owl-carousel{
display: flex!important; display: flex!important;
margin: 100px 50px 0 50px; margin: 0px 50px 0 50px;
width: auto!important; width: auto!important;
.owl-stage-outer{ .owl-stage-outer{
height: 500px; height: 500px;
user/themes/le_style_de_lours_modif/scss/theme/_header.scss
+2 -2
View File
@@ -114,7 +114,7 @@ header{
content: " "; content: " ";
width: 50%; width: 50%;
height: 0px; height: 0px;
border: 1px solid black; border: 1px solid $blue;
margin-left: 20px; margin-left: 20px;
} }
&::before{ &::before{
@@ -122,7 +122,7 @@ header{
content: " "; content: " ";
width: 50%; width: 50%;
height: 0px; height: 0px;
border: 1px solid black; border: 1px solid $blue;
margin-right: 20px; margin-right: 20px;
} }
user/themes/le_style_de_lours_modif/scss/theme/_start.scss
+187 -177
View File
@@ -1,7 +1,11 @@
body{
position:relative;
}
.arrow{ .arrow{
width: 0!important; width: 0!important;
height: 0; height: 0;
top: 40px; top: 35px;
left: 50%; left: 50%;
right: 50%; right: 50%;
border: 50px solid white; border: 50px solid white;
@@ -19,136 +23,44 @@
background-color: $bkg-d!important; background-color: $bkg-d!important;
} }
body{
position:relative;
padding-bottom: 20px;
}
#start{ #start{
&>section:last-child{ .section{
margin-bottom: 0!important; margin-bottom: 150px;
}
.sous-section{
section{
margin-bottom: 100px;
}
} }
section{ section{
position: relative; position: relative;
margin-top: -10px; h2{
margin-bottom: 100px;
padding-top: 5px;
& > h2, & > h3{
text-align: center; 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{ h3{
width: 100%; width: 100%;
} text-align: center;
}
h2{
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;
}
}
#home{
width: 40%;
min-width: 700px;
margin: 0 auto 100px auto;
}
#m-tier{
& > div{
background:$section;
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
h3{
text-align: center;
}
& > section:nth-of-type(odd){
margin-right: 50px;
}
& > section:nth-of-type(even){
margin-left: 50px;
}
section{
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: -65px;
left: -70px;
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;
}
}
& > .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;
}
}
.filet{
display: none;
}
}
}
}
#r-f-rences{
h3{
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
align-items: center; align-items: center;
@@ -170,73 +82,171 @@ body{
margin-right: 20px; margin-right: 20px;
} }
} }
& > div{ .section-content{
background: $section; & > h3{
& > p{ margin: 50px auto;
width: 50%; &::before{
text-align: center; border: 0px!important;
min-width: 600px; }
margin: 0px auto 0px auto; &::after{
} border: 0px!important;
.title{
margin-bottom: 50px;
}
section{
&:last-child{
p{
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
img{
margin: 0 20px;
width: 15%;
min-width: 150px;
height: 100%;
}
}
}
}
#recommandations{
}
#clients{
.images{
margin: 0 50px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 50px;
flex-wrap: wrap;
img{
width: 10%;
min-width: 200px;
margin-bottom: 20px;
&:not(:first-child){
margin-left: 20px;
} }
} }
& > p{
margin: 20px;
width: 50%;
text-align: center;
min-width: 600px;
margin: 50px auto 100px auto;
}
}
}
#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%;
}
} }
} }
} }
}
#contact{ #contact{
background: transparent!important;
margin-bottom: 0!important;
h2{
background: transparent!important;
}
& > div { & > div {
display: inline-flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
p{ p{
width: 40%; width: 40%;
&:nth-of-type(1){ &:nth-of-type(1){
text-align: right; text-align: right;
margin-right: 50px; margin-right: 50px;
} }
// &:nth-of-type(2){ &:nth-of-type(2){
// text-align: left; text-align: left;
// margin-left: 20px; }
// }
img{ img{
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 150px; border-radius: 150px;
user/themes/le_style_de_lours_modif/scss/theme/_typography.scss
+8 -9
View File
@@ -38,6 +38,7 @@ h1{
font-size: $fontH1; font-size: $fontH1;
line-height: $lineH96; line-height: $lineH96;
a{ a{
color: $blue!important;
font-family: $Regular-L; font-family: $Regular-L;
font-size: $fontH1; font-size: $fontH1;
line-height: $lineH96; line-height: $lineH96;
@@ -46,10 +47,9 @@ h1{
h2{ h2{
font-size: $fonth2; font-size: $fonth2;
line-height: $lineH40; line-height: $lineH30;
margin-bottom: -10px;
color: $blue!important; color: $blue!important;
background: white;
} }
h3{ h3{
@@ -93,11 +93,11 @@ header{
#start{ #start{
&> section > div > h3{ &> section > div > h3{
margin-top: 120px; // margin-top: 120px;
} }
&> section > div > p{ &> section > div > p{
padding-top: 120px!important; // padding-top: 120px!important;
padding-bottom: 100px; // padding-bottom: 100px;
} }
section{ section{
@@ -151,20 +151,19 @@ header{
line-height: 1.7rem; line-height: 1.7rem;
} }
.title{ .title{
margin: 0 50px; // margin: 0 50px;
} }
h3{ h3{
font-family: $Regular-L; font-family: $Regular-L;
text-align: center; text-align: center;
color: $h3-color; color: $h3-color;
width: 350px;
margin: auto; margin: auto;
background-color: $section; background-color: $section;
} }
#travaux_r-alis-s{ #travaux_r-alis-s{
.galerie{ .galerie{
p{ p{
font-size: 0.8rem; font-size: 0.8rem;
line-height: 1.2rem; line-height: 1.2rem;
} }
} }
user/themes/le_style_de_lours_modif/scss/theme/_variables.scss
+2
View File
@@ -22,6 +22,8 @@ $fontH1: 4rem;
// interline // interline
$lineH24: 2rem; $lineH24: 2rem;
$lineH30: 2.5rem;
$lineH32: 3rem; $lineH32: 3rem;
$lineH40: 4rem; $lineH40: 4rem;
$lineH96:6rem; $lineH96:6rem;
user/themes/le_style_de_lours_modif/templates/modular.html.twig
+17 -62
View File
@@ -26,7 +26,7 @@
{% endfor %} {% endfor %}
{% for mitem in site.menu %} {% for mitem in site.menu %}
<li> <li>
<a {% if mitem.class %}class="{{ mitem.class }}"{% endif %} href="{{ mitem.url }}"> <a {% if mitem.class %} class="{{ mitem.class }}" {% endif %} href="{{ mitem.url }}">
{% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %} {% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
{{ mitem.text }} {{ mitem.text }}
</a> </a>
@@ -46,77 +46,32 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<section id="{{ macro.pageLinkName(page.menu) }}"> <section id="{{ macro.pageLinkName(page.menu) }}" class="section">
{{page.content}} {{page.content}}
</section> </section>
{% for module in page.collection() if module.template == 'blog' %} {% for module in page.collection() if module.template == 'blog' %}
<section id="{{ macro.pageLinkName(module.menu)|hyphenize }}"> <section id="{{ macro.pageLinkName(module.menu)|hyphenize }}" class="section">
<div class="content section-content">
<h2>{{ module.title }}</h2> <h2>{{ module.title }}</h2>
<div class="arrow"></div> <div class="arrow"></div>
<div>
{{ module.content|raw }} {{ module.content|raw }}
</div>
{% for child in module.collection %} <div class="sous-section">
{% set gal = child.header.blog.config %} {% for child in module.collection %}
{% set gal = child.header.blog.config %}
<section id="{{ macro.pageLinkName(child.menu)|hyphenize }}"> {% if gal %}
{% include 'partials/blog/sous-gal.html.twig' %}
{% else %}
{% include 'partials/blog/no-gal.html.twig' %}
{% endif %}
{% endfor %}
</div>
{% 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 %}
{{ images.html }}
<div class="content">
{{ child.content }}
</div>
{% endfor %}
</div>
{% if gal %}
<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">
{{ item.content }}
</div>
</div>
{% endfor %}
</div>
{% else %}
{% 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 %}
{% endif %}
</section> </section>
{% endfor %}
</div>
</section>
{% endfor %} {% endfor %}
{% endblock %} {% endblock %}
user/themes/le_style_de_lours_modif/templates/partials/base.html.twig
+1 -1
View File
@@ -79,7 +79,7 @@
<p>{{ theme_config.profile.name | default(site.author.name) }}</p> <p>{{ theme_config.profile.name | default(site.author.name) }}</p>
</div> </div>
<div id="pro"> <div id="pro">
<p>{{ site.author.profession }}</p> <p>{{ site.metadata.Description }}</p>
</div> </div>
</div> </div>
user/themes/le_style_de_lours_modif/templates/partials/blog/no-gal.html.twig
+38
View File
@@ -0,0 +1,38 @@
<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>
user/themes/le_style_de_lours_modif/templates/partials/blog/sous-gal.html.twig
+39
View File
@@ -0,0 +1,39 @@
<section id="{{ macro.pageLinkName(child.menu)|hyphenize }}" class="sous-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 %}
{{ images.html }}
<div class="content">
{{ child.content }}
</div>
{% endfor %}
</div>
<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">
{{ item.content }}
</div>
</div>
{% endfor %}
</div>
</section>