_site-header.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. // Site header
  2. .site-header {
  3. padding: 1rem;
  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. &.featured-image {
  16. min-height: 100vh;
  17. margin-bottom: 3rem;
  18. }
  19. }
  20. }
  21. // Site branding
  22. .site-branding {
  23. display: flex;
  24. flex-wrap: wrap;
  25. align-items: flex-start;
  26. justify-content: space-between;
  27. color: $color__text-light;
  28. position: relative;
  29. }
  30. // Site logo
  31. .site-logo {
  32. margin-right: $size__spacing-unit / 2;
  33. .custom-logo-link {
  34. box-sizing: content-box;
  35. display: block;
  36. line-height: 0;
  37. overflow: hidden;
  38. .custom-logo {
  39. max-height: 60px;
  40. width: auto;
  41. }
  42. }
  43. }
  44. // Site title
  45. .site-title,
  46. .wp-block-a8c-site-title,
  47. .wp-block-a8c-site-title:focus {
  48. color: $color__text-main;
  49. font-size: $font__size-md !important;
  50. font-weight: 600;
  51. flex: 1 1 auto;
  52. margin: 0;
  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. }
  66. }
  67. // Site description
  68. .site-description,
  69. .wp-block-a8c-site-description,
  70. .wp-block-a8c-site-description:focus {
  71. flex: initial;
  72. color: $color__text-main;
  73. font-size: $font__size-xs;
  74. font-weight: normal;
  75. margin: 0.27rem 0 0;
  76. @include media(tablet) {
  77. text-align: right;
  78. }
  79. }