diff --git a/src/App.vue b/src/App.vue
index 125e2ea874dd441a7897a706376be489c1926cae..50ed7e7c00403156e42516a02b2336f1ea66d134 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -65,7 +65,6 @@ body {
font-family: "Open Sans", sans-serif;
text-transform: uppercase;
font-weight: 800;
- color: #000000;
margin-left: 2rem;
margin-right: 2rem;
}
diff --git a/src/assets/images/branches/af-logo-white.png b/src/assets/images/branches/af-logo-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..1894b3ac2cff2b066289177ca016e798df513b47
Binary files /dev/null and b/src/assets/images/branches/af-logo-white.png differ
diff --git a/src/assets/images/icons/Logo_P1_Yodahead-WH.png b/src/assets/images/icons/Logo_P1_Yodahead-WH.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6048a6641dc2cdb64a8faf413a27bfb4338528f
Binary files /dev/null and b/src/assets/images/icons/Logo_P1_Yodahead-WH.png differ
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 13563d2966306345e0fc0b21bc0f21d6738e6c91..2bbc6dc6f825241afd7225cb1b7cde3ec405a2a7 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,30 +1,122 @@
<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>