wip

assets/less/components/listing.less

@@ -0,0 +1,14 @@
+.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/less/components/post.less

@@ -0,0 +1,31 @@
+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/less/components/post/about-author.less

@@ -0,0 +1,4 @@
+.about-author {
+    @apply .mr-4 .float-left .rounded-full;
+    width: 75px;
+}

assets/less/components/post/code.less

@@ -0,0 +1,22 @@
+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/less/components/table.less

@@ -0,0 +1,30 @@
+.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/less/components/talk/slides.less

@@ -0,0 +1,22 @@
+.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/less/components/talk/video.less

@@ -0,0 +1,13 @@
+.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/less/components/testimonial.less

@@ -0,0 +1,5 @@
+.testimonial-image {
+    @apply .rounded-full .mb-3 .ml-3;
+    height: 65px;
+    width: 65px;
+}

assets/less/components/widget.less

@@ -0,0 +1,3 @@
+.widget {
+    @apply .mb-6 .block;
+}

assets/less/site.less

@@ -0,0 +1,84 @@
+@import (css) "~font-awesome/css/font-awesome.css";
+@import (css) "~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/post';
+@import 'components/post/about-author';
+@import 'components/post/code';
+@import 'components/table';
+@import 'components/talk/slides';
+@import 'components/talk/video';
+@import 'components/widget';
+
+@tailwind utilities;

assets/sass/components/listing.sass

@@ -1,11 +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

assets/sass/components/post.sass

@@ -1,26 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,23 +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

assets/sass/components/talk/slides.sass

@@ -1,15 +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

assets/sass/components/talk/video.sass

@@ -1,11 +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

assets/sass/components/widget.sass

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

assets/sass/site.sass

@@ -1,77 +0,0 @@
-@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
-
-.element-invisible
-    position: absolute !important
-    clip: rect(1px, 1px, 1px, 1px)
-    overflow: hidden
-    height: 1px
-    width: 1px
-    word-wrap: normal
-
-@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

package.json

@@ -18,6 +18,8 @@
     "laravel-mix-tailwind": "^0.1.0"
   },
   "devDependencies": {
+    "less": "^3.0.4",
+    "less-loader": "^4.1.0",
     "tailwindcss": "^0.4.0"
   }
 }

webpack.mix.js

@@ -4,7 +4,7 @@ require('laravel-mix-purgecss');
 require('laravel-mix-tailwind');
 
 mix.disableNotifications()
-    .sass('assets/sass/site.sass', 'source/build/css')
+    .less('assets/less/site.less', 'source/build/css')
     .js('assets/js/site.js', 'source/build/js')
     .copyDirectory('assets/images', 'source/build/images')
     .copyDirectory('node_modules/font-awesome/fonts', 'source/build/fonts')
@@ -13,4 +13,7 @@ mix.disableNotifications()
         globs: [
             path.join(__dirname, 'output_*/**/*.html'),
         ]
+    })
+    .options({
+        processCssUrls: false
     });

yarn.lock

@@ -204,6 +204,10 @@ array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
 
+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+
 asn1.js@^4.0.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
@@ -1390,6 +1394,10 @@ clone@^1.0.0, clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
 
+clone@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.1.tgz#d217d1e961118e3ac9a4b8bba3285553bf647cdb"
+
 co@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/co/-/co-3.1.0.tgz#4ea54ea5a08938153185e15210c68d9092bc1b78"
@@ -2327,7 +2335,7 @@ entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
-errno@^0.1.3, errno@~0.1.7:
+errno@^0.1.1, errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
   dependencies:
@@ -3650,6 +3658,10 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
+image-size@~0.5.0:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
+
 imagemin-gifsicle@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/imagemin-gifsicle/-/imagemin-gifsicle-5.2.0.tgz#3781524c457612ef04916af34241a2b42bfcb40a"
@@ -4368,6 +4380,27 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
+less-loader@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-4.1.0.tgz#2c1352c5b09a4f84101490274fd51674de41363e"
+  dependencies:
+    clone "^2.1.1"
+    loader-utils "^1.1.0"
+    pify "^3.0.0"
+
+less@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/less/-/less-3.0.4.tgz#d27dcedbac96031c9e7b76f1da1e4b7d83760814"
+  optionalDependencies:
+    errno "^0.1.1"
+    graceful-fs "^4.1.2"
+    image-size "~0.5.0"
+    mime "^1.4.1"
+    mkdirp "^0.5.0"
+    promise "^7.1.1"
+    request "^2.83.0"
+    source-map "~0.6.0"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -4773,7 +4806,7 @@ mime@1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
 
-mime@^1.5.0:
+mime@^1.4.1, mime@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
 
@@ -5895,6 +5928,12 @@ promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
 
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  dependencies:
+    asap "~2.0.3"
+
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
@@ -6298,6 +6337,31 @@ request@2:
     tunnel-agent "^0.6.0"
     uuid "^3.1.0"
 
+request@^2.83.0:
+  version "2.87.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
 request@~2.79.0:
   version "2.79.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
@@ -6745,7 +6809,7 @@ source-map@^0.4.2:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.6.1, source-map@~0.6.1:
+source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"