index.html

---
layout: default
---

<div class="home pannel-left">

  <h1 class="page-heading">目录</h1>
  <style type="text/css">
    .pannel-left{
      float: left;
      border: 1px solid white;
      background: white;
      opacity: 0.8;
      box-sizing: border-box;
      padding: 10px;
      width: 70%;
    }
    .pannel-right{

      float: right;
      background: white;
      border: 1px solid white;
      opacity: 0.8;
      width: 25%;
      padding: 10px;
    }
    .listtit{
    	color: rgb(213, 125, 63);
    	text-align: center;
    }
    .sort{
    	padding-left: 10px;
/*    	font-family: 微软雅黑;*/      
      font-family: 'Berkshire Swash', cursive;
    	cursor: pointer; 
    }
    @media all and (max-width: 800px) { 
      .pannel-left{
        width: 100%;
      }
      .pannel-right{
        display: none;
      }
    }
  </style>
  <ul class="post-list">
    {% for post in site.posts %}
      <li>
        <h2>
          <a class="post-link" href="{{ post.url | prepend: site.baseurl}}">{{ post.title }}</a><span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
        </h2>
      </li>
    {% endfor %}
  </ul>
  <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
</div>
<div class="pannel-right">
	<div class="listtit">CATEGORIES</div>
	<div>
		{% for category in site.categories %}
			<p class="sort">{{ category | first }}&nbsp;&nbsp;</span>({{ category | last | size }})</span></p>
			 <ul class="arc-list">
			    {% for post in category.last %}
			        <li><a href="{{ post.url }}">{{ post.title }}</a></li><!-- {{ post.date | date:"%d/%m/%Y"}} -->
			    {% endfor %}
			</ul>
		{% endfor %}
	</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.sort').siblings('ul').hide()
	 .end().on('click',function(){
		$(this).next().toggle().siblings('ul').hide();
	});	
})
</script>