alxshelepenok/gatsby-starter-lumen

View on GitHub
src/components/Post/Post.module.scss

Summary

Maintainability
Test Coverage
@import "src/assets/scss/variables";
@import "src/assets/scss/mixins";

.post {
  .content {
    @include margin-auto();
  }

  .footer {
    max-width: $layout-post-width;
    @include padding(0, 0.5);
    @include margin-auto();
  }

  .comments {
    max-width: $layout-post-width;
    @include padding(0, 0.5);
    @include margin-auto();
  }

  .buttons {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
    @include margin(1, 0, 0, 0);

    .buttonArticles {
      @include margin(0, 0.5, 0, 0);
    }
  }
}

@include breakpoint-md {
  .post {
    .footer {
      @include padding-equal(0);
    }

    .comments {
      @include padding-equal(0);
    }

    .buttons {
      left: 30px;
      max-width: none;
      position: fixed;
      top: 30px;
      @include margin(0, 0.5, 0, 0);
    }
  }
}