Add responsive layout

The main navigation will be collapsed until the viewport
minimum width reaches the Bootstrap defined 'lg' breakpoint
(defaults to 992px).

- Adding motion variables and updating some CSS values to
  use existing Sass variables

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id159b84da6adf55fdb15842b0e33b1ede4eeceb4

1 files changed, 2 insertions, 2 deletions

diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 0921cb96..3f52d816 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -84,7 +84,7 @@ dl {
 }
 
 .quicklinks {
-  background: $white;
+  background: $gray-200;
   display: grid;
   grid-gap: 1rem;
   padding: 1rem;
@@ -98,7 +98,7 @@ dl {
   }
 }
 
-@include media-breakpoint-up(lg) {
+@include media-breakpoint-up(xl) {
   .quicklinks {
     grid-template-columns: repeat(4, 1fr);
   }