hacks-guide-minimal-mistakes-theme/assets/_scss/_archive.scss

/* ==========================================================================
   ARCHIVE
   ========================================================================== */

.archive {
  margin-bottom: 2em;
  @include breakpoint($medium) {
    @include span(12 of 12);
  }
  @include breakpoint($large) {
    @include span(10 of 12 last);
  }
  @include breakpoint($x-large) {
    @include prefix(0.5 of 12);
  }
  a {
    text-decoration: none;
  }
}

.archive__subtitle {
  margin: 0;
  padding-bottom: 0.5em;
  font-size: 14px;
  color: mix(#fff, $gray, 25%);
  border-bottom: 1px solid $border-color;
}

.archive__item-title {
  margin-bottom: 4px;
  font-family: $sans-serif-narrow;
  font-size: 20px;
}

.archive__item-excerpt {
  font-size: 14px;
  & + p {
    text-indent: 0;
  }
}

a:hover {
  .archive__item-teaser {
    box-shadow: 0 0 10px rgba(#000, 0.25);
  }
  .archive__item-title {
    text-decoration: underline;
  }
}


/*
   List view
   ========================================================================== */

.list__item {
  @include breakpoint($medium) {
    padding-right: $right-sidebar-width-narrow;
  }
  @include breakpoint($large) {
    padding-right: $right-sidebar-width;
  }
  @include breakpoint($x-large) {
    padding-right: $right-sidebar-width-wide;
  }
}


/*
   Grid view
   ========================================================================== */

.grid__item {
  margin-bottom: 2em;
  .archive__item-excerpt {
    display: none;
  }
  .archive__item-teaser {
    border-radius: $border-radius;
    img {
      width: 100%;
    }
  }
  @include breakpoint($small) {
    @include gallery(5 of 10);
    .archive__item-teaser {
      max-height: 200px;
      overflow: hidden;
    }
  }
  @include breakpoint($medium) {
    margin-left: 0; // reset before mixin does its thing
    margin-right: 0; // reset before mixin does its thing
    @include gallery(2.5 of 10);
    .archive__item-teaser {
      max-height: 120px;
    }
    .archive__item-excerpt {
      display: block;
    }
  }
}