redbadger/website-honestly

View on GitHub
site/pages/about-us/timeline-slice/style.css

Summary

Maintainability
Test Coverage
@value badgerWhite, badgerBlack from "../../../css/_colors.css";
@value smallScreen, mediumScreen, largeScreen, maxWidth from "../../../css/_sizes.css";

.timeline {
  composes: boldSansSerif from '../../../css/typography/_fonts.css';
  composes: fontXS from '../../../css/typography/_fonts.css';
  composes: dividerBlackOnTransparent from '../../../css/_divider.css';
  background-color: badgerWhite;
}

.container {
  max-width: 1400px;
  margin: auto;
}

.image {
  width: 100%;
}

.content {
  background: badgerWhite;
  padding-bottom: 40px;
}

@media mediumScreen {
  .content {
    width: 100%;
    padding-top: 100px;
    padding-bottom: 50px;
  }

  .imageWrapper {
    width: 460px;
    margin: auto;
  }
}

@media largeScreen {
  .image {
    display: none;
  }

  .imageWrapper {
    width: auto;
  }

  .content {
    width: 65%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 0;
  }
}