Fix some IE 10 issues

client/src/components/HeaderBar.vue

@@ -50,7 +50,8 @@
   @import "@/styles/_mixins.scss";
 
   .header-bar {
-    display: -ms-grid;
+    display: flex;
+    flex-direction: row;
     @supports (display: grid) {
       display: none;
 
@@ -59,7 +60,7 @@
       }
     }
     align-items: center;
-    justify-content: space-around;
+    justify-content: space-between;
     background-color: $color-white;
     grid-auto-rows: 50px;
     width: 100%;

client/src/pages/module-base.vue

@@ -19,7 +19,7 @@
   @import "@/styles/_mixins.scss";
 
   .module-page {
-    display: -ms-grid;
+    display: flex;
     @supports (display: grid) {
       display: grid;
     }

client/src/styles/_default-layout.scss

@@ -4,6 +4,11 @@
 .skillbox {
   margin: 0 auto;
   width: 100%;
+  /*
+   * For IE10+
+   */
+  display: flex;
+  flex-direction: column;
   @supports (display: grid) {
     display: grid;
   }
@@ -34,39 +39,15 @@
     -ms-grid-column: 1;
   }
 
-  /*
-   * For IE10+
-   */
-  display: -ms-grid;
-  -ms-grid-rows: 50px 30px auto; // 1 extra row for gap
-  -ms-grid-columns: 1fr;
-
   @include skillbox-colors;
 
   &__header {
     grid-area: h;
-    -ms-grid-row: 1;
   }
 
-  &__content {
-    -ms-grid-row: 3;
-    -ms-grid-column: 1;
-  }
 
   &__footer {
     grid-area: f;
     display: none;
   }
-
-  /*
-   * For IE10+
-   */
-  & > :nth-child(2) {
-
-  }
-
-  & > :nth-child(3) {
-    -ms-grid-row: 4;
-    -ms-grid-column: 1;
-  }
 }