归档列表样式

归档列表样式

<div class="post list">
        <h1 class="posttitle">📝全部文章</h1>
        <section id="articles-list">
        <div class="container">
            <form id="search" method="post" action="<?php $this->options->siteUrl(); ?>" role="search">
            <input id="search-query" type="text" id="s" name="s" class="text"  placeholder="搜索...">
            </form>
            <section>
            <?php
            $stat = Typecho_Widget::widget('Widget_Stat');
            $this->widget('Widget_Contents_Post_Recent', 'pageSize=' . $stat->publishedPostsNum)->to($archives);
            $year = 0;
            $mon = 0;
            $i = 0;
            $j = 0;
            $output = '<section>';
            while ($archives->next()) {
                $year_tmp = date('Y', $archives->created);
                if ($year != $year_tmp) {
                    $year = $year_tmp;
                    $output .= '<div class="post-row"><h2>' . date('Y', $archives->created) . '</h2></div>';
                }
                if ($this->options->PjaxOption && $archives->hidden) {
                    $output .= '<div class="post"><a href="' . $archives->permalink . '"><div class="post-row"><time>' . date('M j', $archives->created) . '</time><h3>'. $archives->title . '</h3></div></a></div>';
                } else {
                    $output .= '<div class="post"><a href="' . $archives->permalink . '"><div class="post-row"><time>' . date('M j', $archives->created) . '</time><h3>'. $archives->title . '</h3></div></a></div>';
                }
            }
            $output .= '</section>';
            echo $output;
            ?>
        </div>
    </section>

#search-query {
    width: 100%;
}
input.submit,input[type=password],#search-query{
	padding:.8rem 1rem;
	color:var(--input-color);
	border:2px solid var(--border);
	outline:0;
	border-radius:.35rem;
	font-size:1rem;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 2rem;
	margin-top: 2rem;
}
.list a {
    align-items: center;
    justify-content: stretch;
    padding: 1rem 0;
}
.list a:hover {
    display: flex;
    align-items: center;
    justify-content: stretch;
    padding: 1rem 0;
    background:#afa2a221;
}
.container{
	max-width:825px;
	padding:0 1.5rem;
	margin-left:auto;
	margin-right:auto
}
.post-row{
	display:flex;
	align-items:center;
	width:100%
}
.post-row time{
	display: block;
    flex: 0 0 65px;
	color: var(--light-font-color);
    font-size: .85rem;
    white-space: nowrap;
    font-weight: 400;
}
.post-row h2{
	border-bottom-width: 4px;
	border-bottom: 4px solidvar(--light-background);
}
.post-row h3{
	flex:1
}