_showcase.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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. // background-repeat: no-repeat;
  23. text-align: center;
  24. color: $header-text;
  25. h1 {
  26. font-size: 4rem;
  27. margin-top: 0;
  28. @include breakpoint(tablet-range) {
  29. font-size: 3rem;
  30. }
  31. @include breakpoint(mobile-only) {
  32. font-size: 2.5rem;
  33. line-height: 1.2;
  34. margin-bottom: 2.5rem;
  35. }
  36. }
  37. .button {
  38. @extend .default-animation;
  39. color: $header-text;
  40. padding: 0.7rem 2rem;
  41. margin-top: 2rem;
  42. background: rgba(255,255,255,0);
  43. border: 1px solid $header-text;
  44. border-radius: $border-radius;
  45. box-shadow: none;
  46. font-size: $core-font-size + 0.3rem;
  47. &:hover {
  48. background: rgba(255,255,255,0.2);
  49. }
  50. }
  51. }
  52. }