banner.css

Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
  2. 8.9.x core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
  3. 10 core/profiles/demo_umami/themes/umami/components/banner/banner.css

This file is used to style the banner block.

File

core/profiles/demo_umami/themes/umami/components/banner/banner.css

View source
  1. /**
  2. * @file
  3. * This file is used to style the banner block.
  4. */
  5. .banner__content {
  6. margin: 1rem 4%;
  7. font-size: 1.188em;
  8. }
  9. .banner__title {
  10. margin: 0 0 0.5em 0;
  11. font-family: "Scope One", Georgia, serif;
  12. font-size: 1.777em;
  13. font-weight: 400;
  14. line-height: 1.2em;
  15. }
  16. /* Medium */
  17. @media screen and (min-width: 48rem) {
  18. /* 768px */
  19. .banner {
  20. position: relative; /* Anchor absolutely positioned background image. */
  21. background-color: #464646;
  22. }
  23. .banner__inner {
  24. display: flex;
  25. align-items: center;
  26. min-height: 54vw;
  27. margin: auto;
  28. padding: 0 4%;
  29. }
  30. .banner__content {
  31. position: relative; /* Establish stacking context to appear above absolutely positioned background image. */
  32. max-width: 50%;
  33. margin: 0;
  34. padding: 1.777em;
  35. color: #fff;
  36. border: 1px solid #464646;
  37. background: rgba(0, 0, 0, 0.42);
  38. }
  39. .banner__image img {
  40. position: absolute;
  41. top: 0;
  42. left: 0;
  43. width: 100%;
  44. height: 100%;
  45. object-fit: cover;
  46. }
  47. }
  48. /* Large */
  49. @media screen and (min-width: 60rem) {
  50. /* 960px */
  51. .banner__content {
  52. max-width: 41%;
  53. }
  54. .banner__inner {
  55. min-height: 43vw;
  56. }
  57. }
  58. /* Extra large + side margins */
  59. @media screen and (min-width: 80rem) {
  60. /* 1200px (large) + 80px (side margins) = 1280px */
  61. .banner__inner {
  62. padding: 0;
  63. }
  64. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.