CSS bugs (#1291)

Co-authored-by: JohnHeeryTNA <[email protected]>
nationalarchives · Sep 1, 2023 · 8586a8a · 8586a8a
1 parent 49c3b1d
commit 8586a8a
Show file tree

Hide file tree

Showing 49 changed files with 186 additions and 174 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -53,15 +53,15 @@
         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)
         }
 
         .template-focused-article & {
             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
@@ -18,7 +18,7 @@
         }
     }
 
-    @media (min-width: $screen__md) {
+    @media (min-width: #{$screen__md + 1px}) {
         .template-focused-article & {
             &__container {
                 background: linear-gradient(