_masthead.scss 647 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. // Styling for the masthead
  2. header.masthead {
  3. padding-top: 10rem;
  4. padding-bottom: calc(10rem - 56px);
  5. background-image: url('../img/header.jpg');
  6. background-position: center center;
  7. @include background-cover;
  8. hr {
  9. margin-top: 30px;
  10. margin-bottom: 30px;
  11. }
  12. h1 {
  13. font-size: 2rem;
  14. }
  15. p {
  16. font-weight: 300;
  17. }
  18. @media (min-width: 768px) {
  19. p {
  20. font-size: 1.15rem;
  21. }
  22. }
  23. @media (min-width: 992px) {
  24. height: 100vh;
  25. min-height: 650px;
  26. padding-top: 0;
  27. padding-bottom: 0;
  28. h1 {
  29. font-size: 3rem;
  30. }
  31. }
  32. @media (min-width: 1200px) {
  33. h1 {
  34. font-size: 4rem;
  35. }
  36. }
  37. }