diff --git a/css/comment-respond.css b/css/comment-respond.css new file mode 100644 index 0000000..3e18eb3 --- /dev/null +++ b/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); +} diff --git a/css/index.css b/css/index.css index b0e5c02..ff35fb2 100644 --- a/css/index.css +++ b/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; diff --git a/css/link.css b/css/link.css new file mode 100644 index 0000000..92c1852 --- /dev/null +++ b/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; +} diff --git a/docker-compose.yml b/docker-compose.yml index 0987c7c..37dfede 100644 --- a/docker-compose.yml +++ b/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: diff --git a/theme/comments.php b/theme/comments.php index a4c053b..ff6f522 100644 --- a/theme/comments.php +++ b/theme/comments.php @@ -1,3 +1,18 @@ + 'comment-respond__form', + class_submit => 'comment-respond__submit', + comment_field => '
', + logged_in_as => '' . sprintf( __( 'Logged in as %2$s. Log out?' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( ) ) ) ) . '
', + title_reply_before => '' . __( 'Your email address will not be published.' ) . ( $req ? $required_text : '' ) . '
', + fields => array( + author => '