续:为Hugo Stack主题添加友情链接页面

不太喜欢原页面的排版,遂修改CSS样式,让友情链接列表在≥1024px时显示为两列。

首先,添加@media,然后将links container的display改为grid,并设置grid-template-columns为两列(1fr 1fr):

@media (min-width: 1024px) {
    .article-list--compact.links {
        display: grid;
        grid-template-columns: 1fr 1fr;
}

接着修改container和单一link(即article)的CSS样式,主要是将原本container的backgroundbox-shadow移到article上:

.article-list--compact.links {
    background: none;
    box-shadow: none;
    
    article {
        background: var(--card-background);
        box-shadow: var(--shadow-l1);
    }
}

最后,设置article的样式。为了保持整齐,去掉原本的border,下方添加margin,并且只有当article位于第一列时,右侧才添加margin

article {
    border: none;
    margin-bottom: 8px;
    &:nth-child(odd) {
        margin-right: 8px;
    }
}

完整代码:

@media (min-width: 1024px) {
    .article-list--compact.links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: none;
        box-shadow: none;
        
        article {
            background: var(--card-background);
            border: none;
            box-shadow: var(--shadow-l1);
            margin-bottom: 8px;
            &:nth-child(odd) {
                margin-right: 8px;
            }
        }
    }
}