header-site-branding.css

Same filename in other branches
  1. 9 core/themes/olivero/css/components/header-site-branding.css
  2. 11.x core/themes/olivero/css/components/header-site-branding.css

Site branding in header.

File

core/themes/olivero/css/components/header-site-branding.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Site branding in header.
  10. */
  11. .site-branding {
  12. display: flex;
  13. flex-shrink: 1;
  14. align-items: flex-end;
  15. min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
  16. min-height: var(--sp3);
  17. margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */
  18. padding-block: 0 var(--sp0-5);
  19. padding-inline-start: var(--container-padding);
  20. padding-inline-end: var(--container-padding);
  21. background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
  22. }
  23. @media (min-width: 31.25rem) {
  24. .site-branding {
  25. min-height: var(--sp4);
  26. }
  27. }
  28. @media (min-width: 43.75rem) {
  29. .site-branding {
  30. min-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */
  31. min-height: var(--sp6);
  32. padding-block-end: var(--sp);
  33. }
  34. }
  35. @media (min-width: 62.5rem) {
  36. .site-branding {
  37. min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
  38. }
  39. }
  40. @media (min-width: 75rem) {
  41. .site-branding {
  42. min-height: var(--site-header-height-wide);
  43. margin-inline-start: calc(-1 * var(--container-padding));
  44. padding-block: 0;
  45. }
  46. }
  47. [dir="rtl"] .site-branding {
  48. background-image: linear-gradient(-160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
  49. }
  50. .site-branding--bg-gray {
  51. background: var(--color--gray-100);
  52. }
  53. .site-branding--bg-white {
  54. background: var(--color--white);
  55. }
  56. .site-branding__inner {
  57. display: flex;
  58. align-items: center;
  59. }
  60. .site-branding__inner a {
  61. -webkit-text-decoration: none;
  62. text-decoration: none;
  63. }
  64. @media (min-width: 75rem) {
  65. .site-branding__inner {
  66. height: var(--header-height-wide-when-fixed);
  67. padding-block: var(--sp0-5);
  68. padding-inline-start: 0;
  69. padding-inline-end: 0;
  70. }
  71. }
  72. .site-branding__logo {
  73. flex-shrink: 0;
  74. max-width: 100%;
  75. }
  76. .site-branding__logo img {
  77. width: auto;
  78. max-width: 100%;
  79. max-height: var(--sp2);
  80. }
  81. @media (min-width: 31.25rem) {
  82. .site-branding__logo img {
  83. max-height: var(--sp3);
  84. }
  85. }
  86. @media (min-width: 43.75rem) {
  87. .site-branding__logo img {
  88. max-height: var(--sp4);
  89. }
  90. }
  91. @media (min-width: 75rem) {
  92. .site-branding__logo img {
  93. max-height: calc(var(--header-height-wide-when-fixed) - var(--sp));
  94. }
  95. }
  96. .site-branding__text {
  97. color: var(--color--white);
  98. font-size: 1.125rem;
  99. font-weight: bold;
  100. }
  101. .site-branding__text a {
  102. color: inherit;
  103. }
  104. @media (min-width: 43.75rem) {
  105. .site-branding__text {
  106. font-size: 1.75rem;
  107. line-height: 1.75rem;
  108. }
  109. }
  110. @media (min-width: 75rem) {
  111. .site-branding__text {
  112. letter-spacing: 0.02em;
  113. font-size: 2rem;
  114. line-height: var(--sp2);
  115. }
  116. }
  117. .site-branding--bg-gray .site-branding__text,
  118. .site-branding--bg-white .site-branding__text {
  119. color: var(--color--primary-50);
  120. }
  121. .site-branding__logo + .site-branding__text {
  122. margin-inline-start: 0.75rem;
  123. }

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