diff --git a/assets/css/app.css b/assets/css/app.css
new file mode 100644
index 00000000..8d1889e9
--- /dev/null
+++ b/assets/css/app.css
@@ -0,0 +1,10 @@
+@import 'font-awesome/css/font-awesome';
+@import 'highlightjs/styles/github-gist';
+
+@import 'tailwind-preflight';
+@import 'custom-preflight';
+
+@import 'tailwind-components';
+@import 'custom-components';
+
+@import 'tailwind-utilities';
diff --git a/assets/css/base/base.css b/assets/css/base/base.css
new file mode 100644
index 00000000..89fb9789
--- /dev/null
+++ b/assets/css/base/base.css
@@ -0,0 +1,36 @@
+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;
+}
diff --git a/assets/css/base/images.css b/assets/css/base/images.css
new file mode 100644
index 00000000..542fc188
--- /dev/null
+++ b/assets/css/base/images.css
@@ -0,0 +1,17 @@
+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;
+}
diff --git a/assets/css/base/vue.css b/assets/css/base/vue.css
new file mode 100644
index 00000000..1be9003d
--- /dev/null
+++ b/assets/css/base/vue.css
@@ -0,0 +1,27 @@
+[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,
+.v-cloak-inline-b {
+ @apply hidden;
+}
diff --git a/assets/css/components/blockquote.css b/assets/css/components/blockquote.css
new file mode 100644
index 00000000..7de15389
--- /dev/null
+++ b/assets/css/components/blockquote.css
@@ -0,0 +1,3 @@
+blockquote {
+ @apply border-l-4 border-blue pl-4 px-6 py-2;
+}
diff --git a/assets/css/components/button.css b/assets/css/components/button.css
new file mode 100644
index 00000000..9e700c04
--- /dev/null
+++ b/assets/css/components/button.css
@@ -0,0 +1,8 @@
+.button {
+ @apply bg-blue inline-block rounded text-white px-4 py-2;
+
+ &:active,
+ &:hover {
+ @apply bg-blue-dark;
+ }
+}
diff --git a/assets/css/components/link.css b/assets/css/components/link.css
new file mode 100644
index 00000000..16fd48d3
--- /dev/null
+++ b/assets/css/components/link.css
@@ -0,0 +1,3 @@
+.link {
+ @apply text-blue;
+}
diff --git a/assets/css/components/listing.css b/assets/css/components/listing.css
new file mode 100644
index 00000000..a92e7595
--- /dev/null
+++ b/assets/css/components/listing.css
@@ -0,0 +1,11 @@
+.listing {
+ @apply pl-0;
+}
+
+.listing-item {
+ @apply overflow-hidden pb-8;
+
+ &:not(:last-child) {
+ @apply border-b border-grey-light mb-8;
+ }
+}
diff --git a/assets/css/components/markdown.css b/assets/css/components/markdown.css
new file mode 100644
index 00000000..2a82547f
--- /dev/null
+++ b/assets/css/components/markdown.css
@@ -0,0 +1,28 @@
+.markdown {
+ h2 {
+ @apply mt-8 mb-3 text-black;
+ }
+
+ h2, h3 {
+ @apply text-black;
+ }
+
+ p:last-child {
+ @apply mb-0;
+ }
+
+ p code,
+ li code {
+ @apply bg-grey-lighter inline-block font-mono text-sm px-1 py-px;
+ }
+
+ pre code,
+ .hljs {
+ @apply bg-grey-lighter block border-grey-dark border-l-4 font-mono leading-loose overflow-x-scroll p-6 rounded text-sm;
+ }
+}
+
+.markdown p a,
+.markdown li a {
+ @apply link;
+}
diff --git a/assets/css/components/note.css b/assets/css/components/note.css
new file mode 100644
index 00000000..f15b3f97
--- /dev/null
+++ b/assets/css/components/note.css
@@ -0,0 +1,11 @@
+.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;
+ }
+}
diff --git a/assets/css/components/slides.css b/assets/css/components/slides.css
new file mode 100644
index 00000000..bb16d150
--- /dev/null
+++ b/assets/css/components/slides.css
@@ -0,0 +1,22 @@
+.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/css/components/table.css b/assets/css/components/table.css
new file mode 100644
index 00000000..107c17ce
--- /dev/null
+++ b/assets/css/components/table.css
@@ -0,0 +1,27 @@
+.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;
+ }
+}
diff --git a/assets/css/components/talk/video.css b/assets/css/components/talk/video.css
new file mode 100644
index 00000000..f851b8b2
--- /dev/null
+++ b/assets/css/components/talk/video.css
@@ -0,0 +1,6 @@
+.talk-video {
+ iframe,
+ embed {
+ @apply absolute h-full pin-l pin-t w-full;
+ }
+}
diff --git a/assets/css/components/widget.css b/assets/css/components/widget.css
new file mode 100644
index 00000000..7fe6d405
--- /dev/null
+++ b/assets/css/components/widget.css
@@ -0,0 +1,3 @@
+.widget {
+ @apply mb-6 block;
+}
diff --git a/assets/css/custom-components.css b/assets/css/custom-components.css
new file mode 100644
index 00000000..537379af
--- /dev/null
+++ b/assets/css/custom-components.css
@@ -0,0 +1,10 @@
+@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';
diff --git a/assets/css/custom-preflight.css b/assets/css/custom-preflight.css
new file mode 100644
index 00000000..319884f7
--- /dev/null
+++ b/assets/css/custom-preflight.css
@@ -0,0 +1,3 @@
+@import 'base/base';
+@import 'base/images';
+@import 'base/vue';
diff --git a/assets/css/tailwind-components.css b/assets/css/tailwind-components.css
new file mode 100644
index 00000000..020aabaf
--- /dev/null
+++ b/assets/css/tailwind-components.css
@@ -0,0 +1 @@
+@tailwind components;
diff --git a/assets/css/tailwind-preflight.css b/assets/css/tailwind-preflight.css
new file mode 100644
index 00000000..f58c35ef
--- /dev/null
+++ b/assets/css/tailwind-preflight.css
@@ -0,0 +1 @@
+@tailwind preflight;
diff --git a/assets/css/tailwind-utilities.css b/assets/css/tailwind-utilities.css
new file mode 100644
index 00000000..65dd5f63
--- /dev/null
+++ b/assets/css/tailwind-utilities.css
@@ -0,0 +1 @@
+@tailwind utilities;
diff --git a/assets/sass/app.sass b/assets/sass/app.sass
deleted file mode 100644
index b7a6740c..00000000
--- a/assets/sass/app.sass
+++ /dev/null
@@ -1,23 +0,0 @@
-@import '~font-awesome/css/font-awesome.css'
-@import '~highlightjs/styles/github-gist.css'
-
-@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
diff --git a/assets/sass/base/base.sass b/assets/sass/base/base.sass
deleted file mode 100644
index f4060d44..00000000
--- a/assets/sass/base/base.sass
+++ /dev/null
@@ -1,36 +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,
-blockquote,
-table,
-pre
- @apply mb-6
-
-.element-invisible
- @apply absolute overflow-hidden break-normal
- clip: rect(1px, 1px, 1px, 1px)
- height: 1px
- width: 1px
diff --git a/assets/sass/base/images.sass b/assets/sass/base/images.sass
deleted file mode 100644
index f46537f4..00000000
--- a/assets/sass/base/images.sass
+++ /dev/null
@@ -1,12 +0,0 @@
-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
diff --git a/assets/sass/base/vue.sass b/assets/sass/base/vue.sass
deleted file mode 100644
index 8548f077..00000000
--- a/assets/sass/base/vue.sass
+++ /dev/null
@@ -1,20 +0,0 @@
-[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,
-.v-cloak-inline-block
- @apply hidden
diff --git a/assets/sass/components/blockquote.sass b/assets/sass/components/blockquote.sass
deleted file mode 100644
index 56e12b0b..00000000
--- a/assets/sass/components/blockquote.sass
+++ /dev/null
@@ -1,2 +0,0 @@
-blockquote
- @apply border-l-4 border-blue pl-4 px-6 py-2
diff --git a/assets/sass/components/button.sass b/assets/sass/components/button.sass
deleted file mode 100644
index 318dac97..00000000
--- a/assets/sass/components/button.sass
+++ /dev/null
@@ -1,6 +0,0 @@
-.button
- @apply bg-blue inline-block rounded text-white px-4 py-2
-
- &:active,
- &:hover
- @apply bg-blue-dark
diff --git a/assets/sass/components/link.sass b/assets/sass/components/link.sass
deleted file mode 100644
index 5090ca45..00000000
--- a/assets/sass/components/link.sass
+++ /dev/null
@@ -1,2 +0,0 @@
-.link
- @apply text-blue
diff --git a/assets/sass/components/listing.sass b/assets/sass/components/listing.sass
deleted file mode 100644
index e6553913..00000000
--- a/assets/sass/components/listing.sass
+++ /dev/null
@@ -1,8 +0,0 @@
-.listing
- @apply pl-0
-
-.listing-item
- @apply overflow-hidden pb-8
-
- &:not(:last-child)
- @apply border-b border-grey-light mb-8
diff --git a/assets/sass/components/markdown.sass b/assets/sass/components/markdown.sass
deleted file mode 100644
index 8922481e..00000000
--- a/assets/sass/components/markdown.sass
+++ /dev/null
@@ -1,21 +0,0 @@
-.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 leading-loose overflow-x-scroll p-6 rounded text-sm
diff --git a/assets/sass/components/note.sass b/assets/sass/components/note.sass
deleted file mode 100644
index d10b0bbb..00000000
--- a/assets/sass/components/note.sass
+++ /dev/null
@@ -1,9 +0,0 @@
-.note
- @apply bg-blue-lighter
- @apply border-blue border-l-4 mb-4 p-4 rounded
-
- & > *:last-child
- @apply mb-0
-
- p a
- @apply text-black
diff --git a/assets/sass/components/slides.sass b/assets/sass/components/slides.sass
deleted file mode 100644
index 14b50b43..00000000
--- a/assets/sass/components/slides.sass
+++ /dev/null
@@ -1,15 +0,0 @@
-.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/table.sass b/assets/sass/components/table.sass
deleted file mode 100644
index 1a9636e5..00000000
--- a/assets/sass/components/table.sass
+++ /dev/null
@@ -1,20 +0,0 @@
-.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
diff --git a/assets/sass/components/talk/video.sass b/assets/sass/components/talk/video.sass
deleted file mode 100644
index 97a47e1d..00000000
--- a/assets/sass/components/talk/video.sass
+++ /dev/null
@@ -1,4 +0,0 @@
-.talk-video
- iframe,
- embed
- @apply absolute h-full pin-l pin-t w-full
diff --git a/assets/sass/components/widget.sass b/assets/sass/components/widget.sass
deleted file mode 100644
index 12f3f3b9..00000000
--- a/assets/sass/components/widget.sass
+++ /dev/null
@@ -1,2 +0,0 @@
-.widget
- @apply mb-6 block
diff --git a/package.json b/package.json
index 2df34d21..9e302eee 100644
--- a/package.json
+++ b/package.json
@@ -16,5 +16,9 @@
"tailwindcss": "^0.6",
"tailwindcss-visuallyhidden": "^1.0.1",
"vue": "^2.5.17"
+ },
+ "dependencies": {
+ "postcss-import": "^12.0.1",
+ "postcss-nesting": "^7.0.0"
}
}
diff --git a/source/_partials/post/tags.html.twig b/source/_partials/post/tags.html.twig
index 4ab82b82..1b8e7aaa 100644
--- a/source/_partials/post/tags.html.twig
+++ b/source/_partials/post/tags.html.twig
@@ -1,5 +1,5 @@
{% if page.tags %}
- Tags
+ Tags
{% for tag in page.tags|sort %}
diff --git a/webpack.mix.js b/webpack.mix.js
index c8e4173f..198d64df 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/app.sass', 'source/dist/css')
+ .postCss('assets/css/app.css', 'source/dist/css')
.js([
// 'node_modules/highlightjs/highlight.pack.js',
'node_modules/jquery/dist/jquery.js',
@@ -19,4 +19,11 @@ mix.disableNotifications()
],
whitelistPatterns: [/language/, /hljs/],
whitelistPatternsChildren: [/^markdown$/]
+ })
+ .options({
+ postCss: [
+ require('postcss-import')(),
+ require('postcss-nesting')(),
+ ],
+ processCssUrls: false,
});
diff --git a/yarn.lock b/yarn.lock
index c74ad864..07aac5d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4337,7 +4337,7 @@ performance-now@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
-pify@^2.0.0:
+pify@^2.0.0, pify@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -4442,6 +4442,15 @@ postcss-functions@^3.0.0:
postcss "^6.0.9"
postcss-value-parser "^3.3.0"
+postcss-import@^12.0.1:
+ version "12.0.1"
+ resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-12.0.1.tgz#cf8c7ab0b5ccab5649024536e565f841928b7153"
+ dependencies:
+ postcss "^7.0.1"
+ postcss-value-parser "^3.2.3"
+ read-cache "^1.0.0"
+ resolve "^1.1.7"
+
postcss-js@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-1.0.1.tgz#ffaf29226e399ea74b5dce02cab1729d7addbc7b"
@@ -4583,6 +4592,12 @@ postcss-nested@^3.0.0:
postcss "^6.0.14"
postcss-selector-parser "^3.1.1"
+postcss-nesting@^7.0.0:
+ version "7.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.0.tgz#6e26a770a0c8fcba33782a6b6f350845e1a448f6"
+ dependencies:
+ postcss "^7.0.2"
+
postcss-normalize-charset@^1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
@@ -4711,6 +4726,14 @@ postcss@^7.0.0:
source-map "^0.6.1"
supports-color "^5.4.0"
+postcss@^7.0.1, postcss@^7.0.2:
+ version "7.0.5"
+ resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.5.tgz#70e6443e36a6d520b0fd4e7593fcca3635ee9f55"
+ dependencies:
+ chalk "^2.4.1"
+ source-map "^0.6.1"
+ supports-color "^5.5.0"
+
prepend-http@^1.0.0:
version "1.0.4"
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
@@ -4886,6 +4909,12 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
+read-cache@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+ dependencies:
+ pify "^2.3.0"
+
read-file-stdin@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/read-file-stdin/-/read-file-stdin-0.2.1.tgz#25eccff3a153b6809afacb23ee15387db9e0ee61"
@@ -5152,7 +5181,7 @@ resolve-url@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
-resolve@^1.4.0:
+resolve@^1.1.7, resolve@^1.4.0:
version "1.8.1"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
dependencies:
@@ -5701,7 +5730,7 @@ supports-color@^4.2.1:
dependencies:
has-flag "^2.0.0"
-supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0:
+supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
dependencies: