Upgrades

app/styles/_block_grid.scss

@@ -1,51 +0,0 @@
-// Block Grid
-// Technique adapted from Foundation 5 for Bootstrap 3.
-// https://github.com/zurb/foundation/blob/f755d8704123f86c281ede0b171881e2672f150d/scss/foundation/components/_block-grid.scss
-// Original LESS Version by Christopher Mitchell (https://gist.github.com/ChrisTM)
-// Converted to SCSS by Rasmus Jürs (https://github.com/Jursdotme)
- 
-[class*="block-grid-"] {
-  display: block;
-  margin: -($grid-gutter-width/2);
-  padding: 0;
-  @include clearfix();
-}
- 
-.block-grid-item {
-  display: inline;
-  margin: 0;
-  padding: ($grid-gutter-width/2);
-  height: auto;
-  float: left;
-  list-style: none;
-}
- 
-@mixin block-grid($per-row) {
-  & > .block-grid-item {
-    width: (100%/$per-row);
- 
-    $nth-equation: #{$per-row}n+1;
-    &:nth-of-type(n) { clear: none; }
-    &:nth-of-type(#{$nth-equation}) { clear: both; }
-  }
-}
- 
-@mixin block-grids($size) {
-  .block-grid-#{$size}-1  { @include block-grid(1);  }
-  .block-grid-#{$size}-2  { @include block-grid(2);  }
-  .block-grid-#{$size}-3  { @include block-grid(3);  }
-  .block-grid-#{$size}-4  { @include block-grid(4);  }
-  .block-grid-#{$size}-5  { @include block-grid(5);  }
-  .block-grid-#{$size}-6  { @include block-grid(6);  }
-  .block-grid-#{$size}-7  { @include block-grid(7);  }
-  .block-grid-#{$size}-8  { @include block-grid(8);  }
-  .block-grid-#{$size}-9  { @include block-grid(9);  }
-  .block-grid-#{$size}-10 { @include block-grid(10); }
-  .block-grid-#{$size}-11 { @include block-grid(11); }
-  .block-grid-#{$size}-12 { @include block-grid(12); }
-}
- 
-@include block-grids(xs); 
-@media (min-width: $screen-sm-min) { @include block-grids(sm) }
-@media (min-width: $screen-md-min) { @include block-grids(md) }
-@media (min-width: $screen-lg-min) { @include block-grids(lg) }

app/styles/main.scss

@@ -1,54 +1,115 @@
-$icon-font-path: "../bower_components/bootstrap-sass/assets/fonts/bootstrap/";
+@import "../../node_modules/bootstrap/scss/bootstrap.scss";
 
-// bower:scss
-@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
-// endbower
-
-@import "block_grid"; // from foundation 5
-
-.page-header h1 {
-	line-height: 1;
-	vertical-align: bottom;
+body {
+    text-align: center;
+    @include media-breakpoint-up(sm) {
+        text-align: left;
+    }
 }
+
+.page-header {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.brand {
+    line-height: 1;
+    img {
+        position: relative;
+        top: -4px;
+    }
+}
+
+section {
+    margin-bottom: 1.5rem;
+}
+.cta {
+    display: block;
+
+    @include media-breakpoint-up(sm) {
+        display:none;
+    }
+}
+
 .edb-brick {
 	height: 40px;
 	width: auto;
 }
-/* Projects */
-.block-grid-item {
+
+.contact-info {
+    margin-bottom: 0;
+    text-align: left;
+}
+
+/* Tools */
+.tool-list {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    justify-content: space-evenly;
+
+    @include media-breakpoint-up(sm) {
+        justify-content: flex-start;
+    }
+
+}
+
+.tool-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 	padding-bottom: 0;
-	h3 {
-		margin-top: 0;
-	}
-	img {
-		max-width: 100%;
-	}
+    margin-bottom: 20px;
+    max-width: 196px;
+
+    img {
+        max-width: 92%;
+    }
+
+    @include media-breakpoint-up(sm) {
+        max-width: 230px;
+    }
+
+    @include media-breakpoint-up(lg) {
+        max-width: 310px;
+    }
+    @include media-breakpoint-up(xl) {
+        max-width: none;
+    }
+
 }
-h3 {
-	font-weight: bold;
-}
-@media (min-width: 768px) {
-    .form-link {
-        display:none;
+
+.form-wrap {
+    position: relative;
+    padding-bottom: 75%;
+    height: 0;
+    overflow: hidden;
+
+    iframe {
+        position: absolute;
+        top:0;
+        left: 0;
+        width: 100%;
+        height: 100%;
     }
 }
-.join-us-title {
-	margin-top: 40px;
-	margin-bottom: 0px;
-}
 #contact_form {
-    border:0;
-    margin:0;
+    border: 0;
+    margin: 0;
 }
+
 .browsehappy {
     margin: 0.2em 0;
     background: #ccc;
     color: #000;
     padding: 0.2em 0;
 }
+
 .love {
     color: #faafba;
 }
+
 .credits {
     margin-top: 25px;
     margin-bottom: 25px;