header-site-branding.pcss.css

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

Site branding in header.

File

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

View source
  1. /**
  2. * @file
  3. * Site branding in header.
  4. */
  5. @import "../base/media-queries.pcss.css";
  6. .site-branding {
  7. display: flex;
  8. flex-shrink: 1;
  9. align-items: flex-end;
  10. min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
  11. min-height: var(--sp3);
  12. margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */
  13. padding-block: 0 var(--sp0-5);
  14. padding-inline-start: var(--container-padding);
  15. padding-inline-end: var(--container-padding);
  16. background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
  17. @media (--sm) {
  18. min-height: var(--sp4);
  19. }
  20. @media (--md) {
  21. min-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */
  22. min-height: var(--sp6);
  23. padding-block-end: var(--sp);
  24. }
  25. @media (--lg) {
  26. min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
  27. }
  28. @media (--nav) {
  29. min-height: var(--site-header-height-wide);
  30. margin-inline-start: calc(-1 * var(--container-padding));
  31. padding-block: 0;
  32. }
  33. }
  34. [dir="rtl"] .site-branding {
  35. background-image: linear-gradient(-160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
  36. }
  37. .site-branding--bg-gray {
  38. background: var(--color--gray-100);
  39. }
  40. .site-branding--bg-white {
  41. background: var(--color--white);
  42. }
  43. .site-branding__inner {
  44. display: flex;
  45. align-items: center;
  46. & a {
  47. text-decoration: none;
  48. }
  49. @media (--nav) {
  50. height: var(--header-height-wide-when-fixed);
  51. padding-block: var(--sp0-5);
  52. padding-inline-start: 0;
  53. padding-inline-end: 0;
  54. }
  55. }
  56. .site-branding__logo {
  57. flex-shrink: 0;
  58. max-width: 100%;
  59. & img {
  60. width: auto;
  61. max-width: 100%;
  62. max-height: var(--sp2);
  63. @media (--sm) {
  64. max-height: var(--sp3);
  65. }
  66. @media (--md) {
  67. max-height: var(--sp4);
  68. }
  69. @media (--nav) {
  70. max-height: calc(var(--header-height-wide-when-fixed) - var(--sp));
  71. }
  72. }
  73. }
  74. .site-branding__text {
  75. color: var(--color--white);
  76. font-size: 18px;
  77. font-weight: bold;
  78. & a {
  79. color: inherit;
  80. }
  81. @media (--md) {
  82. font-size: 28px;
  83. line-height: 28px;
  84. }
  85. @media (--nav) {
  86. letter-spacing: 0.02em;
  87. font-size: 32px;
  88. line-height: var(--sp2);
  89. }
  90. }
  91. .site-branding--bg-gray .site-branding__text,
  92. .site-branding--bg-white .site-branding__text {
  93. color: var(--color--primary-50);
  94. }
  95. .site-branding__logo + .site-branding__text {
  96. margin-inline-start: 12px;
  97. }

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