_showcase.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. // Modular Showcase styling
  2. .modular {
  3. // special case for header
  4. &.header-image {
  5. #header {
  6. background-color: rgba(255,255,255,0);
  7. box-shadow: none;
  8. #logo h3 {
  9. color: $header-text;
  10. }
  11. #navbar a {
  12. color: $header-text;
  13. }
  14. }
  15. }
  16. .showcase {
  17. padding-top: 4rem;
  18. padding-bottom: 4rem;
  19. background-color: #666;
  20. background-size: cover;
  21. background-position: center;
  22. text-align: center;
  23. color: $header-text;
  24. h1 {
  25. font-size: 4rem;
  26. margin-top: 0;
  27. @include breakpoint(tablet-range) {
  28. font-size: 3rem;
  29. }
  30. @include breakpoint(mobile-only) {
  31. font-size: 2.5rem;
  32. line-height: 1.2;
  33. margin-bottom: 2.5rem;
  34. }
  35. }
  36. .button {
  37. @extend .default-animation;
  38. color: $header-text;
  39. padding: 0.7rem 2rem;
  40. margin-top: 2rem;
  41. background: rgba(255,255,255,0);
  42. border: 1px solid $header-text;
  43. border-radius: $border-radius;
  44. box-shadow: none;
  45. font-size: $core-font-size + 0.3rem;
  46. &:hover {
  47. background: rgba(255,255,255,0.2);
  48. }
  49. }
  50. }
  51. }