{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
{{ $recent := first 10 $pages.ByDate.Reverse }}

<style>
  .recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .recent-list li {
    margin-bottom: 8px;
  }
  .recent-date {
    font-family: monospace;
    margin-right: 10px;
    white-space: nowrap;
  }
  .recent-title {
    word-wrap: break-word;
  }
  .recent-empty {
    text-align: center;
    font-style: italic;
  }
  @media (max-width: 720px) {
    .recent-list li {
      display: flex;
      flex-wrap: wrap;
    }
    .recent-date {
      width: auto;
      margin-right: 0.5em;
    }
  }

  .recent-posts {
      margin-top: .8rem;
  }

  .recent-posts h2 {
      margin-top: 1rem;
      margin-bottom: 1rem;

  }
</style>

<div class="recent-posts">
  {{ if $recent }}
  <ul class="recent-list">
    {{ range $recent }}
    <div class="recent-item">
      <li>
      <span class="recent-date">{{ .Date.Format "2006-01-02" }}</span>
      <a href="{{ .RelPermalink }}" class="recent-title">{{ .Title }}</a>
      </li>

      <summary>
	{{ .Summary }}
      </summary>

      </div>
    {{ end }}
  </ul>
  {{ else }}
  <div class="recent-empty">暂无文章</div>
  {{ end }}
</div>