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

2024년 8월 12일 (월) 20:13 판

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

도보시오

하위 문서로

@@ 1번째 줄: / 1번째 줄: @@
 <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 .image-wrapper img{
+    width: 100%;
+    max-height: 5em;
+    object-fit: cover;
+}
-	/* 헤더 컬러, 일반적으로 장르를 따라감 */
+.gamecard .content {
-	.gamecard .theme {
+	padding: 8px 12px;
-		height: 8px;
+}
-	}
-	/* 헤더 컬러를 제외한 나머지부분 여백 추가 */
+.gamecard .content .genres{
-	.gamecard .content {
+	margin-bottom:8px;
-		padding: 8px 16px;
+	margin-left: 4px;
-	}
+}
-	/* 장르 단추들 하단 마진 추가 */
+.gamecard .content .genres .genre{
-	.gamecard .content .genres{
+	background: hsl(132,68%,50%);
-		margin-bottom:8px;
+	font-size: 0.8em;
-	}
+	padding: 2px 6px;
+	border-radius: 1em;
-	.gamecard .content .genres .genre{
+	white-space: nowrap;
-		background: hsl(132,68%,50%);
+}
-		font-size: 0.8em;
-		padding: 2px 6px;
-		border-radius: 1em;
-	}
-	.gamecard .content .genres .genre a{
+.gamecard .content .genres .genre:not(:last-child){
-		color: #fff;
+	margin-right: 4px;
-	}
+}
-	.gamecard .title {
+.gamecard .content .genres .genre a{
-		font-size: 1.2em;
+	color: #fff;
-		font-weight: bold;
+}
-		margin-left: 8px;
-	}
-	.gamecard .title a {
+.gamecard .title {
-		color: #6480b6;
+	font-size: 1.2em;
-	}
+	font-weight: bold;
+}
-	.gamecard .summary {
+.gamecard .title a {
-		font-size: 0.8em;
+	color: #6480b6;
-		margin-left: 8px;
+}
-		color: #999;
-		margin-bottom: 8px;
-	}
-	.gamecard .content>.description {
+.gamecard .summary {
-		font-size: 0.8em;
+	font-size: 0.8em;
-	}
+	color: #999;
+	margin-bottom: 8px;
+}
-	.gamecard .icon-wrapper {
+.gamecard .content>.description {
-		position: relative;
+	font-size: 0.8em;
-		user-select: none;
+	margin-left: 8px;
-	}
+}
-	.gamecard .icon-wrapper .icon {
+.gamecard.설명감춤 .content>.description {
-		color: #999;
+	display:none;
-		transition: opacity 0.2s ease-in-out;
+}
-		opacity: 0.5;
-	}
-	.gamecard .icon-wrapper:hover .icon {
+.gamecard .icon-wrapper {
-		opacity: 1;
+	position: relative;
-	}
+	user-select: none;
+}
-	.gamecard .icon-wrapper .description {
+.gamecard .icon-wrapper .icon {
-		visibility: hidden;
+    color: #777;
-		position: absolute;
+	transition: opacity 0.2s ease-in-out;
-		bottom: 0;
+	opacity: 0.5;
-		right: 0;
+    font-size: 1.7em;
-		text-wrap: nowrap;
+}
-		transition: opacity 0.2s ease-in-out;
-		opacity: 0;
-		background: #000;
-		color: #fff;
-		padding: 2px 6px;
-		font-size: 0.8em;
-		transform: translateY(100%);
-	}
-	.gamecard .icon-wrapper:hover .description {
+.gamecard .icon-wrapper .icon a{
-		visibility: visible;
+    color: inherit;
-		opacity: 0.6;
+    text-decoration: none;
+}
-	}
+.gamecard .icon-wrapper:hover .icon {
+	opacity: 1;
+}
-	.gamecard .badges {
+.gamecard .icon-wrapper .description {
-		float: right;
+	visibility: hidden;
-		display: flex;
+	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 .badges>* {
+.gamecard .icon-wrapper:hover .description {
-		margin-left: 4px;
+	visibility: visible;
-	}
+	opacity: 0.6;
-	.gamecard .detail {
+}
-		font-size: 0.8em;
-		margin-top: 8px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-	/* nth1부터 좌측 마진 왼쪽 구분자 */
+.gamecard .badges {
-	.gamecard .author a:nth-child(n+1) {
+	float: right;
-		margin-left: 4px;
+	display: flex;
-	}
+}
-	.gamecard .author a:nth-child(n+2):before {
+.gamecard .badges>* {
-		content: "•";
+	margin-left: 4px;
-		margin-right: 4px;
+}
-	}
-	.gamecard .detail .created,
+.gamecard .detail {
-	.gamecard .detail .metapage {
+	font-size: 0.8em;
-		float: right;
+	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>