틀:게임카드/css: 두 판 사이의 차이

2023년 8월 4일 (금) 14:56 판

하위문서의 디자인을 담당하는 부분을 분리해둔 문서입니다.

도보시오

하위 문서로

@@ 1번째 줄: / 1번째 줄: @@
 <onlyinclude> {{#css:
+	<onlyinclude> {{#css:
+	* > :has(.gamecards){
+	container-type: inline-size;
-	.gamecard {
+}
-		border-color: hsl(320, 95%, 80%);
-		background: #fff;
+@container (width > 540px){
-		margin: 8px;
+	.gamecards{
-		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
+		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 .content {
+	padding: 8px 16px;
+}
-	.gamecard .theme {
+.gamecard .content .genres{
-		height: 8px;
+	margin-bottom:8px;
-	}
+}
-	.gamecard .content {
+.gamecard .content .genres .genre{
-		padding: 8px 16px;
+	background: hsl(132,68%,50%);
-	}
+	font-size: 0.8em;
+	padding: 2px 6px;
+	border-radius: 1em;
+	white-space: nowrap;
+}
-	.gamecard .content .genres{
+.gamecard .content .genres .genre:not(:last-child){
-		margin-bottom:8px;
+	margin-right: 4px;
-	}
+}
-	.gamecard .content .genres .genre{
-		background: hsl(132,68%,50%);
-		font-size: 0.8em;
-		padding: 2px 6px;
-		border-radius: 1em;
-	}
-    .gamecard .content .genres .genre:not(:last-child){
-        margin-right: 4px;
-    }
-	.gamecard .content .genres .genre a{
+.gamecard .content .genres .genre a{
-		color: #fff;
+	color: #fff;
-	}
+}
-	.gamecard .title {
+.gamecard .title {
-		font-size: 1.2em;
+	font-size: 1.2em;
-		font-weight: bold;
+	font-weight: bold;
-		margin-left: 8px;
+	margin-left: 8px;
-	}
+}
-	.gamecard .title a {
+.gamecard .title a {
-		color: #6480b6;
+	color: #6480b6;
-	}
+}
-	.gamecard .summary {
+.gamecard .summary {
-		font-size: 0.8em;
+	font-size: 0.8em;
-		margin-left: 8px;
+	margin-left: 8px;
-		color: #999;
+	color: #999;
-		margin-bottom: 8px;
+	margin-bottom: 8px;
-	}
+}
-	.gamecard .content>.description {
+.gamecard .content>.description {
-		font-size: 0.8em;
+	font-size: 0.8em;
-	}
+}
-	.gamecard .icon-wrapper {
+.gamecard .icon-wrapper {
-		position: relative;
+	position: relative;
-		user-select: none;
+	user-select: none;
-	}
+}
-	.gamecard .icon-wrapper .icon {
+.gamecard .icon-wrapper .icon {
-		color: #999;
+	color: #999;
-		transition: opacity 0.2s ease-in-out;
+	transition: opacity 0.2s ease-in-out;
-		opacity: 0.5;
+	opacity: 0.5;
-	}
+}
-	.gamecard .icon-wrapper:hover .icon {
+.gamecard .icon-wrapper:hover .icon {
-		opacity: 1;
+	opacity: 1;
-	}
+}
-	.gamecard .icon-wrapper .description {
+.gamecard .icon-wrapper .description {
-		visibility: hidden;
+	visibility: hidden;
-		position: absolute;
+	position: absolute;
-		bottom: 0;
+	bottom: 0;
-		right: 0;
+	right: 0;
-		text-wrap: nowrap;
+	text-wrap: nowrap;
-		transition: opacity 0.2s ease-in-out;
+	transition: opacity 0.2s ease-in-out;
-		opacity: 0;
+	opacity: 0;
-		background: #000;
+	background: #000;
-		color: #fff;
+	color: #fff;
-		padding: 2px 6px;
+	padding: 2px 6px;
-		font-size: 0.8em;
+	font-size: 0.8em;
-		transform: translateY(100%);
+	transform: translateY(100%);
-	}
+}
-	.gamecard .icon-wrapper:hover .description {
+.gamecard .icon-wrapper:hover .description {
-		visibility: visible;
+	visibility: visible;
-		opacity: 0.6;
+	opacity: 0.6;
-	}
+}
-	.gamecard .badges {
+.gamecard .badges {
-		float: right;
+	float: right;
-		display: flex;
+	display: flex;
-	}
+}
-	.gamecard .badges>* {
+.gamecard .badges>* {
-		margin-left: 4px;
+	margin-left: 4px;
-	}
+}
-	.gamecard .detail {
+.gamecard .detail {
-		font-size: 0.8em;
+	font-size: 0.8em;
-		margin-top: 8px;
+	margin-top: 8px;
-		display: flex;
+	display: flex;
-		align-items: center;
+	align-items: center;
-		justify-content: space-between;
+	justify-content: space-between;
-	}
+}
-	.gamecard .author .separator{
+.gamecard .author .separator{
-		margin:0 2px;
+	margin:0 2px;
-        color: #999;
+	color: #999;
-	}
+}
-	.gamecard .detail .created,
+.gamecard .detail .created,
-	.gamecard .detail .metapage {
+.gamecard .detail .metapage {
-		float: right;
+	float: right;
+}
-	}
+}}</onlyinclude>
+하위문서의 디자인을 담당하는 부분을 분리해둔 문서입니다.
+== 도보시오 ==
+* [[../|하위 문서로]]
 }}</onlyinclude>