_site-header.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  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. padding: 2rem 0;
  16. &.featured-image {
  17. min-height: 100vh;
  18. margin-bottom: 3rem;
  19. }
  20. }
  21. }
  22. // Site branding
  23. .site-branding {
  24. display: flex;
  25. flex-wrap: wrap;
  26. align-items: flex-start;
  27. justify-content: space-between;
  28. color: $color__text-light;
  29. position: relative;
  30. @include media(tablet) {
  31. margin: 0 $size__site-margins;
  32. }}
  33. // Site logo
  34. .site-logo {
  35. margin-right: $size__spacing-unit;
  36. .custom-logo-link {
  37. box-sizing: content-box;
  38. display: block;
  39. overflow: hidden;
  40. .custom-logo {
  41. max-height: 60px;
  42. width: auto;
  43. }
  44. }
  45. }
  46. .site-title,
  47. .wp-block-a8c-site-title,
  48. .wp-block-a8c-site-title:focus {
  49. color: $color__text-main;
  50. font-size: $font__size-md;
  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. /* Adjust Crimson Text font vertical alignment in Firefox */
  68. @-moz-document url-prefix() {
  69. .site-title,
  70. .wp-block-a8c-site-title,
  71. .wp-block-a8c-site-title:focus {
  72. padding-top: 8px;
  73. }
  74. }
  75. // Site description
  76. .site-description,
  77. .wp-block-a8c-site-description,
  78. .wp-block-a8c-site-description:focus {
  79. color: $color__text-main;
  80. flex: initial;
  81. font-size: $font__size-xs;
  82. font-weight: normal;
  83. margin: 7px 0 0;
  84. @include media(tablet) {
  85. text-align: right;
  86. }
  87. }