|
|
| 1번째 줄: |
1번째 줄: |
| <onlyinclude>{{#switch: {{{1}}} | | <onlyinclude> {{#css: |
| |4 in a row= {{#css:
| |
| * > :has(.gamecards){ | | * > :has(.gamecards){ |
| container-type: inline-size; | | container-type: inline-size; |
| 13번째 줄: |
12번째 줄: |
|
| |
|
| .gamecard { | | .gamecard { |
| width:25%;
| |
| border-color: hsl(320, 95%, 80%); | | border-color: hsl(320, 95%, 80%); |
| background: #fff; | | background: #fff; |
| 148번째 줄: |
146번째 줄: |
| } | | } |
|
| |
|
| }}
| |
| |#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> |
| 하위문서의 디자인을 담당하는 부분을 분리해둔 문서입니다. | | 하위문서의 디자인을 담당하는 부분을 분리해둔 문서입니다. |
| == 도보시오 == | | == 도보시오 == |
| * [[../|하위 문서로]] | | * [[../|하위 문서로]] |