Merge branch 'footer' into 'master'

Footer

See merge request platform-one/private/bullhorn/platform1-site!45

public/static/p1-intake-form.html

@@ -19,7 +19,9 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
     <style>
       html {
-        line-height: 1.15;
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 1.5;
         font-family: "Open Sans", sans-serif;
       }
       h2,

src/App.vue

@@ -48,10 +48,6 @@ body {
 
   a {
     text-decoration: none;
-    .bi-box-arrow-up-right.b-icon {
-      top: -2px;
-      position: relative;
-    }
   }
 
   button.btn {
@@ -69,7 +65,6 @@ body {
     font-family: "Open Sans", sans-serif;
     text-transform: uppercase;
     font-weight: 800;
-    color: #000000;
     margin-left: 2rem;
     margin-right: 2rem;
   }

src/components/Breadcrumb.vue

 <template>
-  <div class="breadcrumb-container" v-if="crumbs.length > 0">
+  <div
+    class="breadcrumb-container"
+    :class="crumbs.length > 0 ? 'visible' : 'invisible'"
+  >
     <b-breadcrumb id="nav-breadcrumb">
       <b-breadcrumb-item
         v-for="(crumb, index) in crumbs"
@@ -68,6 +71,7 @@ export default {
 <style lang="scss" scoped>
 .breadcrumb-container {
   padding-left: 7rem;
+  min-height: 48px;
   text-transform: uppercase;
 
   #nav-breadcrumb {

src/components/ExternalLink.vue

+<template>
+  <b-button variant="link" :href="href" :class="{ inline }" target="_blank">
+    <slot></slot>
+    <b-icon icon="box-arrow-up-right" aria-hidden="true"></b-icon>
+  </b-button>
+</template>
+<script>
+export default {
+  props: {
+    href: String,
+    inline: Boolean
+  }
+};
+</script>
+<style lang="scss" scoped>
+a {
+  .bi-box-arrow-up-right.b-icon {
+    top: -2px;
+    position: relative;
+  }
+
+  &.inline {
+    padding: 0;
+    margin-top: -3px;
+  }
+}
+</style>

src/components/Footer.vue

 <template>
-  <footer class="footer container-fluid py-4">
-    <div class="d-flex flex-column align-items-center">
-      <p class="mb-2">PLATFORM ONE</p>
-      <div class="embed-responsive li-embed ">
-        <iframe class="embed-responsive-item" src="./static/li.html" />
+  <footer class="footer py-4">
+    <div class="container">
+      <div class="row tl-row">
+        <div
+          class="col-lg-2 col-md-6 mb-4 mb-lg-0 d-flex flex-column align-items-center"
+        >
+          <img
+            class="my-auto"
+            src="@/assets/images/icons/Logo_P1_Yodahead-WH.png"
+          />
+        </div>
+
+        <div
+          class="col-lg-2 col-md-6 mb-4 mb-lg-0 d-flex flex-column align-items-center"
+        >
+          <h6 class="mx-0 mt-auto">Get Connected</h6>
+          <div class="embed-responsive li-embed mb-auto">
+            <iframe class="embed-responsive-item" src="./static/li.html" />
+          </div>
+        </div>
+
+        <div
+          class="col-lg-4 col-md-6 mb-4 mb-lg-0 d-flex flex-column justify-content-center"
+        >
+          <div>
+            <img width="80" src="@/assets/images/branches/af-logo-white.png" />
+          </div>
+          United States Air Force Website
+        </div>
+        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
+          <div class="d-flex flex-column mx-auto link-container">
+            <ExternalLink
+              inline
+              class="text-left"
+              href="https://software.af.mil"
+            >
+              Chief Software Officer Site
+            </ExternalLink>
+            <ExternalLink inline class="text-left" href="https://repo1.dsop.io">
+              Repo One
+            </ExternalLink>
+            <ExternalLink
+              inline
+              class="text-left"
+              href="https://ironbank.dsop.io"
+            >
+              Iron Bank
+            </ExternalLink>
+            <ExternalLink
+              inline
+              class="text-left"
+              href="https://software.af.mil/training/"
+            >
+              DevSecOps Training Resources
+            </ExternalLink>
+            <ExternalLink
+              inline
+              class="text-left"
+              href="https://chat.collab.cdl.af.mil/"
+            >
+              Chat
+            </ExternalLink>
+            <ExternalLink
+              inline
+              class="text-left"
+              href="https://repo1.dsop.io/dsawg-devsecops/"
+            >
+              DSAWG on Repo1
+            </ExternalLink>
+          </div>
+        </div>
       </div>
     </div>
   </footer>
 </template>
 <script>
-export default {};
+import ExternalLink from "@/components/ExternalLink";
+export default {
+  components: {
+    ExternalLink
+  }
+};
 </script>
 <style lang="scss" scoped>
 .footer {
-  position: relative;
-  background-color: $primary-bg-color;
+  background-color: $secondary-bg-color;
+  color: $secondary-text-color;
   border-top: 1px solid #c6c6c6;
-  color: #000000;
 
-  p {
-    font-family: "Anton", sans-serif !important;
-    letter-spacing: 0.06rem;
-    font-size: 1.5rem;
+  .tl-row > * {
+    border-right: 1px solid #c6c6c6;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .link-container {
+    max-width: 255px;
+    a {
+      white-space: nowrap;
+    }
+  }
+
+  h6 {
+    color: $secondary-text-color;
   }
   .li-embed {
     height: 40px;
+    min-width: 130px;
+  }
+
+  @include media-breakpoint-down(md) {
+    .tl-row > * {
+      border-right: none;
+    }
+  }
+  @include media-breakpoint-down(sm) {
   }
 }
 </style>

src/components/ProductsSummary.vue

@@ -72,14 +72,9 @@
               The DoD repository of digitally signed, binary container images
               that have been hardened and accredited for DoD-wide use across
               classifications.
-              <b-button
-                variant="link"
-                href="https://ironbank.dsop.io"
-                target="_blank"
-              >
+              <ExternalLink href="https://ironbank.dsop.io">
                 Iron Bank Repo
-                <b-icon icon="box-arrow-up-right" aria-hidden="true"></b-icon>
-              </b-button>
+              </ExternalLink>
             </div>
             <h6 class="py-4">
               product page coming soon
@@ -91,9 +86,10 @@
   </div>
 </template>
 <script>
+import ExternalLink from "@/components/ExternalLink";
 export default {
   name: "ProductsSummary",
-  components: {}
+  components: { ExternalLink }
 };
 </script>
 <style lang="scss" scoped>

src/components/ServicesSummary.vue

@@ -12,10 +12,9 @@
             The central repository for the soure code to create hardened and
             evaluated containers for the DoD
           </div>
-          <b-button variant="link" href="https://repo1.dsop.io" target="_blank">
+          <ExternalLink href="https://repo1.dsop.io">
             Repo One
-            <b-icon icon="box-arrow-up-right" aria-hidden="true"></b-icon>
-          </b-button>
+          </ExternalLink>
         </div>
         <div class="col-md-6 col-lg-4 service-container">
           <TrainingLogo class="logo" />
@@ -27,14 +26,9 @@
             The Platform One team recognizes that many teams require training
             resources in order to fully leverage DevSecOps principles
           </div>
-          <b-button
-            variant="link"
-            href="https://software.af.mil/training/"
-            target="_blank"
-          >
+          <ExternalLink href="https://software.af.mil/training/">
             DevSecOps Training Resources
-            <b-icon icon="box-arrow-up-right" aria-hidden="true"></b-icon>
-          </b-button>
+          </ExternalLink>
         </div>
         <div class="col-md-6 col-lg-4 service-container">
           <ChatLogo class="logo" />
@@ -44,14 +38,9 @@
             communication to DoD users around the world. No-hassle video
             teleconferencing for the DOD
           </div>
-          <b-button
-            variant="link"
-            href="https://chat.collab.cdl.af.mil/"
-            target="_blank"
-          >
+          <ExternalLink href="https://chat.collab.cdl.af.mil/">
             Chat
-            <b-icon icon="box-arrow-up-right" aria-hidden="true"></b-icon>
-          </b-button>
+          </ExternalLink>
         </div>
         <div class="col-md-6 col-lg-4 service-container">
           <DsawgLogo class="logo" />
@@ -60,14 +49,9 @@
             DoD Security Authorization Working Groups where all documents
             created are available on Repo1
           </div>
-          <b-button
-            variant="link"
-            href="https://repo1.dsop.io/dsawg-devsecops/"
-            target="_blank"
-          >
+          <ExternalLink href="https://repo1.dsop.io/dsawg-devsecops/">
             DSAWG on Repo1
-            <b-icon icon="box-arrow-up-right" aria-hidden="true"></b-icon>
-          </b-button>
+          </ExternalLink>
         </div>
         <router-link to="/services" class="col-md-6 col-lg-4 service-container">
           <LearnMoreLogo class="logo" />
@@ -86,6 +70,7 @@ import TrainingLogo from "@/assets/images/icons/Icon_Training.svg";
 import LearnMoreLogo from "@/assets/images/icons/Icon_LearnMore.svg";
 import DsawgLogo from "@/assets/images/icons/Icon_DSAWG.svg";
 import ChatLogo from "@/assets/images/icons/Icon_DoDenterpriseChat.svg";
+import ExternalLink from "@/components/ExternalLink";
 
 export default {
   name: "ServicesSummary",
@@ -94,7 +79,8 @@ export default {
     TrainingLogo,
     LearnMoreLogo,
     DsawgLogo,
-    ChatLogo
+    ChatLogo,
+    ExternalLink
   }
 };
 </script>

src/views/ADCE.vue

@@ -68,9 +68,11 @@
               A chat solution for team collaboration with integrated file
               sharing. Start chatting today!
             </p>
+
             <a href="https://chat.il2.dsop.io" target="_blank">
               <button class="btn btn-primary mt-3">
                 Chat now
+                <b-icon icon="box-arrow-up-right" aria-hidden="true"></b-icon>
               </button>
             </a>
           </div>
@@ -264,6 +266,11 @@ export default {
     width: 50%;
   }
 
+  .bi-box-arrow-uo-right {
+    top: -2px;
+    position: relative;
+  }
+
   .mm-logo {
     width: 250px;
   }

src/views/Products.vue

@@ -18,10 +18,10 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.home {
-  .page-header {
-    margin-bottom: 5rem !important;
+<style lang="scss">
+body.products-page {
+  .wisps {
+    display: none;
   }
 }
 </style>

src/views/Services.vue

@@ -113,10 +113,10 @@
           <h6 class="title">PLATFORM ONE TRAINING AND ON-BOARDING OPTIONS</h6>
           <ul>
             <li>
-              Check out the CSO DevSecOps / DAU training at
-              <a href="https://software.af.mil/training" target="_blank">
+              Check out the CSO DevSecOps / DAU training:
+              <ExternalLink inline href="https://software.af.mil/training/">
                 https://software.af.mil/training
-              </a>
+              </ExternalLink>
             </li>
             <li>
               Virtual Platform One Learning Hub that provides self-service
@@ -165,9 +165,9 @@
               Platform One Enterprise Chat provides a collaboration solutions
               suitable for connecting developer teams (pay per use): IL-4 (.mil
               email only)
-              <a href="https://chat.collab.cdl.af.mil" target="_blank">
+              <ExternalLink inline href="https://chat.collab.cdl.af.mil">
                 https://chat.collab.cdl.af.mil
-              </a>
+              </ExternalLink>
             </li>
             <li>
               Platform One ABMS All Domain Common Environment (pay per use)
@@ -197,14 +197,15 @@
 </template>
 <script>
 import PageHeader from "@/components/PageHeader";
+import ExternalLink from "@/components/ExternalLink";
+
 export default {
   name: "Services",
-  components: { PageHeader }
+  components: { PageHeader, ExternalLink }
 };
 </script>
 <style lang="scss" scoped>
 .services {
-  $font-size: 0.9rem;
   margin-bottom: 2rem;
 
   h6 {
@@ -212,12 +213,8 @@ export default {
     margin-right: 0 !important;
   }
 
-  .section-description {
-    font-size: $font-size;
-  }
   .container {
     margin-top: 4rem;
-    font-size: $font-size;
 
     .row {
       justify-content: center;

src/views/WhoWeAre.vue

@@ -194,10 +194,6 @@ export default {
 
 .who-we-are {
   margin-bottom: 2rem;
-  p {
-    font-size: 0.8rem;
-    line-height: 1.5rem;
-  }
   @include media-breakpoint-up(lg) {
     .section-description {
       max-width: 60%;
@@ -212,12 +208,7 @@ export default {
       .quotes {
         padding-bottom: 1rem;
       }
-      h2 {
-        line-height: 2.5rem;
-      }
       .attrib {
-        font-size: 0.8rem;
-
         .title {
           text-decoration: italic;
           font-weight: 400;
@@ -256,11 +247,6 @@ export default {
     h2 {
       margin-bottom: 4rem;
     }
-    .principle {
-      p {
-        font-size: 0.8rem;
-      }
-    }
   }
 }
 </style>

vue.config.js

@@ -23,22 +23,11 @@ module.exports = {
         fonts: [
           {
             family: "Open Sans",
-            variants: [
-              "400",
-              "600",
-              "800",
-            ],
-          },
-          {
-            family: "Anton",
-            variants: [
-              "400",
-            ],
-          },
-        ],
-      }),
-    ],
-
+            variants: ["400", "600", "800"]
+          }
+        ]
+      })
+    ]
   },
   css: {
     loaderOptions: {