Style for high contrast mode and linting

torchbox · Jan 13, 2025 · ddca9db · ddca9db
1 parent 87aedf7
commit ddca9db
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/...t_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.yaml b/...t_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.yaml
@@ -20,4 +20,4 @@ tags:
   srcset_image:
     'card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt=""':
       raw: |
-        <img height="420" sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" src="https://picsum.photos/750/420.webp" srcset="https://picsum.photos/750/420.webp 750w, https://picsum.photos/650/420.webp 650w" width="750" alt="">
+        <img height="420" sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" src="https://picsum.photos/750/420.webp" srcset="https://picsum.photos/750/420.webp 750w, https://picsum.photos/650/420.webp 650w" width="750" alt="">
diff --git a/tbx/static_src/sass/components/_featured-services.scss b/tbx/static_src/sass/components/_featured-services.scss
@@ -19,16 +19,16 @@
         display: grid;
         gap: $spacer-mini-plus;
         grid-template-columns: repeat(1, 1fr);
-    
+
         @include media-query(medium) {
             grid-template-columns: repeat(2, 1fr);
         }
-    
+
         @include media-query(large) {
             grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
         }
     }
-    
+
     &__card {
         display: flex;
         flex-direction: column;
@@ -39,16 +39,19 @@
         &:has(.button-link:hover) {
             background-color: var(--color--black);
         }
+
+        @include high-contrast-mode() {
+            border: 1px solid var(--color--text);
+        }
     }
 
     &__text {
         padding: $spacer-small;
         margin-bottom: auto;
     }
-    
+
     &__heading {
         color: var(--color--white);
         margin-bottom: $spacer-mini;
     }
 }
-