love.sass 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. .bd-love
  2. background-color: $background
  3. .bd-testimonials
  4. background-color: $background
  5. .bd-testimonial
  6. align-items: flex-start
  7. display: flex
  8. justify-content: center
  9. .bd-testimonial-tweet
  10. background-color: $white
  11. .bd-more-loves
  12. align-items: center
  13. display: flex
  14. justify-content: center
  15. margin-top: 1.5rem
  16. text-align: center
  17. .button
  18. height: auto
  19. padding: 0.75em 1.5em
  20. span
  21. transform-origin: center center
  22. transition: transform $speed $easing
  23. &:hover
  24. span
  25. transform: scale(1.04)
  26. +mobile
  27. .bd-testimonials
  28. padding: 1.5rem
  29. .bd-testimonial
  30. margin-bottom: 1.5rem
  31. +tablet
  32. .bd-testimonials
  33. padding: 3rem
  34. .bd-testimonial + .bd-testimonial
  35. margin-top: 1.5rem
  36. +desktop
  37. .bd-testimonials
  38. min-height: 595px
  39. +widescreen
  40. .bd-testimonials
  41. min-height: 653px
  42. +fullhd
  43. .bd-testimonials
  44. min-height: 632px
  45. .bd-rainbow
  46. animation: rainbow 8s ease infinite
  47. background-image: linear-gradient(124deg, $orange, $red, $purple, $blue)
  48. background-size: 800% 800%
  49. .hero.bd-is-love
  50. .title,
  51. .subtitle
  52. color: $white
  53. @keyframes rainbow
  54. 0%
  55. background-position: 1% 80%
  56. 50%
  57. background-position: 99% 20%
  58. 100%
  59. background-position: 1% 80%
  60. .bd-hug
  61. align-items: flex-start
  62. display: flex
  63. justify-content: center
  64. // .bd-embrace
  65. // background-color: $background
  66. // border-radius: $radius
  67. // padding: 1.5rem
  68. +mobile
  69. .bd-love
  70. padding: 1.5rem
  71. .bd-hug
  72. margin: 1.5rem
  73. .bd-embrace
  74. text-align: center
  75. &:not(:first-child)
  76. margin-top: 1.5rem
  77. &:not(:last-child)
  78. margin-bottom: 1.5rem
  79. .bd-embrace-button
  80. margin-top: 0.75rem
  81. +tablet
  82. .bd-love
  83. padding: 3rem 1.5rem
  84. .bd-embrace
  85. align-items: center
  86. display: flex
  87. justify-content: center
  88. &:not(:first-child)
  89. margin-top: 3rem
  90. &:not(:last-child)
  91. margin-bottom: 3rem
  92. .bd-embrace-button
  93. margin-left: 1.5rem
  94. .bd-hugs
  95. display: flex
  96. flex-wrap: wrap
  97. padding-bottom: 3rem
  98. .bd-hug
  99. margin-top: 1.5rem
  100. width: calc(33.3333% - 1rem)
  101. &:nth-child(1),
  102. &:nth-child(2),
  103. &:nth-child(3)
  104. margin-top: 0
  105. &:nth-child(3n-1),
  106. &:nth-child(3n)
  107. margin-left: 1.5rem