Fix layout for single article images and style comments section

comments.php

@@ -3,26 +3,26 @@
  * The template for displaying comments
  */
 
-if ( post_password_required() ) {
+if (post_password_required()) {
 	return;
 }
 ?>
 
 <div id="comments" class="comments-area reading-container">
 
-	<?php if ( have_comments() ) : ?>
+	<?php if (have_comments()): ?>
 		<h2 class="comments-title">
 			<?php
 			$comment_count = get_comments_number();
-			if ( '1' === $comment_count ) {
+			if ('1' === $comment_count) {
 				printf(
-					esc_html__( 'One thought on &ldquo;%1$s&rdquo;', 'wisdom1' ),
+					esc_html__('One thought on &ldquo;%1$s&rdquo;', 'wisdom1'),
 					'<span>' . get_the_title() . '</span>'
 				);
 			} else {
 				printf(
-					esc_html( _nx( '%1$s thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', $comment_count, 'comments title', 'wisdom1' ) ),
+					esc_html(_nx('%1$s thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', $comment_count, 'comments title', 'wisdom1')),
-					number_format_i18n( $comment_count ),
+					number_format_i18n($comment_count),
 					'<span>' . get_the_title() . '</span>'
 				);
 			}
@@ -45,20 +45,22 @@ if ( post_password_required() ) {
 		the_comments_navigation();
 
 		// If comments are closed and there are comments, let's leave a little note, shall we?
-		if ( ! comments_open() ) :
+		if (!comments_open()):
 			?>
-			<p class="no-comments"><?php esc_html__( 'Comments are closed.', 'wisdom1' ); ?></p>
+			<p class="no-comments"><?php esc_html__('Comments are closed.', 'wisdom1'); ?></p>
 			<?php
 		endif;
 
 	endif; // Check for have_comments().
 	
-	comment_form(
+	$args = array(
-		array(
+		'class_form' => 'comment-form mt-4 p-4 rounded bg-white shadow-sm border',
-			'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
+		'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_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_form($args);
 	?>
 
 </div><!-- #comments -->

single.php

@@ -6,8 +6,6 @@
 get_header(); ?>
 
 <main id="primary" class="site-main container my-5">
-	<div class="row">
-		<div class="col-lg-8 mx-auto">
 	<?php
 	while (have_posts()):
 		the_post();
@@ -23,12 +21,17 @@ get_header(); ?>
 			</header>
 
 			<?php if (has_post_thumbnail()): ?>
-						<div class="post-thumbnail mb-5">
+				<div class="post-thumbnail-full mb-5">
-							<?php the_post_thumbnail('full', array('class' => 'img-fluid rounded shadow-sm')); ?>
+					<?php the_post_thumbnail('full', array(
+						'class' => 'img-fluid rounded shadow-sm w-100',
+						'style' => 'aspect-ratio: 16/9; object-fit: cover;'
+					)); ?>
 				</div>
 			<?php endif; ?>
 
-					<div class="entry-content fs-5 lh-lg font-serif">
+			<div class="row">
+				<div class="col-lg-8 mx-auto">
+					<div class="entry-content fs-5 lh-lg font-sans text-dark">
 						<?php
 						the_content();
 

style.css

@@ -180,3 +180,88 @@ a:hover {
 	justify-content: center;
 	border-radius: 4px;
 }
+
+/* Comments Styling overrides for native wp_list_comments */
+.comment-list {
+	list-style: none;
+	padding: 0;
+	margin: 0 0 3rem 0;
+}
+
+.comment-list .comment {
+	background: #fff;
+	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);
+}
+
+.comment-list .comment-body {
+	display: flex;
+	flex-direction: column;
+}
+
+.comment-list .comment-author {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	margin-bottom: 1rem;
+	font-weight: 600;
+	color: var(--brand-deep-midnight);
+}
+
+.comment-list .comment-author img {
+	border-radius: 50%;
+}
+
+.comment-list .comment-meta {
+	font-size: 0.85rem;
+	color: #6c757d;
+	margin-bottom: 1rem;
+}
+
+.comment-list .comment-meta a {
+	color: #6c757d;
+	text-decoration: none;
+}
+
+.comment-list p {
+	margin-bottom: 0.5rem;
+}
+
+.comment-list .reply a {
+	display: inline-block;
+	font-size: 0.85rem;
+	text-transform: uppercase;
+	font-weight: 700;
+	color: var(--brand-deep-teal);
+	border: 1px solid var(--brand-deep-teal);
+	padding: 0.25rem 0.75rem;
+	border-radius: 0.25rem;
+	transition: all 0.2s;
+	text-decoration: none;
+	margin-top: 1rem;
+}
+
+.comment-list .reply a:hover {
+	background: var(--brand-deep-teal);
+	color: #fff;
+}
+
+.comment-list .children {
+	list-style: none;
+	padding-left: 2rem;
+	margin-top: 1.5rem;
+	border-left: 2px solid rgba(26, 43, 72, 0.1);
+}
+
+/* Series Taxonomy Step Numbers */
+.series-number-stamp {
+	font-family: 'Playfair Display', serif;
+	font-size: 4rem;
+	color: var(--brand-gold-leaf);
+	opacity: 0.2;
+	line-height: 1;
+}