Clean post footer code

Mostly, make it use a class and not decedent selector

Author: PaulAdamDavis

assets/css/screen.css

@@ -114,10 +114,10 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
 body {
     font-family: "Gibson", "Helvetica Neue", "Helvetica-Neue", helvetica, sans-serif
 }
-body .btn, body>header h1, body article header h1, body>footer .details h4, body article>footer .details h4, body #share_modal header a.close, body.user article.feature h1 a {
+body .btn, body>header h1, body article header h1, body>footer .details h4, body .post-footer .details h4, body #share_modal header a.close, body.user article.feature h1 a {
     font-family: "Gibson", "Helvetica Neue", "Helvetica-Neue", helvetica, sans-serif
 }
-body article time, body article>.meta, body article>header .count, body article>footer, body article>footer h4, body article .text, body article .text blockquote {
+body article time, body article>.meta, body article>header .count, body .post-footer, body article>footer h4, body article .text, body article .text blockquote {
     font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica-Neue", helvetica, sans-serif
 }
 body.serif {
@@ -134,7 +134,7 @@ body.serif>a.btn.nav {
 body.serif>a.btn.nav.next span {
     margin-top: 2px
 }
-body.serif article time, body.serif article>.meta, body.serif article>header h1, body.serif article>header .count, body.serif article.feature h1 a, body.serif article>footer, body.serif article>footer h4 {
+body.serif article time, body.serif article>.meta, body.serif article>header h1, body.serif article>header .count, body.serif article.feature h1 a, body.serif .post-footer, body.serif .post-footer h4 {
     font-family: "FiloPro", "Georgia", "Times New Roman", serif
 }
 body.serif article .text {
@@ -862,7 +862,6 @@ body.user article .image-holder {
     margin: 0 auto 30px auto;
     overflow: hidden;
     max-width: 680px;
-    /*background: #909396 url(https://roon-assets.s3.amazonaws.com/assets/image-loading-dark-1a46c68c8e26a1a16a4ce8e4d75ec33b.gif) no-repeat center center;*/
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -ms-border-radius: 3px;
@@ -1086,20 +1085,20 @@ body>a.btn.nav.prev span {
 body>a.btn.nav.loading {
     color: transparent
 }
-body>footer, article>footer {
+body>footer, .post-footer {
     position: relative;
     border-top: 1px solid #ededee;
     padding: 50px 0;
     -webkit-text-size-adjust: none;
     text-rendering: optimizeLegibility
 }
-body>footer>.inner, article>footer>.inner {
+body>footer>.inner, .post-footer>.inner {
     text-align: left;
     margin: 0 auto;
     padding: 0 30px;
     max-width: 680px
 }
-body>footer #btn_feed, article>footer #btn_feed {
+body>footer #btn_feed, .post-footer #btn_feed {
     position: absolute;
     top: -18px;
     left: 50%;
@@ -1112,14 +1111,14 @@ body>footer #btn_feed, article>footer #btn_feed {
     padding: 9px 9px 7px 10px;
     font-weight: normal
 }
-body>footer #btn_feed strong, article>footer #btn_feed strong {
+body>footer #btn_feed strong, .post-footer #btn_feed strong {
     display: none
 }
-body>footer #btn_feed:hover, article>footer #btn_feed:hover {
+body>footer #btn_feed:hover, .post-footer #btn_feed:hover {
     background-color: #ededee;
     color: #21272d
 }
-body>footer div.vcard, article>footer div.vcard {
+body>footer div.vcard, .post-footer div.vcard {
     display: -moz-inline-stack;
     display: inline-block;
     vertical-align: middle;
@@ -1129,10 +1128,10 @@ body>footer div.vcard, article>footer div.vcard {
     width: 50%;
     min-height: 100px
 }
-body>footer div.vcard span.given-name, body>footer div.vcard span.family-name, article>footer div.vcard span.given-name, article>footer div.vcard span.family-name {
+body>footer div.vcard span.given-name, body>footer div.vcard span.family-name, .post-footer div.vcard span.given-name, .post-footer div.vcard span.family-name {
     white-space: nowrap
 }
-body>footer .photo, article>footer .photo {
+body>footer .photo, .post-footer .photo {
     float: left;
     margin-right: 22px;
 
@@ -1147,7 +1146,7 @@ body>footer .photo, article>footer .photo {
     background: #fff;
     overflow: hidden;
 }
-body>footer .photo span, article>footer .photo span {
+body>footer .photo span, .post-footer .photo span {
     position: absolute;
     background-repeat: no-repeat;
     background-position: center center;
@@ -1158,43 +1157,43 @@ body>footer .photo span, article>footer .photo span {
     background-size: cover;
 }
 
-body>footer .photo.circle, article>footer .photo.circle {
+body>footer .photo.circle, .post-footer .photo.circle {
     -webkit-border-radius: 50px;
     -moz-border-radius: 50px;
     -ms-border-radius: 50px;
     -o-border-radius: 50px;
     border-radius: 50px;
     border: 1px solid rgba(33, 39, 45, 0.17);
 }
-body>footer .photo.circle span, article>footer .photo.circle span {
+body>footer .photo.circle span, .post-footer .photo.circle span {
     top: 18px;
     right: 18px;
     bottom: 18px;
     left: 18px;
     background-size: contain;
 }
 
-body>footer .photo img, article>footer .photo img {
+body>footer .photo img, .post-footer .photo img {
     position: absolute;
     top: 0;
     left: 0;
     width: 1px;
     height: 1px;
     opacity: 0;
 }
-body>footer .details, article>footer .details {
+body>footer .details, .post-footer .details {
     padding-top: 10px;
     line-height: 1.9em
 }
-body>footer .details h4, article>footer .details h4 {
+body>footer .details h4, .post-footer .details h4 {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 6px
 }
-body>footer .details h4 a, article>footer .details h4 a {
+body>footer .details h4 a, .post-footer .details h4 a {
     color: #21272d
 }
-body>footer #user_bio, article>footer #user_bio {
+body>footer #user_bio, .post-footer #user_bio {
     display: -moz-inline-stack;
     display: inline-block;
     vertical-align: middle;
@@ -1203,7 +1202,7 @@ body>footer #user_bio, article>footer #user_bio {
     *display: inline;
     width: 49%
 }
-body>footer #user_bio .inner, article>footer #user_bio .inner {
+body>footer #user_bio .inner, .post-footer #user_bio .inner {
     padding-left: 20px;
     line-height: 1.6em;
     color: #a4adb6
@@ -1338,18 +1337,18 @@ body>.no-posts [data-icon]:before {
 #share_modal #pinit-btn {
     margin: 20px 20px
 }
-html[dir=rtl] article .text, html[dir=rtl] article .text *, html[dir=rtl] article .meta, html[dir=rtl] article .time, html[dir=rtl] article>header, html[dir=rtl] article header *, html[dir=rtl] body>a.btn.nav, html[dir=rtl] body>footer *, html[dir=rtl] article>footer, html[dir=rtl] article>footer * {
+html[dir=rtl] article .text, html[dir=rtl] article .text *, html[dir=rtl] article .meta, html[dir=rtl] article .time, html[dir=rtl] article>header, html[dir=rtl] article header *, html[dir=rtl] body>a.btn.nav, html[dir=rtl] body>footer *, html[dir=rtl].post-footer, html[dir=rtl].post-footer * {
     text-align: right;
     direction: rtl
 }
 html[dir=rtl] body>header *, html[dir=rtl] article>menu a#btn_comment, html[dir=rtl] #post_nav a {
     direction: rtl
 }
-html[dir=rtl] body>a.btn.nav span, html[dir=rtl] body>footer #btn_feed span, html[dir=rtl] article>footer #user_profile>#btn_feed span, html[dir=rtl] #post_nav a span, html[dir=rtl] article>header a#home_link {
+html[dir=rtl] body>a.btn.nav span, html[dir=rtl] body>footer #btn_feed span, html[dir=rtl] .post-footer #user_profile>#btn_feed span, html[dir=rtl] #post_nav a span, html[dir=rtl] article>header a#home_link {
     direction: ltr;
     unicode-bidi: bidi-override
 }
-html[dir=rtl] body>footer .image, html[dir=rtl] article>footer .image {
+html[dir=rtl] body>footer .image, html[dir=rtl] .post-footer .image {
     float: right;
     margin-left: 22px;
     margin-right: 0
@@ -1551,21 +1550,21 @@ body.touch.user article .readmore {
         left: 10px;
         right: inherit
     }
-    body>footer #user_bio, body>footer #user_profile, article>footer #user_bio, article>footer #user_profile {
+    body>footer #user_bio, body>footer #user_profile, .post-footer #user_bio, .post-footer #user_profile {
         display: block;
         width: inherit
     }
-    body>footer #user_bio .inner, body>footer #user_profile .inner, article>footer #user_bio .inner, article>footer #user_profile .inner {
+    body>footer #user_bio .inner, body>footer #user_profile .inner, .post-footer #user_bio .inner, .post-footer #user_profile .inner {
         padding-left: 0
     }
-    body>footer div.vcard, body>footer div.vcard, article>footer div.vcard, article>footer div.vcard {
+    body>footer div.vcard, body>footer div.vcard, .post-footer div.vcard, .post-footer div.vcard {
         display: block;
         width: inherit
     }
-    body>footer #user_bio, article>footer #user_bio {
+    body>footer #user_bio, .post-footer #user_bio {
         margin-top: 30px
     }
-    body>footer #user_bio p, article>footer #user_bio p {
+    body>footer #user_bio p, .post-footer #user_bio p {
         padding-left: 0
     }
 }
@@ -1695,10 +1694,4 @@ body.touch.user article .readmore {
     body.noimage article {
         margin-top: 24px
     }
-}
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
-    article .text span.roon-img {
-        background-image: url(https://roon-assets.s3.amazonaws.com/assets/image-loading-light@2x-5d07f26751af5a375b5e517559fa9f29.gif);
-        background-size: 34px 34px
-    }
-}
+}

post.hbs

@@ -33,7 +33,7 @@
 
 
     {{#author}}
-        <footer role="contentinfo">
+        <footer class="post-footer" role="contentinfo">
 
             <div class="vcard">
                 <a href="{{@blog.url}}/rss" id="btn_feed" class="btn" title="Feed" target="_blank">