banner.css

Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
  2. 10 core/profiles/demo_umami/themes/umami/components/banner/banner.css
  3. 11.x 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/css/components/blocks/banner/banner.css

View source
  1. /**
  2. * @file
  3. * This file is used to style the banner block.
  4. */
  5. .block-type-banner-block {
  6. background-size: 0 0;
  7. }
  8. .block-type-banner-block .summary {
  9. margin: 1em;
  10. }
  11. .block-type-banner-block .field--name-field-title {
  12. margin: 0 0 0.5em 0;
  13. font-family: "Scope One", Georgia, serif;
  14. font-size: 1.777em;
  15. font-weight: 400;
  16. line-height: 1.2em;
  17. }
  18. .block-type-banner-block .field--name-field-summary {
  19. margin-bottom: 1.28em;
  20. font-size: 1.188em;
  21. }
  22. .block-type-banner-block .field--name-field-content-link a {
  23. display: inline-block;
  24. padding: 0.7em 1.3em;
  25. cursor: pointer;
  26. transition: background-color 0.5s ease;
  27. text-align: center;
  28. text-decoration: none;
  29. color: #fff;
  30. border: 2px solid #d93760;
  31. border-radius: 3px;
  32. background-color: #d93760;
  33. font-family: "Scope One", Georgia, serif;
  34. font-size: 1.2rem;
  35. font-weight: 400;
  36. }
  37. .block-type-banner-block .field--name-field-content-link a:focus,
  38. .block-type-banner-block .field--name-field-content-link a:hover {
  39. color: #000;
  40. border-color: #d93760;
  41. outline-color: #fff;
  42. outline-offset: 2px;
  43. background-color: #fcece7;
  44. }
  45. @media screen and (min-width: 48rem) { /* 768px */
  46. .block-type-banner-block {
  47. background-color: #464646;
  48. background-repeat: no-repeat;
  49. background-position: left center;
  50. background-size: cover;
  51. /* Image ratio 7:3 */
  52. }
  53. .block-type-banner-block .block-inner {
  54. display: flex;
  55. align-items: center;
  56. max-width: 1200px;
  57. height: 0; /* Required for flexbox vertical centering in IE11. Min-height will take precedence. */
  58. min-height: 54vw;
  59. margin: 0 auto;
  60. padding: 0 1em;
  61. }
  62. .block-type-banner-block .summary {
  63. flex: 0 0 50%;
  64. margin: 0;
  65. padding: 1.777em;
  66. color: #fff;
  67. border: 1px solid #464646;
  68. background: rgba(0, 0, 0, 0.42);
  69. }
  70. .block-type-banner-block .field--name-field-media-image {
  71. /**
  72. * We need to ensure that the alt text on the image is accessible to
  73. * screenreaders, so, when on large screens, let's give this the same CSS
  74. * as the .visually-hidden class has.
  75. */
  76. position: absolute !important;
  77. overflow: hidden;
  78. clip: rect(1px, 1px, 1px, 1px);
  79. width: 1px;
  80. height: 1px;
  81. word-wrap: normal;
  82. }
  83. }
  84. @media screen and (min-width: 60rem) { /* 960px */
  85. .block-type-banner-block .summary {
  86. flex: 0 0 41%;
  87. }
  88. .block-type-banner-block .block-inner {
  89. min-height: 43vw;
  90. }
  91. }
  92. /* 77em == the max width of .container + 1em either side */
  93. @media screen and (min-width: 77rem) {
  94. .block-type-banner-block .summary {
  95. margin-left: -1em;
  96. }
  97. }

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