Subversion Repositories web.creative

Rev

Rev 1 | Blame | Compare with Previous | Last modification | View Log | Download

///
/// Future Imperfect by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Mini Post */

  .mini-post {
    @include vendor('display', 'flex');
    @include vendor('flex-direction', 'column-reverse');
    background: _palette(bg);
    border: solid 1px _palette(border);
    margin: 0 0 _size(element-margin) 0;

    .image {
      overflow: hidden;
      width: 100%;

      img {
        @include vendor('transition', 'transform #{_duration(transition)} ease-out');
        width: 100%;
      }

      &:hover {
        img {
          @include vendor('transform', 'scale(1.05)');
        }
      }
    }

    header {
      @include padding(1.25em, 1.25em, (0, 3em, 0, 0));
      min-height: 4em;
      position: relative;
      @include vendor('flex-grow', '1');

      h3 {
        font-size: 0.7em;
      }

      .published {
        display: block;
        font-family: _font(family-heading);
        font-size: 0.6em;
        font-weight: _font(weight-heading);
        letter-spacing: _font(kerning-heading);
        margin:  -0.625em 0 (_size(element-margin) * 0.85) 0;
        text-transform: uppercase;
      }

      .author {
        position: absolute;
        right: 2em;
        top: 2em;
      }
    }
  }

  .mini-posts {
    margin: 0 0 _size(element-margin) 0;

    @include breakpoint(large) {
      @include vendor('display', 'flex');
      @include vendor('flex-wrap', 'wrap');
      width: calc(100% + #{_size(element-margin)});

      > * {
        margin: _size(element-margin) _size(element-margin) 0 0;
        width: calc(50% - #{_size(element-margin)});
      }

      > :nth-child(-n + 2) {
        margin-top: 0;
      }
    }

    @include breakpoint(xsmall) {
      display: block;
      width: 100%;

      > * {
        margin: 0 0 _size(element-margin) 0;
        width: 100%;
      }
    }
  }