Use sass again

assets/sass/base/base.sass

@@ -0,0 +1,29 @@
+a
+    color: inherit
+    text-decoration: none
+
+    &:focus,
+    &:hover
+      text-decoration: underline
+
+main a
+    text-decoration: underline
+
+    &:focus,
+    &:hover
+        text-decoration: none
+
+h1, h2, h3
+    @apply .mb-2
+
+.content
+    h2,
+    h3
+        @apply .mt-6
+
+p,
+ul,
+ol,
+table,
+pre
+    @apply .mb-4

assets/sass/base/images.sass

@@ -0,0 +1,5 @@
+img.with-border
+    @apply .border .border-solid .border-grey-light
+
+svg
+    fill: currentColor

assets/sass/components/blockquote.sass

@@ -0,0 +1,2 @@
+blockquote
+    @apply .border-l-4 .border-blue .pl-4

assets/sass/components/button.sass

@@ -0,0 +1,11 @@
+.button
+    @apply .bg-blue
+    @apply .inline-block
+    @apply .rounded
+    @apply .text-white
+    @apply .px-4
+    @apply .py-2
+
+    &:active,
+    &:hover
+        @apply .bg-blue-dark

assets/sass/components/link.sass

@@ -0,0 +1,2 @@
+.link
+    @apply .text-blue

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/markdown.sass

@@ -0,0 +1,21 @@
+.markdown
+    p,
+    li
+        a
+            @apply .link
+
+        code
+            @apply .bg-grey-lighter .inline-block .font-mono
+            padding: 1px 3px
+
+    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

assets/sass/components/note.sass

@@ -0,0 +1,8 @@
+.note
+    @apply .bg-blue-lighter
+    @apply .p-4
+    @apply .border-l-4
+    @apply .border-blue
+
+    & > *:last-child
+        @apply .mb-0

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
+        @apply .mb-0 .border-0 .whitespace-no-wrap
+
+.table
+    @apply .w-full
+    @apply .table-collapse
+
+    tr:nth-child(odd)
+        @apply .bg-grey-lighter
+
+    tr th
+        @apply .text-left .px-3 .py-2 .bg-white
+
+    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,8 @@
+.talk-video
+    iframe,
+    embed
+        @apply .absolute
+        @apply .h-full
+        @apply .pin-l
+        @apply .pin-t
+        @apply .w-full

assets/sass/components/widget.sass

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

assets/sass/site.sass

@@ -0,0 +1,20 @@
+@import '~font-awesome/css/font-awesome.css'
+@import '~highlightjs/styles/github-gist.css'
+
+@tailwind preflight
+
+@import 'base/base'
+@import 'base/images'
+
+@import 'components/blockquote'
+@import 'components/button'
+@import 'components/link'
+@import 'components/listing'
+@import 'components/markdown'
+@import 'components/note'
+@import 'components/table'
+@import 'components/talk/slides'
+@import 'components/talk/video'
+@import 'components/widget'
+
+@tailwind utilities