Merge branch 'main' into Content-tweaks-branch

DFE-Digital · Sep 3, 2024 · da37500 · da37500
2 parents a869391 + 235a3fb
commit da37500
Show file tree

Hide file tree

Showing 21 changed files with 2,172 additions and 2,719 deletions.
diff --git a/app/.DS_Store b/app/.DS_Store
diff --git a/app/assets/images/disco.png b/app/assets/images/disco.png
diff --git a/app/assets/scss/_hero.scss b/app/assets/scss/_hero.scss
@@ -1,7 +1,7 @@
 .dfe-page-hero {
-  padding-top: govuk-spacing(9);
+  padding-top: govuk-spacing(7);
   padding-bottom: govuk-spacing(6);
-  background-color: govuk-tint($color_dfe-blue, 10);
+  background-color: $color_dfe-blue;
 
   .govuk-heading-xl,
   .govuk-heading-l,

diff --git a/app/assets/scss/_topnav.scss b/app/assets/scss/_topnav.scss
@@ -1,3 +1,18 @@
+.flex-nav {
+  display: flex;
+  justify-content: space-between;
+}
+
+.flex-right {
+  justify-content: flex-end;
+  margin-left: auto;
+}
+
+.flex-left {
+  justify-content: flex-start;
+  margin-right: auto;
+}
+
 .dfe-topnav{
   background-color: govuk-shade($color_dfe-blue, 30);
 }
@@ -20,22 +35,6 @@
   text-decoration: none;
   color: $color_dfe-white;
 }
-
-@media (min-width: 40.0625em) {
-  .dfe-topnav li a {
-    font-size: 16px;
-    font-size: 1rem;
-    line-height: 1.5;
-  }
-}
-
-@media print {
-  .dfe-topnav li a {
-    font-size: 14pt;
-    line-height: 1.2;
-  }
-}
-
 .dfe-topnav li {
   float: left;
   margin-bottom: 0px;

diff --git a/app/assets/scss/_verticalnav.scss b/app/assets/scss/_verticalnav.scss
@@ -0,0 +1,180 @@
+.dfe-vertical-nav {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 16px;
+    font-size: .875rem;
+    line-height: 1.14286;
+
+    .dfe-vertical-nav--section-header {
+        color: $color_dfe-grey-1;
+        font-size: 19px;
+        line-height: 1.25;
+        font-weight: 600;
+        color: #505a5f;
+        margin-bottom: 15px;
+        padding-top: 0px;
+    }
+}
+
+@media (min-width:40.0625em) {
+    .dfe-vertical-nav {
+        padding-left: 15px
+    }
+}
+
+
+@media print {
+    .dfe-vertical-nav {
+        font-size: 14pt;
+        line-height: 1.2
+    }
+}
+
+@media (min-width:40.0625em) {
+    .dfe-vertical-nav {
+        margin-left: -15px
+    }
+}
+
+.dfe-vertical-nav__section {
+    margin: 0 0 20px;
+    padding: 0;
+    list-style-type: none
+}
+
+.dfe-vertical-nav__link {
+    display: block;
+    padding: 7px 30px 8px 10px;
+    text-decoration: none;
+    margin-bottom: 5px;
+    color: $color_dfe-blue;
+}
+
+.dfe-vertical-nav__section-item {
+    border-left: 4px solid #b1b4b6;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.25;
+}
+
+.dfe-vertical-nav__section-item:hover {
+    border-left: 4px solid $color_dfe-secondary-blue;
+}
+
+.dfe-vertical-nav__link:focus {
+    background: inherit
+}
+
+.dfe-vertical-nav__section-item--current {
+    border-left: 4px solid $color_dfe-blue;
+    font-weight: 700;
+    background: #f3f2f1
+}
+
+.dfe-vertical-nav__link:active,
+.dfe-vertical-nav__link:hover {
+    color: #1d70b8;
+    border-left-color: $color_dfe-secondary-blue;
+    text-decoration: none;
+    box-shadow: none;
+    outline: 0
+}
+
+.dfe-vertical-nav__link:focus {
+    background: #fd0;
+    color: #0b0c0c;
+    text-decoration: none;
+    box-shadow: none;
+    outline: 0
+}
+
+.dfe-vertical-nav__section-item--current .dfe-vertical-nav__link {
+    border-left-color: $color_dfe-blue;
+    font-weight: 700;
+    color: $color_dfe-blue;
+}
+
+.dfe-vertical-nav__section-item--current .dfe-vertical-nav__link:hover {
+    text-decoration: none
+}
+
+.dfe-vertical-nav__section--nested {
+    margin-bottom: 5px
+}
+
+.dfe-vertical-nav__section--nested .dfe-vertical-nav__link {
+    padding-left: 20px;
+    font-weight: 400;
+    margin-bottom: 0;
+    margin-top: -5px
+}
+
+.dfe-vertical-nav__section--nested .dfe-vertical-nav__section-item::before {
+    content: "—";
+    margin-left: -20px;
+    color: #505a5f
+}
+
+.dfe-vertical-nav--count {
+    float: right;
+    background: #b1b4b6;
+    padding: 9px 5px 9px 5px;
+    border-radius: 0;
+    color: #0b0c0c;
+    font-weight: 700;
+    min-width: 25px;
+    text-align: center;
+    font-size: 12px
+}
+
+@media print {
+    .dfe-vertical-nav__theme {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .dfe-vertical-nav__theme {
+        font-size: 19px;
+        font-size: 1.1875rem;
+        line-height: 1.31579
+    }
+
+    .dfe-vertical-nav--count {
+        padding: 12px 8px 12px 8px;
+    }
+}
+
+.dfe-vertical-nav__section {
+
+    .dfe-vertical-nav__section-item--current--child-active {
+        .dfe-vertical-nav__link {
+            font-weight: 400;
+        }
+    }
+
+    .dfe-vertical-nav__section {
+
+        margin-bottom: 0px;
+
+        .dfe-vertical-nav__section-item {
+            border-left: none;
+
+            :before {
+                content: "—";
+                margin-left: 0px;
+                margin-right: 5px;
+            }
+        }
+
+        &.dfe-vertical-nav__section-item--current {
+            border-left: none;
+            background: $color_dfe-secondary-blue;
+
+            .dfe-vertical-nav__link {
+                font-weight: 700;
+            }
+        }
+    }
+}