Post

<article id="post-766" class="post post--default">
    <div class="post__content">
        <h1 class="post__title">You are my sunshine: how to safely enjoy daylight</h1>
        <div class="post__meta">
            <img src="/assets/images/mauijim-avatar.png" class="post__avatar" title="Author/Ambassador">
            <span class="post__author">By Author/Ambassador</span>
            <span class="post__date">February 2017</span>
            <div class="post__share"><span class="post__share-label">Share on:</span>
                <ul class="social-icons">
                    <li class="social-icons__item">
                        <a class="social-icons__link" href="#"><svg class="icon icon--social-twitter">
  <use xlink:href="/assets/icons/icons.svg#social-twitter"></use>
</svg>
</a>
                    </li>
                    <li class="social-icons__item">
                        <a class="social-icons__link" href="#"><svg class="icon icon--social-facebook">
  <use xlink:href="/assets/icons/icons.svg#social-facebook"></use>
</svg>
</a>
                    </li>
                    <li class="social-icons__item">
                        <a class="social-icons__link" href="#"><svg class="icon icon--social-instagram">
  <use xlink:href="/assets/icons/icons.svg#social-instagram"></use>
</svg>
</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="post__image-container">
            <img class="post__image u-object-fit-cover" src="/assets/images/blog-post-sailing-man.jpg" alt="Image alt text">
        </div>
        <div class="post__full">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non porta sem, at porttitor dui. Nunc eget ultrices est. In varius tempus justo, eleifend faucibus eros vestibulum ut. Maecenas ultricies quam purus, vitae aliquet dui tempor
                sed. Integer semper suscipit pharetra. Ut consequat tortor id rutrum efficitur. Etiam ultrices odio id turpis sagittis, id finibus elit tincidunt. Maecenas ante metus, lacinia at quam venenatis, porta pretium nisl. Ut ac enim efficitur,
                sollicitudin orci a, tempus lorem. Mauris blandit justo ac iaculis molestie. Etiam nec sollicitudin velit. Cras mollis nisi et nibh volutpat sodales. Cras ut lorem eu risus mollis dapibus. Praesent tincidunt purus nec turpis condimentum,
                quis fermentum nisl tincidunt. Ut mattis risus ipsum, ac gravida metus interdum ut. Aenean eget augue posuere, volutpat ex ultrices, blandit sem.</p>
            <ol>
                <li>Cras scelerisque consequat mollis. Morbi vel mauris orci. Integer non lectus aliquam, <a href="#">porta orci eu, elementum erat</a>. Praesent ut turpis tristique, ultrices nulla lacinia, efficitur mauris.</li>
                <li>Cras scelerisque consequat mollis. Morbi vel mauris orci. Integer non lectus aliquam, porta orci eu, elementum erat.</li>
            </ol>
            <p>Morbi molestie elementum tincidunt. Aenean aliquet efficitur purus, eu dictum lectus porta eget. Sed facilisis rutrum tempor. Nam laoreet orci eget ultricies luctus. Sed porttitor elit elementum enim tincidunt, sed mattis eros aliquet. Praesent
                sit amet risus lacus. Praesent ut ipsum quam. Aenean eu orci aliquam, rhoncus arcu at, auctor neque. Nam eu odio eu lectus mollis rhoncus at at dui. Donec tincidunt odio efficitur consequat interdum. Suspendisse viverra nibh cursus erat
                porttitor cursus. Ut et hendrerit enim, sit amet maximus enim.</p>
        </div>
    </div>
</article>
<div class="post__actions">
    <a class="button button--outlined post__action" href="#" rel="prev" title="3 Favorite Summer Sunglasses">
    Previous Post
  </a>
    <a class="button button--outlined post__action" href="#" rel="prev" title="Product Spotlight: Alelele Bridge">
    Next Post
  </a>
</div>
<article id="{{id}}" class="post post--{{modifier}}">
  <div class="post__content">
    <h1 class="post__title">{{title}}</h1>
    <div class="post__meta">
      <img src="{{avatar}}" class="post__avatar" title="{{postAuthor}}">
      <span class="post__author">By {{postAuthor}}</span>
      <span class="post__date">{{postDate}}</span>
      {{#if share}}
      <div class="post__share"><span class="post__share-label">Share on:</span> {{render '@social-icons'}}</div>
      {{/if}}
    </div>
    <div class="post__image-container">
      <img class="post__image u-object-fit-cover" src="{{image}}" alt="{{alt}}">
    </div>
    <div class="post__full">
      {{{content}}}
    </div>
  </div>
</article>
{{#if postActions}}
<div class="post__actions">
  {{#each postActions}}
  <a class="button button--{{modifier}} post__action" href="{{url}}" rel="prev" title="{{linkTitle}}">
    {{value}}
  </a>
  {{/each}}
</div>
{{/if}}
/* No context defined for this component. */
  • Content:
    .post__content {
      margin: 0 $gutter-width-half;
    
      @include breakpoint($breakpoint-lg) {
        margin: 0;
      }
    }
    
    .post__title {
      margin-top: 0;
      color: $color-dark;
      font-size: 1.6rem;
      font-weight: $font-weight-medium;
      letter-spacing: 1px;
      line-height: 2rem;
      text-shadow: none;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 0;
        font-size: 5.7rem;
        font-weight: $font-weight-bold;
        line-height: 6.8rem;
        text-transform: none;
      }
    }
    
    .post__meta {
      @include breakpoint($breakpoint-md) {
        display: flex;
        align-items: center;
      }
    }
    
    .post__avatar {
      max-width: 40px;
      max-height: 40px;
      margin-right: $gutter-width-half;
      float: left;
    
      @include breakpoint($breakpoint-md) {
        max-width: 45px;
        max-height: 45px;
        margin: 0;
        float: none;
      }
    }
    
    .post__author {
      display: block;
      margin: 0 $gutter-width;
      font-size: 1.4rem;
      line-height: 2rem;
    
      @include breakpoint($breakpoint-md) {
        margin: 0 15px;
      }
    }
    
    .post__date {
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      line-height: 2rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        flex-grow: 1;
        margin: 0 15px;
      }
    }
    
    .post__share {
      margin-top: $gutter-width;
      font-size: 1.4rem;
      line-height: 2rem;
    
      .social-icons__item {
        margin: 0;
      }
    
      .icon {
        width: $gutter-width;
        height: $gutter-width;
      }
    
      @include breakpoint($breakpoint-md) {
        display: flex;
        align-items: center;
        margin: 0;
    
        .social-icons__item {
          margin-top: 2px;
        }
    
        .icon {
          width: 30px;
          height: 30px;
        }
      }
    }
    
    .post__share-label {
      margin-right: 15px;
      float: left;
    }
    
    .post__image-container {
      margin: $gutter-width (-1 * $gutter-width-half);
    
      @include breakpoint($breakpoint-md) {
        margin: 30px 0 55px;
      }
    }
    
    .post__image {
      height: 180px;
      vertical-align: bottom;
    
      @include breakpoint($breakpoint-md) {
        height: 100%;
      }
    }
    
    .post__full {
      margin: 0 0 $gutter-width;
      font-size: 1.4rem;
      line-height: 1.7rem;
    
      a {
        transition: color .2s ease 0s;
        color: $color-primary;
        text-decoration: none;
    
        &:hover,
        &:active {
          color: $color-primary-hover;
        }
      }
    
      p,
      ul,
      ol {
        font-size: inherit;
        line-height: inherit;
      }
    
      @include breakpoint($breakpoint-md) {
        max-width: 940px;
        margin: 0 auto;
        padding: 0 $gutter-width-half;
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .post__actions {
      margin: 40px auto;
      text-align: center;
    
      @include breakpoint($breakpoint-md) {
        margin: 45px auto;
      }
    }
    
    .post__action {
      margin: 0 $gutter-width-half;
    }
    
  • URL: /components/raw/post/post.scss
  • Filesystem Path: src/components/02-components/post/post.scss
  • Size: 2.6 KB

There are no notes for this item.