{% extends 'templates/main-layout.twig' %}

{% set bodyClasses = 'blog' %}

{% block stylesheets %}
		{{ parent() }}
		<link rel="stylesheet" media="all" href="/assets/css/blog.css" type="text/css">
{% endblock %}

{% block content %}
	<div id="contentsInner">
		<header class="contentsTtl">
			<h1>Blog</h1>
			<h2>Development and Information etc...</h2>
		</header>
		<section id="searchPanel" class="hasCategories">
			<p class="btnCategories closed"><a href="#">Categories</a></p>
			<div class="categories closed">
				<ul>
					<li><a href="https://tkmh.me/blog/category/bookmark">Bookmark (7)</a></li>
					<li><a href="https://tkmh.me/blog/category/creativecodingdrill">Creative Coding Drill (7)</a></li>
					<li><a href="https://tkmh.me/blog/category/info">Info (7)</a></li>
					<li><a href="https://tkmh.me/blog/category/iphone-app-dev">iPhoneアプリをつくりたい (2)</a></li>
					<li><a href="https://tkmh.me/blog/category/memo">Memo (5)</a></li>
					<li><a href="https://tkmh.me/blog/category/others">Others (0)</a></li>
					<li><a href="https://tkmh.me/blog/category/study">Study (23)</a></li>
				</ul>
			</div>
			<p class="btnTags closed"><a href="#">Tags</a></p>
			<div class="tags closed">
				<ul>
					<li><a href="https://tkmh.me/blog/tag/3d">3D (8)</a></li>
					<li><a href="https://tkmh.me/blog/tag/api">API (2)</a></li>
					<li><a href="https://tkmh.me/blog/tag/atom">Atom (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/away3d">Away3d (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/book">book (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/c">C++ (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/canvas">canvas (6)</a></li>
					<li><a href="https://tkmh.me/blog/tag/css">CSS (2)</a></li>
					<li><a href="https://tkmh.me/blog/tag/design">design (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/editor">editor (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/font">font (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/glsl">GLSL (10)</a></li>
					<li><a href="https://tkmh.me/blog/tag/google">Google (2)</a></li>
					<li><a href="https://tkmh.me/blog/tag/gpgpu">GPGPU (4)</a></li>
					<li><a href="https://tkmh.me/blog/tag/grunt">Grunt (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/guideline">Guideline (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/gulp">gulp (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/ios">iOS (3)</a></li>
					<li><a href="https://tkmh.me/blog/tag/iphone">iPhone (3)</a></li>
					<li><a href="https://tkmh.me/blog/tag/iphone-app">iPhone App (3)</a></li>
					<li><a href="https://tkmh.me/blog/tag/javascript">Javascript (13)</a></li>
					<li><a href="https://tkmh.me/blog/tag/nodejs">Node.js (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/open">open (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/opencv">OpenCV (2)</a></li>
					<li><a href="https://tkmh.me/blog/tag/openframeworks">openFrameworks (8)</a></li>
					<li><a href="https://tkmh.me/blog/tag/processing">processing (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/svg">SVG (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/swift">Swift (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/syphon">Syphon (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/three-js">three.js (11)</a></li>
					<li><a href="https://tkmh.me/blog/tag/unity">Unity (2)</a></li>
					<li><a href="https://tkmh.me/blog/tag/vdmx">VDMX (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/vj">VJ (1)</a></li>
					<li><a href="https://tkmh.me/blog/tag/webgl">WebGL (9)</a></li>
				</ul>
			</div>
			<p class="btnMonthlyArchives closed"><a href="#">Monthly Archives</a></p>
			<div class="monthlyArchives closed">
				<ul>
					<li><a href="https://tkmh.me/blog/2017/06/"><span class="year">2017</span><span class="month">06</span></a></li>
					<li><a href="https://tkmh.me/blog/2016/12/"><span class="year">2016</span><span class="month">12</span></a></li>
					<li><a href="https://tkmh.me/blog/2016/07/"><span class="year">2016</span><span class="month">07</span></a></li>
					<li><a href="https://tkmh.me/blog/2016/03/"><span class="year">2016</span><span class="month">03</span></a></li>
					<li><a href="https://tkmh.me/blog/2016/02/"><span class="year">2016</span><span class="month">02</span></a></li>
					<li><a href="https://tkmh.me/blog/2015/12/"><span class="year">2015</span><span class="month">12</span></a></li>
					<li><a href="https://tkmh.me/blog/2015/09/"><span class="year">2015</span><span class="month">09</span></a></li>
					<li><a href="https://tkmh.me/blog/2015/05/"><span class="year">2015</span><span class="month">05</span></a></li>
					<li><a href="https://tkmh.me/blog/2015/02/"><span class="year">2015</span><span class="month">02</span></a></li>
					<li><a href="https://tkmh.me/blog/2014/11/"><span class="year">2014</span><span class="month">11</span></a></li>
					<li><a href="https://tkmh.me/blog/2014/10/"><span class="year">2014</span><span class="month">10</span></a></li>
					<li><a href="https://tkmh.me/blog/2014/09/"><span class="year">2014</span><span class="month">09</span></a></li>
				</ul>
			</div>
			<p class="btnKeyword closed"><a href="#">Keyword</a></p>
			<div class="keyword closed">
				<form>
					<input type="text"/>
					<p class="btnSubmit"><a href="#">Search</a></p>
				</form>
			</div>
			<p class="btnBack"><a href="#">Back</a></p>
		</section>
		<div class="inner">
			<section class="articles">
				<article>
					<a href="https://tkmh.me/blog/2017/06/26/639/">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/blog/thumb-1.jpg">
							<p class="detail"><span>View detail</span></p>
						</div>
						<h2 class="ttl">REPUBLICでSTUTSさんの映像演出をやらせていただきました</h2>
						<p class="date">2017.06.26</p>
					</a>
				</article>
				<article>
					<a href="https://tkmh.me/blog/2017/06/14/632/">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/blog/thumb.jpg">
							<p class="detail"><span>View detail</span></p>
						</div>
						<h2 class="ttl">「Webデザイン良質見本帳」に当サイトが掲載されました。</h2>
						<p class="date">2017.06.14</p>
					</a>
				</article>
				<article>
					<a href="https://tkmh.me/blog/2016/12/06/588/">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/blog/thumb3.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<h2 class="ttl">three.js + Web Font + GPGPU Vol.3 (シェーダ編)</h2>
						<p class="date">2016.12.06</p>
					</a>
				</article>
				<article>
					<a href="https://tkmh.me/blog/2016/12/06/578/">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/blog/thumb2.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<h2 class="ttl">three.js + Web Font + GPGPU Vol.2 (Geometry編)</h2>
						<p class="date">2016.12.06</p>
					</a>
				</article>
				<article>
					<a href="https://tkmh.me/blog/2016/12/05/555/">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/blog/thumb1.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<h2 class="ttl">three.js + Web Font + GPGPU Vol.1 (準備編)</h2>
						<p class="date">2016.12.05</p>
					</a>
				</article>
				<article>
					<a href="https://tkmh.me/blog/2016/07/08/535/">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/blog/thumb.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<h2 class="ttl">My website has been renewaled</h2>
						<p class="date">2016.07.08</p>
					</a>
				</article>
				<article>
					<a href="https://tkmh.me/blog/2016/03/06/419/">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/blog/thumb-1.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<h2 class="ttl">Unity始めました。</h2>
						<p class="date">2016.03.06</p>
					</a>
				</article>
				<article>
					<a href="https://tkmh.me/blog/2016/03/01/409/">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/blog/drill7Thumb-1.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<h2 class="ttl">Creative Coding Drill vol.7</h2>
						<p class="date">2016.03.01</p>
					</a>
				</article>
				<article>
					<a href="https://tkmh.me/blog/2016/02/29/406/">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/blog/drill6Thumb-1.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<h2 class="ttl">Creative Coding Drill Vol.6</h2>
						<p class="date">2016.02.29</p>
					</a>
				</article>
				<article>
					<a href="https://tkmh.me/blog/2016/02/25/401/">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/blog/drill5Thumb-1.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<h2 class="ttl">Creative Coding Drill vol.5</h2>
						<p class="date">2016.02.25</p>
					</a>
				</article>
				<article>
					<a href="https://tkmh.me/blog/2016/02/24/393/">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/blog/drill4Thumb-1.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<h2 class="ttl">Creative Coding Drill Vol.4</h2>
						<p class="date">2016.02.24</p>
					</a>
				</article>
				<article>
					<a href="https://tkmh.me/blog/2016/02/24/387/">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/blog/drill3Thumb-1.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<h2 class="ttl">Creative Coding Drill Vol.3</h2>
						<p class="date">2016.02.24</p>
					</a>
				</article>
			</section>
			<div class="pagination">
				<span class="current"><a href='https://tkmh.me/blog/'>1</a></span>
				<span><a href='https://tkmh.me/blog/page/2/'>2</a></span>
				<span><a href='https://tkmh.me/blog/page/3/'>3</a></span>
				<span class="next"><a href="https://tkmh.me/blog/page/2/">Next</a></span>
				<p class="page">1 / 3</p>
			</div>
		</div>
	</div>
{% endblock %}

{% block scripts %}
	{{ parent() }}
	<script src="/assets/js/blog.js" type="text/javascript"></script>
{% endblock %}