Update main layout to be responsive

src/_component/side/side-desktop.scss

@@ -8,6 +8,10 @@
     flex-grow: 0;
   }
 
+  .#{$class}-link {
+    white-space: nowrap;
+  }
+
   .#{$class}-title,
   .#{$class}-menu {
     text-align: left;

src/_component/side/side.scss

@@ -1,5 +1,5 @@
 $class: 'side';
 
 @import 'side-smartphone';
-// @import 'side-tablet';
-// @import 'side-desktop';
+@import 'side-tablet';
+@import 'side-desktop';

src/_layout/main-desktop.scss

@@ -0,0 +1,5 @@
+@media (min-width: 1280px) {
+  .container {
+    flex-direction: row;
+  }
+}

src/_layout/main-smartphone.scss

@@ -2,3 +2,26 @@ body {
   // Set the open sans font for all elements
   font-family: 'Open Sans';
 }
+
+.page-wrapper {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  flex-grow: 1;
+  background-color: $color-white;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+
+  h1:first-child {
+    margin-top: 0;
+  }
+}
+
+.content {
+  flex-grow: 1;
+  padding: 0 2.5rem 2.5rem;
+}

src/_layout/main-tablet.scss

@@ -0,0 +1,5 @@
+@media (min-width: 768px) {
+  .container {
+    flex-direction: column;
+  }
+}

src/_layout/main.scss

@@ -1 +1,3 @@
 @import 'main-smartphone';
+@import 'main-tablet';
+@import 'main-desktop';