First responsive pass

frontend/src/App.vue

@@ -1,12 +1,12 @@
 <template>
   <v-app>
-    <div class="flex flex-row font-sans bg-hBackground text-hOnBackground">
+    <div class="shell-container">
 
-      <div class="fixed border-r-1 min-h-screen border-r border-[#3d3d3d]">
+      <div class="shell-side">
         <side-bar></side-bar>
       </div>
 
-      <div class="ml-64 w-full flex justify-center items-center ">
+      <div class="shell-view">
         <router-view></router-view>
       </div>
 
@@ -20,6 +20,23 @@ import SideBar from "@/views/main/SideBar.vue";
 </script>
 
 <style scoped>
+.shell-container {
+  @apply flex;
+  @apply font-sans;
+  @apply bg-hBackground text-hOnBackground;
+  @apply flex-col lg:flex-row;
+}
 
+.shell-side {
+  @apply border border-[#3d3d3d];
+  @apply lg:min-h-screen;
+  @apply lg:fixed;
+  @apply border-b lg:border-b-0 lg:border-r;
+}
 
+.shell-view {
+  @apply flex justify-center items-center;
+  @apply w-full;
+  @apply lg:ml-64;
+}
 </style>