@media (max-width: $screen-sm-min) {
  #landing-page {
    padding-top: 15px;
    text-align: center;

    #registration-links {

      #sign_up_button {
        display: block;
      }

      #sign_in {
        display: block;
      }
    }

    .jumbotron {
      margin-bottom: 15px;

      padding: {
        left: 1px;
        right: 1px;
      }

      .page-header {
        margin: {
          left: 15px;
          right: 15px;
          bottom: 0;
        }
      }
    }
  }
}

@media (min-width: $screen-sm-min) {
  #landing-page {
    padding-top: 50px;
  }
}

#landing-page {
  opacity: 0.95;

  .page-header {
    img {
      margin-right: 10px;
      max-width: 20%;
    }

    #registration-links {
      padding-top: 20px;
    }
  }
}

@media (max-width: $screen-sm-min) {
  #landing-page {
    padding-top: 15px;
    text-align: center;

    #registration-links {

      #sign_up_button {
        display: block;
      }

      #sign_in {
        display: block;
      }
    }

    .jumbotron {
      margin-bottom: 15px;

      padding: {
        left: 1px;
        right: 1px;
      }

      .page-header {
        margin: {
          left: 15px;
          right: 15px;
          bottom: 0;
        }
      }
    }
  }
}

@media (min-width: $screen-sm-min) {
  #landing-page {
    padding-top: 50px;
  }
}

#landing-page {

  .jumbotron {
    background-color: rgba(238, 238, 238, 0.95);
  
    .page-header {
      img {
        margin-right: 10px;
        max-width: 20%;
      }

      #registration-links {
        padding-top: 20px;
      }
    }
  }
}

Use a translucent background color for the jumbotron in the landing page.
Use a translucent background color for the jumbotron in the landing page.

This replaces the old style (solid background color but with an opacity of 0.95 applied to the whole div). The reason is that now elements inside the jumbotron (e.g the signin and signup links) are not translucent. Making them translucent would be detrimental to usability.
