From 97737eba1be5dddf340bee8f51e1c5bf7c7ff27d Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sun, 3 Jun 2018 09:33:12 +0100
Subject: [PATCH] Use sass again

---
 assets/less/base/base.less              | 37 -------------------------
 assets/less/base/images.less            |  7 -----
 assets/less/components/blockquote.less  |  3 --
 assets/less/components/button.less      | 13 ---------
 assets/less/components/link.less        |  3 --
 assets/less/components/listing.less     | 14 ----------
 assets/less/components/markdown.less    | 31 ---------------------
 assets/less/components/note.less        | 16 -----------
 assets/less/components/post/code.less   |  0
 assets/less/components/table.less       | 30 --------------------
 assets/less/components/talk/slides.less | 22 ---------------
 assets/less/components/talk/video.less  | 13 ---------
 assets/less/components/widget.less      |  3 --
 assets/less/site.less                   | 19 -------------
 assets/sass/base/base.sass              | 29 +++++++++++++++++++
 assets/sass/base/images.sass            |  5 ++++
 assets/sass/components/blockquote.sass  |  2 ++
 assets/sass/components/button.sass      | 11 ++++++++
 assets/sass/components/link.sass        |  2 ++
 assets/sass/components/listing.sass     | 11 ++++++++
 assets/sass/components/markdown.sass    | 21 ++++++++++++++
 assets/sass/components/note.sass        |  8 ++++++
 assets/sass/components/table.sass       | 23 +++++++++++++++
 assets/sass/components/talk/slides.sass | 15 ++++++++++
 assets/sass/components/talk/video.sass  |  8 ++++++
 assets/sass/components/widget.sass      |  2 ++
 assets/sass/site.sass                   | 20 +++++++++++++
 source/_partials/talk/video.html.twig   |  2 +-
 webpack.mix.js                          |  2 +-
 29 files changed, 159 insertions(+), 213 deletions(-)
 delete mode 100644 assets/less/base/base.less
 delete mode 100644 assets/less/base/images.less
 delete mode 100644 assets/less/components/blockquote.less
 delete mode 100644 assets/less/components/button.less
 delete mode 100644 assets/less/components/link.less
 delete mode 100644 assets/less/components/listing.less
 delete mode 100644 assets/less/components/markdown.less
 delete mode 100644 assets/less/components/note.less
 delete mode 100644 assets/less/components/post/code.less
 delete mode 100644 assets/less/components/table.less
 delete mode 100644 assets/less/components/talk/slides.less
 delete mode 100644 assets/less/components/talk/video.less
 delete mode 100644 assets/less/components/widget.less
 delete mode 100644 assets/less/site.less
 create mode 100644 assets/sass/base/base.sass
 create mode 100644 assets/sass/base/images.sass
 create mode 100644 assets/sass/components/blockquote.sass
 create mode 100644 assets/sass/components/button.sass
 create mode 100644 assets/sass/components/link.sass
 create mode 100644 assets/sass/components/listing.sass
 create mode 100644 assets/sass/components/markdown.sass
 create mode 100644 assets/sass/components/note.sass
 create mode 100644 assets/sass/components/table.sass
 create mode 100644 assets/sass/components/talk/slides.sass
 create mode 100644 assets/sass/components/talk/video.sass
 create mode 100644 assets/sass/components/widget.sass
 create mode 100644 assets/sass/site.sass

diff --git a/assets/less/base/base.less b/assets/less/base/base.less
deleted file mode 100644
index 0dd05d3e..00000000
--- a/assets/less/base/base.less
+++ /dev/null
@@ -1,37 +0,0 @@
-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;
-}
diff --git a/assets/less/base/images.less b/assets/less/base/images.less
deleted file mode 100644
index dc9b2fb2..00000000
--- a/assets/less/base/images.less
+++ /dev/null
@@ -1,7 +0,0 @@
-img.with-border {
-    @apply .border .border-solid .border-grey-light;
-}
-
-svg {
-    fill: currentColor;
-}
diff --git a/assets/less/components/blockquote.less b/assets/less/components/blockquote.less
deleted file mode 100644
index 7fb56095..00000000
--- a/assets/less/components/blockquote.less
+++ /dev/null
@@ -1,3 +0,0 @@
-blockquote {
-    @apply .border-l-4 .border-blue .pl-4;
-}
diff --git a/assets/less/components/button.less b/assets/less/components/button.less
deleted file mode 100644
index 91ba5e95..00000000
--- a/assets/less/components/button.less
+++ /dev/null
@@ -1,13 +0,0 @@
-.button {
-    @apply .bg-blue;
-    @apply .inline-block;
-    @apply .rounded;
-    @apply .text-white;
-    @apply .px-4;
-    @apply .py-2;
-
-    &:active,
-    &:hover {
-        @apply .bg-blue-dark;
-    }
-}
diff --git a/assets/less/components/link.less b/assets/less/components/link.less
deleted file mode 100644
index 00e5be33..00000000
--- a/assets/less/components/link.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.link {
-    @apply .text-blue;
-}
diff --git a/assets/less/components/listing.less b/assets/less/components/listing.less
deleted file mode 100644
index 70cedc04..00000000
--- a/assets/less/components/listing.less
+++ /dev/null
@@ -1,14 +0,0 @@
-.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;
-    }
-}
diff --git a/assets/less/components/markdown.less b/assets/less/components/markdown.less
deleted file mode 100644
index d938d530..00000000
--- a/assets/less/components/markdown.less
+++ /dev/null
@@ -1,31 +0,0 @@
-.markdown {
-    p,
-    li {
-        a {
-            @apply .link;
-        }
-    }
-
-    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;
-    }
-}
diff --git a/assets/less/components/note.less b/assets/less/components/note.less
deleted file mode 100644
index 8840c2cf..00000000
--- a/assets/less/components/note.less
+++ /dev/null
@@ -1,16 +0,0 @@
-.note {
-    @apply .bg-blue-lighter;
-    @apply .border-blue;
-    @apply .border-l-4;
-    @apply .mb-4;
-    @apply .p-4;
-    @apply .rounded;
-
-    & > *:last-child {
-        @apply .mb-0;
-    }
-
-    p a {
-        @apply .text-black;
-    }
-}
diff --git a/assets/less/components/post/code.less b/assets/less/components/post/code.less
deleted file mode 100644
index e69de29b..00000000
diff --git a/assets/less/components/table.less b/assets/less/components/table.less
deleted file mode 100644
index 7cb73405..00000000
--- a/assets/less/components/table.less
+++ /dev/null
@@ -1,30 +0,0 @@
-.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;
-}
diff --git a/assets/less/components/talk/slides.less b/assets/less/components/talk/slides.less
deleted file mode 100644
index 6ff964fa..00000000
--- a/assets/less/components/talk/slides.less
+++ /dev/null
@@ -1,22 +0,0 @@
-.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;
-        }
-    }
-}
diff --git a/assets/less/components/talk/video.less b/assets/less/components/talk/video.less
deleted file mode 100644
index 6b4e0fe5..00000000
--- a/assets/less/components/talk/video.less
+++ /dev/null
@@ -1,13 +0,0 @@
-.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;
-}
\ No newline at end of file
diff --git a/assets/less/components/widget.less b/assets/less/components/widget.less
deleted file mode 100644
index 48262eca..00000000
--- a/assets/less/components/widget.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.widget {
-    @apply .mb-6 .block;
-}
diff --git a/assets/less/site.less b/assets/less/site.less
deleted file mode 100644
index 8fece3fd..00000000
--- a/assets/less/site.less
+++ /dev/null
@@ -1,19 +0,0 @@
-@import (css) "~font-awesome/css/font-awesome.css";
-@import (css) "~highlightjs/styles/github-gist.css";
-
-@tailwind preflight;
-
-@import 'base/base';
-@import 'base/images';
-
-@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;
diff --git a/assets/sass/base/base.sass b/assets/sass/base/base.sass
new file mode 100644
index 00000000..e8cf2b48
--- /dev/null
+++ b/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
diff --git a/assets/sass/base/images.sass b/assets/sass/base/images.sass
new file mode 100644
index 00000000..f4e8dbf5
--- /dev/null
+++ b/assets/sass/base/images.sass
@@ -0,0 +1,5 @@
+img.with-border
+    @apply .border .border-solid .border-grey-light
+
+svg
+    fill: currentColor
diff --git a/assets/sass/components/blockquote.sass b/assets/sass/components/blockquote.sass
new file mode 100644
index 00000000..5416092f
--- /dev/null
+++ b/assets/sass/components/blockquote.sass
@@ -0,0 +1,2 @@
+blockquote
+    @apply .border-l-4 .border-blue .pl-4
diff --git a/assets/sass/components/button.sass b/assets/sass/components/button.sass
new file mode 100644
index 00000000..64d737c4
--- /dev/null
+++ b/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
diff --git a/assets/sass/components/link.sass b/assets/sass/components/link.sass
new file mode 100644
index 00000000..5390ccf0
--- /dev/null
+++ b/assets/sass/components/link.sass
@@ -0,0 +1,2 @@
+.link
+    @apply .text-blue
diff --git a/assets/sass/components/listing.sass b/assets/sass/components/listing.sass
new file mode 100644
index 00000000..d094b46c
--- /dev/null
+++ b/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
diff --git a/assets/sass/components/markdown.sass b/assets/sass/components/markdown.sass
new file mode 100644
index 00000000..ec58b15e
--- /dev/null
+++ b/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
diff --git a/assets/sass/components/note.sass b/assets/sass/components/note.sass
new file mode 100644
index 00000000..78e1baaf
--- /dev/null
+++ b/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
diff --git a/assets/sass/components/table.sass b/assets/sass/components/table.sass
new file mode 100644
index 00000000..a72a1cba
--- /dev/null
+++ b/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
diff --git a/assets/sass/components/talk/slides.sass b/assets/sass/components/talk/slides.sass
new file mode 100644
index 00000000..cff57e8e
--- /dev/null
+++ b/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
diff --git a/assets/sass/components/talk/video.sass b/assets/sass/components/talk/video.sass
new file mode 100644
index 00000000..1463defb
--- /dev/null
+++ b/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
diff --git a/assets/sass/components/widget.sass b/assets/sass/components/widget.sass
new file mode 100644
index 00000000..aea5d8b6
--- /dev/null
+++ b/assets/sass/components/widget.sass
@@ -0,0 +1,2 @@
+.widget
+    @apply .mb-6 .block
diff --git a/assets/sass/site.sass b/assets/sass/site.sass
new file mode 100644
index 00000000..d753e499
--- /dev/null
+++ b/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
diff --git a/source/_partials/talk/video.html.twig b/source/_partials/talk/video.html.twig
index 2dd70053..65e78bdc 100644
--- a/source/_partials/talk/video.html.twig
+++ b/source/_partials/talk/video.html.twig
@@ -2,7 +2,7 @@
     <div class="mt-4">
         <h2>Video</h2>
 
-        <div class="talk-video">
+        <div class="w-full relative" style="padding-top: 56.25%">
             {% if page.youtube.id %}
                 <iframe
                     width="678"
diff --git a/webpack.mix.js b/webpack.mix.js
index 56fda1f0..085049c0 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -4,7 +4,7 @@ require('laravel-mix-purgecss');
 require('laravel-mix-tailwind');
 
 mix.disableNotifications()
-    .less('assets/less/site.less', 'source/build/css')
+    .sass('assets/sass/site.sass', 'source/build/css')
     .combine([
         'node_modules/jquery/dist/jquery.js',
         'node_modules/highlightjs/highlight.pack.js',