presidential-innovation-fellows/dap-guide

View on GitHub
_sass/pages/_index.scss

Summary

Maintainability
Test Coverage
body {
  background-color: lighten($color-gray-light, 28);
  -webkit-font-smoothing: antialias;
}

a {
  &:focus {
    box-shadow: none;
    outline: 0;
  }
}

ul {
  display: block;

  li {

    &::before {
      content: "";
    }
  }
}

.usa-grid {
  padding: 0 1rem;

  @include media($medium-screen) {
    padding: 0 3rem;
  }
}

.usa-hero{
  background-color: $color-primary-darkest;
  min-height:650px;
  position: relative;
  text-align:center;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $color-white;
  }

  h1{
    font-family: $font-sans;
    font-size: 4.5rem;
    margin:0;
    padding-top:3em;
  }

  h5 {
    font-family: $font-sans;
    font-size: 2.4rem;
    margin-bottom: 10px;
    margin-top: 0;
  }

  .usa-button {
    padding: 0.75em 1.1em;
  }

  .usa-hero-overlay{
    background-color: rgba(0,0,0,0.5);
  }

  @include media($small-screen){
    h1{
      font-size:5.5rem;
    }
  }
}

.usa-content{
  margin-bottom:0px;

  h1{
    margin-top:0px;
  }

  #overview, #solution, #studies, #faq, #team, #blog{
    padding-top:75px;
    padding-bottom:75px;
  }

  #overview, #faq{
    background-color:$color-primary;
  }

  #studies, #blog{
    background-color:$color-primary-darkest
  }

  #overview{
    padding-top:75px;
    padding-bottom:75px;
    text-align:center;
    h1{
      color:$color-white;
    }
    p{
      color:$color-white;
    }
  }

  #solution{
    h1, h3{
      color:$color-base;
    }
    h2, h4{
      color:$color-primary-darkest;
      margin-top:0px;
    }
    h1{
      margin-bottom:0px;
    }
    h3{
      margin-top:0px;
    }
    #solution-title{
      text-align:center;
      padding-bottom:50px;
    }
    #solution-row{
      padding-bottom:30px;
    }
  }

  #studies{
    h3, p{
      color:$color-white;
    }
  }

  #faq{
    h1{
      color:$color-white;
      text-align:center;
    }
  }

  #team{
    h1{
      text-align:center;
      color:$color-base;
    }
    ul {
      li {
        &::before{
          content:"•";
        }
      }
    }
  }

  #blog{
    text-align:center;
    h2, h3{
      color:$color-white;
    }
    h2{
      margin-top:25px;
    }
    h3{
      margin-top:0px;
      margin-bottom:25px;
    }
  }
}