Use Mix and sass, simplify image directories and remove duplicates

assets/sass/components/listing.sass

@@ -0,0 +1,11 @@
+.listing
+    @apply .pl-0
+
+.listing-item
+    @apply .overflow-hidden
+    @apply .pb-8
+
+    &:not(:last-child)
+        @apply .border-b
+        @apply .border-grey-light
+        @apply .mb-8

assets/sass/components/post.sass

@@ -0,0 +1,26 @@
+pre code,
+pre code.hljs,
+.hljs
+    @apply .p-4
+    @apply .text-sm
+    @apply .border-l-4
+    @apply .border-grey-dark
+    @apply .block
+    @apply .bg-grey-lighter
+    @apply .overflow-x-scroll
+    @apply .font-mono
+
+p,
+li
+    code
+        @apply .bg-grey-lighter .inline-block .font-mono
+        padding: 1px 3px
+
+.note
+    @apply .bg-blue-lighter
+    @apply .p-4
+    @apply .border-l-4
+    @apply .border-blue
+
+.note > *:last-child
+    @apply .mb-0

assets/sass/components/post/code.sass

@@ -0,0 +1,19 @@
+p,
+li
+    code
+        @apply .bg-grey-lighter .inline-block .font-mono .text-xs
+        padding: 1px 3px
+
+pre code,
+pre code.hljs,
+.hljs
+    @apply .bg-grey-lighter
+    @apply .block
+    @apply .border-grey-dark
+    @apply .border-l-4
+    @apply .font-mono
+    @apply .leading-loose
+    @apply .overflow-x-scroll
+    @apply .p-4
+    @apply .rounded
+    @apply .text-xs

assets/sass/components/table.sass

@@ -0,0 +1,23 @@
+.table-collapse
+    border-collapse: collapse
+
+.table-responsive
+    @apply .mb-4 .border .w-full
+    overflow-x: auto
+    overflow-y: hidden
+
+.table-responsive table
+    @apply .mb-0 .border-0 .whitespace-no-wrap
+
+.table
+    @apply .w-full
+    @apply .table-collapse
+
+.table tr:nth-child(odd)
+    @apply .bg-grey-lighter
+
+.table tr th
+    @apply .text-left .px-3 .py-2 .bg-white
+
+.table td
+    @apply .px-3 .py-2 .border-t

assets/sass/components/talk/slides.sass

@@ -0,0 +1,15 @@
+.talk-slides
+    background: url('../images/loading.gif') center no-repeat
+    min-height: 275px
+
+    @screen md
+        &
+            min-height: 375px
+
+    @screen lg
+        &
+            min-height: 450px
+
+    @screen xl
+        &
+            min-height: 560px

assets/sass/components/talk/video.sass

@@ -0,0 +1,11 @@
+.talk-video
+    @apply .relative .w-full
+    padding-top: 56.25%
+
+.talk-video iframe,
+.talk-video embed
+    @apply .absolute
+    @apply .pin-l
+    @apply .pin-t
+    @apply .h-full
+    @apply .w-full

assets/sass/components/widget.sass

@@ -0,0 +1,2 @@
+.widget
+    @apply .mb-6 .block

assets/sass/site.sass

@@ -0,0 +1,69 @@
+@import '~font-awesome/css/font-awesome.css'
+@import '~highlightjs/styles/github-gist.css'
+
+@tailwind preflight
+
+p,
+li,
+td
+    a
+        @apply .text-blue
+
+.button
+    @apply .bg-blue
+    @apply .inline-block
+    @apply .rounded
+    @apply .text-white
+    @apply .px-4
+    @apply .py-2
+
+    &:active,
+    &:hover
+        @apply .bg-blue-dark
+
+blockquote
+    @apply .border-l-4 .border-blue .pl-4
+
+img.with-border
+    @apply .border .border-solid .border-grey-light
+
+h1, h2, h3
+    @apply .mb-2
+
+.content
+    h2,
+    h3
+        @apply .mt-6
+
+p,
+ul,
+ol,
+table,
+pre,
+.note
+    @apply .mb-4
+
+a
+    @apply .text-grey-darkest
+    text-decoration: none
+
+main a:not(.button)
+    text-decoration: underline
+
+.bullets,
+main ul
+    list-style: disc
+    @apply .pl-4
+
+svg
+    fill: currentColor
+
+@import 'components/listing'
+@import 'components/table'
+@import 'components/talk/slides'
+@import 'components/talk/video'
+@import 'components/post'
+@import 'components/post/code'
+@import 'components/widget'
+
+@tailwind utilities