首页/top.css
阅读:290 更新:2023-8-12
来自柯南百科
< 首页
h1.firstHeading,
#titletool {
display: none;
}
/* 通用 */
.top-small {
font-size: .9em;
}
.spacing {
letter-spacing: .2em;
}
.alt-blue {
color: #4a66c2;
}
.p-blue a {
color: #4a66c2;
}
/* 基本布局 */
.top {
padding: 0 16px;
}
@media (min-width: 768px) {
.top {
padding: 0;
}
}
.top-grid {
display: grid;
grid-gap: 20px;
gap: 20px;
}
.top-news-anime,
.top-news-movie,
.top-news-music,
.top-news-other,
.top-news-oom {
margin-top: 20px;
}
.top-dyk,
.top-star {
margin-bottom: 20px;
}
.top-news-wide {
display: none;
}
@media (min-width: 768px) {
.top-news-wide {
display: block;
}
.top-news-narrow {
display: none;
}
.top-news-flex {
display: flex;
}
.top-news-left,
.top-news-right {
flex: 1;
display: flex;
flex-wrap: wrap;
}
.top-news-left>div {
width: 100%;
margin-right: 10px;
}
.top-news-right>div {
width: 100%;
margin-left: 10px;
}
.top-news-anime {
margin-top: 0;
}
}
@media (min-width: 953px) {
.top-grid {
grid-template-columns: 1fr 270px;
}
.top-nav {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.top-news-flex {
grid-column: 1 / 2;
}
.top-welcome {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.top-sidebar {
grid-column: 2 / 3;
grid-row: 2 / 5;
}
.top-sidebar>div {
flex: 1;
}
.top-links {
grid-column: 1 / 2;
}
}
/* 次header布局 */
.top-header {
display: grid;
}
@media (min-width: 768px) {
.top-logo {
display: none;
}
.top-header {
grid-template-columns: 150px 1fr;
align-items: end;
}
.top-header-greeting {
justify-self: end;
}
}
.top-header-date {
font-size: 1.2em;
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: bold;
font-weight: 900;
white-space: nowrap;
-webkit-user-select: none;
user-select: none;
}
.top-header-date-day {
font-size: 1.4em;
}
.top-header-update {
font-size: .8rem;
font-style: normal;
}
.top-header-greeting {
font-size: .9em;
}
/* 窄屏幕logo */
@media (min-width: 768px) {
.top-logo {
display: none;
}
}
.top-logo {
margin: 10px auto;
text-align: center;
}
.top-logo img {
max-width: 200px;
}
/* 导航栏开始 */
/* 导航栏布局 */
.top-nav {
display: grid;
align-items: center;
}
@media (min-width: 953px) {
.top-nav {
grid-gap: 18px;
gap: 18px;
grid-template-columns: 40px 1fr;
}
.top-nav-circle {
grid-column: 1 / 2;
}
}
/* 探索 */
.top-nav-circle {
display: none;
}
@media (min-width: 953px) {
.top-nav-circle {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
}
/* 导航元素 */
.top-nav-blocks {
display: grid;
justify-items: center;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
gap: 5px;
}
.top-nav-blocks a {
display: inline-block;
text-align: center;
width: 90%;
min-width: 75px;
height: 24px;
padding-left: 3px;
color: #7a7a7a;
font-size: 14px;
letter-spacing: 3px;
text-decoration: none;
-webkit-user-select: none;
user-select: none;
transition: all .3s linear;
border-radius: 20px;
}
.top-nav-blocks a:hover {
color: #5f5f5f;
box-shadow: 0 0 5px #bbb;
}
@media {
.top-nav-blocks a:hover {
color: rgb(175, 175, 175);
}
}
@media (min-width: 953px) {
.top-nav-blocks {
grid-template-columns: repeat(6, 1fr);
}
.top-nav-blocks a:first-child {
letter-spacing: 0;
}
}
@media (min-width: 1058px) {
.top-nav-blocks a:first-child {
letter-spacing: 3px;
}
}
/* 加入柯南百科 */
.top-welcome {
padding: 10px;
text-align: center;
}
.top-welcome-content {
padding: 0 20px;
}
@media (min-width: 953px) {
.top-welcome {
padding-left: 15px;
text-align: left;
}
.top-welcome-content {
padding: 0;
}
}
.top-title a {
font-weight: bold;
font-size: 1.1em;
text-decoration: none;
-webkit-user-select: none;
user-select: none;
}
/* 你知道吗 */
.top-dyk ul {
margin: 5px 0;
padding-left: 15px;
}
/* 精选条目 */
.top-star .top-title {
margin-bottom: 5px;
}
.top-dyk,
.top-star,
.top-oom {
padding: 0 15px;
}
/* 其他链接 */
.top-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}