无编辑摘要 标签：   |
|||
| （未显示1个用户的7个中间版本） | |||
| 第1行： | 第1行： | ||
<!-- Nav --> | <!-- Nav --> | ||
<div class=" | <div class="home-grid home-button"> | ||
<div class="nav-card nav-card--button"> | <div class="nav-card nav-card--button"> | ||
<div class="nav-card__background">[[文件:Cardbg.jpg|300px|link=易什春秋]]</div> | <div class="nav-card__background">[[文件:Cardbg.jpg|300px|link=易什春秋]]</div> | ||
| 第20行： | 第20行： | ||
<!-- CSS --> | <!-- CSS --> | ||
{{#CSS: | {{#CSS: | ||
.nav-card { | .nav-card { | ||
position: relative; | position: relative; | ||
padding: 15px; | padding: 15px; | ||
background: var( --color-surface-1 ); | /*margin-bottom: 10px;*/ | ||
border-radius: 15px; | background: var( --color-surface-1 ); | ||
box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 ); | border-radius: 15px; | ||
font-size: 0.875rem; | box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 ); | ||
font-size: 0.875rem; | |||
} | |||
#home-nav { | |||
margin-top: 0.8rem; | |||
} | } | ||
.nav-card__background:after { | .nav-card__background:after { | ||
position: absolute; | position: absolute; | ||
pointer-events: none; | pointer-events: none; | ||
top: 0; | top: 0; | ||
right: 0; | right: 0; | ||
| 第38行： | 第42行： | ||
left: 0; | left: 0; | ||
display: block; | display: block; | ||
background: linear-gradient( to right | background: linear-gradient(to right,#000,transparent); | ||
content: ""; | content: ""; | ||
} | } | ||
.nav-card__foreground { | #home-nav .nav-card__foreground { | ||
pointer-events: none; | pointer-events: none; | ||
height: 100%; | height: 100%; | ||
width: 100%; | width: 100%; | ||
display: flex; | display: flex; | ||
| 第52行： | 第56行： | ||
font-weight: 500; | font-weight: 500; | ||
} | } | ||
.nav-card__navimgtext { | .nav-card__navimgtext { | ||
pointer-events: none; | pointer-events: none; | ||
height: 100%; | height: 100%; | ||
width: 100%; | width: 100%; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
padding: 0 15px; | padding: 0 15px; | ||
color: #fff; | color: #fff; | ||
font-weight: 500; | font-weight: 500; | ||
} | } | ||
.nav-card__background { | .nav-card__background { | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
right: 0; | right: 0; | ||
bottom: 0; | bottom: 0; | ||
left: 0; | left: 0; | ||
background: #242a31; | background: #242a31; | ||
border-radius: 15px; | border-radius: 15px; | ||
} | } | ||
.nav-card__background img { | .nav-card__background img { | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
object-fit: cover; | object-fit: cover; | ||
object-position: center; | object-position: center; | ||
} | } | ||
.nav-card__foreground { | .nav-card__foreground { | ||
position: absolute; | position: absolute; | ||
} | } | ||
.nav-card p { | .nav-card p { | ||
margin-top: 0.2rem; | margin-top: 0.2rem; | ||
font-size: 0.875rem; | font-size: 0.875rem; | ||
} | } | ||
.nav-card.nav-card--button { | .nav-card.nav-card--button { | ||
overflow: hidden; | overflow: hidden; | ||
padding: 0; | padding: 0; | ||
background: #242a31; | background: #242a31; | ||
} | } | ||
.nav-card--button a { | .nav-card--button a { | ||
display: flex; | display: flex; | ||
height: 100%; | height: 100%; | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
padding: 0 15px; | padding: 0 15px; | ||
background: transparent; | background: transparent; | ||
color: #fff; | color: #fff; | ||
font-weight: 500; | font-weight: 500; | ||
} | } | ||
.nav-card--button .nav-card__background a { | .nav-card--button .nav-card__background a { | ||
padding: 0; | padding: 0; | ||
} | } | ||
.nav-card--button img { | .nav-card--button img { | ||
transition: transform 0.3s ease; | transition: transform 0.3s ease; | ||
} | } | ||
.nav-card--button:hover img { | .nav-card--button:hover img { | ||
transform: scale(1.05); | transform: scale(1.05); | ||
} | } | ||
/* grid 排版 */ | /* grid 排版 */ | ||
. | .home-grid { | ||
display: grid; | |||
grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) ); | |||
grid-auto-rows: minmax( 3rem, auto ); | |||
grid-gap: 0.625rem; | |||
margin-top: 10px; | |||
} | } | ||
. | .home-grid a.external { | ||
background-image: none; | |||
} | } | ||
}} | }} | ||
2024年4月6日 (六) 00:41的最新版本
