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 {
-    .black-70;
-    .dib;
-    .f6;
-    .link;
-    .pv3;
-}
-
-.nav-item--active {
-    .b--blue;
-    .bb;
-    .black;
-    .bw1;
-}
+@import "components/nav";
+@import "components/post";
+@import "components/talk";

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%