diff --git a/wp-content/themes/twentynineteen-tailwindcss/comments.php b/wp-content/themes/twentynineteen-tailwindcss/comments.php new file mode 100644 index 0000000..1e8fb89 --- /dev/null +++ b/wp-content/themes/twentynineteen-tailwindcss/comments.php @@ -0,0 +1,128 @@ + + +
+
+

+ responses ) { + /* translators: %s: post title */ + printf( _x( 'One reply on “%s”', 'comments title', 'twentynineteen' ), get_the_title() ); + } else { + printf( + /* translators: 1: number of comments, 2: post title */ + _nx( + '%1$s reply on “%2$s”', + '%1$s replies on “%2$s”', + $discussion->responses, + 'comments title', + 'twentynineteen' + ), + number_format_i18n( $discussion->responses ), + get_the_title() + ); + } + } + ?> +

+ +
+ +
    + new TwentyNineteen_Walker_Comment(), + 'avatar_size' => twentynineteen_get_avatar_size(), + 'short_ping' => true, + 'style' => 'ol', + ) + ); + ?> +
+ sprintf( '%s %s %s', $prev_icon, __( 'Previous', 'twentynineteen' ), __( 'Comments', 'twentynineteen' ) ), + 'next_text' => sprintf( '%s %s %s', __( 'Next', 'twentynineteen' ), __( 'Comments', 'twentynineteen' ), $next_icon ), + ) + ); + endif; + + // Show comment form at bottom if showing newest comments at the bottom. + if ( comments_open() && 'asc' === strtolower( get_option( 'comment_order', 'asc' ) ) ) : + ?> +
+ + + +
+ +

+ +

+ +
diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/components/avatars.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/avatars.css new file mode 100644 index 0000000..eecf66d --- /dev/null +++ b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/avatars.css @@ -0,0 +1,3 @@ +.avatar { + @apply rounded-full; +} diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-form.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-form.css new file mode 100644 index 0000000..c0421c7 --- /dev/null +++ b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-form.css @@ -0,0 +1,29 @@ +.comment-form { + @apply mt-20; + + > * { + @apply mt-4; + } + + label { + @apply w-full block pb-2; + @apply text-sm text-gray-700; + } + + input, + textarea { + @apply w-full p-3 border border-gray-400; + + &:focus { + @apply bg-white outline-none border-blue-700; + } + } + + .form-submit { + @apply mt-6; + } + + input[type=submit] { + @apply w-auto; + } +} diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-list.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-list.css new file mode 100644 index 0000000..226e7a1 --- /dev/null +++ b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-list.css @@ -0,0 +1,44 @@ +.comment-list .comment, +.comment-author b.fn { + @apply mt-12 pl-24 relative w-full block; +} + +.comment-list { + .comment-author .avatar, + .comment-author > a.url { + @apply absolute top-0 left-0; + } + + .comment-author > b.fn { + @apply pl-0 text-2xl text-black; + } + .comment-author > b.fn a { + @apply text-inherit; + } + + .comment-author img { + @apply w-16; + } + + .comment-metadata { + @apply text-sm text-gray-900; + } + + .comment-content { + @apply mt-8 text-base; + } + + .comment-reply { + @apply mt-6 text-sm; + } +} + +.post-author-badge { + @apply absolute top-0 left-0 ml-10 w-6 h-6; + @apply flex items-center; + @apply bg-blue-500 rounded-full p-1; + + > svg { + @apply fill-current text-white block; + } +} diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/components/content.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/content.css index 4aa52f4..da441e6 100644 --- a/wp-content/themes/twentynineteen-tailwindcss/src/css/components/content.css +++ b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/content.css @@ -1,3 +1,5 @@ +.markup, +.comment-content, .entry-content { @apply font-serif text-lg leading-loose; diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/components/discussion-avatar-list.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/discussion-avatar-list.css new file mode 100644 index 0000000..8b6cfb1 --- /dev/null +++ b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/discussion-avatar-list.css @@ -0,0 +1,15 @@ +.discussion-avatar-list { + @apply flex; +} + +.discussion-avatar-list li { + @apply mb-1; + + &:not(:first-child) { + @apply -ml-3; + } +} + +.discussion-avatar-list img { + @apply rounded-full w-10; +} diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css index a8b6ac3..e177b3d 100644 --- a/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css +++ b/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css @@ -25,7 +25,11 @@ h2:before { @apply absolute opacity-0 pointer-events-none; } +@import 'components/avatars.css'; +@import 'components/comment-form.css'; +@import 'components/comment-list.css'; @import 'components/content.css'; +@import 'components/discussion-avatar-list.css'; @import 'components/forms.css'; @import 'components/post.css'; @import 'components/widgets.css'; diff --git a/wp-content/themes/twentynineteen-tailwindcss/template-parts/post/discussion-meta.php b/wp-content/themes/twentynineteen-tailwindcss/template-parts/post/discussion-meta.php new file mode 100644 index 0000000..c0c4034 --- /dev/null +++ b/wp-content/themes/twentynineteen-tailwindcss/template-parts/post/discussion-meta.php @@ -0,0 +1,32 @@ +responses > 0; + +if ( $has_responses ) { + /* translators: %1(X comments)$s */ + $meta_label = sprintf( _n( '%d Comment', '%d Comments', $discussion->responses, 'twentynineteen' ), $discussion->responses ); +} else { + $meta_label = __( 'No comments', 'twentynineteen' ); +} +?> + +
+ authors ); + } + ?> +

+ + +

+