{{ define "main" }}
<style>
    @media only screen and (max-width: 768px) {

        /* 针对宽度小于768px的设备(通常是平板和手机) */
        .items {
            grid-template-columns: repeat(1, 1fr)!important;
            grid-gap: 10px;
        }
    }

    /* 新版友链样式 */
    .items {
        /* padding: 10px; */
        width: 100%;
        height: 100%;
        /* background-color: #f5f5f6; */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
        /* 网格之间的间距 */
        justify-content: space-between;
    }

    .item-box {
        background-color: white;
        border-radius: 5px;
        padding: 8px;
        /* width: 47%; */
        height: 300px;
        /* border: 1px solid #333; */
        box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
    }

    .website-img {
        margin: 0 auto;
        width: 90%;
    }

    .website-img img {
        width: 100%;
        height: 150px;
        object-fit: contain;
    }

    .website-go-button {
        margin: 0 auto;
        width: 95%;
        border-radius: 5px;
        font-size: 14px;
        padding: 5px;
        text-align: center;
        background-color: black;
        color: white;
    }

    .link-info {
        padding: 8px;
        width: 100%;
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .link-avatar {
        width: 40%;
        /* 设置弹性布局 */
        display: flex;
        /* justify-content: center; */
        align-items: center;
    }

    .link-avatar img {
        position: relative;
        left: 5px;
        width: 50px;
        height: 50px;
    }

    .link-text-main {
        width: 55%;
        display: flex;
        flex-direction: column;
    }

    .link-name {
        position: relative;
        right: 10px;
        bottom: 5px;
        width: 100%;
        height: 50%;
        font-weight: 600;
    }

    .link-des {
        position: relative;
        right: 10px;
        top: 1px;
        width: 100%;
        height: 50%;
    }
</style>
<div id="pjax-container">
    <div class="post-content" itemprop="articleBody">
        <div class="items" uk-scrollspy="target: > .item-box; cls: uk-animation-slide-bottom-small; delay: 0">
            {{ range site.Data.links.blogs }}
            <div class="item-box">
                <div class="website-img">
                    <img src="https://s0.wp.com/mshots/v1/{{ .url }}?w=800&h=600" alt="{{ .name }}">
                </div>
                <div class="link-info">
                    <div class="link-avatar">
                        <img src="{{ .image }}" alt="{{ .name }}">
                    </div>
                    <div class="link-des">
                        <div class="link-name">{{ .name }}</div>
                        <div class="link-des" style="color: #64748B;">{{ .description }}</div>
                    </div>
                </div>
                <a href="{{ .url }}">
                    <div class="website-go-button">逛一逛</div>
                </a>
            </div>
            {{ end }}
        </div>
        <div style="clear:both;"></div>
    </div>
</div>
{{ end }}