victorpopkov/universal-redux

View on GitHub
src/app/home/HomeContainer.scss

Summary

Maintainability
Test Coverage
.home {
  position: relative;

  .markdown {
    .heading {
      padding-bottom: 0.3em;
      margin-bottom: 16px;
      border-bottom: 1px solid rgba($black, 0.1);
    }

    h1 {
      flex-grow: 1;
      padding-right: 10px;
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    h2 {
      padding-bottom: 0.3em;
      margin-top: 1em;
      margin-bottom: 16px;
      border-bottom: 1px solid rgba($black, 0.1);
    }

    h3,
    h4,
    h5,
    h6 {
      margin-top: 1em;
      margin-bottom: 16px;
    }

    ul,
    ol {
      overflow: hidden;

      :global(.task-list-item) {
        list-style: none;
      }

      input {
        display: inline-block;
        margin: 0 0.5em 0.25em -1.6em;
        vertical-align: middle;
      }
    }

    blockquote {
      padding: 0 divide($grid-gutter-width, 2);
      color: $gray-600;
      border-left: 4px solid $gray-300;
    }

    table {
      border-collapse: collapse;
    }

    th,
    td {
      padding: 6px 13px;
      border: 1px solid $gray-400;
    }

    th {
      text-align: center;
    }

    tr:nth-child(2n) {
      background: $gray-100;
    }

    :not(pre) > code:not([class*='language-']) {
      padding: 0.15em 0;
      font-size: 0.85em;
      color: darken($slategray, 30%);
      white-space: nowrap;
      background: transparentize($gray-900, 0.95);
      border-radius: 3px;

      &::before,
      &::after {
        letter-spacing: -0.2em;
        content: '\00a0';
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .home {
    .markdown {
      font-size: 0.85rem;

      h1 {
        font-size: $h3-font-size;
      }

      h2 {
        font-size: $h4-font-size;
      }

      h3 {
        font-size: $h5-font-size;
      }

      h4,
      h5,
      h6 {
        font-size: $h6-font-size;
      }
    }
  }
}