<link rel="stylesheet" href="https://drix-lim.squarespace.com/s/drixlim.css">
<script>
window.customFilterSettings = {
'targets': [{
container: '.BlogList,.blog-list,.article-list',// css selector for filter container
items: 'article',// css selector for items to filter
settings: {
requestAttrWithAjax: true,
waitForAjax: false,
urlQuery: false,
position: 'top',
align: 'left',
showItemsCount: false,
collectionUrl: '',
wrapFilterContainer: false,
itemsCount: {
enabled: false,
text: '',
positionOrder: 1
},
keepDropdownsOpenOnInit: false,
customClasses: 'lite-dropdowns',
/* Add any custom classes to filter container if you want to have your own to use in CSS styling,
available: cf-sort-right (move sorting element right), cf-sort-left (move sort left), lite-dropdowns(gives lighter dropdowns stylings), cf-ctrls-inline (makes dropdowns fit one line space)*/
view: 'breadcrumbs', // available: dropdowns, breadcrumbs, modern, buttons, buttons-round, buttons-pill, buttons-inline
sticky: {// if enabled: true - trying enable sticky position of Filter to be seen on scroll
enabled: false,
top: '6%'
},
simpleFilter: {
show: {
effect: 'fade',
transitionDuration: 300,
stagger: 60
},
hide: {
effect: 'fade',
transitionDuration: 100,
stagger: 18
}
},
pagination: {
enabled: true, // enable pagination
pageSize: 30, // set the page size to 30
},
/*----Mobile Panel Section----*/
mobilePanel: {// control if you want to have separate offscreen panel with filters on small screens
enabled: false,// if set to false, no filter buttons on mobiles will be showed
triggerButtonName: 'Filter', // trigger button text
keepDropdownsOpen: null, // if false it overrides desktop settings, if true - dropdowns opened
closeOnSelect: false, // mobile panel closed just after user selected something
closeOnSearch: false, // mobile panel closed if user searced something in searc field
closeOnOutsideClick: false // if true, mobile panel will be closed if user clicks outside it
},
initState:{filter:['type|photo']},
/*----Filters Section----*/
filter: { // here you define all filters you need and name them
category: false, // disabling default Category dropdown
tag: false, // disabling default Tag dropdown
items: [{
name: "Type",
positionOrder: 1,
allowedPrefSuf: "type:",
logic: 'and',
multiple: false,
strict: true,
hideValueLabel: false,
getAttr: 'tags'
}]
},
sort: {// define the sorters
enabled: false,// if false - no sorters visible/working
//defined: 'date_desc',// select which of defined sorters will work initially
items: [{
name: 'Alphabetical',
order: 'asc|desc',
orderTexts: 'A-Z|Z-A',
hideName: true,
sort: 'title'
},{
name: 'Date',// name your sorter
order: 'asc|desc',// apply the orders you want to use
orderTexts: 'Older|Newer',// name the orders in format you need
hideName: true,// if true, you will not see Date name
sort: '[data-publish-on] parseInt'//if properly configured, each Squarespace item will have publish date as data attribute. parseInt saysFilter operate it as integer number
}]
},
search: {
enabled: false,// if false, no Search input will be showed
text: 'Search', //set the placeholder to your search field, otherwise Search will be used
}
}
}]
};
</script>
<script>
/*ADD Filter BUTTON*/
$(document).ready(function() {
$('<div id="show-filter" class="show-filter" type="button"></div>').prependTo('#mainContent');
$('#show-filter').unbind('click');
$('#show-filter').on('click', function(e) {
$('body').toggleClass("show-filter");
$('#show-filter').toggleClass("active");
e.preventDefault();
})
});
/*ADD Filter BUTTON*/
$(document).ready(function() {
$('<div id="publication" class="publication" type="button"></div>').prependTo('#mainContent');
});
</script>
<style>
.nav-open:not(.mobile-style-nav) .site-header,
.site-header {
padding: 10px 5vw; }
.BlogItem-share {
display: none !important;}
.site-branding h1 a {
color: #998679; }
.main-content {
padding: clamp(0px, 20px, 7vw)!important; }
a.BlogList-item-title {
position: absolute;
color: white;
height: 100%;
transition: all .34s cubic-bezier(.215,.61,.355,1);
width: 100%;
display: flex !important;
padding: 5px 0 0.8em 0 !important;
margin: 0;
justify-content: center;
align-items: flex-end;
line-height: .8em;
z-index: 1;
}
.tweak-blog-list-alignment-center .BlogList-item-title:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(0deg, #00000038, transparent, transparent);
bottom: 0;
z-index: -1;
transition: all .34s cubic-bezier(.215,.61,.355,1);
border-radius: 10px;
}
@media (hover: hover) and (pointer: fine) {
article:hover .BlogList-item-title:before {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
} }
.Blog-meta.BlogList-item-meta {
position: absolute;
transform: translateY(0%) rotate(90deg) translateY(-100%);
transform-origin: top left;
}
@media (hover: hover) and (pointer: fine) {
article:hover .Blog-meta.BlogList-item-meta {
transform: translateY(0%) rotate(90deg) translateY(0%);
background: var(--BackgroundL1);
} }
.tweak-blog-list-item-image-show .BlogList-item-image {
padding: 0 !important;
margin: 0 !important;
}
.tweak-blog-list-alignment-center .BlogList-item-title {
transition: all .34s cubic-bezier(.215,.61,.355,1);
}
.view-list article {
margin: 0 !important;
width: 100% !important;
}
.BlogList-item-image-link {
border-radius: 10px;
transition: all .32s cubic-bezier(.23,1,.32,1);
}
@media (hover: hover) and (pointer: fine) {
article:hover .BlogList-item-image-link {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}}
@media (hover: hover) and (pointer: fine) {
article:hover .BlogList-item-title {
font-size: 59px;
padding: 5px 0 0.2em 0 !important;
}}
/*PUBLICATION*/
article.type-publication a.BlogList-item-title {
display: none !important;
}
/*FEATURED*/
.tweak-blog-list-style-grid.tweak-blog-list-item-image-aspect-ratio-grid-34-three-four-vertical .featured .BlogList-item-image:before {
padding-bottom: calc((133.33% / 2) - (var(--Gap) / 1.5));
}
article.featured {
grid-column-end: 2 span;
grid-row-end: 1 span;
}
article.featured .Blog-meta.BlogList-item-meta {
width: calc((100% / 3 * 4 / 2) - (var(--Gap) / 1.5));
}
section.BlogList {
overflow: visible !important;
display: grid;
grid-template-columns: repeat(var(--AmountColums), 1fr);
gap: var(--Gap);
grid-auto-flow: dense;
}
.BlogList-item-image-link img {
background-size: 120%;
object-fit: cover;
left: 50% !important;
position: absolute !important;
top: 50% !important;
transform: translate(-50%,-50%);
object-position: 50%;
height: 100% !important;
width: 100% !important;
transition: all .3s cubic-bezier(.215,.61,.355,1);
}
@media (hover: hover) and (pointer: fine) {
article:hover .BlogList-item-image-link img {
height: 140% !important;
width: 140% !important;
}}
article .Blog-meta.BlogList-item-meta {
margin-bottom: 0 !important;
background: transparent;
width: calc(100% / 3 * 4);
display: flex;
justify-content: flex-start;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
z-index: -1;
transition: all .32s cubic-bezier(.23,1,.32,1);
}
.view-list .Blog-meta a {
color: var(--ColorL3);
font-family: 'itc-avant-garde-gothic-pro';
font-weight: 100;
letter-spacing: .15em;
font-size: 13px; }
.view-item span.site-title {
color: white;
}
.custom-filter-container .filterDropdown.sqs-block-archive .archive-group-name-link.active {
pointer-events: none;
touch-action: none;
color: #998679 !important;
}
.custom-filter-container.custom-filter-view-breadcrumbs .filterDropdown.sqs-block .archive-group-list li a {
display: inline-block;
color: #5e5e5e;
}
.custom-filter-container.custom-filter-view-breadcrumbs .filterDropdown.sqs-block .archive-dropdown-toggle-label {
display: none; }
.custom-filter-container.custom-filter-view-breadcrumbs .filterDropdown.sqs-block .archive-group-list li {
text-transform: uppercase;
letter-spacing: .08em; }
.custom-filter-container.custom-filter-view-breadcrumbs .filterDropdown.sqs-block .archive-group-list li:before {
margin: 0 13px !important; }
.custom-filter-container.custom-filter-view-breadcrumbs .filterDropdown.sqs-block .archive-group-list {
display: flex !important;
overflow: visible !important;
}
.custom-filter-container.custom-filter-view-breadcrumbs .filterDropdown.sqs-block .archive-group-list li a:after {
content: '';
width: 81px;
height: 100%;
position: absolute;
background-color: var(--BackgroundL1);
z-index: -1;
transform: translateX(-10px);
border-radius: 5px;
display: block;
top: 0;
transform: scale(0) translateX(-10px);
transition: all .32s cubic-bezier(.25,.46,.45,.94);
}
.custom-filter-container.custom-filter-view-breadcrumbs .filterDropdown.sqs-block .archive-group-list li a[href*=photo]:after {
width: 81px;
}
.custom-filter-container.custom-filter-view-breadcrumbs .filterDropdown.sqs-block .archive-group-list li a[href*=publication]:after {
width: 130px;
}
@media (hover: hover) and (pointer: fine) {
.custom-filter-container.custom-filter-view-breadcrumbs .filterDropdown.sqs-block .archive-group-list li a:hover:after {
transform: scale(1) translateX(-10px);
}}
.main-content {
background-color: var(--BackgroundBlogItem); }
</style>
<link rel="stylesheet" href="//assets.squarewebsites.org/custom-filter/custom-filter.min.css"/>
<script src="//assets.squarewebsites.org/custom-filter/custom-filter.min.js"></script>
<script>
/*RELATED POSTS*/
$(document).ready(function() {
$('div.sqs-block-summary-v2').each(function(){
$(this).prependTo('.site-footer');
});
});
$(document).ready(function() {
$('a.Blog-meta-item-tag[href$="publication"]').each(function(){
$('body').addClass('publication'); });
$('a.Blog-meta-item-tag[href$="photo"]').each(function(){
$('body').addClass('photo'); });
});
</script>
<style>
.view-item div#show-filter {
background-image: url(https://dennysmamero.squarespace.com/s/sports-portfolio.jpg);
background-repeat: no-repeat;
background-position: center;
transition: all .34s cubic-bezier(.215,.61,.355,1), background-size 5s cubic-bezier(.215,.61,.355,1);
opacity: 1;
pointer-events: none;
background-size: cover;
z-index: -1;
margin: auto !important;
border-radius: 0;
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-position: 50% 20%;
}
body.publication.view-item div#publication {
background-image: url(https://dennysmamero.squarespace.com/s/sports-portfolio.jpg);
width: calc(50vh / 4 * 3);
height: 50vh;
position: absolute;
background-size: cover;
transition: all .34s cubic-bezier(.215,.61,.355,1), background-size 5s cubic-bezier(.215,.61,.355,1);
opacity: 1;
top: 45vh;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 6px;
box-shadow: 0 0 50px 8px #ffffff3b;
background-position: center;
z-index: 100;
}
@media (hover: hover) and (pointer: fine) {
body.publication.view-item div#publication:hover {
transform: translateX(-50%) translateY(-50%) scale(1.1);
} }
.view-item div#show-filter:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(0deg, #00000038, transparent, transparent);
}
body.publication.view-item div#show-filter:before {
content: '';
width: 100vw;
height: 100vh;
position: absolute;
background: rgb(0 0 0 / 35%);
left: 0;
top: 0;
backdrop-filter: blur(120px) brightness(69%) saturate(397%) contrast(110%);
-webkit-backdrop-filter: blur(120px) brightness(69%) saturate(397%) contrast(110%);
}
article.BlogItem {
margin-top: 100vh;
}
body.photo.view-item .BlogItem-title {
position: absolute;
top: 33vh;
left: 50%;
transform: translateX(-50%);
min-height: 50vh;
display: flex;
align-items: flex-end;
color: white;
font-family: sisters-one;
letter-spacing: .03em;
font-size: 9rem;
}
.view-item h1.BlogItem-title {
position: absolute;
top: 33vh;
left: 50%;
transform: translateX(-50%);
min-height: 50vh;
display: flex;
align-items: flex-end;
color: white;
width: 100%;
justify-content: center;
}
@media (max-width: 640px) {
body.photo.view-item .BlogItem-title {
font-size: 23vw;
}
body.publication.view-item h1.BlogItem-title {
font-size: 16vw;
} }
.view-item.tweak-blog-item-meta-position-below-title .BlogItem-meta {
position: absolute;
top: 85vh;
left: 50%;
width: 100vw;
transform: translateX(-50%);
}
@media (max-width: 640px) {
.view-item.tweak-blog-item-meta-position-below-title .BlogItem-meta {
font-size: 14px;
top: 83vh; } }
.view-item .Blog-meta a {
color: rgba(255,255,255, .75);
pointer-events: none;
touch-events: none;
}
.view-item h1.site-title {
font-size: clamp(1rem, 2vw, 2rem);
font-family: 'matrix-ii-ext-wide';
text-transform: uppercase;
letter-spacing: .04em;
}
body.view-item:not(.mobile-style-nav) .site-header {
background: transparent; }
.view-item h4.BlogItem-pagination-link-title {
font-family: baskerville-display-pt;
color: var(--ColorL1);
letter-spacing: -.01em;
font-size: clamp(24px, 30px, 40px);
opacity: .95;
transition: all .32s cubic-bezier(.215,.61,.355,1);
}
@media (hover: hover) and (pointer: fine) {
.view-item .BlogItem-pagination-link--next h4.BlogItem-pagination-link-title {
opacity: 0;
transform: translateX(20px);
}
.view-item .BlogItem-pagination-link--prev h4.BlogItem-pagination-link-title {
opacity: 0;
transform: translateX(-20px);
}
@media (hover: hover) and (pointer: fine) {
.view-item .BlogItem-pagination-link--prev:hover h4.BlogItem-pagination-link-title,
.view-item .BlogItem-pagination-link--next:hover h4.BlogItem-pagination-link-title {
opacity: .95;
transform: translateX(0); }
}}
.photo.view-item h4.BlogItem-pagination-link-title {
font-size: clamp(35px, 50px, 60px);
letter-spacing: .02em;
line-height: 1em;
transform: translateY(-4px);
font-family: sisters-one;
}
@media (hover: hover) and (pointer: fine) {
.photo.view-item .BlogItem-pagination-link--next h4.BlogItem-pagination-link-title {
opacity: 0;
transform: translateX(20px) translateY(-4px);
}
.photo.view-item .BlogItem-pagination-link--prev h4.BlogItem-pagination-link-title {
opacity: 0;
transform: translateX(-20px) translateY(-4px);
}
@media (hover: hover) and (pointer: fine) {
.photo.view-item .BlogItem-pagination-link--prev:hover h4.BlogItem-pagination-link-title,
.photo.view-item .BlogItem-pagination-link--next:hover h4.BlogItem-pagination-link-title {
opacity: .95;
transform: translateX(0) translateY(-4px); }
}}
/*RELATED POSTS*/
.view-item .sqs-block.summary-v2-block.sqs-block-summary-v2 {
padding: 0;
}
.view-item .sqs-block-summary-v2 .summary-item-list {
width: 100vw;
display: grid;
grid-template-columns: repeat(5, 1fr);
}
@media (min-width: 641px) and (max-width: 1047px) {
.view-item .sqs-block-summary-v2 .summary-item-list {
grid-template-columns: repeat(4, 1fr);
} }
@media (max-width: 640px) {
.view-item .sqs-block-summary-v2 .summary-item-list {
grid-template-columns: repeat(3, 1fr);
} }
.view-item .sqs-block-summary-v2 .summary-item {
width: 100% !important;
}
@media (min-width: 641px) and (max-width: 1047px) {
.view-item .summary-item:last-child {
display: none;
} }
@media (max-width: 640px) {
.view-item .summary-item:nth-child(4n+1) {
display: none;
} }
.view-item .sqs-block-summary-v2 .summary-block-setting-show-title .summary-thumbnail-container {
margin: 0 !important;
}
.view-item .sqs-gallery-design-autogrid-slide img.loaded {
left: 50% !important;
position: absolute !important;
top: 50% !important;
transform: translate(-50%,-50%);
object-position: 50%;
object-fit: cover;
border-radius: 2px;
transition: all .32s cubic-bezier(.215,.61,.355,1) !important;
}
@media (hover: hover) and (pointer: fine) {
.view-item .summary-item:hover img.summary-thumbnail-image.loaded {
width: 140% !important;
height: 140% !important;
} }
.view-item .sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title {
font-size: 2.8vw;
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-family: 'baskerville-display-pt';
margin: 0 !important;
z-index: 1;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
letter-spacing: -.04em;
transition: all .34s cubic-bezier(.215,.61,.355,1);
}
@media (min-width: 641px) and (max-width: 1047px) {
.view-item .sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title {
font-size: calc(2.8vw * 5 / 4);
} }
@media (max-width: 640px) {
.view-item .sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title {
font-size: calc(2.8vw * 5 / 3);
} }
.view-item a.summary-title-link {
color: white;
z-index: 1;
padding-bottom: 20%;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
transition: all .34s cubic-bezier(.215,.61,.355,1);
opacity: 0;
transform: translateY(-15%);
}
@media (hover: hover) and (pointer: fine) {
.view-item .summary-title:hover a.summary-title-link {
transform: translateY(0);
opacity: 1;
} }
.view-item .summary-title:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(0deg, #00000038, transparent, transparent);
bottom: 0;
z-index: -1;
transition: all .34s cubic-bezier(.215,.61,.355,1);
left: 0;
opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
.view-item .summary-item:hover .summary-title:after {
opacity: 1;
} }
.view-item .summary-title:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: rgb(0 0 0 / 35%);
left: 0;
top: 0;
backdrop-filter: blur(120px) brightness(69%) saturate(397%) contrast(110%);
-webkit-backdrop-filter: blur(120px) brightness(69%) saturate(397%) contrast(110%);
transform: translateY(0);
transition: all .34s cubic-bezier(.215,.61,.355,1);
opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
.view-item .summary-item:hover .summary-title:before {
opacity: 1;
} }
.view-item .summary-metadata-container.summary-metadata-container--below-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-family: itc-avant-garde-gothic-pro;
padding-bottom: 12%;
z-index: 1;
transform: translateY(100%);
transition: all .34s cubic-bezier(.215,.61,.355,1);
}
@media (hover: hover) and (pointer: fine) {
.view-item .summary-item:hover .summary-metadata-container.summary-metadata-container--below-content {
transform: translateY(0);
} }
.view-item span.summary-metadata-item.summary-metadata-item--cats {
font-family: itc-avant-garde-gothic-pro;
color: white;
text-transform: uppercase;
opacity: .85;
font-size: .85vw;
letter-spacing: .1em;
}
@media (min-width: 641px) and (max-width: 1047px) {
.view-item span.summary-metadata-item.summary-metadata-item--cats {
font-size: calc(.85vw * 5 / 4);
} }
@media (max-width: 640px) {
.view-item span.summary-metadata-item.summary-metadata-item--cats {
font-size: calc(.85vw * 5 / 3);
} }
.view-item .sqs-block-summary-v2 .summary-metadata-item a {
color: white;
}
/*PHOTO BLOG*/
.photo.view-item .sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title {
font-family: sisters-one;
font-size: 5vw;
line-height: .85em;
padding-bottom: 0.2em;
}
@media (min-width: 641px) and (max-width: 1047px) {
.photo.view-item .sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title {
font-size: calc(5vw * 5 / 4);
} }
@media (max-width: 640px) {
.photo.view-item .sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title {
font-size: calc(5vw * 5 / 3);
} }
/*FOOTER*/
.view-item footer.site-footer {
display: block;
padding: 0;
}
.view-item .main-content {
padding: 0!important;
}
.view-item h3 {
font-family: 'baskerville-display-pt';
text-transform: initial;
letter-spacing: -.03em;
font-size: clamp(18px, 24px, 35px);
color: var(--ColorL1);
margin-bottom: 8px;
margin-left: 0 !important;
}
.view-item .image-block-outer-wrapper {
border-radius: 4px;
overflow: hidden;
}
</style>
<script>
$(document).ready(function() {
var URL = $('meta[property="og:image"]').attr("content"); console.log(URL);
var newURL = "url(" + URL + ")";
$("#show-filter").css("background-image", newURL );
$("#publication").css("background-image", newURL );
});
</script>
<script>
document.querySelector('.site-title a').setAttribute('href', '/blog');
</script>