diff --git a/_sass/boilerplate/_measurements.scss b/_sass/boilerplate/_measurements.scss index a22815c33b20d56ad64cbbd6cac936691c98a152..96b7ccc62c82f595d3698ad71af7b4de7977d7d7 100644 --- a/_sass/boilerplate/_measurements.scss +++ b/_sass/boilerplate/_measurements.scss @@ -36,8 +36,9 @@ $transition-slope-min-width: 3.65rem; /* ~73px (1) */ /* --- header --- */ $header-content-min-height: $logo-min-height; -$header-min-height: $header-content-min-height - + 2 * $document-top-margin +$header-box-min-height: $header-content-min-height + + 2 * $document-top-margin; +$header-min-height: $header-box-min-height + $transition-min-height; /* --- Title Image --- */ diff --git a/_sass/common/_title.scss b/_sass/common/_title.scss index c7ad03089b49871bf9cfb1341c7710f93daaa9f1..3e6bbad0e74a9e0c9e6adf42758cf9780a14b266 100644 --- a/_sass/common/_title.scss +++ b/_sass/common/_title.scss @@ -36,7 +36,7 @@ div#title { content: ""; display: block; - @include respond-to-medium(height, $header-content-min-height); + @include respond-to-medium(height, $header-box-min-height); } img.bg-jumbotron { @@ -59,7 +59,7 @@ div#title { } /* - Place margins large enough to avoid the content hitting + Place padding large enough to avoid the content hitting the transitions above and below. */ padding-top: 3rem; @@ -88,6 +88,7 @@ div#title { padding: 0; @include respond-to-medium(height, 40vh, 50vh, 60vh); + } h1 { @@ -95,7 +96,11 @@ div#title { @include respond-to-medium(font-size, $title-image-text-size); /* Make sure the heading gets enough space if the title box is shared */ - min-width: 40%; + min-width: 40%; + + /* Reduce the amount of space required for the header part */ + margin-bottom: 0; + margin-top: 0; } a { @@ -111,6 +116,17 @@ div#title { /* Do not apply the mix-blend mode of the parent */ isolation: isolate; + + /* Properly overlapping the title content requires some extra work */ + position: absolute; + left: 0; + + /* Rounding by the browser introduces an occasional 1px line + * on bottom and right side. Drag in the transition to prevent this. + */ + bottom: -1px; + right: -1px; + z-index: 100; } }