diff --git a/css/avatar.css b/css/avatar.css new file mode 100644 index 0000000..5d54da0 --- /dev/null +++ b/css/avatar.css @@ -0,0 +1,8 @@ +.avatar { + border-radius: 5px; + transition: filter var(--transition-md) ease-out; +} + +.avatar:hover { + filter: saturate(1.3) contrast(1.3); +} diff --git a/css/comment.css b/css/comment.css new file mode 100644 index 0000000..b586fe7 --- /dev/null +++ b/css/comment.css @@ -0,0 +1,64 @@ +.comment__head { + display: flex; + margin-bottom: var(--space-sm); +} + +.comment__avatar { + background-image: var(--windy-svg); + background-position: center; + background-repeat: no-repeat; + background-size: 100%; + margin-right: var(--space-sm); + height: 64px; + width: 64px; +} + +.comment__metadata { + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + margin: var(--space-xs) 0; +} + +.comment__date { + font-size: 12px; +} + +.comment__body { + margin-bottom: var(--space-sm); +} + +.comment__reply:focus, +.comment__reply:hover { + color: var(--color-light-blue); +} + +.comment__reply-icon { + display: inline-block; + margin-right: var(--space-xs); + vertical-align: middle; +} + +.comment__reply-text { + display: inline-block; + position: relative; + font-size: 12px; + vertical-align: middle; +} + +.comment__reply-text: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; +} + +.comment__reply:focus .comment__reply-text:after, +.comment__reply:hover .comment__reply-text:after { + opacity: 1; +} diff --git a/css/comments.css b/css/comments.css new file mode 100644 index 0000000..c6ed9b9 --- /dev/null +++ b/css/comments.css @@ -0,0 +1,20 @@ +.comments__head { + border-bottom: 1px solid var(--color-light-grey); + margin-bottom: var(--space-md); +} + +.comments__title { + margin-bottom: var(--space-sm); +} + +.comments__item { + margin-bottom: var(--space-md); +} + +.comments__item--depth-1 { + margin-left: var(--space-md); +} + +.comments__item--depth-2 { + margin-left: calc(var(--space-md) * 2); +} diff --git a/css/icon.css b/css/icon.css index 0017210..7892320 100644 --- a/css/icon.css +++ b/css/icon.css @@ -4,6 +4,11 @@ width: 32px; } +.icon--extra-small { + height: 16px; + width: 16px; +} + .icon--small { height: 24px; width: 24px; diff --git a/css/index.css b/css/index.css index cd51a00..b0e5c02 100644 --- a/css/index.css +++ b/css/index.css @@ -10,6 +10,9 @@ @import "search"; @import "article"; @import "footer"; +@import "comments"; +@import "comment"; +@import "avatar"; :root { --color-black: #000; @@ -21,6 +24,7 @@ --color-facebook: #3e5a98; --color-twitter: #1da1f2; --color-rss: #ee802f; + --space-xs: 10px; --space-sm: 20px; --space-md: 30px; --space-lg: 60px; diff --git a/theme/comments.php b/theme/comments.php new file mode 100644 index 0000000..a4c053b --- /dev/null +++ b/theme/comments.php @@ -0,0 +1,34 @@ +
+
+

+ +

+
+
+
    + new Windycoys_Walker_Comment(), + 'style' => 'ol', + ) + ); + ?> +
+
+
+ 'foo-bar' + )) ?> +
+
diff --git a/theme/functions.php b/theme/functions.php index b98e716..93b9841 100644 --- a/theme/functions.php +++ b/theme/functions.php @@ -1,6 +1,33 @@ comment_ID; + $author_email = $comment->comment_author_email; + $author = $comment->comment_author; + $avatar = get_avatar($comment, 128); + $date = get_comment_date('jS F, Y', $id).' at '.get_comment_date('H:i', $id); + $content = $comment->comment_content; + $comment_depth = $depth > 0 ? ' comments__item--depth-'.$depth : ''; + $output .= '
  • '; + $output .= '
    '; + $output .= '
    '; + $output .= '
    '.$avatar.'
    '; + $output .= '
    '; + $output .= ''.$author.''; + $output .= ''.$date.''; + $output .= '
    '; + $output .= '
    '.$content.'
    '; + $output .= '
    '; + $output .= ''; + $output .= ''; + $output .= ''; + $output .= 'Reply'; + $output .= '
    • '; + } +} + +class Windycoys_Walker_Nav extends Walker_Nav_Menu { function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { $title = $item->post_title; $uri = get_site_url() . '/' . $item->post_name; @@ -15,7 +42,7 @@ function windycoys_nav() { wp_nav_menu(array( 'container' => 'ul', 'menu_class' => 'nav__list nav__list--sub-list', - 'walker' => new Windycoys_Walker() + 'walker' => new Windycoys_Walker_Nav() )); } diff --git a/theme/icons.php b/theme/icons.php index 976077a..7277f42 100644 --- a/theme/icons.php +++ b/theme/icons.php @@ -14,6 +14,9 @@ + + + diff --git a/theme/partials/metadata.php b/theme/partials/metadata.php index 50e7b55..a47ed90 100644 --- a/theme/partials/metadata.php +++ b/theme/partials/metadata.php @@ -20,7 +20,7 @@
    - + diff --git a/theme/single.php b/theme/single.php index 4e50597..6882ada 100644 --- a/theme/single.php +++ b/theme/single.php @@ -15,13 +15,14 @@

    - - - +

    »', 'windycoys')); ?>
    +
    + +