fix breadcrumbs

nationalarchives · Oct 29, 2024 · 7a04909 · 7a04909
1 parent 7e5083d
commit 7a04909
Show file tree

Hide file tree

Showing 6 changed files with 242 additions and 122 deletions.
diff --git a/ds_judgements_public_ui/sass/includes/_header.scss b/ds_judgements_public_ui/sass/includes/_header.scss
@@ -52,16 +52,14 @@
   }
 
   &__breadcrumbs-block {
-     padding: $space-2;
-     margin-left: $space-4;
-    }
-
+    margin-left: $space-4;
+    padding: $space-2;
+  }
 
-  &__beta{
+  &__beta {
     display: flex;
-    flex-direction: column;
+    flex-flow: column wrap;
     align-content: center;
-    flex-wrap: wrap;
   }
 
   &__nav {

diff --git a/ds_judgements_public_ui/sass/includes/_service_introduction.scss b/ds_judgements_public_ui/sass/includes/_service_introduction.scss
@@ -1,61 +1,67 @@
 .service-introduction {
-  background-color: $color-almost-black;
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
+
   width: 150%;
   margin-top: $space-10;
-  display: flex;
-  flex-direction: column;
-  @media only screen and (max-width: $grid-breakpoint-medium) {
-    margin-top: $space-1;
-  }
 
-  &__header {
-    font-size: $typography-2xl-text-size;
-    line-height: $typography-md-line-height;
+  background-color: $color-almost-black;
 
+  &__header {
     width: 100%;
+    margin: 0 $space-1;
+
     font-family: $font-roboto;
+    font-size: $typography-2xl-text-size;
     font-weight: normal;
+    line-height: $typography-md-line-height;
     color: $color-white;
-    margin: 0 $space-1;
   }
 
   &__header-beta-v1 {
-    align-items: center;
-    gap: $space-2;
     display: flex;
-    font-size: $typography-2xl-text-size;
-    line-height: $typography-md-line-height;
+    gap: $space-2;
+    align-items: center;
 
     width: 100%;
+    margin: 0 $space-1;
+
     font-family: $font-roboto;
+    font-size: $typography-2xl-text-size;
     font-weight: normal;
+    line-height: $typography-md-line-height;
     color: $color-white;
-    margin: 0 $space-1;
   }
 
   &__header-beta-v2 {
-    font-size: 2.5rem;
-    line-height: 3.8rem;
     display: inline-block;
+
     width: 100%;
+    margin: $space-8 0 0;
+
     font-family: $font-roboto;
+    font-size: 2.5rem;
     font-weight: $typography-normal-font-weight;
+    line-height: 3.8rem;
     color: $color-white;
-    margin: $space-8 0 0;
     text-wrap: balance;
+
     @media only screen and (max-width: $grid-breakpoint-medium) {
       margin-top: none;
     }
   }
 
   &__helper-text {
     display: inline-block;
-    font-size: $typography-lg-text-size;
+
+    margin: 0 $space-1;
+
     font-family: $font-roboto;
-    color: $color-yellow;
+    font-size: $typography-lg-text-size;
     line-height: 1.6rem;
-    margin: 0 $space-1;
+    color: $color-yellow;
+
     @media only screen and (max-width: $grid-breakpoint-medium) {
       font-size: $typography-sm-text-size;
       font-weight: bold;
@@ -69,16 +75,20 @@
 
   &__what-to-expect {
     @include link-on-dark-bg;
-    background: transparent url($fa_chevron_right_white) 0 0.2rem no-repeat;
-    background-size: 0.7rem;
+
     display: inline-block;
-    padding: 0 0 0 $space-4;
-    color: $color-white;
+
     margin: $space-6 0 0;
-    font-weight: $typography-bold-font-weight;
+    padding: 0 0 0 $space-4;
+
     font-size: $typography-lg-text-size;
+    font-weight: $typography-bold-font-weight;
+    color: $color-white;
     text-decoration: underline;
 
+    background: transparent url($fa_chevron_right_white) 0 0.2rem no-repeat;
+    background-size: 0.7rem;
+
     &:hover {
       text-decoration: none;
     }
@@ -91,4 +101,8 @@
       border-bottom-color: transparent;
     }
   }
+
+  @media only screen and (max-width: $grid-breakpoint-medium) {
+    margin-top: $space-1;
+  }
 }