name : _site-header.scss // Site header .site-header { padding: 1em; &.featured-image { display: flex; flex-direction: column; justify-content: space-between; min-height: 90vh; .site-branding-container { margin-bottom: auto; } } @include media(tablet) { margin: 0; padding: 3rem 0; &.featured-image { min-height: 100vh; margin-bottom: 3rem; } } } // Site branding .site-branding { color: $color__text-light; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; position: relative; word-wrap: break-word; @include media(tablet) { margin: 0 $size__site-margins; } } // Site logo .site-logo { position: relative; z-index: 999; margin-bottom: calc(.66 * #{$size__spacing-unit}); @include media(tablet) { margin-bottom: 0; position: absolute; right: calc(100% + (1.25 * #{$size__spacing-unit})); top: 4px; // Accounts for box-shadow widths z-index: 999; } .custom-logo-link { border-radius: 100%; box-sizing: content-box; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); display: block; width: 50px; height: 50px; overflow: hidden; transition: box-shadow $background_transition ease-in-out; .custom-logo { min-height: inherit; } &:hover, &:active, &:focus { box-shadow: 0 0 0 2px rgba(0, 0, 0, 1); } @include media(tablet) { width: 64px; height: 64px; } } } // Site title .site-title { margin: auto; display: inline; color: $color__text-main; a { color: $color__text-main; &:link, &:visited { color: $color__text-main; } &:hover { color: $color__text-hover; } } .featured-image & { margin: 0; @include media(tablet) { display: inline-block; } } /* When there is no description set, make sure navigation appears below title. */ + .main-navigation { display: block; } @include media(tablet) { display: inline; } &:not(:empty) + .site-description:not(:empty):before { content: "\2014"; margin: 0 .2em; } } // Site description .site-description { display: inline; color: $color__text-light; font-weight: normal; margin: 0; }