_welcome.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. .onboarding {
  2. background: linear-gradient(to bottom, mc('grey', '900') 0%, mc('grey', '800') 100%);
  3. height: 100%;
  4. display: flex;
  5. flex-direction: column;
  6. justify-content: center;
  7. align-items: center;
  8. color: mc('grey', '50');
  9. &::before {
  10. content: '';
  11. display:block;
  12. width: 100%;
  13. height: 100%;
  14. position: absolute;
  15. top: 0;
  16. left: 0;
  17. background-image: url('../static/svg/login-bg-motif.svg');
  18. background-position: center center;
  19. background-repeat: repeat;
  20. background-size: 500px;
  21. z-index: 0;
  22. opacity: .75;
  23. animation: onboardingBgReveal 50s linear infinite;
  24. @include keyframes(onboardingBgReveal) {
  25. 0% {
  26. background-position-y: 0;
  27. }
  28. 100% {
  29. background-position-y: -2000px;
  30. }
  31. }
  32. }
  33. img {
  34. width: 500px;
  35. filter: grayscale(100%) brightness(160%);
  36. margin-bottom: 3rem;
  37. z-index: 2;
  38. @include until($tablet) {
  39. width: 300px;
  40. }
  41. }
  42. h1 {
  43. margin-bottom: 1rem;
  44. z-index: 2;
  45. }
  46. h2 {
  47. margin-bottom: 3rem;
  48. z-index: 2;
  49. }
  50. .button {
  51. z-index: 2;
  52. }
  53. }