Fix layout for single article images and style comments section
This commit is contained in:
26
comments.php
26
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 “%1$s”', 'wisdom1' ),
|
||||
esc_html__('One thought on “%1$s”', 'wisdom1'),
|
||||
'<span>' . get_the_title() . '</span>'
|
||||
);
|
||||
} else {
|
||||
printf(
|
||||
esc_html( _nx( '%1$s thought on “%2$s”', '%1$s thoughts on “%2$s”', $comment_count, 'comments title', 'wisdom1' ) ),
|
||||
number_format_i18n( $comment_count ),
|
||||
esc_html(_nx('%1$s thought on “%2$s”', '%1$s thoughts on “%2$s”', $comment_count, 'comments title', 'wisdom1')),
|
||||
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(
|
||||
array(
|
||||
'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
|
||||
$args = array(
|
||||
'class_form' => 'comment-form mt-4 p-4 rounded bg-white shadow-sm border',
|
||||
'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 -->
|
||||
13
single.php
13
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">
|
||||
<?php the_post_thumbnail('full', array('class' => 'img-fluid rounded shadow-sm')); ?>
|
||||
<div class="post-thumbnail-full mb-5">
|
||||
<?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();
|
||||
|
||||
|
||||
85
style.css
85
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;
|
||||
}
|
||||
Reference in New Issue
Block a user