268 lines
3.8 KiB
CSS
268 lines
3.8 KiB
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;
|
|
}
|
|
}
|
|
|
|
/*小于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;
|
|
}
|
|
*/
|
|
|
|
/*菜单栏按钮*/
|
|
.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-family: 'Pacifico-Regular';
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
/*切换动画*/
|
|
/*
|
|
.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;
|
|
} |