Adce updates

src/App.vue

@@ -24,10 +24,19 @@ export default {
 @import "node_modules/bootstrap/scss/bootstrap";
 @import "node_modules/bootstrap-vue/src/index.scss";
 
+$max-body-width: 1440px;
+
 html {
   // rubber-band overscroll color and determines the scrollbar color on chrome for mac
   background-color: $primary-bg-color;
 }
+// show a light-colored scrollbar on xxl displays so that the scrollbar is visible
+// against the dark vertical bars
+@media (min-width: $max-body-width) {
+  html {
+    background-color: #000000;
+  }
+}
 
 body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -39,7 +48,7 @@ body {
 }
 
 #app {
-  max-width: 1440px;
+  max-width: $max-body-width;
   background-color: $primary-bg-color;
   margin-left: auto;
   margin-right: auto;

src/components/PageHeader.vue

@@ -4,6 +4,9 @@
       <h1 class="title mx-2">
         {{ title }}
       </h1>
+      <h4 v-if="subtext" class="subtext mx-lg-auto mx-5">
+        {{ subtext }}
+      </h4>
       <h6 v-if="description" class="description mx-lg-auto mx-5">
         {{ description }}
       </h6>
@@ -22,6 +25,7 @@
 export default {
   props: {
     title: String,
+    subtext: String,
     description: String
   },
   components: {}
@@ -39,6 +43,7 @@ export default {
   margin-top: 98px;
 
   .title,
+  .subtext,
   .description {
     color: $secondary-text-color !important;
   }

src/views/ADCE.vue

@@ -2,6 +2,7 @@
   <div class="adce">
     <PageHeader
       title="ABMS-ADCE"
+      subtext="Advanced Battle Management System - All Domain Common Environment"
       description="The environment and services you need to develop and deploy your software applications"
     />
     <div class="container">
@@ -50,7 +51,7 @@
           @click="() => showImg(index)"
         >
           <img class="img-fluid" :src="src" alt="" />
-          <p>(click to enlarge)</p>
+          <div>(click to enlarge)</div>
         </div>
 
         <vue-easy-lightbox
@@ -149,7 +150,7 @@ export default {
         visible: false,
         index: 0, // default: 0
         imgs: [
-          require("@/assets/images/CI_CE_infographic_V5_final-web-low-res-01.png"),
+          require("@/assets/images/CI_CD_infographic_PNG_8_web.png"),
           require("@/assets/images/P1 - Tool Chain_revised.png")
         ]
       },