pagehome+pageprojet
This commit is contained in:
File diff suppressed because one or more lines are too long
+1
-1
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user