maj grav
This commit is contained in:
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
@@ -27,6 +27,7 @@ function click_link() {
|
||||
},
|
||||
complete: function(data) {
|
||||
console.log('cat', cat);
|
||||
// animate();
|
||||
click_img(e, $this, $href, url, page, cat, project_name);
|
||||
}
|
||||
});
|
||||
@@ -39,7 +40,6 @@ function click_list() {
|
||||
|
||||
$link.click(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var $this = $(this);
|
||||
$href = $this.attr("href");
|
||||
url = $href.split("/");
|
||||
@@ -53,18 +53,24 @@ function click_list() {
|
||||
|
||||
if ($link_txt.hasClass('open') && $link_card.parent().hasClass('open') ) {
|
||||
|
||||
console.log('anchor');
|
||||
anchor($href);
|
||||
|
||||
}else if ($link_txt.hasClass('open')) {
|
||||
|
||||
anchor($href);
|
||||
$.ajax({
|
||||
url : '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
|
||||
type : 'GET', // Le type de la requête HTTP
|
||||
dataType:'html',
|
||||
success: function(data) {
|
||||
$('#item_list.'+cat+' .card-image.open #item').remove();
|
||||
$('#item_list.'+cat+' .card-image').removeClass('open');
|
||||
$(data).find('#item').addClass(cat).insertAfter($link_card);
|
||||
$link_card.parent().addClass('open');
|
||||
|
||||
},
|
||||
complete: function(data) {
|
||||
// animate();
|
||||
marg_item(project_name);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -77,7 +83,9 @@ function click_list() {
|
||||
success: function(data) {
|
||||
$(data).find('#item_list').addClass(cat).insertAfter($link_txt);
|
||||
$link_txt.addClass('open');
|
||||
|
||||
anchor($href);
|
||||
|
||||
$('.card a').click(function (e) {
|
||||
e.preventDefault()
|
||||
})
|
||||
@@ -104,11 +112,13 @@ function click_list() {
|
||||
$(data).find('#item').addClass(cat).insertAfter($link_card);
|
||||
$link_card.parent().addClass('open');
|
||||
},
|
||||
complete: function(data) {
|
||||
// animate();
|
||||
marg_item(project_name);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
}, 1500);
|
||||
|
||||
}, 900);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -116,7 +126,6 @@ function click_list() {
|
||||
}
|
||||
|
||||
function click_img(e, $this, $href, url, page, cat, project_name) {
|
||||
// $link_img = $('.card .card-image > a');
|
||||
$('section.' + cat +' .card-image > a').click(function(e) {
|
||||
var $this = $(this);
|
||||
$href = $this.attr("href");
|
||||
@@ -131,14 +140,18 @@ function click_img(e, $this, $href, url, page, cat, project_name) {
|
||||
$this.parent().removeClass('open');
|
||||
$($this.parent().find('#item.'+ cat)).remove();
|
||||
} else {
|
||||
|
||||
$.ajax({
|
||||
url : '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
|
||||
type : 'GET', // Le type de la requête HTTP
|
||||
dataType:'html',
|
||||
success: function(data) {
|
||||
$('#item_list.'+cat+' .card-image.open #item').remove();
|
||||
$('#item_list.'+cat+' .card-image').removeClass('open');
|
||||
|
||||
$(data).find('#item').addClass(cat).insertAfter($this);
|
||||
$this.parent().addClass('open');
|
||||
marg_item(project_name);
|
||||
anchor($href);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -149,11 +162,74 @@ function click_img(e, $this, $href, url, page, cat, project_name) {
|
||||
function anchor($href) {
|
||||
|
||||
var aTag = $("a[href='"+ $href +"']");
|
||||
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
|
||||
// console.log('aTag.offset()', aTag.offset().top+10);
|
||||
$('html,body').animate({scrollTop: aTag.offset().top-7},'slow');
|
||||
|
||||
}
|
||||
|
||||
function animate() {
|
||||
var $item_list = $('#item_list .card > .card-image');
|
||||
$item_list.fadeIn( "slow" );
|
||||
}
|
||||
|
||||
function marg_item(project_name) {
|
||||
|
||||
var $item = $('.card-image#'+project_name+' #item');
|
||||
var $item_offset = $item.offset().left-8;
|
||||
var $card = $item.parents('.card');
|
||||
|
||||
var $item_list = $item.parents('#item_list');
|
||||
var pos_card = $card.offset().left;
|
||||
|
||||
var margin_right = $item_list.width() - (pos_card + $card.width());
|
||||
|
||||
console.log('$card.width()',$card.width());
|
||||
console.log('pos_card',pos_card);
|
||||
|
||||
console.log('$item_list',$item_list.width());
|
||||
|
||||
$item.css('margin-left', '-'+$item_offset +'px');
|
||||
// $item.parents('.card').css('margin-right', margin_right);
|
||||
}
|
||||
|
||||
function mouseHover() {
|
||||
|
||||
$link_cat = $('#text_figli p > a');
|
||||
|
||||
$link_cat.mouseenter(function() {
|
||||
link_id = $(this).attr("id");
|
||||
|
||||
$('html').append("<div class=circle_hover ></div>");
|
||||
console.log('link_id',link_id);
|
||||
|
||||
setTimeout(function () {
|
||||
$('.circle_hover').addClass('open '+ link_id);
|
||||
}, 10);
|
||||
|
||||
mousePos();
|
||||
|
||||
})
|
||||
.mouseleave(function() {
|
||||
$('html').find(".circle_hover").remove();
|
||||
});
|
||||
|
||||
function mousePos() {
|
||||
var currentMousePos = { x: 0, y: 0 };
|
||||
var $circle = $('.circle_hover');
|
||||
|
||||
$(document).mousemove(function(event) {
|
||||
currentMousePos.x = event.pageX;
|
||||
currentMousePos.y = event.pageY;
|
||||
|
||||
$circle.css('left', currentMousePos.x );
|
||||
$circle.css('top', currentMousePos.y );
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$(document).ready(function($){
|
||||
click_link();
|
||||
click_list();
|
||||
mouseHover();
|
||||
});
|
||||
|
||||
@@ -8,7 +8,7 @@ $txt-figli: 2.5rem;
|
||||
|
||||
// line-height
|
||||
$Flhome: 3rem;
|
||||
|
||||
|
||||
$marg: 0.5rem;
|
||||
$margI: 1rem;
|
||||
$Wi: 80%;
|
||||
@@ -22,6 +22,9 @@ $txt-figli-m: 1.5rem;
|
||||
// line-height
|
||||
$Flhome-m: 2rem;
|
||||
$Wi-m:100%;
|
||||
$Wi80-m: calc(( 80% ));
|
||||
$Wi33-m: calc(( 100% / 3 ) - (#{$margI} / 2));
|
||||
|
||||
|
||||
// tablette
|
||||
$txt-figli-t: 2.5rem;
|
||||
@@ -29,18 +32,7 @@ $txt-figli-t: 2.5rem;
|
||||
// line-height
|
||||
$Flhome-t: 3rem;
|
||||
|
||||
// :root {
|
||||
// --color: red;
|
||||
// }
|
||||
//
|
||||
// :root .category{
|
||||
// --color:blue;
|
||||
// }
|
||||
//
|
||||
// .card{
|
||||
// color: var(--color);
|
||||
// }
|
||||
//
|
||||
// :root .category{
|
||||
// color: var(--color);
|
||||
// }
|
||||
// color
|
||||
$color_publique: lightyellow;
|
||||
$color_sociale: lightgreen;
|
||||
$color_culturelle: lightblue;
|
||||
|
||||
@@ -5,9 +5,10 @@
|
||||
@import 'theme/reset';
|
||||
@import 'theme/typography';
|
||||
|
||||
@import 'theme/animation';
|
||||
@import 'theme/header';
|
||||
@import 'theme/start';
|
||||
@import 'theme/sidebar';
|
||||
@import 'theme/blog';
|
||||
@import 'theme/item';
|
||||
@import 'theme/mobile';
|
||||
@import 'theme/mobile';
|
||||
|
||||
@@ -1,23 +1,66 @@
|
||||
.default-animation {
|
||||
transition: all 0.5s ease;
|
||||
$animate: all 0.2s ease-in-out;
|
||||
|
||||
#text_figli{
|
||||
z-index: 999;
|
||||
p{
|
||||
& > a{
|
||||
z-index: 999;
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
width: 0px;
|
||||
height: 1px;
|
||||
margin: 1px 0 0;
|
||||
transition: $animate;
|
||||
transition-duration: 0.3s;
|
||||
opacity: 0;
|
||||
background-color: black;
|
||||
}
|
||||
&::before{
|
||||
left: 50%;
|
||||
}
|
||||
&:after{
|
||||
right: 50%;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
&:before,
|
||||
&:after {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pulse Animation
|
||||
.pulse {
|
||||
animation-name: pulse_animation;
|
||||
animation-duration: 2000ms;
|
||||
transform-origin:70% 70%;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
@keyframes pulse_animation {
|
||||
0% { transform: scale(1); }
|
||||
30% { transform: scale(1); }
|
||||
40% { transform: scale(1.08); }
|
||||
50% { transform: scale(1); }
|
||||
60% { transform: scale(1); }
|
||||
70% { transform: scale(1.05); }
|
||||
80% { transform: scale(1); }
|
||||
100% { transform: scale(1); }
|
||||
.circle_hover{
|
||||
position: absolute;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
background: $color_culturelle;
|
||||
border-radius: 500px;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 0;
|
||||
transition: height .2s, width .2s;
|
||||
&.open{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transition: height .5s, width .5s;
|
||||
}
|
||||
&.publique{
|
||||
background: $color_publique;
|
||||
}
|
||||
&.sociale{
|
||||
background: $color_sociale;
|
||||
}
|
||||
&.culturelle{
|
||||
background: $color_culturelle;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
margin-bottom: $marg;
|
||||
}
|
||||
.card-image{
|
||||
img{
|
||||
img:not(:last-of-type){
|
||||
margin-bottom: $marg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,21 @@
|
||||
@media screen and (max-width: 414px) {
|
||||
body{
|
||||
#start{
|
||||
width: $Wi-m;
|
||||
#text_figli{
|
||||
#item_list{
|
||||
.card{
|
||||
width: $Wi-m;
|
||||
#item{
|
||||
width: calc(100% + (.5rem * 3));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// typographie
|
||||
header{
|
||||
a{
|
||||
@@ -39,7 +56,7 @@
|
||||
|
||||
#item_list{
|
||||
.card{
|
||||
width: calc( #{$Wi-m} );
|
||||
width: calc( #{$Wi-m} )!important;
|
||||
&:nth-child(odd){
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -64,6 +81,23 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) and (orientation: portrait) {
|
||||
|
||||
body{
|
||||
#start{
|
||||
width: $Wi80-m;
|
||||
#text_figli{
|
||||
#item_list{
|
||||
.card{
|
||||
width: $Wi33-m;
|
||||
#item{
|
||||
width: calc(300% + (.5rem * 3));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// typographie
|
||||
header{
|
||||
a{
|
||||
@@ -71,12 +105,12 @@
|
||||
line-height: 3rem;
|
||||
}
|
||||
}
|
||||
.home{
|
||||
p{
|
||||
font-size: $txt-figli-t!important;
|
||||
line-height: $Flhome-t!important;
|
||||
}
|
||||
}
|
||||
// .home{
|
||||
// p{
|
||||
// font-size: $txt-figli-t!important;
|
||||
// line-height: $Flhome-t!important;
|
||||
// }
|
||||
// }
|
||||
.other_projets{
|
||||
h3{
|
||||
font-size: $txt-figli-t;
|
||||
@@ -105,9 +139,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 812px) and (orientation: landscape) {
|
||||
@@ -222,3 +253,21 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) and (orientation: landscape) {
|
||||
body{
|
||||
#start{
|
||||
width: $Wi80-m;
|
||||
#text_figli{
|
||||
#item_list{
|
||||
.card{
|
||||
width: $Wi33-m;
|
||||
#item{
|
||||
width: calc(300% + (.5rem * 3));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.sidebar-right{
|
||||
position: fixed;
|
||||
width: 20%;
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@@ -22,6 +22,33 @@
|
||||
}
|
||||
a{
|
||||
color: grey;
|
||||
&::before{
|
||||
content: " ";
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
&#culturelle{
|
||||
&::before{
|
||||
background: $color_culturelle;
|
||||
}
|
||||
}
|
||||
&#sociale{
|
||||
&::before{
|
||||
background: $color_sociale;
|
||||
}
|
||||
}
|
||||
&#publique{
|
||||
&::before{
|
||||
background: $color_publique;
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, header{
|
||||
background: #f9f9f9fe;
|
||||
}
|
||||
@@ -12,7 +13,7 @@ body{
|
||||
#text_figli{
|
||||
p {
|
||||
a{
|
||||
position: relative;
|
||||
// position: relative;
|
||||
&.marg{
|
||||
margin-right: $marg;
|
||||
}
|
||||
@@ -20,20 +21,37 @@ body{
|
||||
}
|
||||
#item_list{
|
||||
width: 80vw;
|
||||
margin-top: 0.5rem;
|
||||
.card{
|
||||
width: calc((100% / 5) - ( #{$marg} * 2) );
|
||||
height: auto;
|
||||
// overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
line-height: 0;
|
||||
margin-right: $marg;
|
||||
position: relative;
|
||||
margin-top: $marg;
|
||||
margin: 0 $marg $marg 0;
|
||||
height: 100%;
|
||||
& > .card-image{
|
||||
&.open{
|
||||
a{
|
||||
img{
|
||||
filter: grayscale(0);
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a{
|
||||
display: block;
|
||||
border-radius: 15px;
|
||||
overflow: auto;
|
||||
img{
|
||||
filter: grayscale(1);
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
}
|
||||
.card-header{
|
||||
width: 100%;
|
||||
padding: $marg;
|
||||
flex-wrap: wrap;
|
||||
display: none;
|
||||
& > *{
|
||||
font-size: 0.8rem;
|
||||
@@ -42,12 +60,15 @@ body{
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
a{
|
||||
display: block;
|
||||
img{
|
||||
filter: grayscale(0);
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
}
|
||||
.card-header{
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
padding: $marg;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
position: absolute;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
@@ -56,25 +77,69 @@ body{
|
||||
vertical-align: baseline!important;
|
||||
}
|
||||
#item{
|
||||
width: calc( 307% - #{$marg} );
|
||||
width: calc( 500% + ( #{$marg} * 5) );
|
||||
padding: 2rem;
|
||||
margin-top: $marg;
|
||||
border-radius: 15px;
|
||||
.content-title{
|
||||
margin: 30px auto;
|
||||
margin: 0 auto 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
a{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.e-content{
|
||||
margin: 30px auto;
|
||||
margin: 1rem auto 2rem auto;
|
||||
p{
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
}
|
||||
&.publique{
|
||||
background: $color_publique;
|
||||
|
||||
}
|
||||
&.sociale{
|
||||
background: $color_sociale;
|
||||
|
||||
}
|
||||
&.culturelle{
|
||||
background: $color_culturelle;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.publique{
|
||||
.card{
|
||||
&:hover{
|
||||
.card-header{
|
||||
background: $color_publique;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.sociale{
|
||||
.card{
|
||||
&:hover{
|
||||
.card-header{
|
||||
background: $color_sociale;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.culturelle{
|
||||
.card{
|
||||
&:hover{
|
||||
.card-header{
|
||||
background: $color_culturelle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.home){
|
||||
#start{
|
||||
|
||||
@@ -42,23 +42,52 @@ header{
|
||||
font-family: $avara;
|
||||
}
|
||||
}
|
||||
#item{
|
||||
.e-content{
|
||||
p{
|
||||
font-size: 1rem;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#item{
|
||||
.content-title{
|
||||
display: flex;
|
||||
margin: $marg 0;
|
||||
& > * {
|
||||
margin-right: $marg;
|
||||
font-size: 1.15rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
h2{
|
||||
width: auto;
|
||||
line-height: 4rem!important;
|
||||
font-size: 4rem!important;
|
||||
font-weight: normal!important;
|
||||
}
|
||||
span{
|
||||
font-size: 1rem;
|
||||
}
|
||||
&.publique{
|
||||
h2{
|
||||
font-family: $playfair;
|
||||
}
|
||||
span{
|
||||
font-family: $playfair;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
&.sociale{
|
||||
h2{
|
||||
font-family: $syne;
|
||||
}
|
||||
span{
|
||||
font-family: $syne;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
&.culturelle{
|
||||
h2{
|
||||
margin: 0 $marg 0 0;
|
||||
a{
|
||||
font-weight: bold;
|
||||
}
|
||||
font-family: $avara;
|
||||
}
|
||||
span{
|
||||
font-family: $avara;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -77,8 +106,8 @@ a.culturelle, span.culturelle{
|
||||
|
||||
.sidebar-right{
|
||||
ul, a{
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.25rem;
|
||||
font-size: 0.7rem;
|
||||
line-height: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -23,7 +23,6 @@
|
||||
{% block javascripts %}
|
||||
{% do assets.addJs('jquery', 101) %}
|
||||
{% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{{ assets.js()|raw }}
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<div class="content-title">
|
||||
{% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
|
||||
{% include 'partials/blog/taxonomy.html.twig' %}
|
||||
{% include 'partials/blog/date.html.twig' %}
|
||||
<div>
|
||||
{% include 'partials/blog/taxonomy.html.twig' %}
|
||||
{% include 'partials/blog/date.html.twig' %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="e-content">
|
||||
|
||||
@@ -13,13 +13,12 @@
|
||||
{% if page.header.title %}
|
||||
{% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
|
||||
{% endif %}
|
||||
{% if page.header.taxonomy.tag %}
|
||||
{% include 'partials/blog/taxonomy.html.twig' %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.header.taxonomy.tag %}
|
||||
{% include 'partials/blog/taxonomy.html.twig' %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.header.date %}
|
||||
{% include 'partials/blog/date.html.twig' %}
|
||||
{% endif %}
|
||||
{% if page.header.date %}
|
||||
{% include 'partials/blog/date.html.twig' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
{% if page.header.continue_link is not same as(false) %}
|
||||
<a href="{{ page.url }}"><i></i></a>
|
||||
{% endif %}
|
||||
<a href="{{ page.header.link }}">{{ page.title }}</a>
|
||||
{{ page.title }}
|
||||
</{{ title_level }}>
|
||||
{% else %}
|
||||
<{{ title_level }}><a href="{{ page.url }}">{{ page.title }}</a></{{ title_level }}>
|
||||
<{{ title_level }}>{{ page.title }}</{{ title_level }}>
|
||||
{% endif %}
|
||||
|
||||
+1
-1
Submodule user/themes/quark updated: 78a931745d...3a832dc0a7
Reference in New Issue
Block a user