~xdavidwu/xdavidwu.link

7cea6e5da2d50a60556a61e84e9505aa18dce9d8 — xdavidwu 3 years ago 39b2284
grid: remake with css grid
1 files changed, 10 insertions(+), 54 deletions(-)

M _sass/minimal-mistakes/_archive.scss
M _sass/minimal-mistakes/_archive.scss => _sass/minimal-mistakes/_archive.scss +10 -54
@@ 130,69 130,25 @@
/*
   Grid view
   ========================================================================== */
.grid__wrapper {
  display: grid;
  grid-template-columns: 1fr;

.archive {
  .grid__wrapper {
    /* extend grid elements to the right */

    @include breakpoint($large) {
      margin-right: -1 * $right-sidebar-width-narrow;
    }
  @include breakpoint($small) {
    grid-template-columns: 1fr 1fr;
  }

    @include breakpoint($x-large) {
      margin-right: -1 * $right-sidebar-width;
    }
  @include breakpoint($medium) {
    grid-template-columns: repeat(4, 1fr);
  }

  gap: 8px;
}

.grid__item {
  margin-bottom: 2em;
  overflow: hidden;

  @include breakpoint($small) {
    float: left;
    width: span(5 of 10);

    &:nth-child(2n + 1) {
      clear: both;
      margin-left: 0;
    }

    &:nth-child(2n + 2) {
      clear: none;
      margin-left: gutter(of 10);
    }
  }

  @include breakpoint($medium) {
    margin-left: 0; /* override margin*/
    margin-right: 0; /* override margin*/
    width: span(3 of 12);

    &:nth-child(2n + 1) {
      clear: none;
    }

    &:nth-child(4n + 1) {
      clear: both;
    }

    &:nth-child(4n + 2) {
      clear: none;
      margin-left: gutter(1 of 12);
    }

    &:nth-child(4n + 3) {
      clear: none;
      margin-left: gutter(1 of 12);
    }

    &:nth-child(4n + 4) {
      clear: none;
      margin-left: gutter(1 of 12);
    }
  }

  .page__meta {
    margin: 0 0 4px;
    font-size: 0.6em;