use sass + fix code hightlight

18 files changed, 91 insertions, 65 deletions

diff --git a/_config.yml b/_config.yml
index f4870e1..d14546c 100644
--- a/_config.yml
+++ b/_config.yml
@@ -11,3 +11,7 @@ defaults:
     values:
       layout: post
       lang: en
+markdown: kramdown
+sass:
+  style: compressed
+  sourcemap: development
diff --git a/_includes/head.html b/_includes/head.html
index a3f2a9a..ff907a0 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,14 +1,3 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<link rel="stylesheet" href="/css/button.css">
-<link rel="stylesheet" href="/css/card.css">
-<link rel="stylesheet" href="/css/code.css">
-<link rel="stylesheet" href="/css/globals.css">
-<link rel="stylesheet" href="/css/image.css">
-<link rel="stylesheet" href="/css/layout.css">
-<link rel="stylesheet" href="/css/navbar.css">
-<link rel="stylesheet" href="/css/print.css">
-<link rel="stylesheet" href="/css/search.css">
-<link rel="stylesheet" href="/css/tags.css">
-<link rel="stylesheet" href="/css/theme.css">
-<link rel="stylesheet" href="/css/separator.css">
+<link rel="stylesheet" href="/style.css">
diff --git a/css/button.css b/_sass/button.css
index 9efe41f..9efe41f 100644
--- a/css/button.css
+++ b/_sass/button.css
diff --git a/css/card.css b/_sass/card.css
index 58037b5..58037b5 100644
--- a/css/card.css
+++ b/_sass/card.css
diff --git a/_sass/code.scss b/_sass/code.scss
new file mode 100644
index 0000000..331b5bd
--- /dev/null
+++ b/_sass/code.scss
@@ -0,0 +1,52 @@
+pre {
+	background-color: var(--bg-alt);
+	border-radius: 6px;
+	padding: 6px;
+}
+
+pre.highlight {
+	code { color: var(--magnolia); }
+	// https://github.com/rouge-ruby/rouge/wiki/List-of-tokens
+	@each $c in c,cm,cp,c1,cs { .#{$c} { @extend %token_comment } }
+	@each $c in k,kc,kd,kn,kp,kr,kt { .#{$c} { @extend %token_keyword } }
+	@each $c in s,sb,sc,sd,s2,se,sh,si,sx,sr,s1,ss { .#{$c} { @extend %token_string } }
+	@each $c in m,mf,mh,mi,il,mo,mx,mb { .#{$c} { @extend %token_number } }
+	@each $c in o,ow { .#{$c} { @extend %token_operator } }
+}
+
+%token_comment
+{ font-style: italic; }
+
+%token_keyword
+{ font-weight: 700; }
+
+%token_string,
+%token_number
+{ color: var(--fg); }
+
+%token_comment {
+	color: var(--heliotrope-gray);
+	opacity: .7;
+}
+
+%token_keyword
+{ color: var(--fire-opal); }
+
+%token_operator
+{ opacity: .8; }
+
+@media (prefers-color-scheme: light) {
+	pre { background-color: var(--heliotrope-gray); }
+
+	pre.highlight code { color: var(--fg); }
+
+	%token_string,
+	%token_number
+	{ opacity: .8; }
+
+	%token_comment {
+		color: var(--oxford-blue);
+		opacity: .5;
+	}
+}
+
diff --git a/css/globals.css b/_sass/globals.css
index 81c0b75..81c0b75 100644
--- a/css/globals.css
+++ b/_sass/globals.css
diff --git a/css/image.css b/_sass/image.css
index 3e98ae4..3e98ae4 100644
--- a/css/image.css
+++ b/_sass/image.css
diff --git a/css/layout.css b/_sass/layout.css
index 706f5c9..706f5c9 100644
--- a/css/layout.css
+++ b/_sass/layout.css
diff --git a/css/navbar.css b/_sass/navbar.css
index 10933a0..10933a0 100644
--- a/css/navbar.css
+++ b/_sass/navbar.css
diff --git a/css/print.css b/_sass/print.css
index 4867c83..4867c83 100644
--- a/css/print.css
+++ b/_sass/print.css
diff --git a/css/search.css b/_sass/search.css
index e424b6b..e424b6b 100644
--- a/css/search.css
+++ b/_sass/search.css
diff --git a/css/separator.css b/_sass/separator.css
index 24ee769..24ee769 100644
--- a/css/separator.css
+++ b/_sass/separator.css
diff --git a/css/tags.css b/_sass/tags.css
index 2468d3f..2468d3f 100644
--- a/css/tags.css
+++ b/_sass/tags.css
diff --git a/css/theme.css b/_sass/theme.css
index c3a8dee..c3a8dee 100644
--- a/css/theme.css
+++ b/_sass/theme.css
diff --git a/atom.xml b/atom.xml
index f882360..5d51abd 100644
--- a/atom.xml
+++ b/atom.xml
@@ -1,5 +1,4 @@
 ---
-# empty frontmatter to force this file to be interpreted using liquid
 ---
 {% for post in site.pages %}
 	{% if post.layout == "index" %}
diff --git a/css/code.css b/css/code.css
deleted file mode 100644
index dde7bdb..0000000
--- a/css/code.css
+++ /dev/null
@@ -1,49 +0,0 @@
-pre {
-	background-color: var(--bg-alt);
-	border-radius: 6px;
-	padding: 6px;
-}
-
-.prismjs code { color: var(--magnolia); }
-
-.prismjs .token.comment
-{ font-style: italic; }
-
-.prismjs .token.keyword,
-.prismjs .token.annotation
-{ font-weight: 700; }
-
-.prismjs .token.string,
-.prismjs .token.number
-{ color: var(--fg); }
-
-.prismjs .token.comment {
-	color: var(--heliotrope-gray);
-	opacity: .7;
-}
-
-.prismjs .token.keyword
-{ color: var(--fire-opal); }
-
-.prismjs .token.annotation
-{ color: var(--cyan-process); }
-
-.prismjs .token.punctuation:not(.annotation)
-.prismjs .token.operator
-{ opacity: .8; }
-
-@media (prefers-color-scheme: light) {
-	pre { background-color: var(--heliotrope-gray); }
-
-	.prismjs code { color: var(--fg); }
-
-	.prismjs .token.string,
-	.prismjs .token.number
-	{ opacity: .8; }
-
-	.prismjs .token.comment {
-		color: var(--oxford-blue);
-		opacity: .5;
-	}
-}
-
diff --git a/makefile b/makefile
index ddbddcd..b5f594d 100644
--- a/makefile
+++ b/makefile
@@ -1,5 +1,20 @@
-build:
-	bundle exec jekyll build --quiet
+JEKYLL_ENV ?= development
+# JEKYLL_ENV ?= production
+
+WEBROOT ?= _site
+
+JEKYLL_BUILD_ARGS += --quiet
+JEKYLL_BUILD_ARGS += --destination $(WEBROOT)
+
+# Gemfile.lock is used as a proxy for checking if the required gems are
+# installed
+
+build: Gemfile.lock
+	bundle exec jekyll build $(JEKYLL_BUILD_ARGS)
+
+Gemfile.lock: Gemfile
+	bundle install --quiet
 
 clean:
-	$(RM) -r _site
+	$(RM) -r $(WEBROOT)
+
diff --git a/style.scss b/style.scss
new file mode 100644
index 0000000..ce9d442
--- /dev/null
+++ b/style.scss
@@ -0,0 +1,16 @@
+---
+---
+
+@import "theme";
+@import "globals";
+@import "layout";
+
+@import "button";
+@import "card";
+@import "code";
+@import "image";
+@import "navbar";
+@import "print";
+@import "search";
+@import "tags";
+@import "separator";