From 9212cdb015f34a664d2b016bc3c44f8113906cbd Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Mon, 28 May 2018 22:55:23 +0200
Subject: [PATCH] wip
---
assets/less/components/listing.less | 14 ++++
assets/less/components/post.less | 31 +++++++
assets/less/components/post/about-author.less | 4 +
assets/less/components/post/code.less | 22 +++++
assets/less/components/table.less | 30 +++++++
assets/less/components/talk/slides.less | 22 +++++
assets/less/components/talk/video.less | 13 +++
assets/less/components/testimonial.less | 5 ++
assets/less/components/widget.less | 3 +
assets/less/site.less | 84 +++++++++++++++++++
assets/sass/components/listing.sass | 11 ---
assets/sass/components/post.sass | 26 ------
assets/sass/components/post/code.sass | 19 -----
assets/sass/components/table.sass | 23 -----
assets/sass/components/talk/slides.sass | 15 ----
assets/sass/components/talk/video.sass | 11 ---
assets/sass/components/widget.sass | 2 -
assets/sass/site.sass | 77 -----------------
package.json | 2 +
webpack.mix.js | 5 +-
yarn.lock | 70 +++++++++++++++-
21 files changed, 301 insertions(+), 188 deletions(-)
create mode 100644 assets/less/components/listing.less
create mode 100644 assets/less/components/post.less
create mode 100644 assets/less/components/post/about-author.less
create mode 100644 assets/less/components/post/code.less
create mode 100644 assets/less/components/table.less
create mode 100644 assets/less/components/talk/slides.less
create mode 100644 assets/less/components/talk/video.less
create mode 100644 assets/less/components/testimonial.less
create mode 100644 assets/less/components/widget.less
create mode 100644 assets/less/site.less
delete mode 100644 assets/sass/components/listing.sass
delete mode 100644 assets/sass/components/post.sass
delete mode 100644 assets/sass/components/post/code.sass
delete mode 100644 assets/sass/components/table.sass
delete mode 100644 assets/sass/components/talk/slides.sass
delete mode 100644 assets/sass/components/talk/video.sass
delete mode 100644 assets/sass/components/widget.sass
delete mode 100644 assets/sass/site.sass
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"