From 2b6f80bf16f2ac64ebef1d847f0b1ee36294d234 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sun, 8 Oct 2017 09:26:41 +0100
Subject: [PATCH] Use Less

---
 assets/less/components/nav.less        | 19 ++++++++++++++
 assets/less/components/post.less       | 35 ++++++++++++++++++++++++++
 assets/less/components/talk.less       | 25 ++++++++++++++++++
 assets/less/main.less                  | 17 +++----------
 assets/sass/main.sass                  | 11 --------
 assets/sass/post.sass                  | 29 ---------------------
 assets/sass/talk.sass                  | 22 ----------------
 gulpfile.config.js                     |  2 +-
 gulpfile.js                            | 32 ++++++++---------------
 source/_includes/nav.html.twig         |  9 +++----
 source/_includes/talks-table.html.twig |  2 +-
 source/_layouts/default.html.twig      |  6 ++---
 source/_layouts/post.html.twig         |  8 ------
 source/_layouts/project.html.twig      |  4 ---
 source/_layouts/talk.html.twig         |  4 ---
 15 files changed, 101 insertions(+), 124 deletions(-)
 create mode 100644 assets/less/components/nav.less
 create mode 100644 assets/less/components/post.less
 create mode 100644 assets/less/components/talk.less
 delete mode 100644 assets/sass/main.sass
 delete mode 100644 assets/sass/post.sass
 delete mode 100644 assets/sass/talk.sass

diff --git a/assets/less/components/nav.less b/assets/less/components/nav.less
new file mode 100644
index 000000000..bec44a0bf
--- /dev/null
+++ b/assets/less/components/nav.less
@@ -0,0 +1,19 @@
+.nav-item {
+    .black-70;
+    .dib;
+    .f6;
+    .link;
+    .ml3;
+    .pv3;
+
+    &:first-child {
+        .ml0;
+    }
+}
+
+.nav-item--active {
+    .b--blue;
+    .bb;
+    .black;
+    .bw1;
+}
diff --git a/assets/less/components/post.less b/assets/less/components/post.less
new file mode 100644
index 000000000..3430e2c7c
--- /dev/null
+++ b/assets/less/components/post.less
@@ -0,0 +1,35 @@
+pre {
+    .db;
+    .overflow-auto;
+    word-break: normal;
+    word-wrap: no-wrap;
+}
+
+pre[class*="language-"] {
+    .bn;
+    .br0;
+}
+
+pre code {
+    .pre;
+    word-break: normal;
+}
+
+pre code .number {
+    .h-auto;
+    .mr0;
+    .pa0;
+    background-color: inherit;
+    font-size: inherit;
+    min-width: auto;
+}
+
+code.hljs {
+    .pa0;
+    background-color: inherit;
+}
+
+code[data-gist-id] {
+    .pa0;
+    background: transparent;
+}
diff --git a/assets/less/components/talk.less b/assets/less/components/talk.less
new file mode 100644
index 000000000..84d9a7083
--- /dev/null
+++ b/assets/less/components/talk.less
@@ -0,0 +1,25 @@
+.video {
+    padding-top: 56.25%;
+}
+
+.video iframe,
+.video embed {
+    .absolute;
+    .h-100;
+    .left-0;
+    .top-0;
+    .w-100;
+}
+
+.slides {
+    background-image: url('../images/loading.gif');
+    min-height: 275px;
+
+    @media @breakpoint-medium {
+        min-height: 460px;
+    }
+
+    @media @breakpoint-large {
+        min-height: 540px;
+    }
+}
diff --git a/assets/less/main.less b/assets/less/main.less
index 9c993bfdb..46efc8dea 100644
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -12,17 +12,6 @@ td {
     }
 }
 
-.nav-item {
-    .black-70;
-    .dib;
-    .f6;
-    .link;
-    .pv3;
-}
-
-.nav-item--active {
-    .b--blue;
-    .bb;
-    .black;
-    .bw1;
-}
+@import "components/nav";
+@import "components/post";
+@import "components/talk";
diff --git a/assets/sass/main.sass b/assets/sass/main.sass
deleted file mode 100644
index 57c4cfc5c..000000000
--- a/assets/sass/main.sass
+++ /dev/null
@@ -1,11 +0,0 @@
-@import "node_modules/tachyons-sass/scss/colors";
-
-$blue: #0678be
-
-@import "node_modules/tachyons-sass/tachyons";
-
-p,
-li,
-td
-    a
-        color: $blue
diff --git a/assets/sass/post.sass b/assets/sass/post.sass
deleted file mode 100644
index 3125a43f7..000000000
--- a/assets/sass/post.sass
+++ /dev/null
@@ -1,29 +0,0 @@
-#pre
-    display: block
-    overflow: auto
-    word-break: normal
-    word-wrap: no-wrap
-
-pre[class*="language-"]
-    border: 0
-    border-radius: 0
-
-pre code
-    white-space: pre
-    word-break: normal
-
-pre code .number
-    background-color: inherit
-    font-size: inherit
-    height: auto
-    margin-right: 0
-    min-width: auto
-    padding: 0
-
-code.hljs
-    background-color: inherit
-    padding: 0
-
-code[data-gist-id]
-    background: transparent
-    padding: 0
diff --git a/assets/sass/talk.sass b/assets/sass/talk.sass
deleted file mode 100644
index 0bd2eab6d..000000000
--- a/assets/sass/talk.sass
+++ /dev/null
@@ -1,22 +0,0 @@
-@import "./node_modules/tachyons-sass/scss/media-queries"
-
-.slides
-    background-image: url('../images/loading.gif')
-    min-height: 275px
-
-    @media #{$breakpoint-medium}
-        min-height: 460px
-
-    @media #{$breakpoint-large}
-        min-height: 540px
-
-.video
-    padding-top: 56.25%
-
-.video iframe,
-.video embed 
-  height: 100%
-  left: 0
-  position: absolute
-  top: 0
-  width: 100%
diff --git a/gulpfile.config.js b/gulpfile.config.js
index 14bb51bc0..6847c6348 100644
--- a/gulpfile.config.js
+++ b/gulpfile.config.js
@@ -1,6 +1,6 @@
 module.exports = function (plugins) {
     return {
-        sass: {
+        less: {
             autoprefixer: {
                 browsers: ["last 2 versions", "> 5%"],
                 cascade: false
diff --git a/gulpfile.js b/gulpfile.js
index a8388d28c..66376d2ba 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -12,19 +12,19 @@ app.copy = function (sourceFiles, destination) {
         .pipe(gulp.dest(destination));
 };
 
-app.sass = function (sourceFiles, outputFile) {
+app.css = function (sourceFiles, outputFile) {
     return gulp.src(sourceFiles)
         .pipe(plugins.plumber())
         .pipe(plugins.if(!config.production, plugins.sourcemaps.init()))
         .pipe(plugins.sassGlob())
         .pipe(plugins.less())
-        .pipe(plugins.autoprefixer(config.sass.autoprefixer))
+        .pipe(plugins.autoprefixer(config.less.autoprefixer))
         .pipe(plugins.concat(outputFile))
-        .pipe(plugins.if(config.production, plugins.purifycss(config.sass.purifyCss)))
+        .pipe(plugins.if(config.production, plugins.purifycss(config.less.purifyCss)))
         .pipe(plugins.if(config.production, plugins.cleanCss()))
         .pipe(plugins.if(!config.production, plugins.sourcemaps.write('.')))
         .pipe(plugins.if(!config.production, plugins.refresh()))
-        .pipe(gulp.dest(config.sass.outputDir));
+        .pipe(gulp.dest(config.less.outputDir));
 };
 
 app.js = function (sourceFiles, outputFile) {
@@ -49,35 +49,25 @@ gulp.task('fonts', function () {
 });
 
 gulp.task('styles', function () {
-    app.sass([
+    app.css([
         'node_modules/font-awesome/css/font-awesome.css',
-        config.sass.sourceDir + '/main.less'
-    ], 'main.css');
-
-    // app.sass([
-    //     'node_modules/prismjs/themes/prism-twilight.css',
-    //     config.sass.sourceDir + '/post.sass'
-    // ], 'post.css')
-
-    // app.sass(config.sass.sourceDir + '/talk.sass', 'talk.css');
+        'node_modules/prismjs/themes/prism-twilight.css',
+        config.less.sourceDir + '/main.less'
+    ], 'site.css');
 });
 
 gulp.task('scripts', function () {
-    app.js([
-        'node_modules/jquery/dist/jquery.js',
-        config.js.sourceDir + '/**/*.js'
-    ], 'main.js')
-
     app.js([
         'node_modules/jquery/dist/jquery.js',
         'node_modules/prismjs/prism.js',
         'node_modules/prismjs/components/prism-{apacheconf,bsash,css,diff,ini,json,nginx,php,sass,scss,sql,less,twig,xml,yaml}.js',
-    ], 'post.js')
+        config.js.sourceDir + '/**/*.js'
+    ], 'site.js')
 });
 
 gulp.task('watch', ['default'], function () {
     plugins.refresh.listen();
 
-    gulp.watch(config.sass.sourceDir + config.sass.pattern, ['styles']);
+    gulp.watch(config.less.sourceDir + config.less.pattern, ['styles']);
     gulp.watch(config.js.sourceDir + config.js.pattern, ['scripts']);
 });
diff --git a/source/_includes/nav.html.twig b/source/_includes/nav.html.twig
index e78b40329..0428246be 100644
--- a/source/_includes/nav.html.twig
+++ b/source/_includes/nav.html.twig
@@ -17,12 +17,9 @@
 
     <nav class="db dtc-ns v-mid w-100 tl tr-ns mt2 mt0-ns">
         {% for link in links %}
-            {% set classes = [
-                'nav-item',
-                not loop.first ? 'ml3',
-                page.url matches '#^' ~ (link.pattern ?: link.href) ~ '/?#' ? 'nav-item--active',
-            ] %}
-            <a href="{{ link.href }}" class="{{ classes|join(' ') }}">
+            <a
+                href="{{ link.href }}"
+                class="nav-item {{ page.url matches '#^' ~ (link.pattern ?: link.href) ~ '/?#' ? 'nav-item--active' }}">
                 {{- link.title -}}
             </a>
         {% endfor %}
diff --git a/source/_includes/talks-table.html.twig b/source/_includes/talks-table.html.twig
index d86244974..81d210fea 100644
--- a/source/_includes/talks-table.html.twig
+++ b/source/_includes/talks-table.html.twig
@@ -1,5 +1,5 @@
 <div class="overflow-auto">
-    <table class="w-100 ba b--moon-gray">
+    <table class="w-100 ba b--black-20">
         <thead>
             <tr class="striped--near-white">
                 <th class="w-20-l pa2 tl bg-white">Date</th>
diff --git a/source/_layouts/default.html.twig b/source/_layouts/default.html.twig
index a24a1d7e0..2ac3adaf4 100644
--- a/source/_layouts/default.html.twig
+++ b/source/_layouts/default.html.twig
@@ -13,7 +13,7 @@
 
         {% include 'og' with { og: page.meta.og } %}
 
-        <link rel="stylesheet" href="{{ site.url }}/assets/css/main.css">
+        <link rel="stylesheet" href="{{ site.url }}/assets/css/site.css">
         {% block stylesheets '' %}
 
         {% for size in site.apple_touch_icon_sizes %}
@@ -48,7 +48,7 @@
                 </div>
             </div>
 
-            <footer class="mw9 center mt4 bt b--moon-gray">
+            <footer class="mw9 center mt4 bt b--black-20">
                 <p class="f6">
                     &copy; 2010-{{ 'now'|date('Y') }} {{ site.title }}. Built with <a href="https://sculpin.io">Sculpin</a>.
                 </p>
@@ -57,7 +57,7 @@
             </footer>
         </div>
 
-        <script src="{{ site.url }}/assets/js/main.js"></script>
+        <script src="{{ site.url }}/assets/js/site.js"></script>
 
         {% if site.google_analytics_tracking_id %}
             <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '{{ site.google_analytics_tracking_id }}', 'auto'); ga('send', 'pageview');</script>
diff --git a/source/_layouts/post.html.twig b/source/_layouts/post.html.twig
index 08413d9de..4f5dd97df 100644
--- a/source/_layouts/post.html.twig
+++ b/source/_layouts/post.html.twig
@@ -10,11 +10,3 @@
     {% include 'post/pager' %}
     {% include 'post/about-author' %}
 {% endblock %}
-
-{% block stylesheets %}
-    <link rel="stylesheet" href="{{ site.url }}/assets/css/post.css">
-{% endblock %}
-
-{% block scripts %}
-    <script src="{{ site.url }}/assets/js/post.js"></script>
-{% endblock %}
diff --git a/source/_layouts/project.html.twig b/source/_layouts/project.html.twig
index c7c424ff0..87e6a1356 100644
--- a/source/_layouts/project.html.twig
+++ b/source/_layouts/project.html.twig
@@ -11,7 +11,3 @@
     {% include 'project/skills' %}
     {% include 'project/company' %}
 {% endblock %}
-
-{% block stylesheets %}
-    <link rel="stylesheet" href="{{ site.url }}/assets/css/project.css">
-{% endblock %}
diff --git a/source/_layouts/talk.html.twig b/source/_layouts/talk.html.twig
index 5fcb715b3..bb312ed17 100644
--- a/source/_layouts/talk.html.twig
+++ b/source/_layouts/talk.html.twig
@@ -9,7 +9,3 @@
     {% include 'talk/video' %}
     {% include 'talk/events' %}
 {% endblock %}
-
-{% block stylesheets %}
-    <link rel="stylesheet" href="{{ site.url }}/assets/css/talk.css">
-{% endblock %}