Comments form improvements

css/comment-respond.css

@@ -0,0 +1,40 @@
+.comment-respond__title {
+  border-bottom: 1px solid var(--color-light-grey);
+  margin-bottom: var(--space-xs);
+  padding-bottom: var(--space-sm);
+}
+
+.comment-respond__text {
+  font-size: 14px;
+}
+
+.comment-respond__item {
+  margin-bottom: var(--space-sm);
+}
+
+.comment-respond__label {
+  display: block;
+  margin-bottom: var(--space-xs);
+}
+
+.comment-respond__input {
+  background-color: #fff;
+  border: 1px solid var(--color-near-black);
+  padding: var(--space-xs);
+}
+
+.comment-respond__input:focus {
+  background-color: var(--color-pale-blue);
+  border-color: var(--color-light-blue);
+  outline: 0;
+}
+
+.comment-respond__submit {
+  background-color: var(--color-light-blue);
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  font-family: var(--heading-font-family);
+  min-width: 100px;
+  padding: var(--space-xs);
+}

css/index.css

@@ -12,13 +12,16 @@
 @import "footer";
 @import "comments";
 @import "comment";
+@import "comment-respond";
 @import "avatar";
+@import "link";
 
 :root {
   --color-black: #000;
   --color-near-black: #333;
   --color-dark-blue: #201f42;
   --color-light-blue: #1574d2;
+  --color-pale-blue: #e9f4ff;
   --color-grey: #757575;
   --color-light-grey: #e0e0e0;
   --color-facebook: #3e5a98;

css/link.css

@@ -0,0 +1,24 @@
+.link,
+.link:hover,
+.link:focus,
+.link:visited {
+  position: relative;
+  color: var(--color-light-blue);
+}
+
+.link:after {
+  background-color: var(--color-light-blue);
+  bottom: -1px;
+  content: '';
+  left: 0;
+  height: 2px;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  transition: opacity var(--transition-md) ease-out;
+}
+
+.link:focus:after,
+.link:hover:after {
+  opacity: 1;
+}

docker-compose.yml

@@ -3,7 +3,7 @@ wordpress:
     - WORDPRESS_DB_HOST=db
     - WORDPRESS_DB_PASSWORD=password
     - WORDPRESS_DB_USER=windycoys
-  image: 'wordpress:4.9.5-php5.6-apache'
+  image: 'wordpress:5.0.0-php5.6-apache'
   links:
     - db
   ports:

theme/comments.php

@@ -1,3 +1,18 @@
+<?php
+$form_settings = array(
+  class_form => 'comment-respond__form',
+  class_submit => 'comment-respond__submit',
+  comment_field => '<label class="comment-respond__label" for="comment">Comment</label><textarea class="comment-respond__input" id="comment" name="comment" cols="25" rows="8" aria-required="true"></textarea></p>',
+  logged_in_as => '<p class="comment-respond__text">' . sprintf( __( 'Logged in as <a class="link" href="%1$s">%2$s</a>. <a class="link" href="%3$s" title="Log out of this account">Log out?</a>' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( ) ) ) ) . '</p>',
+  title_reply_before => '<h3 id="reply-title" class="comment-respond__title">',
+  comment_notes_before => '<p class="comment-respond__notes">' . __( 'Your email address will not be published.' ) . ( $req ? $required_text : '' ) . '</p>',
+  fields => array(
+    author => '<div class="comment-respond__item"><label class="comment-respond__label" for="author">' . __( 'Name', 'domainreference' ) . ( $req ? '<span class="comment-respond__required">*</span>' : '' ) . '</label>' . '<input class="comment-respond__input" id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></div>',
+    email => '<div class="comment-respond__item"><label class="comment-respond__label" for="email">' . __( 'Email', 'domainreference' ) . ( $req ? '<span class="comment-respond__required">*</span>' : '' ) . '</label>' . '<input class="comment-respond__input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></div>',
+    url => '<div class="comment-respond__item"><label class="comment-respond__label" for="url">' . __( 'Website', 'domainreference' ) . '</label>' . '<input class="comment-respond__input" id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></div>',
+  ),
+);
+?>
 <div class="comments" id="comments">
   <div class="comments__head">
     <h2 class="comments__title">
@@ -27,8 +42,6 @@
     </ol>
   </div>
   <div class="comments__foot">
-    <?php comment_form(array(
+    <?php comment_form($form_settings) ?>
-      'class_form' => 'foo-bar'
-    )) ?>
   </div>
 </div>

theme/index.php

@@ -26,9 +26,6 @@
   </section>
   <section class="page__metadata<?php echo ($index === 1 ? ' is-first' : '') ?>">
     <?php get_template_part('partials/metadata') ?>
-    <div class="page__advert">
-      <?php get_template_part('partials/ad_wide_skyscraper') ?>
-    </div>
   </section>
   <?php endwhile; ?>
   <section class="page__banner">