_site-header.scss 1.5 KB

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