Fix #78 - use grid css to fix sidebar height issue

_sass/_base.scss

@@ -1,6 +1,6 @@
 /* ======= Base ======= */
 body {
-    font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   color: $text-color-secondary;
   background: $smoky-white;
   font-size: 14px;
@@ -9,7 +9,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-h1, h2, h3, h4, h5, h6  {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-weight: 700;
 }
 
@@ -29,6 +34,8 @@ p {
 }
 
 .wrapper {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
   background: $theme-color;
   max-width: 1000px;
   margin: 0 auto;
@@ -37,12 +44,9 @@ p {
 }
 
 .sidebar-wrapper {
+  grid-column: span 3;
+  order: 2;
   background: $theme-color;
-    position: absolute;
-    right: 0;
-    width: 280px;
-    height: 100%;
-    min-height: 800px;
   color: #fff;
   a {
     color: #fff;
@@ -80,7 +84,9 @@ p {
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   }
   .contact-list {
-        .fas, .fab, .far {
+    .fas,
+    .fab,
+    .far {
       margin-right: 5px;
       font-size: 18px;
       vertical-align: middle;
@@ -154,9 +160,9 @@ p {
 }
 
 .main-wrapper {
+  grid-column: span 7;
   background: #fff;
   padding: 60px;
-    padding-right: 340px;
   .section-title {
     text-transform: uppercase;
     font-size: 20px;
@@ -170,7 +176,8 @@ p {
     margin-bottom: 60px;
   }
 
-    .experiences-section, .educations-section {
+  .experiences-section,
+  .educations-section {
     .item {
       margin-bottom: 30px;
     }
@@ -180,7 +187,8 @@ p {
     overflow: hidden;
     margin-bottom: 2px;
   }
-    .job-title, .degree {
+  .job-title,
+  .degree {
     color: $text-color;
     font-size: 16px;
     margin-top: 0;
@@ -193,7 +201,8 @@ p {
     top: 0;
     color: $text-grey;
   }
-    .company, .university {
+  .company,
+  .university {
     margin-bottom: 10px;
     color: $text-grey;
   }
@@ -235,7 +244,6 @@ p {
   }
 }
 
-
 .skillset {
   .item {
     margin-bottom: 15px;
@@ -256,9 +264,6 @@ p {
   }
 }
 
-
-
-
 .footer {
   padding-top: 30px;
   .copyright {
@@ -270,5 +275,4 @@ p {
   .fa-heart {
     color: $heart;
   }
-
 }

_sass/_responsive.scss

@@ -1,6 +1,5 @@
 /* Extra small devices (phones, less than 768px) */
 @media (max-width: 767px) {
-
   body {
     padding: 0;
   }
@@ -10,6 +9,10 @@
     width: inherit;
   }
 
+  .wrapper {
+    display: block;
+  }
+
   .main-wrapper {
     padding: 30px;
   }
@@ -23,18 +26,13 @@
   .main-wrapper .upper-row {
     margin-bottom: 0;
   }
-
-
 }
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {
-
-
 }
 
 /* Medium devices (desktops, 992px and up) */
 @media (min-width: 992px) {
-
   .skillset .level-title {
     display: inline-block;
     float: left;
@@ -49,17 +47,12 @@
     position: relative;
     top: 1px;
   }
-
-
 }
 
 /* Large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {
-
 }
 
-
 /* Ex-Large devices (large desktops, 1200px and up) */
 @media (min-width: 1400px) {
-
 }