Home.css:修订间差异
来自失传媒体中文维基
更多操作
状态:未填写 | 类型:未填写
| 第30行: | 第30行: | ||
width: 50px; | width: 50px; | ||
height: 50px; | height: 50px; | ||
} | |||
.site:hover::after { | |||
opacity: 1; | |||
visibility: visible; | |||
} | |||
.other-sites .site a{ | |||
pointer-events: none; | |||
position: relative; | |||
z-index: 0; | |||
display: block; | |||
width: 0; | |||
height: 0; | |||
} | |||
.other-sites .site:hover a{ | |||
pointer-events: auto; | |||
z-index: 40; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
@media only screen and (max-width: 800px){ | |||
.other-sites { | |||
grid-template-columns: repeat(3, 1fr); | |||
} | |||
.other-sites .site{ | |||
margin-bottom:20px; | |||
margin-top:20px; | |||
} | |||
.site::after { | |||
white-space: normal; | |||
width: min(75px, 33vw); | |||
} | |||
.site img::after { | |||
content: attr(alt); | |||
position: absolute; | |||
top: calc(100% + 8px); | |||
left: 50%; | |||
transform: translateX(-50%); | |||
background-color: rgba(var(--background-color)); | |||
color: #333; | |||
font-size: 12px; | |||
padding: 4px 8px; | |||
border-radius: 4px; | |||
box-shadow: 0 2px 8px rgba( var(--text-color) , 0.15); | |||
white-space: nowrap; | |||
opacity: 0; | |||
visibility: hidden; | |||
transition: all 0.3s ease; | |||
z-index: 30; | |||
} | } | ||
2026年4月7日 (二) 23:59的版本
.page-header-info {
display: none !important;
}
.recent-article {
max-height: 40vh;
overflow-y: auto;
}
.other-sites {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
justify-content: center;
background: var(--color-surface-1);
}
.other-sites .site {
position: relative;
cursor: pointer;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-bottom: 30px;
margin-top: 30px;
transition: all 0.3s ease;
}
.other-sites .site img{
width: 50px;
height: 50px;
}
.site:hover::after {
opacity: 1;
visibility: visible;
}
.other-sites .site a{
pointer-events: none;
position: relative;
z-index: 0;
display: block;
width: 0;
height: 0;
}
.other-sites .site:hover a{
pointer-events: auto;
z-index: 40;
width: 100%;
height: 100%;
}
@media only screen and (max-width: 800px){
.other-sites {
grid-template-columns: repeat(3, 1fr);
}
.other-sites .site{
margin-bottom:20px;
margin-top:20px;
}
.site::after {
white-space: normal;
width: min(75px, 33vw);
}
.site img::after {
content: attr(alt);
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background-color: rgba(var(--background-color));
color: #333;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba( var(--text-color) , 0.15);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 30;
}