diff options
Diffstat (limited to 'themes/twentynineteen/sass/site/header')
| -rw-r--r-- | themes/twentynineteen/sass/site/header/_site-featured-image.scss | 301 | ||||
| -rw-r--r-- | themes/twentynineteen/sass/site/header/_site-header.scss | 134 |
2 files changed, 435 insertions, 0 deletions
diff --git a/themes/twentynineteen/sass/site/header/_site-featured-image.scss b/themes/twentynineteen/sass/site/header/_site-featured-image.scss new file mode 100644 index 00000000..12599438 --- /dev/null +++ b/themes/twentynineteen/sass/site/header/_site-featured-image.scss @@ -0,0 +1,301 @@ +// Featured image styles + +.site-header.featured-image { + + /* Hide overflow for overflowing featured image */ + overflow: hidden; + + /* Need relative positioning to properly align layers. */ + position: relative; + + /* Add text shadow to text, to increase readability. */ + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); + + /* Set white text color when featured image is set. */ + .site-branding .site-title, + .site-branding .site-description, + .main-navigation a:after, + .main-navigation .main-menu > li.menu-item-has-children:after, + .main-navigation li, + .social-navigation li, + .entry-meta, + .entry-title { + color: $color__background-body; + } + + .main-navigation a, + .main-navigation a + svg, + .social-navigation a, + .site-title a, + .site-featured-image a { + color: $color__background-body; + transition: opacity $link_transition ease-in-out; + + &:hover, + &:active, + &:hover + svg, + &:active + svg { + color: $color__background-body; + opacity: 0.6; + } + + &:focus, + &:focus + svg { + color: $color__background-body; + } + } + + .main-navigation .sub-menu a { + opacity: inherit; + } + + /* add focus state to social media icons */ + .social-navigation a { + &:focus { + color: $color__background-body; + opacity: 1; + border-bottom: 1px solid $color__background-body; + } + } + + .social-navigation svg, + .site-featured-image svg { + /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */ + -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) ); + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) ); + } + + /* Entry header */ + .site-featured-image { + + /* First layer: grayscale. */ + .post-thumbnail img { + height: auto; + left: 50%; + max-width: 1000%; + min-height: 100%; + min-width: 100vw; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%); + width: auto; + z-index: 1; + + @supports ( object-fit: cover ) { + height: 100%; + left: 0; + object-fit: cover; + top: 0; + transform: none; + width: 100%; + } + + /* When image filters are active, make it grayscale to colorize it blue. */ + .image-filters-enabled & { + filter: grayscale(100%); + } + } + + .entry-header { + + margin-top: calc( 4 * #{$size__spacing-unit}); + margin-bottom: 0; + margin-left: 0; + margin-right: 0; + + @include media (tablet) { + + margin-left: $size__site-margins; + margin-right: $size__site-margins; + } + + .entry-title { + + &:before { + background: $color__background-body; + } + } + + /* Entry meta */ + + .entry-meta { + + font-weight: 500; + + > span { + + margin-right: $size__spacing-unit; + display: inline-block; + + &:last-child { + margin-right: 0; + } + } + + a { + + @include link-transition; + color: currentColor; + + &:hover { + text-decoration: none; + } + } + + .svg-icon { + position: relative; + display: inline-block; + vertical-align: middle; + margin-right: 0.5em; + } + + .discussion-avatar-list { + display: none; + } + } + + &.has-discussion { + + @include media (tablet) { + + .entry-meta { + display: flex; + position: relative; + } + + .entry-title { + padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit}); + } + + .entry-meta .comment-count { + position: absolute; + right: 0; + } + + .entry-meta .discussion-avatar-list { + display: block; + position: absolute; + bottom: 100%; + } + } + } + } + } + + /* Custom Logo Link */ + + .custom-logo-link { + + background: $color__background-body; + box-shadow: 0 0 0 0 rgba($color__background-body, 0); + + &:hover, + &:active, + &:focus { + box-shadow: 0 0 0 2px rgba($color__background-body, 1); + } + } + + /* Make sure important elements are above pseudo elements used for effects. */ + .site-branding { + position: relative; + z-index: 10; + } + + .site-featured-image .entry-header { + position: relative; + z-index: 9; + } + + /* Set up image filter layer positioning */ + .site-branding-container:after, + .site-featured-image:before, + .site-featured-image:after, + &:after { + display: block; + position: absolute; + top: 0; left: 0; + content: "\020"; + width: 100%; + height: 100%; + } + + /* Background & Effects */ + /* Shared background settings between pseudo elements. */ + background-position: center; + background-repeat: no-repeat; + background-size: cover; + + /* The intensity of each blend mode is controlled via layer opacity. */ + + /* Second layer: screen. */ + .image-filters-enabled & .site-featured-image:before { + background: $color__link; + mix-blend-mode: screen; + opacity: 0.1; + } + + /* Third layer: multiply. */ + /* When image filters are inactive, a black overlay is added. */ + .site-featured-image:after { + background: #000; + mix-blend-mode: multiply; + opacity: .7; + + /* When image filters are active, a blue overlay is added. */ + .image-filters-enabled & { + background: $color__link; + opacity: .8; + z-index: 3; + + /* Browsers supporting mix-blend-mode don't need opacity < 1 */ + @supports (mix-blend-mode: multiply) { + opacity: 1; + } + } + } + + /* Fourth layer: overlay. */ + .image-filters-enabled & .site-branding-container:after { + background: rgba(0, 0, 0, 0.35); + mix-blend-mode: overlay; + opacity: 0.5; + z-index: 4; + + /* Browsers supporting mix-blend-mode can have a light overlay */ + @supports (mix-blend-mode: overlay) { + background: rgba($color__background-body, 0.35); + } + } + + /* Fifth layer: readability overlay */ + &:after { + background: #000; + /** + * Add a transition to the readability overlay, to add a subtle + * but smooth effect when resizing the screen. + */ + transition: opacity 1200ms ease-in-out; + opacity: 0.7; + z-index: 5; + + /* When image filters are active, a blue overlay is added. */ + .image-filters-enabled & { + background: mix($color__link, black, 12%); + opacity: 0.38; + + @include media(tablet) { + opacity: 0.18; + } + } + } + + + ::-moz-selection { + background: rgba($color__background-body, 0.17); + } + + ::selection { + background: rgba($color__background-body, 0.17); + } +} 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; +} |