diff --git a/_sass/minima/_article.scss b/_sass/minima/_article.scss index 4d26a5ec0..9b3470b93 100644 --- a/_sass/minima/_article.scss +++ b/_sass/minima/_article.scss @@ -362,7 +362,9 @@ article.guide { } } - // Full width images stretch all the way, up to 1600px width. + // Full width images stretch all the way. + // On non-sidebar pages, break out to full viewport width. + // On sidebar pages, only cancel the article padding. & > .-full-width { display: flex; @@ -384,6 +386,30 @@ article.guide { } } + .main:not(.sidebar) > & > .-full-width { + @include media-query(large) { + width: 100vw; + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); + + figure { + width: 100%; + } + + picture { + display: block; + width: 100%; + } + + img { + width: 100%; + max-width: none; + max-height: calc(#{$content-width - $spacing-unit * 4} * 0.375); // 600:1600 banner ratio + object-fit: cover; + } + } + } + figure.-full-width { figcaption { margin-left: $spacing-unit/2; diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss index 297532c01..103ac32be 100644 --- a/_sass/minima/_base.scss +++ b/_sass/minima/_base.scss @@ -32,6 +32,7 @@ body { min-height: 100vh; flex-direction: column; overflow-wrap: break-word; + overflow-x: hidden; width: 100%; box-sizing:border-box; }