_header.scss 913 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. .wp-site-blocks .site-header {
  2. align-items: baseline;
  3. justify-content: start;
  4. overflow: inherit;
  5. padding-top: var(--wp--custom--gap--vertical);
  6. .wp-block-site-title a {
  7. text-decoration: none;
  8. }
  9. .wp-block-navigation {
  10. flex-grow: 1;
  11. }
  12. // The blockGap is used HORIZONTALLY when the viewport is LARGE (in which case the value defined in theme.json is appropriate)
  13. // It needs to be a different value then when the viewport is SMALL and the gap is used VERTICALLY
  14. @include break-small-only() {
  15. gap: 2px;
  16. }
  17. .wp-block-site-logo {
  18. align-self: center;
  19. @include break-small-only(){
  20. flex-basis: 100%;
  21. margin-bottom: calc( 2 * var(--wp--custom--gap--vertical));
  22. margin-top: var(--wp--custom--gap--vertical);
  23. text-align: center;
  24. }
  25. a > img {
  26. height: 64px;
  27. width: auto;
  28. }
  29. }
  30. .wp-block-site-tagline {
  31. @include break-small-only() {
  32. flex-basis: 100%;
  33. order: 10;
  34. }
  35. }
  36. }