home/css/mobile.css

@charset"utf-8";

/*小于1400px时*/
@media (max-width: 1400px) {}

/*小于1200px时*/
@media (max-width: 1200px) {

    /*总布局*/
    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 1100px !important;
    }

    .weekday {
        display: none;
    }
}

/*小于992px时*/
@media (max-width: 992px) {

    /*简介不可点击
    .message {
        pointer-events: none;
    }
    */

    /*一言*/
    .col.hitokotos {
        display: none;
    }

    /*日期显示*/
    .weekday {
        display: inline;
    }

    /*标题文字*/
    .main-img img {
        width: 110px;
    }

    span.img-title {
        font-size: 4.75rem;
    }

    span.img-text {
        font-size: 1.75rem;
    }

    /*链接卡片文字*/
    span.link-name {
        display: none !important;
    }

    .link-card i {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}

/*小于840px时*/
@media (max-width: 840px) {


    /*社交链接*/
    .social {
        max-width: 100%;
        justify-content: center;
    }

    #link-text {
        display: none !important;
    }

    .link i {
        margin: 0px 20px;
    }
}

/*小于789px时*/
@media (max-width: 789px) {

    /*标题文字*/
    span.img-text {
        display: none;
    }
}

/*小于768px时*/
@media (max-width: 768px) {

    /*标题文字*/
    .main-img img {
        width: 100px;
    }

    span.img-title {
        font-size: 4.5rem;
    }
}

/*小于720px时*/
@media (max-width: 720px) {

    /*左侧栏高度*/
    .main-left {
        transform: translateY(20px);
    }

    /*右侧栏隐藏*/
    .col.right {
        display: none;
    }

    /*标题文字*/
    span.img-text {
        display: inline;
    }

    /*简介*/
    .message {
        max-width: 100%;
        pointer-events: none;
    }

    /*
    .des {
        justify-content: space-between;
    }
    */

    /*链接卡片*/
    .link-card {
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    span.link-name {
        display: block !important;
    }

    /*菜单栏按钮*/
    .menu {
        display: flex;
        justify-content: center;
        position: fixed;
        top: 84%;
    }

    .munu-button {
        padding: 5px 20px;
        background: rgb(0 0 0 / 20%);
        backdrop-filter: blur(10px);
        border-radius: 6px;
        font-size: 1.25rem;
        transition: 0.5s;
        width: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
    }

    /*页脚文字*/
    footer {
        font-size: 0.85rem;
    }

}

/*小于390px时*/
@media (max-width: 390px) {
    .main-img img {
        display: none;
    }
}


/* 大于720px时 */
@media (min-width: 720px) {
    .menu {
        display: none !important;
    }
}

/* 大于992px时 */
@media (min-width: 992px) {

    /*时钟显示*/
    span#win_text,
    span#win_speed {
        display: none;
    }
}

/* 大于1400px时 */
@media (min-width: 1400px) {

    /*时钟显示*/
    span#win_text,
    span#win_speed {
        display: inline !important;
    }
}


/*
菜单按钮
*/
.menus .col.left {
    display: none;
}

.menus .col.right {
    display: block !important;
    transition: 0.5s;
    padding: 0rem 0.75rem;
}

/*功能区调整*/
.menus .col.hitokotos {
    display: block;
}

.menus .col.times {
    display: none;
}

/*边界布局*/
.menus .row {
    --bs-gutter-x: 0rem;
}

.menus .col.\32 {
    margin: 0 0.75rem;
}

.menus .logo {
    display: inline !important;
    text-align: center;
    position: fixed;
    top: 8%;
    font-size: 1.75rem;
}

/*第二屏logo*/
.logo-text {
    font-family: 'Pacifico-Regular' !important;
}

/*切换动画*/
/*
.hitokoto,
.time,
.link-card,
.message {
    animation: fade-in;
    -webkit-animation: fade-in 0.5s;
    -moz-animation: fade-in 0.5s;
    -o-animation: fade-in 0.5s;
    -ms-animation: fade-in 0.5s;
}
*/
.logo,
.line,
.main-img,
.social,
.close,
.hitokoto,
.time,
.link-card,
.message,
#link-text {
    animation: fade 0.5;
    -webkit-animation: fade 0.5s;
    -moz-animation: fade 0.5s;
    -o-animation: fade 0.5s;
    -ms-animation: fade 0.5s;
}

/*
移动端功能区切换
*/
.mobile .col.hitokotos {
    display: none;
}

.mobile .col.times {
    display: block;
}