diff --git a/assets/less/components/listing.less b/assets/less/components/listing.less new file mode 100644 index 00000000..70cedc04 --- /dev/null +++ b/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; + } +} diff --git a/assets/less/components/post.less b/assets/less/components/post.less new file mode 100644 index 00000000..6f561c5b --- /dev/null +++ b/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; +} diff --git a/assets/less/components/post/about-author.less b/assets/less/components/post/about-author.less new file mode 100644 index 00000000..9cc47e8b --- /dev/null +++ b/assets/less/components/post/about-author.less @@ -0,0 +1,4 @@ +.about-author { + @apply .mr-4 .float-left .rounded-full; + width: 75px; +} diff --git a/assets/less/components/post/code.less b/assets/less/components/post/code.less new file mode 100644 index 00000000..25aa58e6 --- /dev/null +++ b/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; +} diff --git a/assets/less/components/table.less b/assets/less/components/table.less new file mode 100644 index 00000000..7cb73405 --- /dev/null +++ b/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; +} diff --git a/assets/less/components/talk/slides.less b/assets/less/components/talk/slides.less new file mode 100644 index 00000000..6ff964fa --- /dev/null +++ b/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; + } + } +} diff --git a/assets/less/components/talk/video.less b/assets/less/components/talk/video.less new file mode 100644 index 00000000..6b4e0fe5 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/less/components/testimonial.less b/assets/less/components/testimonial.less new file mode 100644 index 00000000..e2913e53 --- /dev/null +++ b/assets/less/components/testimonial.less @@ -0,0 +1,5 @@ +.testimonial-image { + @apply .rounded-full .mb-3 .ml-3; + height: 65px; + width: 65px; +} diff --git a/assets/less/components/widget.less b/assets/less/components/widget.less new file mode 100644 index 00000000..48262eca --- /dev/null +++ b/assets/less/components/widget.less @@ -0,0 +1,3 @@ +.widget { + @apply .mb-6 .block; +} diff --git a/assets/less/site.less b/assets/less/site.less new file mode 100644 index 00000000..41c992d1 --- /dev/null +++ b/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; diff --git a/assets/sass/components/listing.sass b/assets/sass/components/listing.sass deleted file mode 100644 index d094b46c..00000000 --- a/assets/sass/components/listing.sass +++ /dev/null @@ -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 diff --git a/assets/sass/components/post.sass b/assets/sass/components/post.sass deleted file mode 100644 index fe5d52ad..00000000 --- a/assets/sass/components/post.sass +++ /dev/null @@ -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 diff --git a/assets/sass/components/post/code.sass b/assets/sass/components/post/code.sass deleted file mode 100644 index db57876a..00000000 --- a/assets/sass/components/post/code.sass +++ /dev/null @@ -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 diff --git a/assets/sass/components/table.sass b/assets/sass/components/table.sass deleted file mode 100644 index c93e5628..00000000 --- a/assets/sass/components/table.sass +++ /dev/null @@ -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 diff --git a/assets/sass/components/talk/slides.sass b/assets/sass/components/talk/slides.sass deleted file mode 100644 index cff57e8e..00000000 --- a/assets/sass/components/talk/slides.sass +++ /dev/null @@ -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 diff --git a/assets/sass/components/talk/video.sass b/assets/sass/components/talk/video.sass deleted file mode 100644 index fa894ebb..00000000 --- a/assets/sass/components/talk/video.sass +++ /dev/null @@ -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 diff --git a/assets/sass/components/widget.sass b/assets/sass/components/widget.sass deleted file mode 100644 index aea5d8b6..00000000 --- a/assets/sass/components/widget.sass +++ /dev/null @@ -1,2 +0,0 @@ -.widget - @apply .mb-6 .block diff --git a/assets/sass/site.sass b/assets/sass/site.sass deleted file mode 100644 index c3983d1f..00000000 --- a/assets/sass/site.sass +++ /dev/null @@ -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 diff --git a/package.json b/package.json index 288e4071..1bc7281f 100644 --- a/package.json +++ b/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" } } diff --git a/webpack.mix.js b/webpack.mix.js index 078847fc..ceb49161 100644 --- a/webpack.mix.js +++ b/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 }); diff --git a/yarn.lock b/yarn.lock index fbb4a806..7cb44498 100644 --- a/yarn.lock +++ b/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"