mozilla/webmaker.org

#resources-banner {
  background: lighten(@yellow, 28%);
  font-size: 1.2rem;
  left: 0;
  margin-bottom: 2.5rem;
  padding-top: 0.8rem;
  position: relative;
  right: 0;
  text-align: center;

  @media screen and (min-width: @screen-sm-min) {
    margin-bottom: 4rem;
  }
}

[ng-controller="resourcesHomeController"] {
  color: @grey;
  font-size: 1.6rem;
  font-weight: 400;
  padding-bottom: 2rem;
  h1, h2 {
    font-weight: 300;
  }
  h1, h2, h3 {
    margin-bottom: 0.5em;
  }
  h1 {
    font-size: 5rem;
    @media screen and (min-width: @screen-md-min) {
      font-size: 6rem;
    }
  }
  h2 {
    color: @green;
    font-size: 3.6rem;
    @media screen and (min-width: @screen-sm-min) {
      margin-bottom: 0.3rem;
    }

  }
  p {
    line-height: 1.555740433;
  }
  section {
    margin-bottom: 4rem;
    @media screen and (min-width: @screen-sm-min) {
      margin-bottom: 1.6rem;
    }
  }
}

#resources-Resources {
  @media screen and (min-width: @screen-md-min) {
    margin-bottom: 0;
  }
  .resources-map {
    @media screen and (min-width: @screen-sm-min) {
      margin-top: 8rem;
    }
    @media screen and (min-width: @screen-md-min) {
      margin-top: 4.6rem;
    }
    @media screen and (min-width: @screen-lg-min) {
      margin-top: 2.5rem;
    }
    img {
      display: block;
      margin: 1rem auto;
      max-width: 22rem;

      @media screen and (min-width: 31.25em) {
        float: right;
      }
      @media screen and (min-width: @screen-sm-min) {
        float: none;
        max-width: 63.8225256%;
      }
    }
    figcaption {
      @media screen and (min-width: 31.25em) {
        padding-top: 4rem;
      }
      @media screen and (min-width: @screen-sm-min) {
        padding-top: 1.6rem;
      }
      p {
        font-size: 1.3rem;
      }
    }
  }
}

#resources-Web-Literacy-Map {
  margin-bottom: 4rem;
  hgroup {
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 90% 3rem;
    padding-bottom: 4rem;
    @media @standard-def {
      background-image: url('/img/explore/bg-competencies-header.png');
    }
    @media @retina {
      background-image: url('/img/explore/bg-competencies-header@2x.png');
    }
    @media screen and (min-width: @screen-sm-min) {
      background-size: 90% auto;
    }
  }
  h3, h4 {
    text-align: center;
  }
  h3 {
    font-size: 1.2rem;
    font-variant: small-caps;
    font-weight: 600;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
  }
  h4 {
    font-style: italic;
    font-size: 1.4rem;
    font-weight: 300;
  }
  ul, li {
    background-color: @blue;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .literacies-Exploring, .literacies-Building {
    margin-bottom: 4rem;
    @media screen and (min-width: @screen-sm-min) {
      margin-bottom: auto;
    }
  }
  .competency-link {
    color: @white;
    display: block;
    padding: 2rem 1.5rem;
    position: relative;
    text-align: left;
    &::after {
      .icon(@fa-var-chevron-right);
      position: absolute;
      right: 1rem;
    }
    &:hover,
    &:focus {
      background: none;
      color: @white;
      text-decoration: none;
    }
  }
}

#resources-Discover-new-skills {
  .row {
    margin-bottom: 2rem;
    @media screen and (min-width: @screen-sm-min) {
      margin-bottom: 1rem;
    }
  }
  aside {
    margin-bottom: 3rem;
    @media screen and (min-width: @screen-sm-min) {
      margin-bottom: 1rem;
    }
  }
  h3 {
    color: lighten(@grey, 25%);
    font-weight: 200;
    font-size: 3.4rem;
    @media screen and (min-width: @screen-sm-min) {
      margin-top: 2rem;
    }
    @media screen and (min-width: @screen-md-min) {
      font-size: 4rem;
      margin-top: 4rem;
    }
    .fa-stack {
      font-size: 0.8em;
    }
  }
}

#resources-People-Resources {
  margin-bottom: 19rem;

  div {
    margin-bottom: 4rem;
  }

  @media screen and (min-width: @screen-sm-min) {
    margin-bottom: 44rem;
  }
  i {
    background-position: center top;
    background-repeat: no-repeat;
    left: 0;
    position: absolute;
    right: 0;

    @media screen and (max-width: @screen-xs-max) {
      background-image: url('/img/explore/bg-people-sm-vp.jpg');
      background-size: auto 17.6rem;
      height: 17.6rem;
    }
    @media screen and (min-width: @screen-sm-min) {
      background-image: url('/img/explore/bg-people.jpg');
      background-size: auto;
      height: 39.2rem;
      margin-top: 18rem;
    }
    @media screen and (min-width: @screen-lg-min) {
      background-size: 100% auto;
    }
  }
}

#resources-Still-Reading {
  a {
    display: block;
    transition: color 300ms;
    &:link, &:visited {
      color: @grey;
    }
    &:hover, &:active, &:focus {
      color: @resources-blue;
      text-decoration: none;
    }
  }
  h2, p {
    color: inherit;
    text-align: center;
  }
  h2 {
    margin-bottom: 1rem;
    &::before {
      .fa();
      display: block;
    }
  }
  p {
    margin-bottom: 4rem;
  }
  .web-lit-get-training {
    &::before {
      content: @fa-var-suitcase;
    }
  }
  .web-lit-gallery {
    &::before {
      content: @fa-var-th;
    }
  }
  .web-lit-get-involved {
    &::before {
      content: @fa-var-hand-o-up;
    }
  }
}