_site-header.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. // Site header
  2. .site-header {
  3. padding: 1.5em 1em 1em;
  4. text-align: center;
  5. &.featured-image {
  6. display: flex;
  7. flex-direction: column;
  8. justify-content: space-between;
  9. min-height: 90vh;
  10. .site-branding-container {
  11. margin-bottom: auto;
  12. }
  13. }
  14. @include media(tablet) {
  15. margin: 0;
  16. padding: 3rem 0 2rem;
  17. &.featured-image {
  18. min-height: 100vh;
  19. margin-bottom: 2rem;
  20. }
  21. }
  22. }
  23. // Site branding
  24. .site-branding {
  25. color: $color__text-light;
  26. position: relative;
  27. text-align: center;
  28. @include media(tablet) {
  29. margin: 0 $size__site-margins;
  30. }
  31. }
  32. // Site logo
  33. .site-logo {
  34. position: relative;
  35. z-index: 999;
  36. margin-bottom: calc(.66 * #{$size__spacing-unit});
  37. .custom-logo-link {
  38. .custom-logo {
  39. max-height: 64px;
  40. min-height: inherit;
  41. vertical-align: top;
  42. width: auto;
  43. }
  44. }
  45. }
  46. // Site title
  47. .site-title,
  48. .wp-block-a8c-site-title,
  49. .wp-block-a8c-site-title:focus {
  50. margin: auto;
  51. display: inline;
  52. color: $color__text-main;
  53. a {
  54. color: $color__text-main;
  55. &:link,
  56. &:visited {
  57. color: $color__text-main;
  58. }
  59. &:hover {
  60. color: $color__text-hover;
  61. }
  62. }
  63. .featured-image & {
  64. margin: 0;
  65. @include media(tablet) {
  66. display: inline-block;
  67. }
  68. }
  69. /* When there is no description set, make sure navigation appears below title. */
  70. + .main-navigation {
  71. display: block;
  72. }
  73. }
  74. // Site description
  75. .site-description,
  76. .wp-block-a8c-site-description,
  77. .wp-block-a8c-site-description:focus {
  78. color: $color__text-main;
  79. display: block;
  80. font-size: $font__size-xs;
  81. font-weight: normal;
  82. margin: 8px 0 0;
  83. }