Update sidebar width and main padding

src/components/Sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-auto lg:w-64 bg-grey-light text-grey-darker antialiased fixed pin-l h-full overflow-y-scroll">
+  <div class="w-auto lg:w-56 text-sm bg-grey-light text-grey-darker antialiased fixed pin-l h-full overflow-y-scroll">
     <div>
       <ul class="list-reset">
         <li v-for="link in links" :key="link.title">

src/views/Applications.vue

@@ -18,7 +18,7 @@
 
     <div class="mt-48">
       <div class="-mt-10 md:-mt-4 flex flex-row-reverse h-full">
-        <div class="flex-1 p-4 lg:p-12 ml-16 lg:ml-64 overflow-x-hidden">
+        <div class="flex-1 p-4 lg:p-12 ml-16 lg:ml-56 overflow-x-hidden">
           <div class="mb-6">
             <div class="lg:flex lg:items-baseline mb-12">
               <div class="mr-16 mb-4 lg:mb-0">

src/views/Environment.vue

@@ -39,7 +39,7 @@
 
     <div class="mt-48">
       <div class="-mt-4 md:-mt-2 flex flex-row-reverse h-full">
-        <div class="flex-1 p-4 lg:p-12 ml-16 lg:ml-64 overflow-x-hidden">
+        <div class="flex-1 p-4 lg:p-12 ml-16 lg:ml-56 overflow-x-hidden">
           <div>
             <div>
               <h1 class="font-hairline mb-2">Overview</h1>

src/views/Environments.vue

@@ -34,7 +34,7 @@
 
     <div class="mt-48">
       <div class="-mt-4 md:-mt-2 flex flex-row-reverse h-full">
-        <div class="flex-1 p-4 lg:p-12 ml-16 lg:ml-64 overflow-x-hidden">
+        <div class="flex-1 p-4 lg:p-12 ml-16 lg:ml-56 overflow-x-hidden">
           <div class="mb-6">
             <div class="lg:flex lg:items-baseline mb-2">
               <div class="mr-16 mb-4 lg:mb-0">

tailwind.js

@@ -63,8 +63,13 @@ module.exports = {
   margin: {
     ...defaultConfig.margin,
     '48': '10rem',
+    '56': '14rem',
     '64': '16rem',
   },
+  width: {
+    ...defaultConfig.width,
+    '56': '14rem',
+  },
   plugins: [
     require('tailwindcss/plugins/container')(),
     require('tailwindcss-visuallyhidden')(),