diff --git a/sass/etna.scss b/sass/etna.scss index 22bc54a8a..405269ec0 100644 --- a/sass/etna.scss +++ b/sass/etna.scss @@ -166,6 +166,7 @@ $largest-small-device: 992px; font-size: 1.25rem; @include media.on-mobile { + color: #fff; font-size: 1rem; line-height: 1.5; } @@ -242,11 +243,20 @@ $largest-small-device: 992px; } } -.card-group-secondary-nav, +.card-group-secondary-nav { + margin-bottom: 2rem; +} + .generic-intro__paragraph { margin-bottom: 3rem; } +.related-highlight-cards { + .related-highlight-cards__card { + margin-top: 2rem; + } +} + .section-separator__heading { padding-top: 2rem; } diff --git a/sass/includes/_card-groups.scss b/sass/includes/_card-groups.scss index 6134e406a..4464bdcb4 100644 --- a/sass/includes/_card-groups.scss +++ b/sass/includes/_card-groups.scss @@ -33,7 +33,7 @@ text-transform: uppercase; font-size: 0.875rem; - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { font-size: 0.9rem; } } @@ -46,7 +46,7 @@ color: $color__black; text-decoration-thickness: 1px; - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { font-size: 1.25rem; } @@ -99,7 +99,7 @@ display: block; } - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { display: block; } } diff --git a/sass/includes/_content-block.scss b/sass/includes/_content-block.scss index 6ced630d2..c4afe47c8 100644 --- a/sass/includes/_content-block.scss +++ b/sass/includes/_content-block.scss @@ -1,7 +1,7 @@ .content-block { padding: 0.5rem 0; - @media (min-width: $screen__lg) { + @media (min-width: #{$screen__lg + 1px}) { .template-focused-article & { padding-left: 10%; padding-right: 10%; diff --git a/sass/includes/_content-warning.scss b/sass/includes/_content-warning.scss index c25b06412..ef858d3c3 100644 --- a/sass/includes/_content-warning.scss +++ b/sass/includes/_content-warning.scss @@ -3,13 +3,13 @@ border-left: 4px solid #ffcc00; padding: 1.5rem 1.75rem; - @media screen and (min-width: $screen__sm) { + @media screen and (min-width: #{$screen__sm + 1px}) { display: flex; padding: 1.25rem 2rem; margin-top: 2rem; } - @media screen and (min-width: $screen__md) { + @media screen and (min-width: #{$screen__md + 1px}) { margin-bottom: 3rem; } @@ -27,7 +27,7 @@ } &--short { - @media screen and (min-width: $screen__md) { + @media screen and (min-width: #{$screen__md + 1px}) { margin-bottom: 1.25rem; } } @@ -49,7 +49,7 @@ min-width: 34px; margin-right: 18px; - @media (min-width: $screen__sm) { + @media (min-width: #{$screen__sm + 1px}) { display: block; } } diff --git a/sass/includes/_explore-intro.scss b/sass/includes/_explore-intro.scss index 22af1de74..6f1b6071f 100644 --- a/sass/includes/_explore-intro.scss +++ b/sass/includes/_explore-intro.scss @@ -40,7 +40,7 @@ @include font-size(m); line-height: 1.5; - @media (min-width: $screen__md) { + @media (min-width: #{$screen__md + 1px}) { @include font-size(xl); } diff --git a/sass/includes/_featured-article.scss b/sass/includes/_featured-article.scss index 2c104bef8..efaeedf39 100644 --- a/sass/includes/_featured-article.scss +++ b/sass/includes/_featured-article.scss @@ -2,7 +2,7 @@ display: flex; flex-direction: column; - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { flex-direction: row; } @@ -55,7 +55,7 @@ margin-bottom: 0.5rem; text-transform: uppercase; - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { font-size: 0.9rem; } } diff --git a/sass/includes/_featured-link.scss b/sass/includes/_featured-link.scss index b39654d13..ed801020c 100644 --- a/sass/includes/_featured-link.scss +++ b/sass/includes/_featured-link.scss @@ -4,7 +4,7 @@ margin: 3rem 0; &__container { - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { display: flex; } } @@ -15,7 +15,7 @@ font-family: $font__body; font-weight: $font-weight-bold; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { @include font-size(xl); } } @@ -39,7 +39,7 @@ } &__image { - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { flex: 0 0 33.33%; } } @@ -65,7 +65,7 @@ color: $color__grey-700; margin-bottom: 0.75rem; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { display: inline-flex; margin: 0; diff --git a/sass/includes/_featured-record.scss b/sass/includes/_featured-record.scss index f9c4c0af0..58428baad 100644 --- a/sass/includes/_featured-record.scss +++ b/sass/includes/_featured-record.scss @@ -13,7 +13,7 @@ border-top: 1px solid $color__grey-400; padding-bottom: 1rem; - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { display: flex; flex-direction: row; align-items: center; @@ -23,7 +23,7 @@ } &__image-text { - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { display: flex; flex-direction: row; } @@ -33,7 +33,7 @@ display: block; margin-bottom: 0.5rem; - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { flex-basis: 40%; max-width: 40%; margin-right: 1.5rem; @@ -57,7 +57,7 @@ margin-right: 15px; } - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { display: block; padding: 2rem 1rem 2rem 0; } @@ -72,7 +72,7 @@ &__metadata { margin-bottom: 1rem; - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { display: flex; justify-content: space-evenly; margin-bottom: 0; @@ -90,7 +90,7 @@ display: block; text-align: center; - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { display: inline-block; } } diff --git a/sass/includes/_generic-intro.scss b/sass/includes/_generic-intro.scss index 67d4c87c7..5b083c4bc 100644 --- a/sass/includes/_generic-intro.scss +++ b/sass/includes/_generic-intro.scss @@ -53,7 +53,7 @@ font-size: 1.125rem; // one off font size (18px) margin-bottom: 0.5rem; - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { font-size: 1.313rem; // one off font size (21px) } @@ -61,7 +61,7 @@ margin-top: 2.875rem; font-size: $font-size-base; - @media (min-width: $screen__md) { + @media (min-width: #{$screen__md + 1px}) { margin-top: 4.625rem; font-size: 1.313rem; } diff --git a/sass/includes/_hero-image.scss b/sass/includes/_hero-image.scss index 778c6920e..11633bed4 100644 --- a/sass/includes/_hero-image.scss +++ b/sass/includes/_hero-image.scss @@ -18,7 +18,7 @@ } } - @media (min-width: $screen__md) { + @media (min-width: #{$screen__md + 1px}) { .template-focused-article & { &__container { background: linear-gradient( diff --git a/sass/includes/_hierarchy-global-nav.scss b/sass/includes/_hierarchy-global-nav.scss index a522bcd9c..5f5a9a60f 100644 --- a/sass/includes/_hierarchy-global-nav.scss +++ b/sass/includes/_hierarchy-global-nav.scss @@ -6,7 +6,7 @@ background-color: $color__yellow; padding: 0; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { padding: 0 0 0 3.5rem; } @@ -18,7 +18,7 @@ top: 10px; left: 10px; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { display: block; } } @@ -83,7 +83,7 @@ min-width: 5rem; } - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { position: absolute; top: 0; right: 25px; @@ -96,7 +96,7 @@ padding: 0; margin: 1rem 0; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { margin: 1rem 0 0.25rem; } } @@ -119,13 +119,13 @@ center; padding-left: 1.8rem; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { background: transparent; padding-left: 0; } } - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { display: inline-block; margin: 0 0.75rem 0 0; } @@ -133,7 +133,7 @@ content: "..."; display: none; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { display: inline-block; margin: 0 0.75rem 0 0; } @@ -153,7 +153,7 @@ font-family: $font__supria-sans; font-size: 1.3rem; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { margin: 2.75rem 0 1rem 1rem; } } @@ -164,7 +164,7 @@ border-top: 2px solid $color__yellow; background: $color__yellow-dark; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { border-top: 0; padding: 0.25rem 0; background: transparent; @@ -174,7 +174,7 @@ border-bottom: 2px solid $color__yellow; background: $color__yellow; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { border-bottom: 0; background: transparent; } @@ -187,7 +187,7 @@ vertical-align: top; color: $color__black; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { background-color: $color__yellow-dark; padding: 0.5rem 0.75rem; display: inline-block; @@ -206,12 +206,12 @@ margin-top: 0.25rem; line-height: 1.2rem; - @media screen and (min-width: $screen__sm) { + @media screen and (min-width: #{$screen__sm + 1px}) { display: block; float: right; } - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { display: block; text-align: left; background: transparent; @@ -219,7 +219,7 @@ } } &--active { - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { background: $color__yellow; border-left: 0; } @@ -229,7 +229,7 @@ border-bottom: 2px solid $color__grey-800; font-weight: bold; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { border: 0; } } @@ -243,7 +243,7 @@ color: $color__grey-700; letter-spacing: -0.4px; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { display: inline-block; font-size: 1.1rem; width: 100%; @@ -255,7 +255,7 @@ display: inline-block; text-align: right; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { display: inline-block; font-size: 0.8rem; } @@ -267,10 +267,10 @@ line-height: 1.8rem; width: auto; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { width: 70%; } - @media screen and (min-width: $screen__xl) { + @media screen and (min-width: #{$screen__xl + 1px}) { width: auto; } @@ -282,7 +282,7 @@ color: $color__link-blue; } - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { display: inline-block; line-height: 1.4rem; } @@ -295,7 +295,7 @@ font-size: 1.15rem; display: inline-block; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { margin: 0.7rem 0 0; } } @@ -341,19 +341,19 @@ color: $color__link-blue; } - @media screen and (min-width: $screen__md) { + @media screen and (min-width: #{$screen__md + 1px}) { margin: 2rem 0 0.5rem; } &__container { - @media screen and (min-width: $screen__md) { + @media screen and (min-width: #{$screen__md + 1px}) { display: inline-block; text-align: center; min-width: 19%; } &--previous { - @media screen and (min-width: $screen__md) { + @media screen and (min-width: #{$screen__md + 1px}) { margin: 0 2rem; padding-right: 2rem; text-align: right; @@ -361,7 +361,7 @@ } &--next { - @media screen and (min-width: $screen__md) { + @media screen and (min-width: #{$screen__md + 1px}) { margin: 0 2rem; padding-left: 2rem; text-align: left; @@ -375,7 +375,7 @@ margin-bottom: 0.75rem; &--left { - @media screen and (min-width: $screen__xl) { + @media screen and (min-width: #{$screen__xl + 1px}) { background: url($fa_chevron_left) no-repeat left 7px; background-size: 8px; padding: 0 1.5rem 0 0; @@ -383,7 +383,7 @@ } &--right { - @media screen and (min-width: $screen__xl) { + @media screen and (min-width: #{$screen__xl + 1px}) { background: url($fa_chevron_right) no-repeat 75% 7px; background-size: 8px; padding: 0 1.5rem 0 0; diff --git a/sass/includes/_hierarchy-local-nav.scss b/sass/includes/_hierarchy-local-nav.scss index be897fa1e..6ad483644 100644 --- a/sass/includes/_hierarchy-local-nav.scss +++ b/sass/includes/_hierarchy-local-nav.scss @@ -37,7 +37,7 @@ &__nav-label { display: none; - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { display: inline; } } diff --git a/sass/includes/_highlight-intro.scss b/sass/includes/_highlight-intro.scss index 87a6e5a1e..cc3758733 100644 --- a/sass/includes/_highlight-intro.scss +++ b/sass/includes/_highlight-intro.scss @@ -15,7 +15,7 @@ position: relative; // mimics left & right padding of body-container to match page content - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { padding: 0 9%; } } @@ -29,7 +29,7 @@ padding: 28px 0 36px; // tablet and up - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { width: 46rem; position: absolute; bottom: 3.25rem; @@ -48,7 +48,7 @@ padding-bottom: 0.75rem; margin: 0; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { line-height: 1.22; } } @@ -60,7 +60,7 @@ padding: 0; margin: 0; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { @include font-size(xl); line-height: 1.71; } diff --git a/sass/includes/_image-browse.scss b/sass/includes/_image-browse.scss index 5d4501a1d..5dee827c7 100644 --- a/sass/includes/_image-browse.scss +++ b/sass/includes/_image-browse.scss @@ -46,17 +46,17 @@ grid-column-gap: 1vw; grid-row-gap: 1vw; - @media screen and (min-width: $screen__sm) { + @media screen and (min-width: #{$screen__sm + 1px}) { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 33vw; } - @media screen and (min-width: $screen__md) { + @media screen and (min-width: #{$screen__md + 1px}) { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 25vw; } - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { grid-template-columns: repeat(5, 1fr); grid-auto-rows: 20vw; } diff --git a/sass/includes/_key-facts.scss b/sass/includes/_key-facts.scss index 9cfc90e1b..d4380f2d9 100644 --- a/sass/includes/_key-facts.scss +++ b/sass/includes/_key-facts.scss @@ -8,14 +8,14 @@ li { margin-bottom: 1rem; - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { margin-bottom: 0.3rem; } span { display: block; - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { display: inline-block; width: 10rem; } diff --git a/sass/includes/_mixins.scss b/sass/includes/_mixins.scss index fad1c9261..419b57a20 100644 --- a/sass/includes/_mixins.scss +++ b/sass/includes/_mixins.scss @@ -46,11 +46,11 @@ } @else { @include rem-font-size($small-size); - @media (min-width: $screen__md) { + @media (min-width: #{$screen__md + 1px}) { @include rem-font-size($medium-size); } - @media (min-width: $screen__lg) { + @media (min-width: #{$screen__lg + 1px}) { @include rem-font-size($large-size); } } diff --git a/sass/includes/_pagination.scss b/sass/includes/_pagination.scss index c7ff91ff2..e566256d6 100644 --- a/sass/includes/_pagination.scss +++ b/sass/includes/_pagination.scss @@ -186,7 +186,7 @@ &-link-current { margin-top: 0; - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { width: 2.5rem; height: 1.875rem; margin-top: 0.5rem; diff --git a/sass/includes/_promoted-pages.scss b/sass/includes/_promoted-pages.scss index 2e3fd0635..5650d1f04 100644 --- a/sass/includes/_promoted-pages.scss +++ b/sass/includes/_promoted-pages.scss @@ -21,7 +21,7 @@ margin-bottom: 1.5rem; margin-top: 3rem; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { margin-bottom: 3rem; margin-top: 3.75rem; } @@ -36,7 +36,7 @@ margin-bottom: 0; text-decoration: none; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { margin-bottom: 4.5rem; } } diff --git a/sass/includes/_quote.scss b/sass/includes/_quote.scss index ed7e5d7e9..607e6c196 100644 --- a/sass/includes/_quote.scss +++ b/sass/includes/_quote.scss @@ -3,7 +3,7 @@ margin-right: calc((2rem + 15px) * -1); width: calc((4rem + 30px) + 100%); - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { margin-left: 0; margin-right: 0; width: 100%; @@ -17,7 +17,7 @@ border-bottom: $default__border; text-align: center; - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { padding: 3rem; margin-top: 2rem; // ideally this would be managed on the element preceeding, but not for now } diff --git a/sass/includes/_record-cta-panel.scss b/sass/includes/_record-cta-panel.scss index 2da1d1007..287b0035f 100644 --- a/sass/includes/_record-cta-panel.scss +++ b/sass/includes/_record-cta-panel.scss @@ -6,7 +6,7 @@ padding: 0 0.5rem; margin: 0.75rem 0 0; - @media screen and (min-width: $screen__sm) { + @media screen and (min-width: #{$screen__sm + 1px}) { margin: 0.5rem 0 1.5rem; } @@ -23,7 +23,7 @@ color: $color__link-blue; } - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { margin: 0 0.5rem 0.5rem 0; } } diff --git a/sass/includes/_record-links.scss b/sass/includes/_record-links.scss index 3fcce4661..1492fd340 100644 --- a/sass/includes/_record-links.scss +++ b/sass/includes/_record-links.scss @@ -5,7 +5,7 @@ flex-direction: column; margin-bottom: 2rem; - @media (min-width: $screen__lg) { + @media (min-width: #{$screen__lg + 1px}) { padding-left: 10%; padding-right: 10%; } @@ -28,7 +28,7 @@ padding-bottom: 2rem; width: 100%; - @media (min-width: $screen__lg) { + @media (min-width: #{$screen__lg + 1px}) { display: flex; } @@ -39,7 +39,7 @@ margin-left: 2rem; margin-bottom: 1rem; - @media (min-width: $screen__lg) { + @media (min-width: #{$screen__lg + 1px}) { margin-bottom: 0; } } diff --git a/sass/includes/_record-series-panel.scss b/sass/includes/_record-series-panel.scss index 6d764ec52..834bbaf6b 100644 --- a/sass/includes/_record-series-panel.scss +++ b/sass/includes/_record-series-panel.scss @@ -5,7 +5,7 @@ background: $color__yellow; padding: 0; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { padding: 0 0 0 3.5rem; } @@ -17,7 +17,7 @@ top: 11px; left: 12px; - @media screen and (min-width: $screen__lg) { + @media screen and (min-width: #{$screen__lg + 1px}) { display: block; } } diff --git a/sass/includes/_record-title.scss b/sass/includes/_record-title.scss index 50638d48b..f220e0991 100644 --- a/sass/includes/_record-title.scss +++ b/sass/includes/_record-title.scss @@ -1,7 +1,7 @@ .record-title { padding: 1.5rem 0 2rem; - @media (min-width: $screen__lg) { + @media (min-width: #{$screen__lg + 1px}) { padding: 2rem 0; } diff --git a/sass/includes/_related-highlight-cards.scss b/sass/includes/_related-highlight-cards.scss index 92319c2fe..7d106b8b6 100644 --- a/sass/includes/_related-highlight-cards.scss +++ b/sass/includes/_related-highlight-cards.scss @@ -20,7 +20,7 @@ font-size: 1.25rem; margin: 0 0 0.5rem 0; - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { font-size: 1.3rem; } @@ -69,7 +69,7 @@ } &__content { - margin: 1.75rem; + padding: 1.75rem; color: $color__grey-500; } diff --git a/sass/includes/_related-resources.scss b/sass/includes/_related-resources.scss index 81af09c53..62643e9a6 100644 --- a/sass/includes/_related-resources.scss +++ b/sass/includes/_related-resources.scss @@ -2,7 +2,7 @@ margin: 2rem 0; padding-bottom: 1rem; - @media (min-width: $screen__lg) { + @media (min-width: #{$screen__lg + 1px}) { .template-focused-article & { padding-left: 10%; padding-right: 10%; diff --git a/sass/includes/_section-separator.scss b/sass/includes/_section-separator.scss index 988b995db..cad6187ba 100644 --- a/sass/includes/_section-separator.scss +++ b/sass/includes/_section-separator.scss @@ -6,7 +6,7 @@ color: $color__grey-700; background: transparent; - @media (min-width: $screen__lg) { + @media (min-width: #{$screen__lg + 1px}) { .template-focused-article & { padding-left: 10%; padding-right: 10%; diff --git a/sass/includes/_specifics.scss b/sass/includes/_specifics.scss index 160db4755..98b7a7392 100644 --- a/sass/includes/_specifics.scss +++ b/sass/includes/_specifics.scss @@ -17,7 +17,7 @@ When adding a style, ensure it is within the pre-pended with 'specific' class to Used on: Details page - */ &-border-left-lg { - @media only screen and (min-width: $screen__xl) { + @media only screen and (min-width: #{$screen__xl + 1px}) { border-left: 2px solid $color__grey-500; } } @@ -28,7 +28,7 @@ When adding a style, ensure it is within the pre-pended with 'specific' class to Used on: Details page - */ &-border-top-lg { - @media only screen and (min-width: $screen__xl) { + @media only screen and (min-width: #{$screen__xl + 1px}) { border-top: 2px solid $color__grey-500; } } @@ -39,7 +39,7 @@ When adding a style, ensure it is within the pre-pended with 'specific' class to Used on: Details page - */ &-border-bottom-lg { - @media only screen and (min-width: $screen__xl) { + @media only screen and (min-width: #{$screen__xl + 1px}) { border-bottom: 2px solid $color__grey-500; } } @@ -62,7 +62,7 @@ When adding a style, ensure it is within the pre-pended with 'specific' class to &-margin-top-sm-to-lg { margin: 2rem 0 0; - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { margin: 0; } } diff --git a/sass/includes/_transcription.scss b/sass/includes/_transcription.scss index 1bd9a789d..056f7c628 100644 --- a/sass/includes/_transcription.scss +++ b/sass/includes/_transcription.scss @@ -59,7 +59,7 @@ max-height: 100%; display: block; - @media screen and (min-width: $screen__sm) { + @media screen and (min-width: #{$screen__sm + 1px}) { max-width: 80%; margin: 0 auto; } diff --git a/sass/includes/_utilities.scss b/sass/includes/_utilities.scss index 0220a17fe..f144b9f4e 100644 --- a/sass/includes/_utilities.scss +++ b/sass/includes/_utilities.scss @@ -22,7 +22,7 @@ &-l { margin-bottom: 3rem; // 48px - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { margin-bottom: 4.563rem; // 72px } } @@ -30,7 +30,7 @@ &-xl { margin-bottom: 3rem; // 48px - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { margin-bottom: 4.563rem; // 96px } } diff --git a/sass/includes/_variables.scss b/sass/includes/_variables.scss index a7ea6beb4..72e5452af 100644 --- a/sass/includes/_variables.scss +++ b/sass/includes/_variables.scss @@ -1,8 +1,8 @@ // Screen sizes -$screen__sm: 30rem; -$screen__md: 48rem; -$screen__lg: 62rem; -$screen__xl: 75rem; +$screen__sm: 480px; +$screen__md: 768px; +$screen__lg: 992px; +$screen__xl: 1200px; // Fonts $font__open-sans: "Open Sans", sans-serif; diff --git a/sass/includes/search/_featured-search.scss b/sass/includes/search/_featured-search.scss index 936a6de92..e54e07e85 100644 --- a/sass/includes/search/_featured-search.scss +++ b/sass/includes/search/_featured-search.scss @@ -2,7 +2,7 @@ &__results { margin-left: 1rem; margin-right: 1rem; - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { margin-left: 2rem; display: -ms-grid; display: grid; @@ -77,7 +77,7 @@ padding-top: 2rem; border-top: 3px dotted $color__grey-500; - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { display: grid; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; @@ -123,13 +123,13 @@ .featured-search__heading { padding: 1rem 1rem; - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { padding: 1rem 2rem; } } ul { - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { margin-left: 1rem; } } diff --git a/sass/includes/search/_long-filters.scss b/sass/includes/search/_long-filters.scss index 99aa448b2..16005138f 100644 --- a/sass/includes/search/_long-filters.scss +++ b/sass/includes/search/_long-filters.scss @@ -2,7 +2,7 @@ margin-left: 1rem; margin-right: 1rem; - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { margin-left: 2rem; margin-right: 2rem; } @@ -13,12 +13,12 @@ &__options { padding-bottom: 2rem; - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { margin-bottom: 2rem; } border-bottom: 0.1875rem dotted $color__grey-500; - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { display: flex; justify-content: space-between; align-items: baseline; @@ -26,7 +26,7 @@ } &__filters { - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { display: flex; } @@ -38,7 +38,7 @@ padding-left: 0; margin-bottom: 0; - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { column-count: 3; column-gap: 1rem; } @@ -74,7 +74,7 @@ margin-right: 1rem; margin-bottom: 1rem; - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { max-width: 20rem; } @@ -90,7 +90,7 @@ } &-box { width: 100%; - @media only screen and (min-width: $screen__lg) { + @media only screen and (min-width: #{$screen__lg + 1px}) { max-width: 17.5rem; } margin-bottom: 0.5rem; diff --git a/sass/includes/search/_search-buckets.scss b/sass/includes/search/_search-buckets.scss index a8fb10d42..390fb0bdf 100644 --- a/sass/includes/search/_search-buckets.scss +++ b/sass/includes/search/_search-buckets.scss @@ -11,14 +11,15 @@ margin-left: auto; margin-right: auto; margin-bottom: 0; - padding-left: 2rem; - padding-right: 2rem; + padding-left: 1.5rem; + padding-right: 1.5rem; order: -1; &-item { display: inline-block; list-style: none; width: 18%; - margin-right: 1rem; + margin-right: 0.5rem; + margin-left: 0.5rem; min-height: 100px; margin-bottom: 1rem; font-family: $font__supria-sans; diff --git a/sass/includes/search/_search-button.scss b/sass/includes/search/_search-button.scss index a9b6879c6..faccce881 100644 --- a/sass/includes/search/_search-button.scss +++ b/sass/includes/search/_search-button.scss @@ -21,7 +21,7 @@ } &:focus { - @include focus-default; + // @include focus-default; } &--primary { diff --git a/sass/includes/search/_search-results-hero.scss b/sass/includes/search/_search-results-hero.scss index 4bdd99ed1..ad47642bc 100644 --- a/sass/includes/search/_search-results-hero.scss +++ b/sass/includes/search/_search-results-hero.scss @@ -37,7 +37,7 @@ margin-right: 0.2rem; margin-bottom: 1rem; &:focus { - outline: 5px solid $color__focus-outline-light-bg; + // outline: 5px solid $color__focus-outline-light-bg; } } } diff --git a/sass/includes/search/_search-results.scss b/sass/includes/search/_search-results.scss index 22e9f055f..6c823fadd 100644 --- a/sass/includes/search/_search-results.scss +++ b/sass/includes/search/_search-results.scss @@ -160,7 +160,7 @@ margin-right: 1rem; margin-bottom: 1rem; display: none; //hiding on mobile - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { margin-left: 2rem; margin-right: 2rem; display: block; diff --git a/sass/includes/search/_search-results__list-card.scss b/sass/includes/search/_search-results__list-card.scss index 10430f1ac..5ad77e5ee 100644 --- a/sass/includes/search/_search-results__list-card.scss +++ b/sass/includes/search/_search-results__list-card.scss @@ -150,7 +150,7 @@ //width:183px; margin-bottom: 0; //margin-top: 0.2rem; - padding: 1em 2em; + padding: 1em 0em; background: black; text-align: center; } @@ -286,7 +286,7 @@ dd { /*---additional styles for All results--*/ .featured-search__website-results__head { - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { padding-left: 1em; padding-bottom: 2em; } @@ -326,7 +326,7 @@ dd { max-width: 100%; margin-left: 1em; margin-right: 1em; - @media only screen and (min-width: $screen__sm) { + @media only screen and (min-width: #{$screen__sm + 1px}) { margin-left: 0; } } diff --git a/sass/includes/search/_search-sort-view.scss b/sass/includes/search/_search-sort-view.scss index 7e9bc2273..4b66fec4f 100644 --- a/sass/includes/search/_search-sort-view.scss +++ b/sass/includes/search/_search-sort-view.scss @@ -1,6 +1,7 @@ .search-sort-view { $root: &; display: flex; + align-items: flex-start; @media only screen and (max-width: $screen__md) { margin-left: 1rem; @@ -45,7 +46,7 @@ &__mobile { padding-bottom: 1em; - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { display: none; } } @@ -133,7 +134,7 @@ .search-others { margin-bottom: 1rem; - @media only screen and (min-width: $screen__md) { + @media only screen and (min-width: #{$screen__md + 1px}) { display: none; } diff --git a/templates/articles/article_index_page.html b/templates/articles/article_index_page.html index bc09d5a71..c144cfdb0 100644 --- a/templates/articles/article_index_page.html +++ b/templates/articles/article_index_page.html @@ -15,16 +15,22 @@

{% trans "Each collection insight takes an in-depth look int {% if page.featured_article.live %} +
+
{% include "includes/article-spotlight.html" with page=page.featured_article.specific %} +
+
{% endif %} -
+
{% include_block page.featured_pages %}
-
+
+

Discover all stories

-

Browse and explore the human stories behind The National Archives’ collection.

+

Browse and explore the human stories behind The National Archives’ collection.

+
    {% for article_page in article_pages %} diff --git a/templates/articles/blocks/featured_collection.html b/templates/articles/blocks/featured_collection.html index eae0b1738..4e4ad21d2 100644 --- a/templates/articles/blocks/featured_collection.html +++ b/templates/articles/blocks/featured_collection.html @@ -2,12 +2,14 @@ {% load wagtailcore_tags %}
    -

    {{ value.heading }}

    -

    {{ value.description }}

    +
    +

    {{ value.heading }}

    +

    {{ value.description }}

    +
    +
      {% for item in value.items %} {% include 'includes/card-group-secondary-nav.html' with heading=value.heading link_page=item.specific card_type="Featured" show_type_label=True %} {% endfor %}
    -
diff --git a/templates/articles/blocks/related_items.html b/templates/articles/blocks/related_items.html index bee9beef4..540d75f8e 100644 --- a/templates/articles/blocks/related_items.html +++ b/templates/articles/blocks/related_items.html @@ -1,7 +1,7 @@ {% load wagtailcore_tags %} -
-
+
+
<{{ heading_level }} class="tna-heading related-content__heading">{{ value.heading }}

{{ value.description }}

diff --git a/templates/blocks/large_links_block.html b/templates/blocks/large_links_block.html index 9aa630aa8..ef935cb1f 100644 --- a/templates/blocks/large_links_block.html +++ b/templates/blocks/large_links_block.html @@ -4,14 +4,16 @@ used below because they are used in explorer.js for tracking purposes. {% endcomment %}
-
+
{% if value.heading %} -

- {{ value.heading }} -

+
+

+ {{ value.heading }} +

+
{% endif %} -
- {% for link_page in link_pages %} + {% for link_page in link_pages %} +
{% image link_page.teaser_image fill-540x350 as teaser_image %} @@ -29,7 +31,7 @@

- {% endfor %} -
+
+ {% endfor %}
-
+
\ No newline at end of file diff --git a/templates/collections/explorer_index_page.html b/templates/collections/explorer_index_page.html index 82bf0b8b8..74c971324 100644 --- a/templates/collections/explorer_index_page.html +++ b/templates/collections/explorer_index_page.html @@ -15,26 +15,28 @@
-
-

{{ page.articles_title }}

+
+
+

{{ page.articles_title }}

+

{{ page.articles_introduction }}

-

{{ page.articles_introduction }}

-
- - {% if page.featured_article.live %} - {% include "includes/article-spotlight.html" with page=page.featured_article.specific %} - {% endif %} + {% if page.featured_article.live %} + {% include "includes/article-spotlight.html" with page=page.featured_article.specific %} + {% endif %} +
-
{% include_block page.featured_articles with heading=page.articles_title %} -
- {% comment %} TODO: update BEM button styles for consistency across site {% endcomment %} - Browse all stories +
+
+ {% comment %} TODO: update BEM button styles for consistency across site {% endcomment %} + Browse all stories +
+
diff --git a/templates/collections/time_period_explorer_index_page.html b/templates/collections/time_period_explorer_index_page.html index 05bb01b0a..ff31181f3 100644 --- a/templates/collections/time_period_explorer_index_page.html +++ b/templates/collections/time_period_explorer_index_page.html @@ -7,8 +7,7 @@ {% block content %} {% include "includes/generic-intro.html" with title=page.title intro=page.intro %} -
-
+

Select a time period

    {% for child in page.time_period_explorer_pages %} @@ -17,13 +16,8 @@

    Select a time period

{% if page.body %} -
-
- {% include_block page.body %} -
-
+ {% include_block page.body %} {% endif %} -
{% endblock %} {% block extra_js %} diff --git a/templates/collections/topic_explorer_index_page.html b/templates/collections/topic_explorer_index_page.html index adac9f971..0057261c0 100644 --- a/templates/collections/topic_explorer_index_page.html +++ b/templates/collections/topic_explorer_index_page.html @@ -7,8 +7,7 @@ {% block content %} {% include "includes/generic-intro.html" with title=page.title intro=page.intro %} -
-
+

Select a topic

    {% for child in page.topic_explorer_pages %} @@ -17,13 +16,8 @@

    Select a topic

{% if page.body %} -
-
- {% include_block page.body %} -
-
+ {% include_block page.body %} {% endif %} -
{% endblock %} {% block extra_js %} diff --git a/templates/home/home_page.html b/templates/home/home_page.html index 5a8f8b681..ca8d7d797 100644 --- a/templates/home/home_page.html +++ b/templates/home/home_page.html @@ -15,8 +15,8 @@ {% block content %} {% include "includes/generic-intro.html" with title=page.title intro=page.intro %} -
-
+
+
{% for item in page.body %} {% if item.value.paragraph or item.value.text %} {{item}} diff --git a/templates/includes/article-spotlight.html b/templates/includes/article-spotlight.html index 19c5c91db..6400b8433 100644 --- a/templates/includes/article-spotlight.html +++ b/templates/includes/article-spotlight.html @@ -1,6 +1,5 @@ {% load wagtailimages_tags wagtailcore_tags i18n %} -
{% if title %}

{% translate title %}

{% endif %} @@ -42,4 +41,3 @@

Read about {{ page.title }}

-
diff --git a/templates/includes/card-group-secondary-nav.html b/templates/includes/card-group-secondary-nav.html index 71ea33820..69ed37c89 100644 --- a/templates/includes/card-group-secondary-nav.html +++ b/templates/includes/card-group-secondary-nav.html @@ -5,7 +5,7 @@ {% image link_page.teaser_image fill-348x208 as teaser_image_large %} {% image link_page.teaser_image fill-508x304 as teaser_image_extra_large %} -
  • +
  • {{ link_page.type_label }}

    {% endif %} -

    +

    -
    -

    {{ title }} highlights in pictures

    -
    - {% for card in cards %} +
    +
    +

    {{ title }} highlights in pictures

    +
    + {% for card in cards %} +
    {{ card.highlight_image_count }} images

    +
    {% endfor %} -