maj
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
File diff suppressed because one or more lines are too long
@@ -0,0 +1,51 @@
|
||||
/* -- Filter Plugin -- */
|
||||
(function ($) {
|
||||
'use strict';
|
||||
$.fn.masonryFilter = function (options) {
|
||||
//reload masonry
|
||||
var reload = function ($container) {
|
||||
setTimeout(function () {
|
||||
$container.masonry("layout");
|
||||
}, 100);
|
||||
};
|
||||
|
||||
var process = function ($container) {
|
||||
var items = $container.masonry("getAllItems"),
|
||||
revealItems = [],
|
||||
hideItems = [];
|
||||
|
||||
$.each(items, function(i) {
|
||||
var item = items[i];
|
||||
var elm = $(item.element),
|
||||
shouldShow = options.filter && options.filter.call(elm);
|
||||
|
||||
if (shouldShow) {
|
||||
if (item.isHidden) {
|
||||
// -- Have to set this property so masonry does
|
||||
// not include hidden items when calling "layout"
|
||||
item.isIgnored = false;
|
||||
revealItems.push(item);
|
||||
}
|
||||
} else {
|
||||
if (!item.isHidden) {
|
||||
// -- Easier to set this property directy rather than
|
||||
// using the "ignore" method, as it takes in a DOM
|
||||
// element rather than the masonry item object.
|
||||
item.isIgnored = true;
|
||||
hideItems.push(item);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$container.masonry('hide', hideItems);
|
||||
$container.masonry('reveal', revealItems);
|
||||
|
||||
reload($container);
|
||||
};
|
||||
|
||||
return this.each(function () {
|
||||
var self = $(this);
|
||||
process(self);
|
||||
});
|
||||
};
|
||||
}(window.jQuery));
|
||||
+2905
-3
File diff suppressed because one or more lines are too long
@@ -4,35 +4,53 @@ var $cat = $('.cat-list .cat a');
|
||||
var $img = $('.item #items .img');
|
||||
|
||||
function masonry() {
|
||||
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 $grid = $cards.masonry({
|
||||
itemSelector: '.card',
|
||||
columnWidth: '.card',
|
||||
percentPosition: true,
|
||||
gutter: 10,
|
||||
isAnimated: true,
|
||||
transitionDuration: '0.5s'
|
||||
});
|
||||
|
||||
var $grid2 = $img.masonry({
|
||||
itemSelector: '.img-card',
|
||||
columnWidth: '.img-card',
|
||||
percentPosition: true,
|
||||
gutter: 10,
|
||||
transitionDuration: '0.2s'
|
||||
});
|
||||
|
||||
$(".cat-list .btn a").click(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
$('.active').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var filter = $(this).attr("data-filter");
|
||||
var self = $('#body-wrapper #items .full-works');
|
||||
|
||||
self.masonryFilter({
|
||||
filter: function () {
|
||||
if (!filter) return true;
|
||||
return $(this).attr("data-filter") == filter;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$grid.imagesLoaded().progress(function() {
|
||||
$grid.masonry();
|
||||
});
|
||||
|
||||
$grid2.imagesLoaded().progress(function() {
|
||||
$grid2.masonry();
|
||||
});
|
||||
}
|
||||
|
||||
function filteritem() {
|
||||
var $container = $('#masonryContainer');
|
||||
|
||||
$cards.multipleFilterMasonry({
|
||||
itemSelector: '.card',
|
||||
filtersGroupSelector: '.cat-list'
|
||||
});
|
||||
var $card = $('#body > .card');
|
||||
var $cat = $('.cat a');
|
||||
var $img = $('#body .img');
|
||||
}
|
||||
|
||||
function contact() {
|
||||
@@ -49,41 +67,41 @@ function contact() {
|
||||
})
|
||||
}
|
||||
|
||||
function customscroll() {
|
||||
var $page = $('#page-wrapper.blog')
|
||||
function customscroll($page_item) {
|
||||
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,
|
||||
callbacks: {
|
||||
onInit: function(){
|
||||
$('.top').on('click', function() {
|
||||
event.preventDefault()
|
||||
$page_item.mCustomScrollbar('scrollTo',['top',null]);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function scrolltop() {
|
||||
var $top = $('.top');
|
||||
|
||||
$top.on('click', function(e) {
|
||||
// e.preventDefault()
|
||||
|
||||
})
|
||||
$("body").mCustomScrollbar({
|
||||
theme: "dark",
|
||||
scrollbarPosition: "outside",
|
||||
callbacks: {
|
||||
whileScrolling: function() {
|
||||
var pct = this.mcs.topPct;
|
||||
if (pct < 1) {
|
||||
} else {
|
||||
$page.addClass("down");
|
||||
$page_item.mCustomScrollbar("disable",true);
|
||||
}
|
||||
setTimeout(function(){
|
||||
$page_item.mCustomScrollbar("update");
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
jQuery(document).ready(function($) {
|
||||
@@ -91,10 +109,5 @@ jQuery(document).ready(function($) {
|
||||
filteritem();
|
||||
contact();
|
||||
customscroll();
|
||||
// scrolltop();
|
||||
|
||||
// $(window).load(function() {
|
||||
// $('html, body').scrollTop(0);
|
||||
// });
|
||||
|
||||
});
|
||||
|
||||
@@ -1,3 +1,12 @@
|
||||
@-webkit-keyframes rotation {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
@@ -7,6 +16,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes translateright{
|
||||
0%{
|
||||
right: -50px;
|
||||
color: transparent;
|
||||
display: none;
|
||||
}
|
||||
|
||||
30%{
|
||||
right: 150px;
|
||||
color: transparent;
|
||||
display: block;
|
||||
}
|
||||
|
||||
100%{
|
||||
right: 200px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translateright{
|
||||
0%{
|
||||
right: -50px;
|
||||
@@ -26,6 +54,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes translateleft{
|
||||
0%{
|
||||
right: 200px;
|
||||
color: white;
|
||||
display: block;
|
||||
}
|
||||
30%{
|
||||
right: 150px;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
100%{
|
||||
right: -200px;
|
||||
color: transparent;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translateleft{
|
||||
0%{
|
||||
right: 200px;
|
||||
@@ -44,55 +90,119 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes reducH{
|
||||
@-webkit-keyframes reducH{
|
||||
0%{
|
||||
font-size: $fh1;
|
||||
-webkit-text-stroke : 1px;
|
||||
-webkit-text-stroke : 2px black;
|
||||
color: transparent;
|
||||
line-height: 5rem;
|
||||
}
|
||||
|
||||
70%{
|
||||
-webkit-text-stroke : 1px;
|
||||
-webkit-text-stroke : 1px black;
|
||||
color: black;
|
||||
// line-height: 6.5rem;
|
||||
|
||||
}
|
||||
|
||||
100%{
|
||||
font-size: $min-h1;
|
||||
-webkit-text-stroke : 0px;
|
||||
-webkit-text-stroke : 0px black;
|
||||
color: black;
|
||||
line-height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translateY{
|
||||
@keyframes reducH{
|
||||
0%{
|
||||
transform: translateY(0px);
|
||||
font-size: $fh1;
|
||||
-webkit-text-stroke : 2px black;
|
||||
color: transparent;
|
||||
line-height: 5rem;
|
||||
}
|
||||
|
||||
70%{
|
||||
-webkit-text-stroke : 1px black;
|
||||
color: black;
|
||||
}
|
||||
|
||||
100%{
|
||||
font-size: $min-h1;
|
||||
-webkit-text-stroke : 0px black;
|
||||
color: black;
|
||||
line-height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes translateY{
|
||||
0%{
|
||||
-webkit-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100%{
|
||||
transform: translateY(-20px);
|
||||
-webkit-transform: translateY(-20px);
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translateY{
|
||||
0%{
|
||||
-webkit-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100%{
|
||||
-webkit-transform: translateY(-20px);
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes showcatlist {
|
||||
0%{
|
||||
width: 0;
|
||||
-webkit-box-shadow: 0px 0px 0px 0px black;
|
||||
box-shadow: 0px 0px 0px 0px black;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100%{
|
||||
width: 100%;
|
||||
-webkit-box-shadow: 0px -2px 0px -2px black;
|
||||
box-shadow: 0px -2px 0px -2px black;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes showcatlist {
|
||||
0%{
|
||||
width: 0;
|
||||
box-shadow: 0px 0px 0px 0px black;
|
||||
-webkit-box-shadow: 0px 0px 0px 0px black;
|
||||
box-shadow: 0px 0px 0px 0px black;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100%{
|
||||
width: 100%;
|
||||
box-shadow: 0px -2px 0px -2px black;
|
||||
-webkit-box-shadow: 0px -2px 0px -2px black;
|
||||
box-shadow: 0px -2px 0px -2px black;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes showborder {
|
||||
0%{
|
||||
width: 0;
|
||||
background: black;
|
||||
}
|
||||
100%{
|
||||
width: 100%;
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes showborder {
|
||||
0%{
|
||||
width: 0;
|
||||
@@ -104,14 +214,41 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ultranslate {
|
||||
@-webkit-keyframes ultranslate {
|
||||
0%{
|
||||
opacity: 0;
|
||||
transform: translateX(0px);
|
||||
-webkit-transform: translateX(0px);
|
||||
transform: translateX(0px);
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
transform: translateX(10px);
|
||||
-webkit-transform: translateX(10px);
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ultranslate {
|
||||
0%{
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(0px);
|
||||
transform: translateX(0px);
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(10px);
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes showcard {
|
||||
0%{
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -13,4 +13,5 @@
|
||||
@import 'theme/home';
|
||||
@import 'theme/blog';
|
||||
@import 'theme/item';
|
||||
@import 'theme/mobile';
|
||||
// @import 'theme/footer';
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
body{
|
||||
#start{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#page-wrapper.blog{
|
||||
#start{
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 5rem);
|
||||
position: fixed;
|
||||
top: 100vh;
|
||||
left: 0;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
#page-wrapper.down{
|
||||
@@ -16,21 +17,23 @@ body{
|
||||
top: 5rem;
|
||||
}
|
||||
#items{
|
||||
-webkit-animation: showcard 1.5s 2.5s ease forwards;
|
||||
animation: showcard 1.5s 2.5s ease forwards;
|
||||
.card{
|
||||
animation: showcard 1.5s 2.5s ease forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#items{
|
||||
.full-works{
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.card{
|
||||
.blog{
|
||||
#items{
|
||||
opacity: 0;
|
||||
margin-bottom: 10px;
|
||||
min-width: 200px;
|
||||
.full-works{
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.card{
|
||||
margin-bottom: 10px;
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,114 +1,215 @@
|
||||
// home
|
||||
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;
|
||||
}
|
||||
|
||||
.blog {
|
||||
margin: 0 10px;
|
||||
header {
|
||||
height:100vh;
|
||||
width: calc(100% - 20px);
|
||||
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;
|
||||
-ms-flex-line-pack: distribute;
|
||||
align-content: space-around;
|
||||
& > div{
|
||||
position: fixed;
|
||||
width: calc(100% - 20px);
|
||||
&.head{
|
||||
z-index: 999;
|
||||
padding-top: 4vw;
|
||||
h2 {
|
||||
margin-left: 8px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
&.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;
|
||||
&::after {
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 0%;
|
||||
height: 1px;
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
&.works-mea {
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-ms-flex-item-align: end;
|
||||
align-self: flex-end;
|
||||
height: calc(100% - 20px);
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
.card{
|
||||
&:nth-child(2){
|
||||
margin:0 10px;
|
||||
}
|
||||
&:not(:nth-child(2)){
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.scroll{
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.down{
|
||||
header{
|
||||
height: 5rem;
|
||||
.head{
|
||||
padding:0;
|
||||
-webkit-transition: all 1s 0.9s ease;
|
||||
transition: all 1s 0.9s ease;
|
||||
&::after{
|
||||
-webkit-animation: showborder 2.5s 1.5s ease forwards;
|
||||
animation: showborder 2.5s 1.5s ease forwards;
|
||||
}
|
||||
h2{
|
||||
opacity: 0;
|
||||
left: -40%;
|
||||
-webkit-transition: left 3s linear, opacity 0.3s 0.1s ease;
|
||||
transition: left 3s linear, opacity 0.3s 0.1s ease;
|
||||
}
|
||||
}
|
||||
.card{
|
||||
&:nth-child(1){
|
||||
-webkit-animation: translateY 1s ease forwards;
|
||||
animation: translateY 1s ease forwards;
|
||||
}
|
||||
&:nth-child(2){
|
||||
-webkit-animation: translateY 1.3s ease forwards;
|
||||
animation: translateY 1.3s ease forwards;
|
||||
}
|
||||
&:nth-child(3){
|
||||
-webkit-animation: translateY 1.6s ease forwards;
|
||||
animation: translateY 1.6s ease forwards;
|
||||
}
|
||||
}
|
||||
&.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;
|
||||
}
|
||||
.scroll{
|
||||
opacity: 0;
|
||||
-webkit-transition: all 1s ease;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.contact{
|
||||
width: 90px;
|
||||
height: auto;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
-webkit-transition: width 0.5s ease;
|
||||
transition: width 0.5s ease;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
width: 80px;
|
||||
-webkit-transition: width 0.5s ease;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
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;
|
||||
}
|
||||
&.open{
|
||||
-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;
|
||||
}
|
||||
svg{
|
||||
-webkit-animation: rotation 12s infinite linear;
|
||||
animation: rotation 12s infinite linear;
|
||||
}
|
||||
.txt{
|
||||
position: fixed;
|
||||
color: white;
|
||||
-webkit-transform: scale(0.1);
|
||||
transform: scale(0.1);
|
||||
top: -10px;
|
||||
right: -20px;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
&.close{
|
||||
-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{
|
||||
top: 190px;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
z-index: 9999;
|
||||
-webkit-animation: translateleft 1s ease forwards;
|
||||
animation: translateleft 1s ease forwards;
|
||||
}
|
||||
h3{
|
||||
-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;
|
||||
transition: transform 0.5s ease, -webkit-transform 0.5s ease!important;
|
||||
-webkit-transform: scale(0.9)!important;
|
||||
transform: scale(0.9)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// page
|
||||
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;
|
||||
}
|
||||
}
|
||||
#page-wrapper.item {
|
||||
header {
|
||||
border-bottom: 1px solid black;
|
||||
position: fixed;
|
||||
height: 5rem;
|
||||
background: white;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
z-index: 999;
|
||||
h1 {
|
||||
color: black;
|
||||
line-height: 5rem;
|
||||
}
|
||||
h2, .scroll {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,9 +20,13 @@
|
||||
}
|
||||
ul {
|
||||
opacity: 0;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
margin: 10px 0;
|
||||
.btn-group{
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin-right: 10px;
|
||||
&::after{
|
||||
@@ -43,19 +47,20 @@
|
||||
#items{
|
||||
.full-works{
|
||||
.card{
|
||||
width: calc((100vw / 3) - 6.5px);
|
||||
width: calc( (100vw / 3 - calc( 41px / 3 ) ) );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.down{
|
||||
.cat-list{
|
||||
left: 0;
|
||||
&::after{
|
||||
animation: showborder 2.5s 1.6s ease forwards;
|
||||
-webkit-animation: showborder 2.5s 1.6s ease forwards;
|
||||
animation: showborder 2.5s 1.6s ease forwards;
|
||||
}
|
||||
ul{
|
||||
animation: ultranslate 1s 2.5s ease forwards;
|
||||
-webkit-animation: ultranslate 1s 2.5s ease forwards;
|
||||
animation: ultranslate 1s 2.5s ease forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,13 +17,14 @@ h5{
|
||||
font-size: $fh5;
|
||||
font-family: $bold;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p{
|
||||
font-family: $Regular;
|
||||
font-weight: normal;
|
||||
font-size: $fp;
|
||||
line-height: 1.3rem;
|
||||
line-height: 1.1rem;
|
||||
}
|
||||
|
||||
time{
|
||||
@@ -34,16 +35,17 @@ time{
|
||||
.blog{
|
||||
h1{
|
||||
font-size: $fh1;
|
||||
line-height: 5rem;
|
||||
line-height: 5vw;
|
||||
-webkit-text-stroke: 2px black;
|
||||
color: transparent;
|
||||
}
|
||||
h2{
|
||||
line-height: 8rem;
|
||||
line-height: 8vw;
|
||||
}
|
||||
&.down{
|
||||
h1{
|
||||
animation: reducH 1s 0.9s ease forwards;
|
||||
-webkit-animation: reducH 1s 0.9s ease forwards;
|
||||
animation: reducH 1s 0.9s ease forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -55,16 +57,23 @@ time{
|
||||
.prev-next{
|
||||
a{
|
||||
.title{
|
||||
font-family: $medium;
|
||||
font-size: $fh2-i;
|
||||
font-family: $bold;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.tags, .blog-date time{
|
||||
font-family: $italic;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category{
|
||||
a{
|
||||
font-family: $Regular;
|
||||
font-family: $italic;
|
||||
font-size: $fs-i;
|
||||
}
|
||||
}
|
||||
@@ -74,27 +83,54 @@ time{
|
||||
}
|
||||
|
||||
.tags{
|
||||
font-family: $Regular;
|
||||
font-size: $fs-i;
|
||||
font-family: $bold;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
#page-wrapper.blog{
|
||||
.works-mea, #items{
|
||||
.category{
|
||||
a{
|
||||
font-family: $Regular;
|
||||
font-family: $italic;
|
||||
font-size: $fs;
|
||||
}
|
||||
}
|
||||
time{
|
||||
font-size: $fs;
|
||||
}
|
||||
.card-footer{
|
||||
line-height: 0.2rem;
|
||||
.tags{
|
||||
a{
|
||||
color: $grey!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#page-wrapper.item{
|
||||
#items{
|
||||
.title{
|
||||
h2{
|
||||
font-family: $bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
a, time{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
.tags{
|
||||
font-size: $fs;
|
||||
span{
|
||||
font-size: 0.8rem;
|
||||
a{
|
||||
color: $grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cat-list{
|
||||
font-family: $Regular;
|
||||
font-family: $light;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@@ -3,148 +3,30 @@ html, body{
|
||||
}
|
||||
|
||||
.blog{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.down{
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
header{
|
||||
.contact{
|
||||
width: 90px;
|
||||
height: auto;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
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;
|
||||
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{
|
||||
-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;
|
||||
}
|
||||
svg{
|
||||
-webkit-animation: rotation 12s infinite linear;
|
||||
animation: rotation 12s infinite linear;
|
||||
}
|
||||
& + .txt{
|
||||
position: fixed;
|
||||
top: 190px;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
z-index: 9999;
|
||||
-webkit-animation: translateright 1s ease forwards;
|
||||
animation: translateright 1s ease forwards;
|
||||
}
|
||||
}
|
||||
&.close{
|
||||
-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{
|
||||
top: 190px;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
z-index: 9999;
|
||||
-webkit-animation: translateleft 1s ease forwards;
|
||||
animation: translateleft 1s ease forwards;
|
||||
}
|
||||
h3{
|
||||
|
||||
|
||||
-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;
|
||||
transition: transform 0.5s ease, -webkit-transform 0.5s ease!important;
|
||||
-webkit-transform: scale(0.9)!important;
|
||||
transform: scale(0.9)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
#start{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card{
|
||||
width: calc((100% / 3));
|
||||
line-height: 0.8rem!important;
|
||||
.card-header{
|
||||
margin-top: 10px;
|
||||
margin-top: 5px;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: baseline;
|
||||
-ms-flex-align: baseline;
|
||||
align-items: baseline;
|
||||
& > div{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@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%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,23 +2,29 @@ body{
|
||||
#page-wrapper.item{
|
||||
margin: 0 10px;
|
||||
.contact{
|
||||
.txt{display: none}
|
||||
.txt{
|
||||
display: none
|
||||
}
|
||||
}
|
||||
#start{
|
||||
margin-top: 112px;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
#body-wrapper.blog-listing{
|
||||
#body-wrapper.blog-listing {
|
||||
.img-card{
|
||||
width: calc((100% / 3) - 6.5px);
|
||||
width: calc( (100vw / 3 - calc( 41px / 3 ) ) );
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.header-item{
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
padding-top: 20px;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
.title{
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
-webkit-box-align: baseline;
|
||||
-ms-flex-align: baseline;
|
||||
align-items: baseline;
|
||||
h2{
|
||||
margin-right: 5px;
|
||||
text-transform: uppercase;
|
||||
@@ -39,7 +45,8 @@ body{
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: calc( 50% + 10px );
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
right: 0px;
|
||||
.btn{
|
||||
display: block;
|
||||
@@ -47,7 +54,8 @@ body{
|
||||
height: 100%;
|
||||
.btn-info{
|
||||
position: absolute;
|
||||
transform: rotate(-15deg);
|
||||
-webkit-transform: rotate(-15deg);
|
||||
transform: rotate(-15deg);
|
||||
margin-left: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@@ -68,7 +76,8 @@ body{
|
||||
margin-bottom:5px;
|
||||
}
|
||||
p{
|
||||
transform: rotate(-10deg);
|
||||
-webkit-transform: rotate(-10deg);
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -105,7 +114,8 @@ body{
|
||||
.prev-next{
|
||||
width: calc((100%) - 15px);
|
||||
position: relative;
|
||||
transform: translateY(0%);
|
||||
-webkit-transform: translateY(0%);
|
||||
transform: translateY(0%);
|
||||
.btn{
|
||||
.btn-info{
|
||||
display: none;
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
@media screen and (max-width: 960px) {
|
||||
.works-mea{
|
||||
& > div:last-child{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.card{
|
||||
width: calc((100% / 2) - 5px )!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
header{
|
||||
.head{
|
||||
padding: 0!important;
|
||||
}
|
||||
h1{
|
||||
font-size: 2.5rem!important;
|
||||
line-height: 5rem!important;
|
||||
-webkit-text-stroke: 1px black!important;
|
||||
}
|
||||
h2{
|
||||
font-size: 1.5rem;
|
||||
line-height: 0rem!important;
|
||||
margin: -0.7rem 0 0 0!important;
|
||||
}
|
||||
}
|
||||
.works-mea{
|
||||
& > div:nth-child(2){
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.card{
|
||||
width: 100%!important;
|
||||
}
|
||||
}
|
||||
@@ -24,8 +24,8 @@
|
||||
{% do assets.addJs('jquery', 101) %}
|
||||
{% 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.filter.js', {group:'bottom'}) %}
|
||||
{% do assets.addJs('theme://js/masonry.pkgd.min.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'}) %}
|
||||
@@ -37,7 +37,6 @@
|
||||
{% endblock head %}
|
||||
</head>
|
||||
|
||||
|
||||
<body id="top" class="{{page.template}}">
|
||||
<div id="page-wrapper" class=" {{page.template}}">
|
||||
{% block header %}
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
{% 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 %}
|
||||
@@ -19,7 +13,6 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="content">
|
||||
<div class="txt">
|
||||
{{ page.content|raw }}
|
||||
@@ -41,7 +34,6 @@
|
||||
{% endfor %}
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
<span class="blog-date">
|
||||
<time class="dt-published" datetime="{{ page.date|date("c") }}">
|
||||
{{ page.prevSibling.date|date("Y") }}
|
||||
@@ -49,19 +41,33 @@
|
||||
</span>
|
||||
</div>
|
||||
<img src="user/themes/gilles_acezat/images/arrow.svg" alt="">
|
||||
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if page.isLast %}
|
||||
{% 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>
|
||||
{% for first_item in parent.collection.slice(0, 1) %}
|
||||
|
||||
<a class="btn" href="{{ first_item.url }}">
|
||||
<div class="btn-info">
|
||||
<span class="title">{{ first_item.title }}</span>
|
||||
{% if first_item.taxonomy.category %}
|
||||
<span class="tags">
|
||||
{% for category in first_item.taxonomy.category %}
|
||||
{{ category }}
|
||||
{% endfor %}
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
<span class="blog-date">
|
||||
<time class="dt-published" datetime="{{ first_item.date|date("c") }}">
|
||||
{{ first_item.date|date("Y") }}
|
||||
</time>
|
||||
</span>
|
||||
</div>
|
||||
<img src="user/themes/gilles_acezat/images/arrow.svg" alt="">
|
||||
</a>
|
||||
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
@@ -77,7 +83,7 @@
|
||||
</div>
|
||||
|
||||
<div class="top">
|
||||
<a href="#page-wrapper">
|
||||
<a href="">
|
||||
<img src="user/themes/gilles_acezat/images/arrow-top.svg" alt="">
|
||||
<p>top</p>
|
||||
</a>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% for category in page.taxonomy.category %}
|
||||
<div class="card {{ category }}">
|
||||
<div class="card" data-filter ="{{category}}">
|
||||
|
||||
{% set image = page.media.images|first %}
|
||||
{% if image %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% if page.taxonomy.category %}
|
||||
<span class="category">
|
||||
{% for category in page.taxonomy.category %}
|
||||
<a class="label label-rounded {{ label_style ?: 'label-secondary' }} p-category" href="{{ blog.url|rtrim('/') }}/category{{ config.system.param_sep }}{{ category }}#body-wrapper">{{ category }}</a>
|
||||
<a class="label label-rounded {{ label_style ?: 'label-secondary' }} p-category" href="{{page.url}}">{{ category }}</a>
|
||||
{% endfor %}
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% if page.taxonomy.tag %}
|
||||
<span class="tags">
|
||||
{% for tag in page.taxonomy.tag %}
|
||||
<a class="label label-rounded {{ label_style ?: 'label-secondary' }} p-tag" href="{{ blog.url|rtrim('/') }}/tag{{ config.system.param_sep }}{{ tag }}#body-wrapper">{{ tag }}</a>
|
||||
<a class="label label-rounded {{ label_style ?: 'label-secondary' }} p-tag" href="{{page.url}}">{{ tag }}</a>
|
||||
{% endfor %}
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
@@ -5,8 +5,7 @@
|
||||
{% set label_class = uri.param(taxonomy) == tax ? 'label-primary' : 'label-secondary' %}
|
||||
<div data-toggle="buttons" class="btn-group">
|
||||
<label class="btn btn-default">
|
||||
<input type="checkbox" value="{{ tax }}" >
|
||||
{{tax}}
|
||||
<a href="#" data-filter="{{ tax }}">{{tax}}</a>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
Reference in New Issue
Block a user