Refactor single article to Medium-style layout with minimal comments

comments.php

@@ -54,11 +54,11 @@ if (post_password_required()) {
 	endif; // Check for have_comments().
 	
 	$args = array(
-		'class_form' => 'comment-form mt-4 p-4 rounded bg-white shadow-sm border',
+		'class_form' => 'comment-form mt-4',
 		'class_submit' => 'btn btn-secondary fw-bold text-uppercase mt-3',
-		'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title h3 font-serif mb-4">',
+		'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title h4 font-sans mb-4">',
 		'title_reply_after' => '</h2>',
-		'comment_field' => '<div class="comment-form-comment mb-3"><label for="comment" class="form-label fw-bold">Your Perspective <span class="text-danger">*</span></label><textarea id="comment" name="comment" cols="45" rows="6" maxlength="65525" required="required" class="form-control bg-light"></textarea></div>',
+		'comment_field' => '<div class="comment-form-comment mb-3"><label for="comment" class="form-label text-muted small text-uppercase tracking-wider fw-bold">Add a Perspective <span class="text-danger">*</span></label><textarea id="comment" name="comment" cols="45" rows="4" maxlength="65525" required="required" class="form-control"></textarea></div>',
 	);
 	comment_form($args);
 	?>

single.php

@@ -11,33 +11,47 @@ get_header(); ?>
 		the_post();
 		?>
 		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
-			<header class="entry-header text-center mb-5">
+			<div class="row justify-content-center">
-				<div class="entry-meta text-uppercase text-muted small fw-semibold mb-3">
+				<div class="col-lg-8 col-xl-7">
-					<?php echo get_the_category_list(', '); ?>
+					<header class="entry-header mb-4">
-					<span class="mx-2">•</span>
+						<?php the_title('<h1 class="entry-title display-4 fw-bold font-serif lh-sm mb-4">', '</h1>'); ?>
-					<span class="entry-date"><?php echo get_the_date(); ?></span>
+
+						<div class="d-flex align-items-center mb-4 pb-4 border-bottom">
+							<div class="me-3">
+								<?php echo get_avatar(get_the_author_meta('ID'), 48, '', '', array('class' => 'rounded-circle')); ?>
+							</div>
+							<div>
+								<div class="fw-bold font-sans text-dark"><?php the_author(); ?></div>
+								<div
+									class="entry-meta text-muted small font-sans d-flex align-items-center flex-wrap gap-2">
+									<span><?php echo wisdom1_reading_time(); ?></span>
+									<span>•</span>
+									<span class="entry-date"><?php echo get_the_date('M j, Y'); ?></span>
+									<?php if (get_comments_number() > 0): ?>
+										<span>•</span>
+										<span><?php comments_number('0', '1 Response', '% Responses'); ?></span>
+									<?php endif; ?>
+								</div>
+							</div>
 						</div>
-				<?php the_title('<h1 class="entry-title display-4 fw-bold mb-4">', '</h1>'); ?>
 					</header>
 
 					<?php if (has_post_thumbnail()): ?>
 						<div class="post-thumbnail-full mb-5">
 							<?php the_post_thumbnail('full', array(
-						'class' => 'img-fluid rounded shadow-sm w-100',
+								'class' => 'img-fluid w-100',
 								'style' => 'aspect-ratio: 16/9; object-fit: cover;'
 							)); ?>
 						</div>
 					<?php endif; ?>
 
-			<div class="row">
+					<div class="entry-content fs-5 lh-lg font-sans text-dark" style="max-width: 680px; margin: 0 auto;">
-				<div class="col-lg-8 mx-auto">
-					<div class="entry-content fs-5 lh-lg font-sans text-dark">
 						<?php
 						the_content();
 
 						wp_link_pages(
 							array(
-								'before' => '<div class="page-links mt-4"><strong>' . esc_html__('Pages:', 'wisdom1') . '</strong>',
+								'before' => '<div class="page-links mt-5"><strong>' . esc_html__('Pages:', 'wisdom1') . '</strong>',
 								'after' => '</div>',
 							)
 						);
@@ -45,33 +59,37 @@ get_header(); ?>
 					</div><!-- .entry-content -->
 
 					<footer class="entry-footer mt-5 pt-4 border-top">
-						<div class="entry-tags">
+						<div class="entry-tags d-flex flex-wrap gap-2">
-							<?php the_tags('<span class="badge bg-light text-dark text-decoration-none me-2 p-2">Related: ', '</span><span class="badge bg-light text-dark text-decoration-none p-2">', '</span>'); ?>
+							<?php the_tags('<span class="badge bg-light text-dark text-decoration-none fw-normal p-2">', '</span><span class="badge bg-light text-dark text-decoration-none fw-normal p-2">', '</span>'); ?>
 						</div>
 					</footer><!-- .entry-footer -->
+				</div><!-- .col-lg-7 -->
+			</div><!-- .row -->
 		</article><!-- #post-<?php the_ID(); ?> -->
 
-		<nav class="navigation post-navigation mt-5" aria-label="Posts">
+		<div class="row justify-content-center">
+			<div class="col-lg-8 col-xl-7">
+				<nav class="navigation post-navigation mt-5 border-top border-bottom py-4" aria-label="Posts">
 					<div class="row justify-content-between g-4">
 						<div class="col-sm-6 text-start">
-					<?php previous_post_link('<div class="text-muted small text-uppercase fw-bold mb-1">Previous</div>%link', '%title', false, ''); ?>
+							<?php previous_post_link('<div class="text-muted small fw-bold mb-1">Previous</div><div class="fw-bold">%link</div>', '%title', false, ''); ?>
 						</div>
 						<div class="col-sm-6 text-end">
-					<?php next_post_link('<div class="text-muted small text-uppercase fw-bold mb-1">Next</div>%link', '%title', false, ''); ?>
+							<?php next_post_link('<div class="text-muted small fw-bold mb-1">Next</div><div class="fw-bold">%link</div>', '%title', false, ''); ?>
 						</div>
 					</div>
 				</nav>
 
 				<?php
-		// If comments are open or we have at least one comment, load up the comment template.
+				// If comments are open or we have at least one comment, load up the comment template inside the constrained column.
 				if (comments_open() || get_comments_number()):
 					comments_template();
 				endif;
-
-	endwhile; // End of the loop.
 				?>
 			</div>
 		</div>
+
+	<?php endwhile; // End of the loop. ?>
 </main><!-- #main -->
 
 <?php

style.css

@@ -204,13 +204,13 @@ a:hover {
 }
 
 .comment-list .comment {
-	background: #fff;
+	padding: 1.5rem 0;
-	border: 1px solid rgba(26, 43, 72, 0.1);
-	/* Subtle midnight border */
-	border-radius: 0.5rem;
-	padding: 1.5rem;
 	margin-bottom: 1.5rem;
-	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
+	border-bottom: 1px solid rgba(26, 43, 72, 0.1);
+}
+
+.comment-list .comment:last-child {
+	border-bottom: none;
 }
 
 .comment-list .comment-body {