틀:게임카드/css: 두 판 사이의 차이
< 틀:게임카드
(속성한글화) |
(파라미터를 통한 커스텀 도입: '4 in a row'로 게임카드 너비 축소 시도) 태그: 되돌려진 기여 |
||
| 1번째 줄: | 1번째 줄: | ||
<onlyinclude> {{#css: | <onlyinclude>{{#switch: {{{1}}} | ||
|4 in a row= {{#css: | |||
* > :has(.gamecards){ | * > :has(.gamecards){ | ||
container-type: inline-size; | container-type: inline-size; | ||
| 12번째 줄: | 13번째 줄: | ||
.gamecard { | .gamecard { | ||
width:25%; | |||
border-color: hsl(320, 95%, 80%); | border-color: hsl(320, 95%, 80%); | ||
background: #fff; | background: #fff; | ||
| 146번째 줄: | 148번째 줄: | ||
} | } | ||
}} | |||
|#default= {{#css: | |||
* > :has(.gamecards){ | |||
container-type: inline-size; | |||
} | |||
@container (width > 540px){ | |||
.gamecards{ | |||
columns: 2 auto; | |||
column-gap: 12px; | |||
} | |||
} | |||
.gamecard { | |||
border-color: hsl(320, 95%, 80%); | |||
background: #fff; | |||
margin: 8px 0; | |||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); | |||
break-inside: avoid; | |||
} | |||
.gamecard .theme { | |||
height: 8px; | |||
} | |||
.gamecard .image-wrapper img{ | |||
width: 100%; | |||
max-height: 5em; | |||
object-fit: cover; | |||
} | |||
.gamecard .content { | |||
padding: 8px 12px; | |||
} | |||
.gamecard .content .genres{ | |||
margin-bottom:8px; | |||
margin-left: 4px; | |||
} | |||
.gamecard .content .genres .genre{ | |||
background: hsl(132,68%,50%); | |||
font-size: 0.8em; | |||
padding: 2px 6px; | |||
border-radius: 1em; | |||
white-space: nowrap; | |||
} | |||
.gamecard .content .genres .genre:not(:last-child){ | |||
margin-right: 4px; | |||
} | |||
.gamecard .content .genres .genre a{ | |||
color: #fff; | |||
} | |||
.gamecard .title { | |||
font-size: 1.2em; | |||
font-weight: bold; | |||
} | |||
.gamecard .title a { | |||
color: #6480b6; | |||
} | |||
.gamecard .summary { | |||
font-size: 0.8em; | |||
color: #999; | |||
margin-bottom: 8px; | |||
} | |||
.gamecard .content>.description { | |||
font-size: 0.8em; | |||
margin-left: 8px; | |||
} | |||
.gamecard.설명감춤 .content>.description { | |||
display:none; | |||
} | |||
.gamecard .icon-wrapper { | |||
position: relative; | |||
user-select: none; | |||
} | |||
.gamecard .icon-wrapper .icon { | |||
color: #777; | |||
transition: opacity 0.2s ease-in-out; | |||
opacity: 0.5; | |||
font-size: 1.7em; | |||
} | |||
.gamecard .icon-wrapper .icon a{ | |||
color: inherit; | |||
text-decoration: none; | |||
} | |||
.gamecard .icon-wrapper:hover .icon { | |||
opacity: 1; | |||
} | |||
.gamecard .icon-wrapper .description { | |||
visibility: hidden; | |||
position: absolute; | |||
bottom: 0; | |||
right: 0; | |||
text-wrap: nowrap; | |||
transition: opacity 0.2s ease-in-out; | |||
opacity: 0; | |||
background: #000; | |||
color: #fff; | |||
padding: 2px 6px; | |||
font-size: 0.6rem; | |||
transform: translateY(100%); | |||
} | |||
.gamecard .icon-wrapper:hover .description { | |||
visibility: visible; | |||
opacity: 0.6; | |||
} | |||
.gamecard .badges { | |||
float: right; | |||
display: flex; | |||
} | |||
.gamecard .badges>* { | |||
margin-left: 4px; | |||
} | |||
.gamecard .detail { | |||
font-size: 0.8em; | |||
margin-top: 8px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
} | |||
.gamecard .detail .created{ | |||
font-size: 0.5em; | |||
color: #999; | |||
} | |||
.gamecard .detail .author .separator{ | |||
margin:0 2px; | |||
color: #999; | |||
} | |||
}} | |||
}}</onlyinclude> | }}</onlyinclude> | ||
하위문서의 디자인을 담당하는 부분을 분리해둔 문서입니다. | 하위문서의 디자인을 담당하는 부분을 분리해둔 문서입니다. | ||
== 도보시오 == | == 도보시오 == | ||
* [[../|하위 문서로]] | * [[../|하위 문서로]] | ||