hudozka/src/style/content.scss

@import "variables";

.content {
  margin: 0 auto 1em;

  &.content_full{
    width: $content-full;
  }

  &.content_wide{
    width: $content-wide;
  }

  &.content_semi-wide{
    width: $content-semi-wide;
  }

  &.content_thin{
    width: $content-thin;
  }

  &.content--padding-top--menu{
    padding-top: $menu-thickness;
  }
}


// Animation on load

@keyframes smallSlideInFromTop {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.content {
  animation: smallSlideInFromTop 350ms ease-out;
}


@media screen and (max-width: $mobile-width) {
  $content-mobile: 95%;

  .content {
     &.content_wide{
      width: $content-mobile;
    }

    &.content_semi-wide{
      width: $content-mobile;
    }

    &.content_thin{
      width: $content-mobile;
    }

    &.content--padding-top--menu{
      padding-top: var(--single-margin);
    }
  }
}

@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) {
  $thin-value: 70%;
  $wide-value: 95%;
  $semi-wide-value: 80%;

  .content {
    overflow-x: scroll;

    &.content_wide {
      width: $wide-value;
    }

    &.content_semi-wide {
      width: $semi-wide-value;
    }

    &.content_thin {
      width: $thin-value;
    }

    &.content--padding-top--menu {
      padding-top: var(--double-margin);
    }
  }

  @media screen and (orientation: portrait) {
    $wide-value: 100%;
    $thin-value: 80%;
    $semi-wide-value: 95%;

    .content {
      &.content_wide {
        width: $wide-value;
      }

      &.content_semi-wide {
        width: $semi-wide-value;
      }

      &.content_thin {
        width: $thin-value;
      }
    }
  }
}