.index-posts{

    .footer{
        display: flex;
        flex-direction: row;
        justify-content: right;
        align-items: flex-end;
        gap:1rem;
        margin-top:1rem;
        
        .date{
            font-size:0.8rem;
            color: rgb(from var(--text) r g b / 20%);
        }

        .tags{ 
            text-align: right;

            a{padding-left:0.5rem;}

            a::before{
                content: "#";
                color: var(--bg-dark);
                margin-right: 0.2rem;
       
                font-size:12px;
            }
        }
    }

    li{
        margin-bottom: 3rem;

        header{
            display: flex;
            flex-direction: row;
            gap: 1rem;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: flex-end;
            border-bottom:2px solid var(--text-subtlest);


            padding:3px 8px;
            
            h3{ 
                font-size: 1.3rem;
                a{color:var(--text-subtle);}

                a:before{
                    content: "#";
                    color: var(--tag-color);
                    margin-right: 0.2rem;
                    font-size:14px;
                }
            }

            div.sub{
                span:not(.btns){font-size:0.8rem; color: var(--bg-subtler);}
                span.btns{
                    display: inline-flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    font-size: 0.8rem;
                    color: var(--bg-subtler);
                    
                    a{
                       width:30px;
                        margin-left: 6px;
                        margin-bottom: 3px;
                    }
                }
            }
            /*sticky featured*/
            &.featured{
                border-color: var(--featured);
                
            }
            &>h3>span{
                color:var(--featured);
                user-select: none;
            }
            
        }

    } 

    .main{
        flex-grow: 1;
        flex-shrink: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    
        border-radius: 0  0 12px 12px;
        background-color: var(--post-bg);

        min-height: 6rem;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);        
        padding: 1rem;
        border-radius: 0  0 12px 12px;
        transition: all 0.3s ease;

        .content{margin-bottom: 10px; }

        .date{margin-bottom: 10px; text-align: right;}
    }    
    .main:hover{
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.12); 
        background-color: var(--bg-strong);
    }

    .content{    
        line-height: 1.7rem;
        img{
            max-height: 10rem;
            max-width: 40%;
            width: auto;
             height: auto;

            float: left;            /* 左浮动，文字环绕 */
            margin-right: 12px;       /* 文字与图片间距 */
            margin-bottom: 8px;       /* 防止浮动影响下面段落 */
            object-fit: cover;
            border-radius: 8px;

            margin: 0 12px 8px 0;
            /* 可加 border-radius 等美化 */
           
            
        }   
    }

}

.post-edit-btns{
    position: absolute;
    top: 1rem;
    right: 1rem;

    .btn{padding:2px 16px;}
    
}

.load-more{
    text-align: center;
    margin: 2rem atuo;

    button{ 
        width: 160px; 
        padding: 6px 20px; 
        
    }
}




.tag-cloud {

    --tagcolor: color-mix(in srgb, var(--tag-color), white 20%);

    a{
        display: inline-block;
        padding: 2px 12px;
        border-radius:999px;
        border: #CCC 1px solid;
        margin: 8px;
        letter-spacing: 2px;

        transition: all 0.2s ease;
        

    }
    a:hover{
        color:#FFF;
        border-color: color-mix(in srgb, var(--tag-color, #999));
        background-color: var(--tag-color, #999);

    }
  
}

aside a.more-tags{
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 14px;
}