index.html

---
layout : page
---

<div class="ui five column doubling stackable masonry grid" id="sparkle-cards">
	{% for post in paginator.posts %}
	<div class="column">
		<div class="ui fluid card sparkle">
			{% if post.thumbnail %}
			<div class="image">
				<img src="{{ site.baseurl }}/posts/{{ post.thumbnail }}" class="sparkle-thumbnail">
			</div>
			{% endif %}
			<div class="content">
				<span class="header sparkle-title">{{ post.title }}</span>
				<div class="meta">
					<span class="sparkle-summary">{{ post.summary }}</span>
				</div>
			</div>
			<div class="extra content">
				<a class="sparkle-category">{{ post.category }}</a>
				<span class="right floated">
					<a target="_blank" href="{{ post.visit }}" class="visit-url"><i class="external icon"></i></a>
				</span>
			</div>
			<div class="sparkle-content" hidden>
				{{ post.content }}
			</div>
			<div class="sparkle-tags" hidden="">{{ post.tags | join: "," }}</div>
		</div>
	</div>
	{% endfor %}
</div>

<br />
<div class="ui vertical masthead center aligned segment">
	<div class="ui center aligned container">
		<div class="ui compact centered pagination menu">
			{% if paginator.previous_page %}
			<a class="item" href="{{ site.baseurl }}{{ paginator.previous_page_path }}"><i class=" angle left icon"></i></a>
			{% endif %}
			<a class="active item">{{ paginator.page }} of {{ paginator.total_pages }}</a>
			{% if paginator.next_page %}
			<a class="item" href="{{ site.baseurl }}{{ paginator.next_page_path }}"><i class=" angle right icon"></i></a>
			{% endif %}
		</div>
	</div>
</div>