ArticleTemplates/assets/scss/modules/content/_meta.scss

// /*doc
// ---
// title: Meta
// name: meta
// category: Content
// ---
// Display an article's meta information.
//
// ```html_example
// <div class="meta">
//     <div class="meta__misc">
//         <div class="meta__byline">
//             <span class="byline">
//                 <a class="avatar avatar--author" href="x-gu://list/mobile-apps.guardianapis.com/lists/tag/profile/michaelbillington">
//                     <img class="avatar__img" src="http://png-resizer.mobile-apps.guardianapis.com/static/sys-images/Guardian/Pix/pictures/2014/3/13/1394733744238/MichaelBillington.png?width=300">
//                 </a>
//                 <span class="byline__author">
//                     <a href="x-gu://list/mobile-apps.guardianapis.com/lists/tag/profile/michaelbillington">Michael Billington</a>
//                 </span>
//             </span>
//             <a class="alerts " href="x-gu://follow/tag-contributor///profile/nicholaswatt" data-follow-alert-id="tag-contributor///profile/nicholaswatt">
//                 <span class="alerts__state--unfollow-notifications">
//                     <span data-icon="" aria-hidden="true"></span>
//                     <span class="alerts__label">Follow Nicholas Watt</span>
//                 </span>
//                 <span class="alerts__state--follow-notifications">
//                     <span data-icon="" aria-hidden="true"></span>
//                     <span class="alerts__label">Following Nicholas Watt</span>
//                 </span>
//             </a>
//         </div>
//         <p class="meta__pubdate"><span class="screen-readable">Published: </span>23:00 GMT+1 Wednesday, 18 June 2014</p>
//     </div>
//     <div class="comment-count">
//         <a href="#comments" data-scroll>
//             <span data-icon="&#xe03c;" aria-hidden="true"></span> 2
//             <span class="comment-count__label">Comments</span>
//         </a>
//     </div>
// </div>
// ```
// */

.meta {
    @include meta();
    margin: 0 auto;
    width: 100%;
    display: table;
    position: relative;
    padding-top: base-px(.5);

    .avatar--author {
        margin: base-px(0, 1, 1, 0);
        float: left;
    }

    &__misc {
        padding: base-px(0, 1, .5, 1);

        @include mq($from: col4) {
            margin: 0 auto 0 240px;
            padding-left: 0;
            width: 620px;
        }

        .meta__byline {
            margin-bottom: 0;
        }

        .byline {
            font-family: $egyptian-text;
            font-weight: 400;
            font-style: italic;
            a {
                font-weight: 800;
                font-style: normal;
            }
        }
    }

    &__image__caption__icon,
    &__image__caption__text,
    &__published,
    &__published__comments {
        font-size: 1.4rem;
        line-height: 1.8rem;
        color: color(brightness-46);
        font-family: $guardian-sans;

        #comment-count {
            display: block;
            margin-top: base-px(.5);
        }
    }

    &__image__caption__icon,
    &__image__caption__text,
    &__published {
        padding-top: 0;
        padding-bottom: .25em;
        @include mq($from: col4) {
            padding-left: 0;
        }
    }

    &__image__caption__text {
        display: inline;
    }

    &__published__comments {
        float: right;
        text-align: right;
        font-weight: 600;
        font-size: 1.8rem;
        line-height: 1.8rem;
        margin-left: base-px(.5);
        border-left: 1px solid color(brightness-86);
        margin-bottom: base-px(.5);
        margin-top: base-px(-.5);
        a {
            position: relative;
            display: block;
            margin: base-px(0, -.5, 0, 0);
            padding: base-px(2.25, .5, 0, 1);
            min-width: 36px;
        }
        [data-icon] {
            position: absolute;
            top: base-px(.5);
            right: 4px;
        }
        .screen-readable {
            max-width: 0;
        }
    }
}