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',