style.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. .groom {
  2. $bottom_shadow_size: 2rem;
  3. @mixin mobile {
  4. @media screen and (max-width: 1000px) {
  5. @content;
  6. }
  7. }
  8. background-color: #ffffff;
  9. position: relative;
  10. flex: none;
  11. height: 15rem;
  12. background-image: url("//dd.unicraft.org/static/branding/groom/header/bg.png");
  13. background-repeat: repeat-x;
  14. background-size: auto 65%;
  15. background-position: left bottom;
  16. box-shadow: 0 0 $bottom_shadow_size hsla(0, 0, 0, 0.25);
  17. margin-bottom: $bottom_shadow_size;
  18. &__logo {
  19. flex: none;
  20. position: absolute;
  21. left: 4rem;
  22. bottom: 0;
  23. z-index: 1;
  24. max-width: 580px;
  25. width: 60%;
  26. @include mobile {
  27. left: 2rem;
  28. width: auto;
  29. height: 35%;
  30. }
  31. }
  32. &__pic {
  33. position: absolute;
  34. bottom: -40%;
  35. height: 133%;
  36. left: 50%;
  37. z-index: 2;
  38. @include mobile {
  39. left: auto;
  40. right: 0;
  41. }
  42. }
  43. &__text {
  44. position: absolute;
  45. left: calc(55% + 12rem);
  46. right: 0;
  47. bottom: 1rem;
  48. z-index: 3;
  49. opacity: 1;
  50. max-width: 280px;
  51. &__img {
  52. margin-right: 1rem;
  53. float: left;
  54. }
  55. &--1 {}
  56. &--2 {}
  57. &--3 {
  58. // display: block;
  59. }
  60. @include mobile {
  61. left: 2rem;
  62. width: auto;
  63. max-width: none;
  64. bottom: 40%;
  65. &__img {
  66. margin-right: 0.25rem;
  67. height: 1.5rem;
  68. }
  69. }
  70. }
  71. }