redemption/source/css/pages/layout/_header.scss

// Header 头部
@import "../../base/variables";

.header {
    display: flex;
    

    // 站点标题
    >.title {
        >a {
            font-size: 2.2rem;
            letter-spacing: 0.2rem;
            line-height: 2.4rem;

            >span {
                color: #262626;

                &:hover {
                    color: #26262680;
                }
            }
        }
    }

    // 二级标题
    >.description {
        font-size: 0.9rem;
        color: #8c8c8c;

        >.socials {
            display: flex;
            justify-content: flex-end;

            >a {
                font-size: 1rem;
                margin-left: 0.5rem;
                cursor: pointer;

                color: #8c8c8c;

                &:hover {
                    color: #8c8c8c80;
                }
            }
        }
    }

    // =========== 深色 ===========
    @include darkmode {
        >.title {
            >a {
                >span {
                    color: #dbdbdb;

                    &:hover {
                        color: #dbdbdb80;
                    }
                }
            }
        }

        >.description {
            color: #7d7d7d;

            >.socials {
                >a {
                    color: #7d7d7d;

                    &:hover {
                        color: #7d7d7d80;
                    }
                }
            }
        }

    }

    // =========== 移动端 ===========
    @media (max-width: 870px) {
        flex-direction: column;
        align-items: center;
        width: 90%;
        padding: 17% 5% 5% 5%;

        >.description {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }

    // =========== 桌面端 ===========
    @media (min-width: 870px){
        width: 80%;
        padding: 8rem 0 4rem 0;
        justify-content: space-between;

        >.title {
            width: 6rem;
        }

        >.description {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
    }
}