Skip to content

Instantly share code, notes, and snippets.

@ara303

ara303/tumblr-grid-theme-masonry.txt

Created December 3, 2018 18:18
Show Gist options
  • Save ara303/1981569950052492f7940b28f17dc5de to your computer and use it in GitHub Desktop.
Save ara303/1981569950052492f7940b28f17dc5de to your computer and use it in GitHub Desktop.
Download ZIP
tumblr-grid-theme-masnry.txt
Raw
tumblr-grid-theme-masonry.txt
<html lang="en">
<head>
<title>{block:TagPage}#{Tag} | {/block:TagPage}{Title}</title>
<meta type="description" content="{MetaDescription}">
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" href="{RSS}">
<meta charset="utf-8">
<style>
body {
margin: 0;
background-color: #222;
color: rgb(160,160,160);
font-family: sans-serif;
font-size: 14px;
line-height: 1.6;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
color: rgb(190,190,190);
}
.info {
padding: 20px 20px 10px 20px;
}
.info-title {
margin: 0 0 20px;
font-weight: normal;
line-height: 1;
font-size: 22px;
text-align: center;
}
.featured {
margin: 0 0 1em;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.featured li:not(:last-child) {
margin-right: 10px;
margin-bottom: 10px;
}
.featured a {
display: block;
background: rgba(170,170,170,0.75);
color: #222;
line-height: 1;
padding: 5px;
border-radius: 2px;
font-size: 13px;
}
.featured a:hover {
background: rgb(170,170,170);
}
.main {
overflow: hidden;
width: 1320px;
margin: 0 auto;
}
.page-index .main {
opacity: 0;
transform: translateY(50px);
transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
}
.page-index .main.is-loaded {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 1340px) {
.main {
width: 880px;
}
}
@media (max-width: 900px) {
.main {
width: 440px;
}
}
.post {
padding: 20px;
}
.page-index .post {
float: left;
width: 400px;
}
.page-permalink .post {
max-width: 100%;
margin: 0 auto;
}
.text-body blockquote {
margin: 0;
}
.text-body img {
max-width: 100%;
}
.photo-image {
max-width: 100%;
display: block;
}
.page-index .photo-image {
width: 100%;
}
.page-permalink .photo-image {
display: block;
margin: 0 auto;
}
.meta {
margin-top: 10px;
text-align: right;
display: flex;
justify-content: space-between;
}
.navigation {
padding-top: 20px;
margin: 20px;
display: flex;
justify-content: space-evenly;
font-size: 20px;
}
/* ----------- */
@keyframes loadAnim {
0%, 39%, 100% { opacity: 0; }
40% { opacity: 1; }
}
.load-dots {
width: 40px;
height: 40px;
position: relative;
}
.load-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.load-dot:before {
content: '';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background-color: #fff;
border-radius: 100%;
animation: loadAnim 1.2s infinite ease-in-out both;
}
.load-dot-2 {
transform: rotate(30deg);
}
.load-dot-3 {
transform: rotate(60deg);
}
.load-dot-4 {
transform: rotate(90deg);
}
.load-dot-5 {
transform: rotate(120deg);
}
.load-dot-6 {
transform: rotate(150deg);
}
.load-dot-7 {
transform: rotate(180deg);
}
.load-dot-8 {
transform: rotate(210deg);
}
.load-dot-9 {
transform: rotate(240deg);
}
.load-dot-10 {
transform: rotate(270deg);
}
.load-dot-11 {
transform: rotate(300deg);
}
.load-dot-12 {
transform: rotate(330deg);
}
.load-dot-2:before {
animation-delay: -1.1s;
}
.load-dot-3:before {
animation-delay: -1s;
}
.load-dot-4:before {
animation-delay: -0.9s;
}
.load-dot-5:before {
animation-delay: -0.8s;
}
.load-dot-6:before {
animation-delay: -0.7s;
}
.load-dot-7:before {
animation-delay: -0.6s;
}
.load-dot-8:before {
animation-delay: -0.5s;
}
.load-dot-9:before {
animation-delay: -0.4s;
}
.load-dot-10:before {
animation-delay: -0.3s;
}
.load-dot-11:before {
animation-delay: -0.2s;
}
.load-dot-12:before {
animation-delay: -0.1s;
}
.is-loading {
position: fixed;
top: 50%;
left: 50%;
margin: -20px 0 0 -20px;
width: 40px;
height: 40px;
transition: opacity 150ms ease-in-out 150ms, transform 150ms ease-in-out 150ms;
opacity: 0;
transform: translateY(25px);
pointer-events: none;
}
.is-loading.is-visible {
opacity: 1;
transform: translateY(0);
}
.page-permalink .is-loading {
display: none !important;
}
</style>
</head>
<body class="page-{block:PermalinkPage}permalink{/block:PermalinkPage}{block:IndexPage}index{/block:IndexPage}">
<div class="info">
<h1 class="info-title">
<a href="/">{Title}</a>
</h1>
</div>
<div class="main">
{block:Posts}
<div class="post">
<div class="content">
{block:Text}
<div class="text-body">{Body}</div>
{/block:Text}
{block:Photo}
<img class="photo-image" src="{block:IndexPage}{PhotoURL-400}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" {block:HighRes}data-highres="{PhotoURL-HighRes}" data-highres-width="{PhotoWidth-HighRes}" data-highres-height="{PhotoHeight-HighRes}" {block:HighRes}alt="{PhotoAlt}">
{/block:Photo}
{block:Photoset}
{block:IndexPage}{Photoset-400}{/block:IndexPage}{block:PermalinkPage}{Photoset}{/block:PermalinkPage}
{/block:Photoset}
{block:Video}
{block:IndexPage}{Video-400}{/block:IndexPage}{block:PermalinkPage}{Video-700}{/block:PermalinkPage}
{/block:Video}
{block:Link}
<div class="link-wrapper">
<a href="{URL}">
<img class="photo-image" src="{Thumbnail-HighRes}" alt="{Name}">
<div class="link-name">{Name}</div>
<div class="link-host">{Host}</div>
</a>
</div>
{/block:Link}
</div>
<div class="meta">
<div class="meta-tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>
<div class="meta-permalink">
<a class="meta-permalink-anchor" href="{Permalink}">&rarr;</a>
</div>
</div>
</div>
{/block:Posts}
</div>
{block:Pagination}
<div class="navigation">
{block:PreviousPage}
<a href="{PreviousPage}" class="navigation-back">Previous</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}" class="navigation-next">Load more posts</a>
{/block:NextPage}
</div>
{/block:Pagination}
<div class="is-loading is-visible">
<div class="load-dots">
<div class="load-dot load-dot-1"></div>
<div class="load-dot load-dot-2"></div>
<div class="load-dot load-dot-3"></div>
<div class="load-dot load-dot-4"></div>
<div class="load-dot load-dot-5"></div>
<div class="load-dot load-dot-6"></div>
<div class="load-dot load-dot-7"></div>
<div class="load-dot load-dot-8"></div>
<div class="load-dot load-dot-9"></div>
<div class="load-dot load-dot-10"></div>
<div class="load-dot load-dot-11"></div>
<div class="load-dot load-dot-12"></div>
</div>
</div>
</div>
<script src="https://static.tumblr.com/xfrr6yv/H3fpj0p3o/masonry-infinitescroll.js"></script>
<script>
let grid = document.querySelector('.page-index .main');
let isLoading = document.querySelector('.is-loading');
imagesLoaded( grid, function() {
let msnry = new Masonry( grid, {
itemSelector: '.post',
columnWidth: 440
});
grid.classList.add( 'is-loaded' );
isLoading.classList.remove( 'is-visible' );
let infScroll = new InfiniteScroll( grid, {
outlayer: msnry,
append: msnry.options.itemSelector,
path: '.navigation-next',
scrollThreshold: 700,
hideNav: '.navigation'
});
infScroll.on( 'load', function(){
isLoading.classList.add('is-visible');
});
infScroll.on( 'append', function(response, path, items) {
enableLightbox();
isLoading.classList.remove('is-visible');
});
});
</script>
<script>
function enableLightbox() {
let clbPhotos = document.querySelectorAll('.page-index .photo-image[data-highres]');
Array.prototype.forEach.call(clbPhotos, function(clbElement, i){
clbElement.addEventListener('click', function(){
let clbAttrs = clbElement.dataset;
let clbData = [{
"width": clbAttrs.highresWidth,
"height": clbAttrs.highresHeight,
"low_res": clbElement.src,
"high_res": clbAttrs.highres
}];
Tumblr.Lightbox.init(clbData, 1);
});
});
}
enableLightbox();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment