<style>
    @scope(.article-list-outline) {
        ul {
            list-style: none;
            padding-left: 0;
            color: #333;
            width: 90%;
            margin: 0 auto;
        }

        ul a {
            text-decoration: none;
            color: #333;
        }

        ul a:hover {
            text-decoration: underline;
            color: #999;
        }

        li {
            margin-bottom: 0.5rem;
        }

        .novel-outline-dot-line {
            flex-grow: 4;
            display: inline-block;
            height: 0.8em;
            border-bottom: 1px dotted #888;
            margin: 0 0.5em 0 0.5em;
            min-width: 2em;
        }
    }
</style>
<div class="article-list-outline">
    <ul>
        {PPP LOOP:articles}
        <li class='text log-link'>
            <a href='{PPP:articles.url}' class="log-link" data-log-link>
                <div style='display:flex;'>
                    <span class='title'>{PPP:articles.title}</span>
                    <span class='novel-outline-dot-line'> </span>
                    <span class='created_at' style=" white-space: nowrap">{PPP:articles.created_at_day}</span>
                </div>
            </a>
        </li>
        {/PPP LOOP}
    </ul>
    {PPP INCLUDE:template2_parts_pagination.php}
</div>