Improve CSS layout

app/Template/task_external_link/table.php

@@ -1,12 +1,15 @@
 <?php if (! empty($links)): ?>
 <table class="table-striped table-scrolling">
-    <tr>
-        <th class="column-15"><?= t('Type') ?></th>
-        <th><?= t('Title') ?></th>
-        <th class="column-10"><?= t('Dependency') ?></th>
-        <th class="column-15"><?= t('Creator') ?></th>
-        <th class="column-15"><?= t('Date') ?></th>
-    </tr>
+    <thead>
+        <tr>
+            <th class="column-15"><?= t('Type') ?></th>
+            <th><?= t('Title') ?></th>
+            <th class="column-10"><?= t('Dependency') ?></th>
+            <th class="column-15"><?= t('Creator') ?></th>
+            <th class="column-15"><?= t('Date') ?></th>
+        </tr>
+    </thead>
+    <tbody>
     <?php foreach ($links as $link): ?>
         <tr>
             <td>
@@ -39,5 +42,6 @@
             </td>
         </tr>
     <?php endforeach ?>
+    </tbody>
 </table>
 <?php endif ?>

assets/sass/_form.sass

@@ -145,6 +145,10 @@ ul.form-errors li
 .form-login
   max-width: 350px
   margin: 5% auto 0
+
+  @include xs-device
+    margin-left: 5px
+
   li
     margin-left: 25px
     line-height: 25px

assets/sass/_header.sass

@@ -5,7 +5,7 @@ header
   display: flex
   flex-wrap: wrap
   padding: 5px 10px
-  margin-bottom: 10px
+  margin-bottom: 5px
   border-bottom: 1px solid #dedede
   background-color: #fbfbfb
 

assets/sass/_main.sass

@@ -1,3 +0,0 @@
-#main
-  padding-left: 10px
-  padding-right: 10px

assets/sass/_reset.sass

@@ -30,3 +30,7 @@ hr
   height: 0
   border-top: 1px solid rgba(0, 0, 0, 0.1)
   border-bottom: 1px solid rgba(255, 255, 255, 0.3)
+
+.page
+  margin-left: 10px
+  margin-right: 10px

assets/sass/_sidebar.sass

@@ -2,23 +2,28 @@
 @import mixins
 
 .sidebar-container
-  @include grid(100)
+  height: 100%
+  display: flex
+  flex-flow: row
+
+  @include sm-device
+    flex-flow: wrap
 
 .sidebar-content
   padding-left: 10px
-  @include grid_width(82/100)
-  @include xs-device
-    @include grid_width(1)
+  flex: 1 100%
+
+  @include sm-device
     padding-left: 0
+    order: 1
 
 .sidebar
-  max-width: 240px
-  min-width: 190px
-  @include grid_width(18/100)
-  @include xs-device
-    @include grid_width(1)
-    max-width: 99%
-    min-width: 0
+  width: 230px
+
+  @include sm-device
+    flex: 1 auto
+    order: 2
+
   h2
     margin-top: 0
   > ul

assets/sass/_task_summary.sass

@@ -12,18 +12,15 @@
 .task-summary-container
   border: 2px solid #000
   border-radius: 8px
-  padding: 15px
+  padding: 10px
 
 .task-summary-columns
-  display: -webkit-flex
   display: flex
-  -webkit-flex-direction: row
-  flex-direction: row
-  -webkit-justify-content: space-between
+  flex-flow: row
   justify-content: space-between
 
-  @include xs-device
-    display: block
+  @include sm-device
+    flex-flow: column
 
 .task-summary-column
   color: color('primary')

assets/sass/app.sass

@@ -19,7 +19,6 @@
 @import pagination
 @import header
 @import logo
-@import main
 @import page_header
 @import sidebar
 @import avatar