Back to sass

assets/sass/app.sass

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

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,
+.content h3
+    @apply mt-6
+
+p,
+ul,
+ol,
+blockquote,
+table,
+pre
+    @apply mb-6

assets/sass/base/images.sass

@@ -0,0 +1,12 @@
+img
+    &.with-border
+        @apply border border-solid border-grey-light
+
+    &.with-padding
+        @apply p-1
+
+    &.avatar
+        @apply border p-1 rounded-full
+
+svg
+    fill: currentColor

assets/sass/base/vue.sass

@@ -0,0 +1,19 @@
+[v-cloak]
+    .v-cloak-block
+        @apply block
+
+    .v-cloak-inline
+        @apply inline
+
+    .v-cloak-inline-block
+        @apply inline-block
+
+    .v-cloak-hidden
+        @apply hidden
+
+    .v-cloak-invisible
+        @apply invisible
+
+.v-cloak-block,
+.v-cloak-inline,
+    @apply hidden

assets/sass/components/blockquote.sass

@@ -0,0 +1,2 @@
+blockquote
+    @apply border-l-4 border-blue pl-4 px-6 py-2

assets/sass/components/button.sass

@@ -0,0 +1,6 @@
+.button
+    @apply bg-blue inline-block rounded text-white px-4 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,8 @@
+.listing
+    @apply pl-0
+
+.listing-item
+    @apply overflow-hidden pb-8
+
+    &:not(:last-child)
+        @apply border-b border-grey-light mb-8

assets/sass/components/markdown.sass

@@ -0,0 +1,22 @@
+.markdown
+    h2
+        @apply mt-8 mb-3 text-black
+
+    h2, h3
+      @apply text-black
+
+    p,
+    li
+        a
+            @apply link
+
+        code
+            @apply bg-grey-lighter inline-block font-mono text-sm px-1 py-px
+
+    p:last-child
+        @apply mb-0
+
+    pre code,
+    .hljs
+        @apply bg-grey-lighter block border-grey-dark border-l-4 font-mono
+        @apply leading-loose overflow-x-scroll p-6 rounded text-sm

assets/sass/components/note.sass

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

assets/sass/components/slides.sass

@@ -0,0 +1,15 @@
+.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/table.sass

@@ -0,0 +1,20 @@
+.table-collapse
+    @apply border-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 table-collapse
+
+    & tr:nth-child(odd)
+        @apply bg-grey-lighter
+
+    & tr th
+        @apply text-left p-3 bg-white
+
+    & td
+        @apply p-3 border-t

assets/sass/components/talk/video.sass

@@ -0,0 +1,4 @@
+.talk-video
+    iframe,
+    embed
+        @apply absolute h-full pin-l pin-t w-full

assets/sass/components/widget.sass

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