add anime+boucleproj
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
title: Burodesformes
|
||||
default_lang: fr
|
||||
author:
|
||||
name: 'Gilles Acezat'
|
||||
name: 'Gilles Acézat'
|
||||
email: burodesformes@yahoo.fr
|
||||
taxonomies:
|
||||
- category
|
||||
@@ -16,4 +16,4 @@ summary:
|
||||
blog:
|
||||
route: /blog
|
||||
header:
|
||||
status: 'Designer graphique'
|
||||
status: 'Design graphique'
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: 'Nom du projets'
|
||||
media_order: logo-Alliance_gris.png
|
||||
mea: false
|
||||
taxonomy:
|
||||
category:
|
||||
- logo
|
||||
tag:
|
||||
- mea
|
||||
---
|
||||
|
||||
cfecb dcbfh obd cobydez cydze bd
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@@ -2,6 +2,7 @@
|
||||
title: 'Projet N°1'
|
||||
media_order: 'ouvrage Edith.jpg,affiche_grainesdelecteurs_2014.jpg'
|
||||
mea: true
|
||||
meaimg: 'ouvrage Edith.jpg'
|
||||
taxonomy:
|
||||
category:
|
||||
- Éditions
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: 'projet n°2'
|
||||
media_order: 'brochure ESADHaR 2017.jpg'
|
||||
mea: true
|
||||
meaimg: 'brochure ESADHaR 2017.jpg'
|
||||
taxonomy:
|
||||
category:
|
||||
- Éditions
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: 'projet n°3'
|
||||
media_order: 'ouvrage Edith 2.jpg,brochure ESADHaR 2017.jpg,Cartevoeux2018_bdf.jpg,FLYER carnaval Colombelle.jpg,FLYER RDV.jpg'
|
||||
mea: true
|
||||
meaimg: 'ouvrage Edith 2.jpg'
|
||||
taxonomy:
|
||||
category:
|
||||
- logo
|
||||
|
||||
@@ -3,7 +3,7 @@ title: Contact
|
||||
---
|
||||
|
||||
**GILLES ACÉZAT**
|
||||
3 ru d'Épernon
|
||||
3 rue d'Épernon
|
||||
76600 Le Havre - France
|
||||
+33(0)6 30 55 30 72
|
||||
+33(0)2 31 73 35 96
|
||||
|
||||
@@ -16,7 +16,13 @@ form:
|
||||
0: PLUGIN_ADMIN.NO
|
||||
validate:
|
||||
type: bool
|
||||
|
||||
|
||||
header.meaimg:
|
||||
type: filepicker
|
||||
folder: '@self'
|
||||
preview_images: true
|
||||
label: Sélectionnez une image
|
||||
|
||||
blog:
|
||||
type: tab
|
||||
title: Blog Item
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Executable
+223
@@ -0,0 +1,223 @@
|
||||
(function( $ ) {
|
||||
|
||||
$.fn.blockScroll = function(options) {
|
||||
var settings = $.extend({
|
||||
// These are the defaults.
|
||||
startDiv : 1,
|
||||
fadeDuration : "slow",
|
||||
paddingRatio : 0.05,
|
||||
triggerRatio : 0.005,
|
||||
scrollDuration: "fast",
|
||||
fadeBlocks: true
|
||||
}, options );
|
||||
|
||||
if(settings.triggerRatio > settings.paddingRatio*.95) { settings.triggerRatio = settings.paddingRatio*.95 }
|
||||
|
||||
var theDivs = this.children().filter("div");
|
||||
var activeDiv = settings.startDiv-1; //Active did is 0-index, settings is 1-index
|
||||
var windowHeight;
|
||||
var paddingHeight;
|
||||
var triggerHeight;
|
||||
var currentDownTrigger;
|
||||
var currentUpTrigger;
|
||||
var totalDivs = theDivs.length;
|
||||
var lastScrollPos;
|
||||
var activelyScrolling = false;
|
||||
var activeBackground= 0;
|
||||
|
||||
// Ensure that all of the elements are hidden just in case the css is not setup properly
|
||||
if(settings.fadeBlocks)
|
||||
{
|
||||
this.children().each(function() {
|
||||
$(this).css('opacity','0');
|
||||
});
|
||||
}
|
||||
|
||||
arrange();
|
||||
// Fade in the first div
|
||||
$(theDivs[activeDiv]).animate({opacity: 1},settings.fadeDuration,'linear', function() {
|
||||
$(window).scrollTop(0);
|
||||
calcTriggers();
|
||||
bindEvents();
|
||||
lastScrollPos = $(window).scrollTop();
|
||||
});
|
||||
|
||||
function bindEvents()
|
||||
{
|
||||
$(window).on('scroll', function(e) {
|
||||
var scrollPosition = $(window).scrollTop();
|
||||
var scrollDistance = $(window).height();
|
||||
var indexOfClosest = 0;
|
||||
|
||||
theDivs.each(function(index, element) {
|
||||
var $this = $(this);
|
||||
var topPosition = $this.offset().top;
|
||||
var newScrollDistance = Math.abs(scrollPosition - topPosition);
|
||||
if(newScrollDistance < scrollDistance)
|
||||
{
|
||||
indexOfClosest = index;
|
||||
scrollDistance = newScrollDistance;
|
||||
}
|
||||
});
|
||||
gotoDiv(indexOfClosest);
|
||||
}, 250);
|
||||
|
||||
$(window).resize(function() {
|
||||
arrange();
|
||||
});
|
||||
|
||||
$("#block-up-arrow").click(function() {
|
||||
goUp();
|
||||
});
|
||||
|
||||
$("#block-down-arrow").click(function() {
|
||||
goDown();
|
||||
});
|
||||
|
||||
$(document).keydown(function(e){
|
||||
if (e.keyCode == 37 || e.keyCode == 38) {
|
||||
goUp();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (e.keyCode == 39 || e.keyCode == 40) {
|
||||
goDown();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
$(window).bind('mousewheel', function(e){
|
||||
if(e.originalEvent.wheelDelta > 119) {
|
||||
goUp();
|
||||
}
|
||||
else if (e.originalEvent.wheelDelta < -119) {
|
||||
goDown();
|
||||
}
|
||||
});
|
||||
$(window).bind('DOMMouseScroll', function(e){
|
||||
if(e.originalEvent.detail < 0) {
|
||||
goUp();
|
||||
}
|
||||
else if (e.originalEvent.detail > 0) {
|
||||
goDown();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function goUp()
|
||||
{
|
||||
if(activeDiv > 0 && !activelyScrolling)
|
||||
{
|
||||
gotoDiv(activeDiv-1);
|
||||
}
|
||||
}
|
||||
|
||||
function goDown()
|
||||
{
|
||||
if(activeDiv < totalDivs - 1 && !activelyScrolling)
|
||||
{
|
||||
gotoDiv(activeDiv+1);
|
||||
}
|
||||
}
|
||||
|
||||
function gotoDiv(number)
|
||||
{
|
||||
if(number == 0)
|
||||
$("#block-up-arrow").hide();
|
||||
else
|
||||
$("#block-up-arrow").show();
|
||||
if(number == totalDivs-1)
|
||||
$("#block-down-arrow").hide();
|
||||
else
|
||||
$("#block-down-arrow").show();
|
||||
activeDiv = number;
|
||||
activelyScrolling = true;
|
||||
$('html, body').animate({scrollTop: $(theDivs[activeDiv]).offset().top}, settings.scrollDuration, 'linear', function() {
|
||||
$(theDivs[activeDiv]).animate({opacity: 1}, settings.fadeDuration,'linear', function() {
|
||||
setTimeout(function(){
|
||||
activelyScrolling = false; lastScrollPos = $(window).scrollTop();
|
||||
},50);
|
||||
});
|
||||
});
|
||||
calcTriggers();
|
||||
}
|
||||
|
||||
function calcTriggers()
|
||||
{
|
||||
if (activeDiv < totalDivs -1)
|
||||
{
|
||||
currentDownTrigger = $(theDivs[activeDiv+1]).offset().top;
|
||||
} else {
|
||||
currentDownTrigger = -1;
|
||||
}
|
||||
|
||||
if (activeDiv > 0) {
|
||||
currentUpTrigger = $(theDivs[activeDiv-1]).offset().top;
|
||||
} else {
|
||||
currentUpTrigger = -1;
|
||||
}
|
||||
}
|
||||
|
||||
function calcDims()
|
||||
{
|
||||
windowHeight = $(window).height();
|
||||
paddingHeight = windowHeight * settings.paddingRatio;
|
||||
triggerHeight = windowHeight * settings.triggerRatio;
|
||||
}
|
||||
|
||||
|
||||
function arrange()
|
||||
{
|
||||
calcDims();
|
||||
theDivs.each(function(index, element) {
|
||||
var $this = $(this);
|
||||
$this.height('auto');
|
||||
if($this.height() < windowHeight)
|
||||
{
|
||||
var margin = windowHeight/2 - $this.height()/2;
|
||||
$this.height(windowHeight-margin);
|
||||
$this.css('padding-top', margin + "px");
|
||||
var $innerDiv = $($this.children().filter('div')[0]);
|
||||
// $innerDiv.css('padding-top', margin + "px");
|
||||
}
|
||||
if(index != totalDivs - 1)
|
||||
{
|
||||
//$this.css('padding-bottom',paddingHeight + 'px');
|
||||
}
|
||||
});
|
||||
gotoDiv(activeDiv);
|
||||
}
|
||||
|
||||
var gotoView = function(number)
|
||||
{
|
||||
gotoDiv(number-1);
|
||||
}
|
||||
|
||||
return {
|
||||
goto: gotoView
|
||||
};
|
||||
}
|
||||
|
||||
}( jQuery ));
|
||||
|
||||
;(function ($) {
|
||||
var on = $.fn.on, timer;
|
||||
$.fn.on = function () {
|
||||
var args = Array.apply(null, arguments);
|
||||
var last = args[args.length - 1];
|
||||
|
||||
if (isNaN(last) || (last === 1 && args.pop())) return on.apply(this, args);
|
||||
|
||||
var delay = args.pop();
|
||||
var fn = args.pop();
|
||||
|
||||
args.push(function () {
|
||||
var self = this, params = arguments;
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function () {
|
||||
fn.apply(self, params);
|
||||
}, delay);
|
||||
});
|
||||
|
||||
return on.apply(this, args);
|
||||
};
|
||||
}(this.jQuery || this.Zepto));
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
/*!
|
||||
* jQuery Mousewheel 3.1.13
|
||||
*
|
||||
* Copyright 2015 jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*/
|
||||
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
|
||||
@@ -0,0 +1,97 @@
|
||||
(function($){
|
||||
'use strict';
|
||||
$.fn.multipleFilterMasonry = function(options){
|
||||
var cache=[];
|
||||
var filters = [];
|
||||
|
||||
if(options.selectorType === 'list') {
|
||||
$(options.filtersGroupSelector).children().each(function() {
|
||||
filters.push($(this).data('filter'));
|
||||
});
|
||||
}
|
||||
|
||||
//the main job of the function is to cache the item,because we are going to filter the items later
|
||||
var init = function($container){
|
||||
$container.find(options.itemSelector).each(function(){
|
||||
cache.push($(this));
|
||||
});
|
||||
$container.masonry(options);
|
||||
};
|
||||
|
||||
//filter items in cache
|
||||
var filterItems = function(selector){
|
||||
var result=[];
|
||||
$(cache).each(function(item){
|
||||
$(selector).each(function(index,sel) {
|
||||
if(cache[item].is(sel)){
|
||||
if($.inArray(cache[item], result) === -1) result.push(cache[item]);
|
||||
}
|
||||
});
|
||||
});
|
||||
return result;
|
||||
};
|
||||
|
||||
//reload masonry
|
||||
var reload = function($container,items){
|
||||
$container.empty();
|
||||
$(items).each(function(){
|
||||
$($container).append($(this));
|
||||
});
|
||||
$container.masonry('reloadItems');
|
||||
$container.masonry();
|
||||
};
|
||||
|
||||
// Hash filter
|
||||
var hashFilter = function($container) {
|
||||
var hash = window.location.hash.replace("#", "");
|
||||
if($.inArray(hash, filters) !== -1) {
|
||||
reload($container, $('.' + hash));
|
||||
}
|
||||
};
|
||||
|
||||
var proc = function($container){
|
||||
$(options.filtersGroupSelector).find('input[type=checkbox]').each(function(){
|
||||
$(this).change(function(){
|
||||
var selector = [];
|
||||
$(options.filtersGroupSelector).find('input[type=checkbox]').each( function() {
|
||||
if ( $(this).is(':checked') ) {
|
||||
selector.push( '.' + $(this).val() );
|
||||
}
|
||||
});
|
||||
var items = cache;
|
||||
if (selector.length > 0) {
|
||||
items = filterItems(selector);
|
||||
}
|
||||
reload($container,items);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
var procUL = function($container){
|
||||
$(options.filtersGroupSelector).children().each(function(){
|
||||
$(this).click(function(){
|
||||
$(options.filtersGroupSelector).children().removeClass('selected');
|
||||
window.location.hash = $(this).data('filter');
|
||||
var selector = [];
|
||||
selector.push( '.' + $(this).data('filter') );
|
||||
$(this).addClass('selected');
|
||||
var items = cache;
|
||||
if (selector.length > 0) {
|
||||
items = filterItems(selector);
|
||||
}
|
||||
reload($container,items);
|
||||
});
|
||||
});
|
||||
|
||||
hashFilter($container);
|
||||
$(options.filtersGroupSelector).children().removeClass('selected');
|
||||
$('.filters li[data-filter='+window.location.hash.replace("#", "")+']').addClass('selected');
|
||||
};
|
||||
|
||||
return this.each(function() {
|
||||
var $$ = $(this);
|
||||
init($$);
|
||||
options.selectorType === 'list' ? procUL($$) : proc($$);
|
||||
});
|
||||
};
|
||||
}(window.jQuery));
|
||||
@@ -4,128 +4,97 @@ var $cat = $('.cat-list .cat a');
|
||||
var $img = $('.item #items .img');
|
||||
|
||||
function masonry() {
|
||||
var $grid = $cards.masonry({
|
||||
itemSelector: '.card',
|
||||
columnWidth: '.card',
|
||||
percentPosition: true,
|
||||
transitionDuration: '0.2s'
|
||||
});
|
||||
var $grid = $cards.masonry({
|
||||
itemSelector: '.card',
|
||||
columnWidth: '.card',
|
||||
percentPosition: true,
|
||||
gutter: 10,
|
||||
transitionDuration: '0.2s'
|
||||
});
|
||||
var $grid2 = $img.masonry({
|
||||
itemSelector: '.img-card',
|
||||
columnWidth: '.img-card',
|
||||
percentPosition: true,
|
||||
gutter: 10,
|
||||
transitionDuration: '0.2s'
|
||||
});
|
||||
$grid.imagesLoaded().progress(function() {
|
||||
$grid.masonry();
|
||||
});
|
||||
$grid2.imagesLoaded().progress(function() {
|
||||
$grid2.masonry();
|
||||
});
|
||||
}
|
||||
|
||||
var $grid2 = $img.masonry({
|
||||
itemSelector: '.img-card',
|
||||
columnWidth: '.img-card',
|
||||
percentPosition: true,
|
||||
gutter: 20,
|
||||
transitionDuration: '0.2s'
|
||||
});
|
||||
function filteritem() {
|
||||
var $container = $('#masonryContainer');
|
||||
|
||||
$grid.imagesLoaded().progress( function() {
|
||||
$grid.masonry();
|
||||
});
|
||||
|
||||
$grid2.imagesLoaded().progress( function() {
|
||||
$grid2.masonry();
|
||||
});
|
||||
$cards.multipleFilterMasonry({
|
||||
itemSelector: '.card',
|
||||
filtersGroupSelector: '.cat-list'
|
||||
});
|
||||
}
|
||||
|
||||
function contact() {
|
||||
var $contact = $('header .contact');
|
||||
var $contact = $('header .contact');
|
||||
|
||||
$contact.on('click', function() {
|
||||
if ($(this).hasClass('open')) {
|
||||
$(this).removeClass('open');
|
||||
$(this).addClass('close');
|
||||
} else {
|
||||
$(this).addClass('open');
|
||||
$(this).removeClass('close');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function customscroll() {
|
||||
var $page = $('#page-wrapper.blog')
|
||||
var $page_item = $("body.blog #start, body.item");
|
||||
|
||||
$("body").mCustomScrollbar({
|
||||
theme: "dark",
|
||||
scrollbarPosition: "outside",
|
||||
callbacks: {
|
||||
whileScrolling: function() {
|
||||
var pct = this.mcs.topPct;
|
||||
if (pct < 1) {
|
||||
$page.addClass("up");
|
||||
$page.removeClass("down");
|
||||
} else {
|
||||
$page.removeClass("up");
|
||||
$page.addClass("down")
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$page_item.mCustomScrollbar({
|
||||
theme: "dark",
|
||||
scrollbarPosition: "outside",
|
||||
scrollInertia: 1000,
|
||||
});
|
||||
}
|
||||
|
||||
function scrolltop() {
|
||||
var $top = $('.top');
|
||||
|
||||
$top.on('click', function(e) {
|
||||
// e.preventDefault()
|
||||
|
||||
$contact.on('click',function() {
|
||||
if ($(this).hasClass('open')) {
|
||||
$(this).removeClass('open');
|
||||
$(this).addClass('close');
|
||||
} else {
|
||||
$(this).addClass('open');
|
||||
$(this).removeClass('close');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function scroll() {
|
||||
// left: 37, up: 38, right: 39, down: 40,
|
||||
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
|
||||
if ($('#page-wrapper.blog').length > 0){
|
||||
jQuery(document).ready(function($) {
|
||||
masonry();
|
||||
filteritem();
|
||||
contact();
|
||||
customscroll();
|
||||
// scrolltop();
|
||||
|
||||
$(window).bind('mousewheel DOMMouseScroll', function(event){
|
||||
var $height = $(window).scrollTop();
|
||||
var $heightW = $(window).height();
|
||||
var wh = $heightW - $height;
|
||||
|
||||
var keys = {32: 1, 37: 1, 38: 1, 39: 1, 40: 1};
|
||||
|
||||
function preventDefault(e) {
|
||||
e = e || window.event;
|
||||
if (e.preventDefault)
|
||||
e.preventDefault();
|
||||
e.returnValue = false;
|
||||
}
|
||||
|
||||
function preventDefaultForScrollKeys(e) {
|
||||
if (keys[e.keyCode]) {
|
||||
preventDefault(e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function disablescroll() {
|
||||
if (window.addEventListener) // older FF
|
||||
window.addEventListener('DOMMouseScroll', preventDefault, false);
|
||||
window.onwheel = preventDefault; // modern standard
|
||||
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
|
||||
window.ontouchmove = preventDefault; // mobile
|
||||
document.ontouchmove = function(e) {
|
||||
var target = e.currentTarget;
|
||||
while(target) {
|
||||
if(checkIfElementShouldScroll(target))
|
||||
return;
|
||||
target = target.parentNode;
|
||||
}
|
||||
e.preventDefault();
|
||||
};
|
||||
document.onkeydown = preventDefaultForScrollKeys;
|
||||
}
|
||||
|
||||
function enableScroll() {
|
||||
if (window.removeEventListener)
|
||||
window.removeEventListener('DOMMouseScroll', preventDefault, false);
|
||||
window.onmousewheel = document.onmousewheel = null;
|
||||
window.onwheel = null;
|
||||
window.ontouchmove = null;
|
||||
document.onkeydown = null;
|
||||
var aTag = $("#start");
|
||||
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
|
||||
}
|
||||
|
||||
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
|
||||
if (wh > 0) {
|
||||
console.log('up');
|
||||
$('.blog header').removeClass('hide');
|
||||
$('.blog #start').removeClass('visible');
|
||||
// disablescroll();
|
||||
// setTimeout(enableScroll, 500);
|
||||
$('.blog #start #items').removeClass('fixed');
|
||||
}
|
||||
}else {
|
||||
if (wh > 0) {
|
||||
console.log('down');
|
||||
$('.blog header').addClass('hide');
|
||||
$('.blog #start').addClass('visible');
|
||||
disablescroll();
|
||||
setTimeout(enableScroll, 500);
|
||||
$('.blog #start #items').addClass('fixed');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
jQuery(document).ready(function($){
|
||||
masonry();
|
||||
contact();
|
||||
scroll();
|
||||
$(window).load(function(){
|
||||
$('html, body').scrollTop(0);
|
||||
});
|
||||
// $(window).load(function() {
|
||||
// $('html, body').scrollTop(0);
|
||||
// });
|
||||
|
||||
});
|
||||
|
||||
+61
-58
@@ -7,29 +7,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes translatep1{
|
||||
0%{
|
||||
transform: translateY(35px);
|
||||
}
|
||||
|
||||
100%{
|
||||
transform: translateY(5px);
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translatep2{
|
||||
0%{
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100%{
|
||||
transform: translateY(40px);
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translateright{
|
||||
0%{
|
||||
right: -50px;
|
||||
@@ -67,59 +44,85 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes height{
|
||||
@keyframes reducH{
|
||||
0%{
|
||||
height: 50vh;
|
||||
min-height: 250px;
|
||||
font-size: $fh1;
|
||||
-webkit-text-stroke : 1px;
|
||||
color: transparent;
|
||||
line-height: 5rem;
|
||||
}
|
||||
|
||||
70%{
|
||||
-webkit-text-stroke : 1px;
|
||||
color: black;
|
||||
// line-height: 6.5rem;
|
||||
|
||||
}
|
||||
|
||||
100%{
|
||||
height: 0;
|
||||
min-height: 100px;
|
||||
font-size: $min-h1;
|
||||
-webkit-text-stroke : 0px;
|
||||
color: black;
|
||||
line-height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes margin{
|
||||
@keyframes translateY{
|
||||
0%{
|
||||
margin-top: 25vh;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
100%{
|
||||
margin-top: 0px;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes h1{
|
||||
0%{
|
||||
font-size: 11.2vw;
|
||||
}
|
||||
100%{
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes card{
|
||||
0%{}
|
||||
|
||||
50%{
|
||||
transform: translateY(-40px);
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100%{
|
||||
transform: translateY(-50px);
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes textestroke{
|
||||
@keyframes showcatlist {
|
||||
0%{
|
||||
-webkit-text-stroke : 1px;
|
||||
width: 0;
|
||||
box-shadow: 0px 0px 0px 0px black;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100%{
|
||||
-webkit-text-stroke : 0px;
|
||||
width: 100%;
|
||||
box-shadow: 0px -2px 0px -2px black;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes showborder {
|
||||
0%{
|
||||
width: 0;
|
||||
background: black;
|
||||
}
|
||||
100%{
|
||||
width: 100%;
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ultranslate {
|
||||
0%{
|
||||
opacity: 0;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes showcard {
|
||||
0%{
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
}
|
||||
+8
-1
@@ -18,6 +18,8 @@ html {
|
||||
font-size: 18px;
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Sections
|
||||
@@ -30,6 +32,8 @@ html {
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -46,7 +50,7 @@ main {
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-size: 3em;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
@@ -175,6 +179,9 @@ img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
iframe{
|
||||
border: none;
|
||||
}
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
+8
-7
@@ -6,15 +6,16 @@
|
||||
@include font-face($light, $file5, $typo, $category);//1
|
||||
|
||||
// font-size
|
||||
|
||||
$fh1: 11rem;
|
||||
$fh2:3rem;
|
||||
$fh2-i: 1.1rem;
|
||||
$fh1: 12vw;
|
||||
$fh2: 4.5vw;
|
||||
$fh2-i: 1rem;
|
||||
$fh3: 1rem;
|
||||
$fh5:0.8rem;
|
||||
$fh5: 0.8rem;
|
||||
$fp: 0.9rem;
|
||||
$fs:0.8rem;
|
||||
$fs-i: 1.1rem;
|
||||
$fs: 0.8rem;
|
||||
$fs-i: 1rem;
|
||||
$min-h1: 3rem;
|
||||
|
||||
// interline
|
||||
|
||||
//interlettre
|
||||
@@ -1,16 +1,16 @@
|
||||
@import 'theme/reset';
|
||||
@import 'theme/fonts';
|
||||
@import 'theme/variables';
|
||||
@import 'configurations/reset';
|
||||
@import 'configurations/fonts';
|
||||
@import 'configurations/variables';
|
||||
|
||||
@import 'theme/mixins';
|
||||
@import 'configurations/mixins';
|
||||
@import 'theme/typography';
|
||||
|
||||
@import 'theme/mCustomScrollbar';
|
||||
@import 'theme/animation';
|
||||
@import 'configurations/animation';
|
||||
|
||||
@import 'theme/all';
|
||||
@import 'theme/header';
|
||||
@import 'theme/home';
|
||||
@import 'theme/blog';
|
||||
@import 'theme/item';
|
||||
@import 'theme/footer';
|
||||
// @import 'theme/footer';
|
||||
|
||||
@@ -5,52 +5,32 @@ body{
|
||||
}
|
||||
#page-wrapper.blog{
|
||||
#start{
|
||||
position: relative;
|
||||
top: 200vh;
|
||||
height: calc(100% - 5rem);
|
||||
position: fixed;
|
||||
top: 100vh;
|
||||
left: 0;
|
||||
padding-top: 110px;
|
||||
opacity: 0;
|
||||
&.visible{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
#page-wrapper.down{
|
||||
#start{
|
||||
top: 5rem;
|
||||
}
|
||||
#items{
|
||||
.card{
|
||||
animation: showcard 1.5s 2.5s ease forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#items{
|
||||
.cat-list{
|
||||
padding: 0 5px;
|
||||
ul{
|
||||
li{
|
||||
display: flex;
|
||||
&::after{
|
||||
width: 5px;
|
||||
content: " ";
|
||||
}
|
||||
&:hover{
|
||||
&::after{
|
||||
content: "\002022";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.full-works{
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.card{
|
||||
opacity: 0;
|
||||
margin-bottom: 10px;
|
||||
min-width: 200px;
|
||||
}
|
||||
&.fixed{
|
||||
// .cat-list{
|
||||
// position: fixed;
|
||||
// top: 80px;
|
||||
// z-index: 999;
|
||||
// background: white;
|
||||
// }
|
||||
// .full-works{
|
||||
// margin-top: 60px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,175 +1,114 @@
|
||||
// home
|
||||
body{
|
||||
height: 100%;
|
||||
.blog{
|
||||
header{
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 2%;
|
||||
right: 2%;
|
||||
height: 100vh;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
& > section{
|
||||
height: 50vh;
|
||||
min-height: 250px;
|
||||
top: 0;
|
||||
left: 2%;
|
||||
right: 2%;
|
||||
&.works-mea{
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
margin-bottom: 20px;
|
||||
body {
|
||||
.blog {
|
||||
header {
|
||||
height:100vh;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-content: space-around;
|
||||
& > div{
|
||||
position: fixed;
|
||||
&.head{
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
padding-top: 70px;
|
||||
h2 {
|
||||
margin-left: 8px;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 0%;
|
||||
height: 1px;
|
||||
background: black;
|
||||
}
|
||||
|
||||
}
|
||||
&.works-mea {
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
align-self: flex-end;
|
||||
height: calc(100% - 20px);
|
||||
align-items: flex-end;
|
||||
.card{
|
||||
&:nth-child(2){
|
||||
margin:0 10px;
|
||||
}
|
||||
&:not(:nth-child(2)){
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.scroll{
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.reduc{
|
||||
-webkit-animation: reducfont 1s ease forwards;
|
||||
animation: reducfont 1s ease forwards;
|
||||
}
|
||||
}
|
||||
h1{
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
font-size: 11.2vw;
|
||||
line-height: 7vw!important;
|
||||
transition: top 1s ease;
|
||||
transition: font-size 1.2s ease, color 1.2s ease , top 1.2s ease;
|
||||
}
|
||||
h2{
|
||||
position: fixed;
|
||||
top:220px;
|
||||
font-size: 3.7vw;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: opacity 1s ease 1s, transform 1s ease 1s;
|
||||
}
|
||||
nav{
|
||||
// margin-top: 25vh; /* poussé de la moitié de hauteur de viewport */
|
||||
// -webkit-transform: translateY(-50%);
|
||||
// transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
|
||||
}
|
||||
.scroll{
|
||||
width: 50px;
|
||||
height: 15px;
|
||||
margin: 0 auto 10px auto;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
& > p:nth-child(1){
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
-webkit-animation: translatep1 2s infinite linear;
|
||||
animation: translatep1 2s infinite linear;
|
||||
}
|
||||
& > p:nth-child(2){
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
-webkit-animation: translatep1 2s infinite linear;
|
||||
animation: translatep1 2s infinite linear;
|
||||
-webkit-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
}
|
||||
&.hide{
|
||||
& > section:first-child{
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
background: white;
|
||||
z-index: 999;
|
||||
}
|
||||
nav{
|
||||
margin-top: 0;
|
||||
-webkit-transform: translate(0);
|
||||
transform: translate(0);
|
||||
-webkit-transition: margin-top 1s ease, -webkit-transform 1s ease;
|
||||
transition: margin-top 1s ease, -webkit-transform 1s ease;
|
||||
transition: margin-top 1s ease, transform 1s ease;
|
||||
transition: margin-top 1s ease, transform 1s ease, -webkit-transform 1s ease;
|
||||
}
|
||||
h1{
|
||||
position: relative;
|
||||
font-size: 3rem;
|
||||
top: 0px;
|
||||
color: black;
|
||||
transition: font-size 1.2s ease 0.5s, color 1.2s ease 1s, top 1.2s ease 0.5s;
|
||||
animation: textestroke 0.5s ease 1.2s forwards;
|
||||
}
|
||||
h2{
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
top:220px;
|
||||
-webkit-transition: opacity 0.5s ease, transform 0.5s ease;
|
||||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||
}
|
||||
.card{
|
||||
-webkit-animation: card 1s forwards ease;
|
||||
animation: card 1s forwards ease;
|
||||
}
|
||||
.scroll{
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.8s ease;
|
||||
transition: opacity 0.8s ease;
|
||||
&.down{
|
||||
header{
|
||||
height: 5rem;
|
||||
.head{
|
||||
padding:0;
|
||||
transition: all 1s 0.9s ease;
|
||||
&::after{
|
||||
animation: showborder 2.5s 1.5s ease forwards;
|
||||
}
|
||||
h2{
|
||||
opacity: 0;
|
||||
margin-left: -100px;
|
||||
transition: all 1s ease;
|
||||
left: -50%;
|
||||
}
|
||||
}
|
||||
.card{
|
||||
&:nth-child(1){
|
||||
animation: translateY 1s ease forwards;
|
||||
}
|
||||
&:nth-child(2){
|
||||
animation: translateY 1.3s ease forwards;
|
||||
}
|
||||
&:nth-child(3){
|
||||
animation: translateY 1.6s ease forwards;
|
||||
}
|
||||
}
|
||||
.scroll{
|
||||
opacity: 0;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// html{
|
||||
// overflow: hidden;
|
||||
// }
|
||||
// html, body {
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
//
|
||||
// }
|
||||
// body {
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// right: -30px;
|
||||
// bottom: 0;
|
||||
// padding-right: 15px;
|
||||
// overflow-y: scroll;
|
||||
// }
|
||||
|
||||
|
||||
// page
|
||||
body{
|
||||
& > .item{
|
||||
header{
|
||||
height: 130px;
|
||||
position: relative;
|
||||
nav{
|
||||
position: absolute;
|
||||
margin-top: 65px; /* poussé de la moitié de hauteur de viewport */
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
|
||||
}
|
||||
h1{
|
||||
color: black;
|
||||
}
|
||||
h2{
|
||||
display: none;
|
||||
}
|
||||
.scroll{
|
||||
display: none;
|
||||
}
|
||||
body {
|
||||
#page-wrapper.item {
|
||||
header {
|
||||
border-bottom: 1px solid black;
|
||||
position: fixed;
|
||||
height: 112px;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
background: white;
|
||||
z-index: 999;
|
||||
nav {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: black;
|
||||
}
|
||||
|
||||
h2, .scroll {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,42 +1,62 @@
|
||||
#body-wrapper{
|
||||
#items{
|
||||
.works-mea{
|
||||
display: inline-flex;
|
||||
.blog{
|
||||
#start{
|
||||
.cat-list {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
align-items: flex-end;
|
||||
.card{
|
||||
.card-image{
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
z-index: 999;
|
||||
left: -100%;
|
||||
&::before{
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 0%;
|
||||
height: 1px;
|
||||
background: black;
|
||||
}
|
||||
&::after {
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 0%;
|
||||
height: 1px;
|
||||
background: black;
|
||||
}
|
||||
ul {
|
||||
opacity: 0;
|
||||
display: inline-flex;
|
||||
margin: 10px 0;
|
||||
.btn-group{
|
||||
display: flex;
|
||||
margin-right: 10px;
|
||||
&::after{
|
||||
width: 5px;
|
||||
content: " ";
|
||||
}
|
||||
&:hover{
|
||||
&::after{
|
||||
content: "\002022";
|
||||
}
|
||||
}
|
||||
input{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.card-header{
|
||||
margin-top: 5px;
|
||||
}
|
||||
.card-footer{
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cat-list{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-top: 1px solid black;
|
||||
border-bottom: 1px solid black;
|
||||
padding: 10px 0;
|
||||
margin: 20px 0;
|
||||
ul{
|
||||
display: inline-flex;
|
||||
li{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#items{
|
||||
.full-works{
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
.card{
|
||||
width: calc((100vw / 3) - 6.5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.down{
|
||||
.cat-list{
|
||||
left: 0;
|
||||
&::after{
|
||||
animation: showborder 2.5s 1.6s ease forwards;
|
||||
}
|
||||
ul{
|
||||
animation: ultranslate 1s 2.5s ease forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ h1, h2{
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
h2{
|
||||
font-size: $fh2;
|
||||
}
|
||||
@@ -24,6 +23,7 @@ p{
|
||||
font-family: $Regular;
|
||||
font-weight: normal;
|
||||
font-size: $fp;
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
|
||||
time{
|
||||
@@ -31,127 +31,70 @@ time{
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
header{
|
||||
.contact{
|
||||
h3{
|
||||
text-transform: lowercase;
|
||||
color:white;
|
||||
.blog{
|
||||
h1{
|
||||
font-size: $fh1;
|
||||
line-height: 5rem;
|
||||
-webkit-text-stroke: 2px black;
|
||||
color: transparent;
|
||||
}
|
||||
h2{
|
||||
line-height: 8rem;
|
||||
}
|
||||
&.down{
|
||||
h1{
|
||||
animation: reducH 1s 0.9s ease forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll{
|
||||
p{
|
||||
font-size: $fs;
|
||||
font-family: $bold;
|
||||
font-weight: normal;
|
||||
.item{
|
||||
h2{
|
||||
font-size: $fh2-i;
|
||||
}
|
||||
.prev-next{
|
||||
a{
|
||||
.title{
|
||||
font-family: $medium;
|
||||
font-size: $fh2-i;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category{
|
||||
a{
|
||||
font-family: $Regular;
|
||||
font-size: $fs-i;
|
||||
}
|
||||
}
|
||||
|
||||
time{
|
||||
font-size: $fs-i;
|
||||
}
|
||||
|
||||
.tags{
|
||||
font-family: $Regular;
|
||||
font-size: $fs-i;
|
||||
}
|
||||
|
||||
#page-wrapper.blog{
|
||||
.works-mea, #items{
|
||||
.category{
|
||||
a{
|
||||
font-family: $Regular;
|
||||
font-size: $fs;
|
||||
}
|
||||
}
|
||||
time{
|
||||
font-size: $fs;
|
||||
}
|
||||
.tags{
|
||||
font-size: $fs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cat-list{
|
||||
.cat{
|
||||
a{
|
||||
font-family: $light;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
&>.blog{
|
||||
h1{
|
||||
font-size: $fh1;
|
||||
-webkit-text-stroke:.1rem #111;
|
||||
color: transparent;
|
||||
line-height: 7rem;
|
||||
}
|
||||
.card{
|
||||
h5{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.card-category{
|
||||
font-family: $italic;
|
||||
font-weight: normal;
|
||||
font-size: $fs;
|
||||
}
|
||||
.card-date{
|
||||
font-size: $fs;
|
||||
}
|
||||
.card-footer{
|
||||
span{
|
||||
font-family: $medium;
|
||||
font-weight: normal;
|
||||
font-size: $fs;
|
||||
text-transform: capitalize;
|
||||
a{
|
||||
color: $grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
& >.item{
|
||||
h1{
|
||||
font-size: $fh2;
|
||||
}
|
||||
h2{
|
||||
font-size: $fh2-i;
|
||||
}
|
||||
.content-item{
|
||||
.content-title{
|
||||
& > a{
|
||||
font-family: $italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
.category{
|
||||
font-family: $italic;
|
||||
font-weight: normal;
|
||||
font-size: $fs-i;
|
||||
}
|
||||
time{
|
||||
font-size: $fs;
|
||||
font-size: $fs-i;
|
||||
}
|
||||
.tags{
|
||||
font-family: $medium;
|
||||
font-weight: normal;
|
||||
font-size: 0.8rem;
|
||||
text-transform: capitalize;
|
||||
a{
|
||||
color: $grey;
|
||||
}
|
||||
}
|
||||
.top{
|
||||
p{
|
||||
font-family: $bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prev-next{
|
||||
.title{
|
||||
font-family: $bold;
|
||||
font-size: $fs;
|
||||
}
|
||||
.tags{
|
||||
font-family: $italic;
|
||||
font-size: $fs!important;
|
||||
}
|
||||
.blog-date{
|
||||
time{
|
||||
font-family: $italic;
|
||||
font-size: $fs!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top{
|
||||
p{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
font-family: $Regular;
|
||||
}
|
||||
|
||||
@@ -1,30 +1,72 @@
|
||||
body{
|
||||
padding: 0 2%;
|
||||
html, body{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blog{
|
||||
height: 100%;
|
||||
&.down{
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
header{
|
||||
.contact{
|
||||
z-index: 9999;
|
||||
width: 90px;
|
||||
height: auto;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 2%;
|
||||
transform: scale(1);
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transition: -webkit-transform 0.5s ease;
|
||||
transition: -webkit-transform 0.5s ease;
|
||||
transition: transform 0.5s ease;
|
||||
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
-webkit-transition: -webkit-transform 0.5s ease;
|
||||
transition: -webkit-transform 0.5s ease;
|
||||
transition: transform 0.5s ease;
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
|
||||
-webkit-transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
svg{
|
||||
cursor: pointer;
|
||||
-webkit-animation: rotation 6s infinite linear;
|
||||
animation: rotation 6s infinite linear;
|
||||
}
|
||||
h3{
|
||||
color: white;
|
||||
-webkit-transform: rotate(35deg);
|
||||
transform: rotate(35deg);
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 19px;
|
||||
}
|
||||
.txt{
|
||||
position: fixed;
|
||||
right: -200px;
|
||||
display: none;
|
||||
}
|
||||
&.open{
|
||||
transform: scale(15);
|
||||
-webkit-transform: scale(15);
|
||||
transform: scale(15);
|
||||
height: auto;
|
||||
-webkit-transition: -webkit-transform 0.5s ease;
|
||||
transition: -webkit-transform 0.5s ease;
|
||||
transition: transform 0.5s ease;
|
||||
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
|
||||
h3{
|
||||
color: transparent;
|
||||
left: 500px;
|
||||
-webkit-transition: visibility 0.5 ease left 1s ease;
|
||||
transition: visibility 0.5 ease left 1s ease;
|
||||
}
|
||||
img{
|
||||
animation: rotation 12s infinite linear;
|
||||
svg{
|
||||
-webkit-animation: rotation 12s infinite linear;
|
||||
animation: rotation 12s infinite linear;
|
||||
}
|
||||
& + .txt{
|
||||
position: fixed;
|
||||
@@ -32,66 +74,77 @@ header{
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
z-index: 9999;
|
||||
animation: translateright 1s ease forwards;
|
||||
-webkit-animation: translateright 1s ease forwards;
|
||||
animation: translateright 1s ease forwards;
|
||||
}
|
||||
}
|
||||
&.close{
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transition: -webkit-transform 0.5s 0.1s ease;
|
||||
transition: -webkit-transform 0.5s 0.1s ease;
|
||||
transition: transform 0.5s 0.1s ease;
|
||||
transition: transform 0.5s 0.1s ease, -webkit-transform 0.5s 0.1s ease;
|
||||
& + .txt{
|
||||
position: fixed;
|
||||
top: 190px;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
z-index: 9999;
|
||||
animation: translateleft 1s ease forwards;
|
||||
-webkit-animation: translateleft 1s ease forwards;
|
||||
animation: translateleft 1s ease forwards;
|
||||
}
|
||||
h3{
|
||||
color: white;
|
||||
left: 20px;
|
||||
|
||||
|
||||
-webkit-transition: color 0.5s 0.5s ease, left 0.5s ease;
|
||||
transition: color 0.5s 0.5s ease, left 0.5s ease;
|
||||
}
|
||||
&:hover{
|
||||
-webkit-transition: -webkit-transform 0.5s ease!important;
|
||||
transition: -webkit-transform 0.5s ease!important;
|
||||
transition: transform 0.5s ease!important;
|
||||
transform: scale(0.9)!important;
|
||||
transition: transform 0.5s ease, -webkit-transform 0.5s ease!important;
|
||||
-webkit-transform: scale(0.9)!important;
|
||||
transform: scale(0.9)!important;
|
||||
}
|
||||
}
|
||||
img{
|
||||
animation: rotation 6s infinite linear;
|
||||
}
|
||||
h3{
|
||||
transform: rotate(35deg);
|
||||
position: absolute;
|
||||
top: 33px;
|
||||
left: 20px;
|
||||
}
|
||||
& + .txt{
|
||||
position: fixed;
|
||||
right: -200px;
|
||||
p{
|
||||
}
|
||||
}
|
||||
}
|
||||
h2{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.card{
|
||||
width: calc(100% / 3);
|
||||
padding: 0 10px;
|
||||
line-height: 0.8!important;
|
||||
width: calc((100% / 3));
|
||||
line-height: 0.8rem!important;
|
||||
.card-header{
|
||||
margin-top: 10px;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
& > div{
|
||||
margin-right: 5px;
|
||||
& > a{
|
||||
vertical-align: baseline;
|
||||
}
|
||||
& > time{
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.works-mea{
|
||||
& > div:last-child{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.card{
|
||||
width: calc((100% / 2) - 5px );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.works-mea{
|
||||
& > div:nth-child(2){
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.card{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,27 @@
|
||||
body{
|
||||
& >.item{
|
||||
#page-wrapper.item{
|
||||
margin: 0 10px;
|
||||
.contact{
|
||||
.txt{display: none}
|
||||
}
|
||||
#start{
|
||||
margin-top: 112px;
|
||||
}
|
||||
#body-wrapper.blog-listing{
|
||||
border-top: 1px solid black;
|
||||
padding-top: 20px;
|
||||
.img-card{
|
||||
width: 49%;
|
||||
margin-bottom: 20px;
|
||||
width: calc((100% / 3) - 6.5px);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.header-item{
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
padding-top: 20px;
|
||||
.title{
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
h2{
|
||||
margin-right: 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
time{
|
||||
margin-right: 5px;
|
||||
@@ -23,15 +31,20 @@ body{
|
||||
}
|
||||
}
|
||||
.content{
|
||||
width: calc(100% / 3);
|
||||
margin: 20px 0;
|
||||
width: calc((100% / 3) - 15px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.prev-next{
|
||||
width: calc(100% / 3);
|
||||
padding-left: 20px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
top: calc( 50% + 10px );
|
||||
transform: translateY(-50%);
|
||||
right: 0px;
|
||||
.btn{
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
.btn-info{
|
||||
position: absolute;
|
||||
transform: rotate(-15deg);
|
||||
@@ -43,6 +56,7 @@ body{
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.top{
|
||||
@@ -59,3 +73,54 @@ body{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
body{
|
||||
#page-wrapper.item{
|
||||
#body-wrapper.blog-listing{
|
||||
.header-item{
|
||||
.content{
|
||||
width: calc((100% / 2) - 5px);
|
||||
}
|
||||
.prev-next{
|
||||
width: calc((100% / 2) - 5px);
|
||||
}
|
||||
}
|
||||
.img-card{
|
||||
width: calc((100% / 2) - 5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
body{
|
||||
#page-wrapper.item{
|
||||
#body-wrapper.blog-listing{
|
||||
.header-item{
|
||||
.content{
|
||||
width: calc((100%) - 15px);
|
||||
}
|
||||
.prev-next{
|
||||
width: calc((100%) - 15px);
|
||||
position: relative;
|
||||
transform: translateY(0%);
|
||||
.btn{
|
||||
.btn-info{
|
||||
display: none;
|
||||
}
|
||||
img{
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.img-card{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,11 +13,6 @@
|
||||
|
||||
{% embed 'partials/layout.html.twig' with {blog: page} %}
|
||||
{% block item %}
|
||||
<div class="cat-list">
|
||||
<ul>
|
||||
{% include 'partials/taxonomylist.html.twig' with {base_url: my_url, taxonomy: 'category', children_only: true} %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="works full-works">
|
||||
{% for child in collection if child.template == 'item' %}
|
||||
|
||||
@@ -19,7 +19,6 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block body %}
|
||||
<section id="body-wrapper" class="section blog-listing">
|
||||
<section class="container {{ grid_size }}">
|
||||
@@ -36,7 +35,6 @@
|
||||
{% include 'partials/sidebar.html.twig' %}
|
||||
{% endblock %}
|
||||
{% endembed %}
|
||||
|
||||
</section>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
@@ -25,11 +25,12 @@
|
||||
{% do assets.addJs('theme://js/jquery.easing.1.3.js', {group:'bottom'}) %}
|
||||
{% do assets.addJs('theme://js/imagesloaded.pkgd.min.js', {group:'bottom'}) %}
|
||||
{% do assets.addJs('theme://js/masonry.pkgd.min.js', {group:'bottom'}) %}
|
||||
{% do assets.addJs('theme://js/scrollreveal.js', {group:'bottom'}) %}
|
||||
{% do assets.addJs('theme://js/multipleFilterMasonry.js', {group:'bottom'}) %}
|
||||
{% do assets.addJs('theme://js/jquery.mCustomScrollbar.js', {group:'bottom'}) %}
|
||||
{% do assets.addJs('theme://js/jquery.mousewheel.min.js', {group:'bottom'}) %}
|
||||
{% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
{{ assets.js()|raw }}
|
||||
|
||||
@@ -37,37 +38,45 @@
|
||||
</head>
|
||||
|
||||
|
||||
<body id="top" >
|
||||
<body id="top" class="{{page.template}}">
|
||||
<div id="page-wrapper" class=" {{page.template}}">
|
||||
{% block header %}
|
||||
<header class="section">
|
||||
<section class="container {{ grid_size }}">
|
||||
<nav class="navbar">
|
||||
<div class="head">
|
||||
<nav class="title">
|
||||
<a href="/"><h1>{{site.title|capitalize}}</h1>
|
||||
<h2>{{site.header.status|upper}}</h2></a>
|
||||
</nav>
|
||||
<div class="contact">
|
||||
<img src="user/themes/gilles_acezat/images/contact.svg" alt="">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<polygon points="34.2,87.4 12.3,65.5 12.3,34.5 34.2,12.6 65.2,12.6 87.1,34.5 87.1,65.5 65.2,87.4" fill="black"/>
|
||||
</svg>
|
||||
|
||||
<h3>Contact</h3>
|
||||
{% include 'partials/navigation.html.twig' %}
|
||||
</div>
|
||||
{% include 'partials/navigation.html.twig' %}
|
||||
</section>
|
||||
<section class="works works-mea">
|
||||
</div>
|
||||
<div class="works works-mea">
|
||||
{% for child in collection %}
|
||||
{% set mea = child.header.mea == 'true' %}
|
||||
{% if mea %}
|
||||
{% include 'partials/blog-list-item.html.twig' with {blog: page, page: child} %}
|
||||
{% include 'partials/blog-list-mea.html.twig' with {blog: page, page: child} %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</section>
|
||||
</div>
|
||||
<div class="scroll">
|
||||
<p>scroll</p>
|
||||
<p>scroll</p>
|
||||
</div>
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
||||
<section id="start" class="section">
|
||||
<div class="cat-list btn-toolbar">
|
||||
<ul>
|
||||
{% include 'partials/taxonomylist.html.twig' with {base_url: my_url, taxonomy: 'category', children_only: true} %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% block body %}
|
||||
<section id="body-wrapper">
|
||||
<section>
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
{% if not hero_image_name %}
|
||||
|
||||
|
||||
|
||||
<div class="header-item">
|
||||
|
||||
|
||||
|
||||
<div class="title">
|
||||
{% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
|
||||
{% if page.header.subtitle %}
|
||||
@@ -48,15 +54,15 @@
|
||||
{% endif %}
|
||||
|
||||
{% if page.isLast %}
|
||||
|
||||
<a class="cc" href="/">
|
||||
<div class="btn-info">
|
||||
|
||||
<span class="title">Home</span>
|
||||
|
||||
</div>
|
||||
<img src="user/themes/gilles_acezat/images/arrow.svg" alt="">
|
||||
</a>
|
||||
{% set parent = page.parent %}
|
||||
{% for item in parent.collection.slice(0, 1) %}
|
||||
<a class="cc" href="{{item.url}}">
|
||||
<div class="btn-info">
|
||||
<span class="title">Home</span>
|
||||
</div>
|
||||
<img src="user/themes/gilles_acezat/images/arrow.svg" alt="">
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% for category in page.taxonomy.category %}
|
||||
<div class="card {{ category }}" data-category= "{{ category }}">
|
||||
<div class="card {{ category }}">
|
||||
|
||||
{% set image = page.media.images|first %}
|
||||
{% if image %}
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
{% for category in page.taxonomy.category %}
|
||||
<div class="card {{ category }}">
|
||||
|
||||
<div class="card-image">
|
||||
<a href="{{ page.url }}"><img src="{{page.url}}/{{page.header.meaimg}}" alt="{{page.header.meaimg}}"></a>
|
||||
</div>
|
||||
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
{% include 'partials/blog/title.html.twig' with {title_level: 'h5'} %}
|
||||
</div>
|
||||
|
||||
|
||||
{% if page.taxonomy.category %}
|
||||
<div class="card-category">
|
||||
{% include 'partials/blog/category.html.twig' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if page.date %}
|
||||
<div class="card-date">
|
||||
{% include 'partials/blog/date.html.twig' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if page.taxonomy.tag %}
|
||||
<div class="card-footer">
|
||||
{% include 'partials/blog/taxonomy.html.twig' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
@@ -1,11 +1,11 @@
|
||||
{% set title_level = title_level ?: 'h2' %}
|
||||
{% if page.header.link %}
|
||||
<{{ title_level }}>
|
||||
<{{ title_level }}>
|
||||
{% if page.header.continue_link is not same as(false) %}
|
||||
<a href="{{ page.url }}"><i class="fa fa-angle-double-right u-url"></i></a>
|
||||
{% endif %}
|
||||
<a href="{{ page.header.link }}" class="u-url">{{ page.title }}</a>
|
||||
</{{ title_level }}>
|
||||
{% else %}
|
||||
<{{ title_level }}><a href="{{ page.url }}">{{ page.title }}</a></{{ title_level }}>
|
||||
<a href="{{ page.url }}"><{{ title_level }}>{{ page.title }}</{{ title_level }}></a>
|
||||
{% endif %}
|
||||
|
||||
@@ -3,10 +3,11 @@
|
||||
{% if taxlist %}
|
||||
{% for tax,value in taxlist[taxonomy] %}
|
||||
{% set label_class = uri.param(taxonomy) == tax ? 'label-primary' : 'label-secondary' %}
|
||||
<li class="cat">
|
||||
<a class="label label-rounded {{ label_class }}" href="{{ base_url }}/{{ taxonomy }}{{ config.system.param_sep }}{{ tax }}">
|
||||
{{ tax }}
|
||||
</a>
|
||||
</li>
|
||||
<div data-toggle="buttons" class="btn-group">
|
||||
<label class="btn btn-default">
|
||||
<input type="checkbox" value="{{ tax }}" >
|
||||
{{tax}}
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user