feat: add related-posts CSS styles

2026-04-24 10:00:55 +07:00
parent 33dc8a183a
commit 6359a18fed
1 changed files with 192 additions and 0 deletions
--- a/assets/css/related-posts.css
+++ b/assets/css/related-posts.css
@@ -0,0 +1,192 @@
+/**
+ * Related Posts Section Styles
+ * Scoped to .pr-related-posts
+ */
+
+:root {
+	color-scheme: light;
+}
+
+.pr-related-posts {
+	margin-top: 3rem;
+	padding: 2rem 0;
+	border-top: 1px solid var(--wp--preset--color--border, #e5e5e5);
+}
+
+.pr-related-posts h2 {
+	font-size: 1.5rem;
+	font-weight: 600;
+	margin-bottom: 1.5rem;
+	line-height: 1.3;
+}
+
+.pr-related-posts__grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 1.5rem;
+	margin-bottom: 1rem;
+}
+
+.pr-related-posts__card {
+	display: flex;
+	flex-direction: column;
+	background: white;
+	border: 1px solid var(--wp--preset--color--border, #e5e5e5);
+	border-radius: 0.5rem;
+	overflow: hidden;
+	transition: box-shadow 0.3s ease, transform 0.3s ease;
+}
+
+.pr-related-posts__card:hover {
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	transform: translateY(-2px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.pr-related-posts__card {
+		transition: none;
+	}
+
+	.pr-related-posts__card:hover {
+		transform: none;
+	}
+}
+
+.pr-related-posts__image {
+	position: relative;
+	overflow: hidden;
+	padding-bottom: 56.25%;
+	/* 16:9 aspect ratio */
+	background: var(--wp--preset--color--base, #f5f5f5);
+}
+
+.pr-related-posts__image--fallback {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding-bottom: 0;
+	height: 200px;
+}
+
+.pr-related-posts__image-element {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: center;
+}
+
+.pr-related-posts__image--fallback .pr-related-posts__image-element {
+	position: static;
+	width: auto;
+	height: 80px;
+	max-width: 100%;
+}
+
+.pr-related-posts__content {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	padding: 1rem;
+}
+
+.pr-related-posts__badge {
+	display: inline-block;
+	font-size: 0.75rem;
+	font-weight: 700;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: #666;
+	margin-bottom: 0.5rem;
+}
+
+.pr-related-posts__title {
+	font-size: 1.125rem;
+	font-weight: 600;
+	line-height: 1.4;
+	margin-bottom: 0.5rem;
+}
+
+.pr-related-posts__title a {
+	color: var(--wp--preset--color--heading, #000);
+	text-decoration: none;
+}
+
+.pr-related-posts__title a:hover {
+	text-decoration: underline;
+}
+
+.pr-related-posts__date {
+	font-size: 0.875rem;
+	color: #999;
+	margin-bottom: 0.75rem;
+}
+
+.pr-related-posts__excerpt {
+	font-size: 0.9375rem;
+	line-height: 1.5;
+	color: #666;
+	margin: 0;
+	flex-grow: 1;
+}
+
+.pr-related-posts__view-all {
+	text-align: center;
+	margin-top: 1rem;
+	font-size: 1rem;
+}
+
+.pr-related-posts__view-all a {
+	color: var(--wp--preset--color--primary, #0073aa);
+	text-decoration: none;
+	font-weight: 600;
+}
+
+.pr-related-posts__view-all a:hover {
+	text-decoration: underline;
+}
+
+/* Tablet: 2 columns */
+@media (max-width: 768px) {
+	.pr-related-posts__grid {
+		grid-template-columns: repeat(2, 1fr);
+		gap: 1rem;
+	}
+
+	.pr-related-posts h2 {
+		font-size: 1.25rem;
+	}
+
+	.pr-related-posts {
+		margin-top: 2rem;
+		padding: 1.5rem 0;
+	}
+}
+
+/* Mobile: 1 column */
+@media (max-width: 480px) {
+	.pr-related-posts__grid {
+		grid-template-columns: 1fr;
+		gap: 1rem;
+	}
+
+	.pr-related-posts h2 {
+		font-size: 1.125rem;
+		margin-bottom: 1rem;
+	}
+
+	.pr-related-posts {
+		margin-top: 1.5rem;
+		padding: 1rem 0;
+	}
+
+	.pr-related-posts__content {
+		padding: 0.75rem;
+	}
+
+	.pr-related-posts__title {
+		font-size: 1rem;
+	}
+}