github-style/layouts/partials/overview.html

{{ $mainSections := .Site.Params.mainSections | default (slice "post") }}
{{ $section := where .Site.RegularPages "Section" "in" $mainSections }}
{{ $section_count := len $section }}
{{ $n_posts := $.Param "recent_posts_number" | default 6 }}
<div class="col-lg-9 col-md-8 col-12 float-md-left pl-md-2">
    <div class="UnderlineNav width-full user-profile-nav js-sticky top-0">
        <nav class="UnderlineNav-body" data-pjax aria-label="User profile">
            <a aria-current="page" class="UnderlineNav-item mr-0 mr-md-1 mr-lg-3 selected " href="{{ .Site.BaseURL }}">
                Overview
            </a>
            <a class="UnderlineNav-item mr-0 mr-md-1 mr-lg-3 " href="{{ .Site.BaseURL }}/posts">
                Posts
                <span class="Counter hide-lg hide-md hide-sm">
                    {{ $section_count}}
                </span>
            </a>
            <a class="UnderlineNav-item mr-0 mr-md-1 mr-lg-3 " href="{{ .Site.BaseURL }}/about">
                About
            </a>
        </nav>
    </div>
    <div class="position-relative">
        <div class="mt-4">
            <div class="js-pinned-items-reorder-container">
                <h2 class="f4 mb-2 text-normal">
                    Pinned
                </h2>

                <ol class="d-flex flex-wrap list-style-none gutter-condensed mb-4 js-pinned-items-reorder-list">
                    {{ range (first $n_posts $section) }}
                    <li class="col-12 col-md-6 col-lg-6 mb-3 d-flex flex-content-stretch">
                        <div
                            class="Box pinned-item-list-item d-flex p-3 width-full js-pinned-item-list-item public source  sortable-button-item">
                            <div class="pinned-item-list-item-content" name="pinned-post">
                                <div class="d-flex width-full flex-items-center position-relative">
                                    <svg class="octicon octicon-repo mr-2 text-gray flex-shrink-0" viewBox="0 0 12 16"
                                        version="1.1" width="12" height="16" aria-hidden="true">
                                        <path fill-rule="evenodd"
                                            d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z" />
                                    </svg>
                                    <a href="{{ .URL }}" class="text-bold flex-auto min-width-0 ">
                                        <span class="repo js-pinnable-item" title="{{ .Title }}">{{ .Title }}</span>
                                    </a>
                                </div>
                                {{ .Summary | safeHTML }}
                                <div class="f6 text-gray mt-2">
                                    <span class="mr-3">
                                        <svg class="octicon octicon-law mr-1" viewBox="0 0 14 16" version="1.1"
                                            width="14" height="16" aria-hidden="true">
                                            <path fill-rule="evenodd"
                                                d="M7 4c-.83 0-1.5-.67-1.5-1.5S6.17 1 7 1s1.5.67 1.5 1.5S7.83 4 7 4zm7 6c0 1.11-.89 2-2 2h-1c-1.11 0-2-.89-2-2l2-4h-1c-.55 0-1-.45-1-1H8v8c.42 0 1 .45 1 1h1c.42 0 1 .45 1 1H3c0-.55.58-1 1-1h1c0-.55.58-1 1-1h.03L6 5H5c0 .55-.45 1-1 1H3l2 4c0 1.11-.89 2-2 2H2c-1.11 0-2-.89-2-2l2-4H1V5h3c0-.55.45-1 1-1h4c.55 0 1 .45 1 1h3v1h-1l2 4zM2.5 7L1 10h3L2.5 7zM13 10l-1.5-3-1.5 3h3z">
                                            </path>
                                        </svg>MIT License
                                    </span>

                                    Updated <relative-time datetime="{{ .PublishDate.Format "2006-01-02" }}"
                                        class="no-wrap" title="Modify at {{ .Lastmod.Format "2006/01/02" }}">
                                        {{ .PublishDate.Format "January 2, 2006" }}</relative-time>
                                </div>
                            </div>
                        </div>
                    </li>
                    {{ end }}
                </ol>
            </div>
        </div>
        <div id="pinned-items-modal-wrapper"></div>
    </div>
</div>
</div>