Use Less

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;
+}

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;
+}

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;
+    }
+}

assets/less/main.less

@@ -12,17 +12,6 @@ td {
     }
 }
 
-.nav-item {
+@import "components/nav";
-    .black-70;
+@import "components/post";
-    .dib;
+@import "components/talk";
-    .f6;
-    .link;
-    .pv3;
-}
-
-.nav-item--active {
-    .b--blue;
-    .bb;
-    .black;
-    .bw1;
-}

assets/sass/main.sass

@@ -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

assets/sass/post.sass

@@ -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

assets/sass/talk.sass

@@ -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%

gulpfile.config.js

@@ -1,6 +1,6 @@
 module.exports = function (plugins) {
     return {
-        sass: {
+        less: {
             autoprefixer: {
                 browsers: ["last 2 versions", "> 5%"],
                 cascade: false

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'
+        'node_modules/prismjs/themes/prism-twilight.css',
-    ], 'main.css');
+        config.less.sourceDir + '/main.less'
-
+    ], 'site.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');
 });
 
 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']);
 });

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 = [
+            <a
-                'nav-item',
+                href="{{ link.href }}"
-                not loop.first ? 'ml3',
+                class="nav-item {{ page.url matches '#^' ~ (link.pattern ?: link.href) ~ '/?#' ? 'nav-item--active' }}">
-                page.url matches '#^' ~ (link.pattern ?: link.href) ~ '/?#' ? 'nav-item--active',
-            ] %}
-            <a href="{{ link.href }}" class="{{ classes|join(' ') }}">
                 {{- link.title -}}
             </a>
         {% endfor %}

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>

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>

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 %}

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 %}

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 %}