Issue #1 Improve the Hero post entry-footer layout

bobbingwide · Mar 27, 2021 · 5020e1f · 5020e1f
1 parent c80f175
commit 5020e1f
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 10 deletions.
diff --git a/block-template-parts/home-body.html b/block-template-parts/home-body.html
@@ -6,12 +6,13 @@
 <!-- wp:post-title {"isLink":true} /-->
 <!-- wp:post-content /-->
 
-<!-- wp:separator -->
-<hr class="wp-block-separator"/>
-<!-- /wp:separator -->
-
-<!-- wp:post-date /-->
+<div class="entry-footer">
+[bw_fields _seen_before]
+<!-- wp:post-hierarchical-terms {"term":"category"} /-->
+<!-- wp:post-hierarchical-terms {"term":"s-word"} /-->
+<!-- wp:post-hierarchical-terms {"term":"b-word"} /-->
 <p>Published: [bw_field post_date] | Last updated: [bw_field post_modified] [post-edit]</p>
+</div>
 <!-- /wp:query-loop -->
 <!-- /wp:query -->
 

diff --git a/functions.php b/functions.php
@@ -149,10 +149,8 @@ function sb_post_edit( $attrs, $content, $tag ) {
     $url = get_edit_post_link();
     if ( $url ) {
         $class = 'bw_edit';
-        $text= __( '[Edit]', 'sb' );
+        $text= __( '(Edit)', 'sb' );
         $link='<a class="' . esc_attr( $class ) . '" href="' . esc_url( $url ) . '">' . $text . '</a>';
     }
     return $link;
 }
-
-
diff --git a/style.css b/style.css
@@ -61,6 +61,10 @@ a {
     text-decoration: none;
 }
 
+a:hover {
+    text-decoration: underline;
+}
+
 h1.wp-block-site-title {
     font-size: 32px;
     font-weight: 400;
@@ -256,11 +260,13 @@ nav nav.wp-block-navigation .wp-block-navigation-link__content {
 aside {
     font-size: 14px;
     margin: 0;
-    margin-top: 100px;
+    margin-left: 40px;
+    margin-top: 60px;
 }
 
 aside h4 {
     font-size: 18px;
+    margin-top: 20px;
     margin-bottom: 20px;
     font-weight: 400;
 }
@@ -328,8 +334,9 @@ footer.wp-block-template-part a:hover {
 
 .wp-block-query-loop.is-flex-container li {
     margin-right: 0px;
-
+    margin-bottom: 0px;
 }
+
 ul.sb.thumbnail li {
     position: relative;
     padding-bottom: 25%;
@@ -344,6 +351,7 @@ ul.sb.thumbnail li p {
     width: 100%;
     height: 100%;
     bottom: 0;
+    margin-bottom: 0px;
 }
 
 ul.sb.thumbnail li h3 {
@@ -365,6 +373,53 @@ display: inline-block;
 margin-right: 0.5em;
 }
 
+/**
+ Taxonomy terms styling - to make them look like luggage tags with a hole in pointy bit to the left.
+ */
+.wp-block-post-hierarchical-terms {
+    display: inline-block;
+}
+
+.wp-block-post-hierarchical-terms a {
+    background-color: #767676;
+    border-radius: 0 2px 2px 0;
+    color: #fff;
+    display: inline-block;
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 1.2727272727;
+    margin: 2px 4px 2px 10px;
+    padding: 3px 7px;
+    position: relative;
+}
+
+.wp-block-post-hierarchical-terms a:before {
+    border-top: 10px solid transparent;
+    border-right: 8px solid #767676;
+    border-bottom: 10px solid transparent;
+    content: "";
+    height: 0;
+    position: absolute;
+    top: 0;
+    left: -8px;
+    width: 0;
+}
+
+.wp-block-post-hierarchical-terms a:after {
+    background-color: #fff;
+    border-radius: 50%;
+    content: "";
+    height: 4px;
+    position: absolute;
+    top: 8px;
+    left: -2px;
+    width: 4px;
+}
+
+.entry-footer {
+    font-size: 16px;
+}
+