Update tech dropdown 2397 (#2672)

* added css grid to technologies dropdown

* added media queries for min-width 768 & min-width 1024

* removed redundant css from min-width 1024

* updated comments

* removed comment out css

* added variables $bp-tablet-up} & $bp-desktop-up

* added scrollbar

* updated height for desktop

* changes to account for Surface Duo Screen 540px

* added layout for ipad air with comments

* changed $bp-ipadair-up to $bp-ipadair-up

_sass/components/_project-filter.scss

@@ -7,10 +7,9 @@ a.filter-item {
 //filter container
 ul.filter-list {
   background: $color-pink;
-  display: grid;
-  list-style: none;
   padding-left: 0;
-  grid-auto-flow: column;
+  list-style: none;
+  display: grid;
   grid-column-gap: 20px;
   // grid-template-columns: repeat(4, 1fr);
   // ^ See issue #1997 for more info on why this is commented out and changed to 3
@@ -165,6 +164,36 @@ a.clear-filter-tags {
   ul.filter-list li ul {
     width: 105%;
     padding: 15px;
+    overflow: auto;
+  }
+}
+// tablet down
+@media #{$bp-below-tablet} {
+  #technologies {
+    height: 370px;
+    overflow: auto;
+  }
+}
+
+// tablet up
+@media #{$bp-tablet-up} {
+  #technologies {
+    display: grid;
+    grid-auto-flow: column; // flows the data from top to bottom rather than left to right
+    grid-template-rows: repeat(16, 1fr); // ensures the list is 16 rows
+    list-style: none;
+    left: -17em;
+    width: 718px;
+    height: 380px;
+    overflow: auto;
+  }
+}
+
+// iPad Air to Desktop
+@media #{$bp-desktop-up} {
+  #technologies {
+    left: -18em;
+    width: 768px;
   }
 }
 

_sass/variables/_layout.scss

@@ -12,16 +12,24 @@ $screen-mobile: 480px;
  * Breakpoint Start and End Declaration
  *
  * These are generally used for declaring media queries.
- * As an example, if a developer wants to make a media query for   
- * anything above a tablet, use the variable $bp-tablet-up. For  
+ * As an example, if a developer wants to make a media query for
+ * anything above a tablet, use the variable $bp-tablet-up. For
  * anything below a tablet, use $bp-below-tablet.
  */
+
+// Desktop Large
 $bp-desktop-large-up: '(min-width: #{$screen-desktop-large})';
 $bp-below-desktop-large: '(max-width: #{$screen-desktop-large - 1})';
+
+// Desktop
 $bp-desktop-up: '(min-width: #{$screen-desktop})';
 $bp-below-desktop: '(max-width: #{$screen-desktop - 1})';
+
+// Tablets
 $bp-tablet-up: '(min-width: #{$screen-tablet})';
 $bp-below-tablet: '(max-width: #{$screen-tablet - 1})';
+
+// Mobile
 $bp-mobile-up: '(min-width: #{$screen-mobile})';
 $bp-below-mobile: '(max-width: #{$screen-mobile - 1})';