Use mixins for file thumbails

assets/sass/_button.sass

@@ -1,4 +1,5 @@
 @import variables
+@import mixins
 
 a.btn
   text-decoration: none

assets/sass/_files.sass

@@ -1,14 +1,11 @@
 @import variables
+@import mixins
 
 .file-thumbnails
-  display: -webkit-flex
+  +display-flex
-  display: flex
+  +flex-direction(row)
-  -webkit-flex-direction: row
+  +flex-wrap
-  flex-direction: row
+  +justify-content(flex-start)
-  -webkit-flex-wrap: wrap
-  flex-wrap: wrap
-  -webkit-justify-content: flex-start
-  justify-content: flex-start
 
 .file-thumbnail
   width: 250px
@@ -29,11 +26,11 @@
 
 .file-thumbnail-title
   font-weight: 700
-  font-size: 0.9em
+  font-size: size('compact')
   color: color('medium')
 
 .file-thumbnail-description
-  font-size: 0.8em
+  font-size: size('small')
   color: color('light')
   margin-top: 8px
   margin-bottom: 5px

assets/sass/_mixins.sass

@@ -42,3 +42,27 @@
   @for $i from 1 through $n
     .column-#{$i}
       width: $i * 1%
+
+=appearance
+  -webkit-appearance: none
+  -moz-appearance: none
+
+=display-flex
+  display: -webkit-flex
+  display: flex
+
+=flex-direction($direction)
+  -webkit-flex-direction: $direction
+  flex-direction: $direction
+
+=flex-wrap
+  -webkit-flex-wrap: wrap
+  flex-wrap: wrap
+
+=align-content($position)
+  -webkit-align-items: $position
+  align-items: $position
+
+=justify-content($position)
+  -webkit-justify-content: $position
+  justify-content: $position

assets/sass/_page_header.sass

@@ -1,4 +1,5 @@
 @import variables
+@import mixins
 
 .page-header
   margin-bottom: 20px

assets/sass/_project_header.sass

@@ -1,3 +1,6 @@
+@import variables
+@import mixins
+
 .project-header
   @include grid(100)
 

assets/sass/_project_overview.sass

@@ -1,10 +1,12 @@
 @import variables
+@import mixins
 
 .project-overview-columns
   +display-flex
   +flex-direction(row)
   +flex-wrap
   +align-content(center)
+  +justify-content(center)
   margin-bottom: 20px
   font-size: size('large')
   @include xs-device

assets/sass/_sidebar.sass

@@ -1,4 +1,5 @@
 @import variables
+@import mixins
 
 .sidebar-container
   @include grid(100)

assets/sass/_task_summary.sass

@@ -1,4 +1,5 @@
 @import variables
+@import mixins
 
 #task-summary
   margin-bottom: 15px

assets/sass/_task_tags.sass

@@ -1,9 +1,9 @@
 @import variables
+@import mixins
 
 .task-tags li
   display: inline
-  margin: 0
+  margin: 0 4px 0 0
-  margin-right: 4px
   padding: 2px
   color: color('medium')
   border: 1px solid #666

assets/sass/_variables.sass

@@ -60,25 +60,3 @@ $board-task-limit-color: #DF5353
 
 @function button-hover-border-color($key)
   @return map-get($button-hover-border-colors, $key)
-
-=appearance
-  -webkit-appearance: none
-  -moz-appearance: none
-
-=display-flex
-  display: -webkit-flex
-  display: flex
-
-=flex-direction($direction)
-  -webkit-flex-direction: $direction
-  flex-direction: $direction
-
-=flex-wrap
-  -webkit-flex-wrap: wrap
-  flex-wrap: wrap
-
-=align-content($position)
-  -webkit-align-items: $position
-  align-items: $position
-  -webkit-justify-content: $position
-  justify-content: $position