pagehome+pageprojet

This commit is contained in:
2018-08-21 14:40:31 +02:00
parent 86273530e4
commit 93665e5bf4
34 changed files with 1037 additions and 64 deletions
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -1 +1 @@
@font-face{font-family:Roboto-Light;src:url(../fonts/roboto_light/Roboto-Light-webfont.eot);src:url(../fonts/roboto_light/Roboto-Light-webfont.eot?#iefix) format('embedded-opentype'),url(../fonts/roboto_light/Roboto-Light-webfont.woff) format('woff'),url(../fonts/roboto_light/Roboto-Light-webfont.ttf) format('truetype'),url(../fonts/roboto_light/Roboto-Light-webfont.svg#Roboto-Light) format('svg')}@font-face{font-family:Roboto-regular;src:url(../fonts/roboto_regular/Roboto-Regular-webfont.eot);src:url(../fonts/roboto_regular/Roboto-Regular-webfont.eot?#iefix) format('embedded-opentype'),url(../fonts/roboto_regular/Roboto-Regular-webfont.woff) format('woff'),url(../fonts/roboto_regular/Roboto-Regular-webfont.ttf) format('truetype'),url(../fonts/roboto_regular/Roboto-Regular-webfont.svg#Roboto-regular) format('svg')}@font-face{font-family:Roboto-Medium;src:url(../fonts/roboto_medium/Roboto-Medium-webfont.eot);src:url(../fonts/roboto_medium/Roboto-Medium-webfont.eot?#iefix) format('embedded-opentype'),url(../fonts/roboto_medium/Roboto-Medium-webfont.woff) format('woff'),url(../fonts/roboto_medium/Roboto-Medium-webfont.ttf) format('truetype'),url(../fonts/roboto_medium/Roboto-Medium-webfont.svg#Roboto-Medium) format('svg')}@font-face{font-family:Roboto-Bold;src:url(../fonts/roboto_bold/Roboto-Bold-webfont.eot);src:url(../fonts/roboto_bold/Roboto-Bold-webfont.eot?#iefix) format('embedded-opentype'),url(../fonts/roboto_bold/Roboto-Bold-webfont.woff) format('woff'),url(../fonts/roboto_bold/Roboto-Bold-webfont.ttf) format('truetype'),url(../fonts/roboto_bold/Roboto-Bold-webfont.svg#Roboto-Bold) format('svg')}*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{font-size:100%;margin:0;padding:0;vertical-align:baseline;border:0}body,html{font-size:16px}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;margin:0}ol,ul{list-style:none}a{text-decoration:none;color:#000}blockquote,q{quotes:none}img{width:100%;height:auto;vertical-align:bottom}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-spacing:0;border-collapse:collapse}h1 a{font-family:Roboto-regular;font-size:1rem}h2 a{font-family:Roboto-Medium;font-size:1.5rem;color:#fff}nav li a{font-family:Roboto-regular;font-size:.9rem;text-transform:uppercase}p{font-family:Roboto-Light;font-size:.8rem}header{position:fixed;top:0;display:-ms-flexbox;display:flex;width:100%;height:35px;background-color:#fff;-ms-flex-pack:justify;justify-content:space-between}header ul{display:-ms-flexbox;display:flex}header ul.tags{display:none}header ul.visible{display:-ms-flexbox;display:flex}#start{margin-top:35px}#start .item{display:-ms-flexbox;display:flex}#start .item .card{position:relative;width:calc(100% / 3)}#start .item .card .card-image{background-color:#0f0}#start .item .card .card-image img{transition:all .6s;opacity:.95;mix-blend-mode:multiply}#start .item .card .card-title{position:absolute;top:50%;left:50%;transform:translateX(-50%)}#start #items .content-item .e-content{display:-ms-flexbox;display:flex}#start #items .content-item .media{width:calc((100% / 3) + (100% / 3))}#start #items .content-item .txt{position:fixed;right:0;width:calc(100% / 3);height:100%}#start #items .content-item .txt .taxonomy{position:fixed;bottom:0}
@font-face{font-family:Roboto-Light;src:url(../fonts/roboto_light/Roboto-Light-webfont.eot);src:url(../fonts/roboto_light/Roboto-Light-webfont.eot?#iefix) format('embedded-opentype'),url(../fonts/roboto_light/Roboto-Light-webfont.woff) format('woff'),url(../fonts/roboto_light/Roboto-Light-webfont.ttf) format('truetype'),url(../fonts/roboto_light/Roboto-Light-webfont.svg#Roboto-Light) format('svg')}@font-face{font-family:Roboto-regular;src:url(../fonts/roboto_regular/Roboto-Regular-webfont.eot);src:url(../fonts/roboto_regular/Roboto-Regular-webfont.eot?#iefix) format('embedded-opentype'),url(../fonts/roboto_regular/Roboto-Regular-webfont.woff) format('woff'),url(../fonts/roboto_regular/Roboto-Regular-webfont.ttf) format('truetype'),url(../fonts/roboto_regular/Roboto-Regular-webfont.svg#Roboto-regular) format('svg')}@font-face{font-family:Roboto-Medium;src:url(../fonts/roboto_medium/Roboto-Medium-webfont.eot);src:url(../fonts/roboto_medium/Roboto-Medium-webfont.eot?#iefix) format('embedded-opentype'),url(../fonts/roboto_medium/Roboto-Medium-webfont.woff) format('woff'),url(../fonts/roboto_medium/Roboto-Medium-webfont.ttf) format('truetype'),url(../fonts/roboto_medium/Roboto-Medium-webfont.svg#Roboto-Medium) format('svg')}@font-face{font-family:Roboto-Bold;src:url(../fonts/roboto_bold/Roboto-Bold-webfont.eot);src:url(../fonts/roboto_bold/Roboto-Bold-webfont.eot?#iefix) format('embedded-opentype'),url(../fonts/roboto_bold/Roboto-Bold-webfont.woff) format('woff'),url(../fonts/roboto_bold/Roboto-Bold-webfont.ttf) format('truetype'),url(../fonts/roboto_bold/Roboto-Bold-webfont.svg#Roboto-Bold) format('svg')}*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{font-size:100%;margin:0;padding:0;vertical-align:baseline;border:0}body,html{font-size:16px;line-height:16px}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{margin:0}ol,ul{list-style:none}a{text-decoration:none;color:#000}blockquote,q{quotes:none}img{width:100%;height:auto;vertical-align:bottom}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-spacing:0;border-collapse:collapse}h1 a{font-family:Roboto-regular;font-size:1rem;font-weight:400}h2 a{font-family:Roboto-Medium;font-size:1.5rem;color:#fff;weight:normal}h3{font-family:Roboto-regular;font-size:.8rem;text-transform:uppercase}h3 a{background:#0f0;weight:normal}nav li a{font-family:Roboto-regular;font-size:.9rem;text-transform:uppercase;weight:normal}p{font-family:Roboto-Light;font-size:.8rem;margin-bottom:10px}p a{background:#0f0;weight:normal}.taxonomy a{font-family:Roboto-regular;font-size:.9rem;text-transform:uppercase;weight:normal}header{position:fixed;top:0;display:-ms-flexbox;display:flex;width:100%;height:35px;padding:0 20px;border-bottom:2px solid #000;background-color:#fff;-ms-flex-pack:justify;justify-content:space-between}header h1{margin:auto 0}header nav{margin:auto 0}header ul{display:-ms-flexbox;display:flex}header ul li{margin:0 35px}header ul.tags{display:none}header ul.visible{display:-ms-flexbox;display:flex}#start{margin-top:35px}#start .item{display:-ms-flexbox;display:flex}#start .item .card{position:relative;overflow-y:hidden;width:calc(100% / 3);padding-bottom:5px}#start .item .card .card-image:hover{transition:all .5s;background-color:#0f0}#start .item .card .card-image:hover img{transition:all .6s;opacity:.95;mix-blend-mode:multiply}#start .item .card .card-image:hover~.card-title{top:50%;left:50%;transition:all 1s;opacity:1}#start .item .card .card-title{position:absolute;top:105%;left:50%;transition:all 1s;transform:translate(-50%,-50%);pointer-events:none;opacity:0}#start .content-item .e-content{display:-ms-flexbox;display:flex}#start .content-item .media{width:calc((100% / 4) * (3))}#start .content-item .content .txt{position:fixed;right:0;overflow-x:auto;width:calc(100% / 4);height:calc(100% - 70px);padding:0 10px 0 20px}#start .content-item .content .txt h3{margin:20px 0 10px 0}#start .content-item .content .taxonomy{position:fixed;bottom:0;display:-ms-flexbox;display:flex;width:100%;height:35px;padding:0 10px 0 20px;border-top:2px solid #000;background:#fff}#start .content-item .content .taxonomy span{margin:auto 0}#start .content-item .content .taxonomy span a{margin-left:5px}
@@ -14,6 +14,8 @@ $category: "sans-serif";
font: {
@if $category != "" {
family: "#{$roboto_light}", #{$category};
weight: normal;
}
@else {
family: "#{$roboto_light}";
@@ -39,6 +41,8 @@ $family2: "roboto_regular/";
font: {
@if $category != "" {
family: "#{$roboto_regular}", #{$category};
weight: normal;
}
@else {
family: "#{$roboto_regular}";
@@ -63,6 +67,8 @@ $family3: "roboto_medium/";
font: {
@if $category != "" {
family: "#{$roboto_medium}", #{$category};
weight: normal;
}
@else {
family: "#{$roboto_medium}";
@@ -3,11 +3,22 @@ header{
width: 100%;
height: 35px;
top: 0;
padding: 0 20px;
display: flex;
justify-content: space-between;
background-color: white;
border-bottom: 2px solid rgb(0,0,0);
h1{
margin: auto 0;
}
nav{
margin: auto 0;
}
ul{
display: flex;
li{
margin: 0 35px;
}
}
ul.tags{
display: none;
+1 -1
View File
@@ -25,6 +25,7 @@ time, mark, audio, video {
html, body{
font-size: 16px;
line-height: 16px;
}
/* HTML5 display-role reset for older browsers */
@@ -34,7 +35,6 @@ footer, header, hgroup, menu, nav, section {
}
body {
line-height: 1;
margin: 0;
}
+51 -22
View File
@@ -1,44 +1,73 @@
#start{
margin-top: 35px;
//home
.item{
display: flex;
.card{
position: relative;
width: calc(100% / 3);
.card-image{
overflow-y: hidden;
padding-bottom: 5px;
.card-image:hover{
transition: all 0.5s;
background-color: rgb(0, 255, 0);
img{
transition: all .6s;
mix-blend-mode: multiply;
// filter: contrast(10) grayscale(1);
opacity: .95;
img{
transition: all .6s;
mix-blend-mode: multiply;
opacity: .95;
}
& ~ .card-title{
top: 50%;
left: 50%;
opacity: 1;
transition: all 1s;
}
}
.card-title{
pointer-events: none;
position: absolute;
top: 50%;
top: 105%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all 1s;
transform: translate(-50%, -50%);
}
}
}
#items{
.content-item{
.e-content{
display: flex;
}
.media{
width: calc((100% / 3) + (100% / 3));
}
//pageprojet
.content-item{
.e-content{
display: flex;
}
.media{
width: calc((100% / 4) * (3));
}
.content{
.txt{
position: fixed;
right: 0;
height: 100%;
width: calc(100% / 3);
.taxonomy{
position:fixed;
bottom: 0;
width: calc(100% / 4);
height: calc(100% - 70px);
padding: 0 10px 0 20px;
overflow-x: auto;
h3{
margin: 20px 0 10px 0;
}
}
.taxonomy{
display: flex;
width: 100%;
height: 35px;
background: white;
padding: 0 10px 0 20px;
position:fixed;
bottom: 0;
border-top: 2px solid black;
span{
margin: auto 0;
a{
margin-left: 5px;
}
}
}
}
@@ -2,6 +2,7 @@ h1{
a{
font-family: $roboto_regular;
font-size: 1rem;
font-weight: normal;
}
}
@@ -10,6 +11,18 @@ h2{
font-family:$roboto_medium;
color: white;
font-size:1.5rem;
weight: normal;
}
}
h3{
font-family: $roboto_regular;
font-size: 0.8rem;
text-transform: uppercase;
a{
background: rgb(0,255,0);
weight: normal;
}
}
@@ -19,6 +32,8 @@ nav{
font-family:$roboto_regular;
font-size:0.9rem;
text-transform: uppercase;
weight: normal;
}
}
}
@@ -26,4 +41,20 @@ nav{
p{
font-family: $roboto_light;
font-size: 0.8rem;
margin-bottom: 10px;
a{
background: rgb(0,255,0);
weight: normal;
}
}
.taxonomy{
a{
font-family:$roboto_regular;
font-size:0.9rem;
text-transform: uppercase;
weight: normal;
}
}
@@ -1,14 +1,5 @@
<div class="content-item">
{% if not hero_image_name %}
<div class="content-title">
{% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
{% if page.header.subtitle %}
<h3 >{{ page.header.subtitle }}</h3>
{% endif %}
</div>
{% endif %}
<div class="e-content">
<div class="media">
{% for image in page.media.images %}
@@ -16,8 +7,12 @@
{% endfor %}
</div>
<div class="txt">
{{ page.content }}
<div class="content">
<div class="txt">
<h3><a href="{{ page.url }}">{{header.title}}</a></h3>
{{ page.content }}
</div>
<div class="taxonomy">
{% include 'partials/blog/taxonomy.html.twig' %}
@@ -28,7 +23,7 @@
</div>
<p class="prev-next">
<!-- <p class="prev-next">
{% if not page.isLast %}
<a class="btn prev" href="{{ page.prevSibling.url }}">{{ 'BLOG.ITEM.PREV_POST'|t}}</a>
@@ -37,4 +32,4 @@
{% if not page.isFirst %}
<a class="btn next" href="{{ page.nextSibling.url }}">{{ 'BLOG.ITEM.NEXT_POST'|t }}</i></a>
{% endif %}
</p>
</p> -->
@@ -3,7 +3,7 @@
{% if image %}
<div class="card-image">
<a href="{{ page.url }}">{{ image.cropZoom(800,400).html }}</a>
<a href="{{ page.url }}">{{ image.cropZoom(800,600).html }}</a>
</div>
{% endif %}