_site-header.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. // Site header
  2. .site-header {
  3. padding: 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: 2rem 0;
  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. display: flex;
  27. flex-direction: column;
  28. text-align: center;
  29. @include media(tablet) {
  30. margin: 0 $size__site-margins;
  31. }
  32. }
  33. // Site logo
  34. .site-logo {
  35. order: 2;
  36. text-align: center;
  37. .custom-logo-link {
  38. display: inline-block;
  39. .custom-logo {
  40. max-height: 50px;
  41. vertical-align: top;
  42. width: auto;
  43. @include media(tablet) {
  44. max-height: 64px;
  45. }
  46. }
  47. }
  48. }
  49. .site-logo + .site-title,
  50. .featured-image .site-logo + .site-title {
  51. margin-top: 0.5rem;
  52. }
  53. // Site title
  54. .site-title {
  55. color: $color__text-main;
  56. margin: 0;
  57. order: 2;
  58. a {
  59. color: $color__text-main;
  60. &:link,
  61. &:visited {
  62. color: $color__text-main;
  63. }
  64. &:hover {
  65. color: $color__text-hover;
  66. }
  67. }
  68. .featured-image & {
  69. margin: 0;
  70. @include media(tablet) {}
  71. }
  72. /* When there is no description set, make sure navigation appears below title. */
  73. + .main-navigation {
  74. display: block;
  75. }
  76. @include media(tablet) {}
  77. &:not(:empty) + .site-description:not(:empty):before {
  78. margin: 0 0.2em;
  79. }
  80. }
  81. // Site description
  82. .site-description {
  83. color: $color__text-main;
  84. font-size: $font__size-xs;
  85. font-weight: 300;
  86. margin: 0 0 calc(0.5 * #{$size__spacing-unit});
  87. order: 1;
  88. }