timeline view for concrete5 page_list block (concrete5のページリストの表示を年表のようにするコード)

view.css

.timeline {
    list-style: none;
}
.timeline > li {
    margin-bottom: 20px;
    position: relative;

}

@media ( max-width : 639px ){
    .timeline {
        border-left: 3px #e5e5d1 solid;
        padding-left: 20px;
    }
    .timeline-date:before {
        content: '';
        width: 12px;
        height: 12px;
        background: #6fc173;
        position: absolute;
        left: -27px;
        top: 4px;
        border-radius: 100%;
    }
}
/* for Desktop */
@media ( min-width : 640px ){
    .timeline > li {
        overflow: hidden;
        margin: 0;
    }
    .timeline-date {
        width: 124px;
        float: left;
        margin-top: 20px;
    }
    .timeline-content {
        width: 75%;
        float: left;
        border-left: 3px #e5e5d1 solid;
        padding-left: 30px;
    }
    .timeline-content:before {
        content: '';
        width: 12px;
        height: 12px;
        background: #6fc173;
        position: absolute;
        left: 120px;
        top: 24px;
        border-radius: 100%;
    }
}

view.php

<?php
defined('C5_EXECUTE') or die("Access Denied.");
// タイトル、RSS、サムネイルは出力しない
// 日付は常に表示する。
// ページネーションや、ページ0件の場合の表示は考慮していない
$th = Loader::helper('text');
$c = Page::getCurrentPage();
$dh = Core::make('helper/date'); /* @var $dh \Concrete\Core\Localization\Service\Date */
?>

<?php if ($c->isEditMode() && $controller->isBlockEmpty()) {
    ?>
    <div class="ccm-edit-mode-disabled-item"><?php echo t('Empty Page List Block.')?></div>
    <?php
} else {
    ?>

    <div class="ccm-block-page-list-wrapper">

        <ul class="timeline">

            <?php
            foreach ($pages as $page):

                $title = $th->entities($page->getCollectionName());$description = $page->getCollectionDescription();
                $description = $controller->truncateSummaries ? $th->wordSafeShortText($description, $controller->truncateChars) : $description;
                $description = $th->entities($description);

                $date = $dh->formatCustom('Y年m月',$page->getCollectionDatePublic());
            ?>


                <li>
                    <p class="timeline-date"><?php echo $date?></p>
                    <div class="timeline-content">
                        <h3><?php echo $title; ?></h3>
                        <p><?php echo $description ?></p>
                    </div>
                </li>

            <?php endforeach;
            ?>
        </ul>

    </div><!-- end .ccm-block-page-list-wrapper -->

    <?php
} ?>

ライセンスは WTFPL です。
ベースに採用したコードは、 http://www.webcreatorbox.com/tech/css-timeline/ のコードです。