index.html

---
layout: home_page
excerpt: "The Home Page of IIT HeartBeat"
search_omit: true
---

<link rel="stylesheet" type="text/css" href="assets/css/bookblock.css" />
<link rel="stylesheet" type="text/css" href="assets/css/CircleHoverEffect.css" />
<link rel="stylesheet" type="text/css" href="assets/css/common.css" />
<link rel="stylesheet" type="text/css" href="assets/css/homepage.css" />
<link rel="stylesheet" type="text/css" href="assets/css/post_tiles.css" />
<script src="assets/js/modernizr.custom.js"></script>
<script src="assets/js/jquerypp.custom.js"></script>
<script src="assets/js/jquery.bookblock.js"></script>
<script src="assets/js/zepto.js"></script>
<script src="assets/js/jquery.waterfall.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
	var year = "2016";
	var imageCount = [];
	imageCount["2016"] = 40;
	imageCount["2015"] = 0;
	imageCount["2014"] = 0;
	function createImageId(i) {
		var $a = $("<div>", {"class": "bb-item"});
		var $img = $("<img>",{"src": "images/mags/"+year+"/file-page"+i+".jpg"});
		$a.append($img);
		return $a;
	}
	
	function additems() {
		for (var i = 1; i <= imageCount[year]; i++) {
			$(".bb-bookblock").append(createImageId(i));
		};
		init();
	}
	function clearitems() {
		$(".bb-bookblock").children(".bb-item").each(function() {
			$(this).remove();
		});
		init();
	}
	function openBookBlock(y) {
    	$(".overlay").width("100%");
    	year = y;
    	additems();
	}
	function closeBookBlock() {
    	$(".overlay").width("0");
    	clearitems();
	}

	$(window).on('load', function()
	{
		$(".overlay-link").add(".text-link").click(function(){
    		openBookBlock($(this).attr('id'));
		});
		$(".bb-close").click(function(){
			closeBookBlock();
		});
		$(document).keyup(function(e) {
  			if (e.keyCode === 27) $('.bb-close').click();   // esc
		});
	});
	
</script>

<div class="overlay">
	<div class="bb-custom-wrapper">
		<div class="bb-close">
			<img src="{{ site.url }}/images/mags/assets/close.png" >
		</div>
		<div id="bb-bookblock" class="bb-bookblock">
		</div>
		<nav>
			<a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a>
			<a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
			<a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
			<a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a>
		</nav>
	</div>
</div>

<div class="waterfall" data-col-min-width="300" data-autoresize="true"> 
{% for post in site.posts limit:30 %}
<article class="post-box">
    <div class="image-container">
        <a href="{{ site.url }}{{ post.url }}" class="link"><img src="{{ site.url }}/images/{{ post.image.feature }}" alt="{{ post.title }}" class="post-image" /></a>
    </div>
    <div class="post-container">
    	<a href="{{ site.url }}{{ post.url }}" class="link">
        	<h3 class="title">{{ post.title }}</h3>
        </a>
        <p class="subline">By {{ site.data.authors[post.author].name }} on <time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %d, %Y" }}</time></p>
        <p class="excerpt">
            <span>{{ post.excerpt | remove: '\[ ... \]' | remove: '\( ... \)' | markdownify | strip_html | strip_newlines | escape_once }}</span>
        </p>
    </div>
</article>
{% endfor %}
</div>
<div class="latest-issue-title">
</div>
<div class="latest-issue">
		<div class="issue-front-cover">
			<img src="{{ site.url }}/images/mags/2016/file-page1.jpg">
			<div class="img-overlay">
           		<a id="2016" class="expand overlay-link">Click To Read</a>
           	</div>
		</div>
		<div class="description-li">
				<h3>Issue 2016</h3>
				<h5>Cover Story: "Travelling: My Life"</h5>
				<p>
				Hey folks!<br>IIT Heartbeat is back with its new edition. The wait was long but we've made sure it was worth it. In this edition, we have covered different concerned areas of student's life with a spice of fun. You are sure to have a wonderful experience while going through the articles. Information related to other IIT's, doubts related to career, fiction, poems, fun facts, alumni experinces...
				</p>
		</div>
	</div>


<script type="text/javascript">

$('.post-image').each(function() {
	$(this).imagesLoaded()
  		.done( function( instance ) {
  			// console.log("called.");
    		$('.waterfall').waterfall({ 
    			colMinWidth: 300,
    			autoresize: true
  			});
    });
});

var config = {	$bookBlock : $( '#bb-bookblock' ),
				$navNext : $( '#bb-nav-next' ),
				$navPrev : $( '#bb-nav-prev' ),
				$navFirst : $( '#bb-nav-first' ),
				$navLast : $( '#bb-nav-last' )
	};
function init() {
	config.$bookBlock.bookblock( {
		speed : 1000,
		shadowSides : 0.8,
		shadowFlip : 0.7
	} );
	initEvents();
}
function initEvents() {
	var $slides = config.$bookBlock.children();
	// add navigation events
	config.$navNext.on( 'click touchstart', function() {
		config.$bookBlock.bookblock( 'next' );
		return false;
	} );

	config.$navPrev.on( 'click touchstart', function() {
		config.$bookBlock.bookblock( 'prev' );
		return false;
	} );

	config.$navFirst.on( 'click touchstart', function() {
		config.$bookBlock.bookblock( 'first' );
		return false;
	} );

	config.$navLast.on( 'click touchstart', function() {
		config.$bookBlock.bookblock( 'last' );
		return false;
	} );
	// add swipe events
	$slides.on( {
		'swipeleft' : function( event ) {
			config.$bookBlock.bookblock( 'next' );
			return false;
		},
		'swiperight' : function( event ) {
			config.$bookBlock.bookblock( 'prev' );
			return false;
		}
	} );
	// add keyboard events
	$( document ).keydown( function(e) {
		var keyCode = e.keyCode || e.which,
			arrow = {
				left : 37,
				up : 38,
				right : 39,
				down : 40
			};

		switch (keyCode) {
			case arrow.left:
				config.$bookBlock.bookblock( 'prev' );
				break;
			case arrow.right:
				config.$bookBlock.bookblock( 'next' );
				break;
		}
	} );
};
</script>