hexo-theme-wang/source/css/archives.styl

a hexo theme minimalism

.archives {
    display: flex
    flex-direction: column
    align-items: center
    width: 100%
    max-width: 1200px
    margin: 0 auto
    min-height: 100vh

    h1 {
        font-size: 1.8em
        text-align: center
        margin-top: 4em
    }

    .archive-grid {
        display: grid
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
        gap: 30px
        padding: 30px
        width: 100%
        justify-content: center

        .archive-card {
            background: rgba(255, 255, 255, 0.1)  // 半透明背景
            border-radius: 8px
            padding: 15px
            box-shadow: 0 2px 8px rgba(0,0,0,0.08)
            transition: transform 0.2s, background 0.2s
            border: 1px solid rgba(255, 255, 255, 0.2)
            max-width: 350px
            width: 100%
            margin: 0 auto
            max-height: 400px
            display: flex
            flex-direction: column
            overflow: hidden

            &:hover {
                transform: translateY(-3px)
                box-shadow: 0 4px 12px rgba(0,0,0,0.12)
                background: rgba(255, 255, 255, 0.2)  // 悬浮时加深背景透明度
            }

            .card-dates {
                display: flex
                justify-content: space-between
                margin-bottom: 10px
            }

            .card-date, .card-update {
                display: flex
                align-items: center
                color: #ccc  // 调整文字颜色为浅灰色
                font-size: 0.9em
                margin-bottom: 10px

                img {
                    margin-right: 5px
                }
            }

            .card-title {
                margin: 10px 0
                font-size: 1.2em

                a {
                    color: #fff  // 调整链接颜色为白色
                    text-decoration: none

                    &:hover {
                        color: #ddd  // 悬浮时颜色变浅
                    }
                }
            }

            .card-excerpt {
                color: #ccc  // 调整文字颜色为浅灰色
                font-size: 0.9em
                margin: 10px 0
                line-height: 1.5
                overflow: hidden
                display: -webkit-box
                -webkit-line-clamp: 3
                line-clamp: 3
                -webkit-box-orient: vertical
                max-height: 200px
                overflow-y: auto

                &::-webkit-scrollbar {
                    width: 4px
                }
                
                &::-webkit-scrollbar-thumb {
                    background: #555  // 调整滚动条颜色为深灰色
                    border-radius: 2px
                }

                img {
                    max-width: 100%
                    height: auto
                    display: block
                    margin: 10px auto
                    border-radius: 4px
                    max-height: 150px
                    object-fit: cover
                }
            }

            .card-tags {
                margin-top: 10px

                .tag {
                    display: inline-block
                    padding: 2px 8px
                    margin: 0 4px 4px 0
                    background: rgba(255, 255, 255, 0.2)  // 半透明背景
                    border-radius: 4px
                    font-size: 0.8em
                    color: #ccc  // 调整文字颜色为浅灰色
                    text-decoration: none

                    &:hover {
                        background: rgba(255, 255, 255, 0.3)  // 悬浮时加深背景透明度
                    }
                }
            }
        }
    }
}