diff options
Diffstat (limited to 'themes/twentynineteen/sass/site/header/_site-header.scss')
-rw-r--r-- | themes/twentynineteen/sass/site/header/_site-header.scss | 134 |
1 files changed, 134 insertions, 0 deletions
diff --git a/themes/twentynineteen/sass/site/header/_site-header.scss b/themes/twentynineteen/sass/site/header/_site-header.scss new file mode 100644 index 00000000..22ab1034 --- /dev/null +++ b/themes/twentynineteen/sass/site/header/_site-header.scss @@ -0,0 +1,134 @@ +// 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; + position: relative; + + @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; +} |