From 5cf3b223346e16d0fdd7e7d6b07aad31c5ef63ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20van=20Br=C3=BCgge?= <supermanitu@gmail.com>
Date: Thu, 25 Apr 2024 17:23:04 +0100
Subject: [PATCH] Add colors for comments

---
 Makefile        | 12 ++++++++++++
 flake.nix       |  2 ++
 static/main.css | 22 ++++++++++++++++++----
 3 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 Makefile

diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..d1762d6
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,12 @@
+.PHONY: all watch
+
+all:
+	cabal run blog
+
+watch:
+	make all
+	(cd build && browser-sync start --server -w) &
+	while inotifywait -e modify -r ./articles; do \
+		make all; \
+	done
+
diff --git a/flake.nix b/flake.nix
index 2e74a69..90c7cb5 100644
--- a/flake.nix
+++ b/flake.nix
@@ -13,6 +13,8 @@
           haskell.compiler.ghc96
           pkg-config
           zlib.dev
+          inotify-tools
+          nodePackages.browser-sync
         ];
       };
     }
diff --git a/static/main.css b/static/main.css
index b5ee446..565d029 100644
--- a/static/main.css
+++ b/static/main.css
@@ -18,9 +18,11 @@ html {
   --highlight-color: #9861c1;
 
   --solarized-green: #859900;
+  --solarized-yellow: #b58900;
   --solarized-function: #268bd2;
   --solarized-variable: #cb4b16;
   --solarized-string: #2aa198;
+  --solarized-comment: #586e75;
 }
 
 body {
@@ -131,21 +133,27 @@ article > header ul {
   padding: 0 0.2em;
 }
 
-p code {
+article ul {
+  margin-left: 1em;
+  margin-bottom: 0.5em;
+  margin-top: 0.5em;
+}
+
+p code, li code {
   background: var(--hover-color);
   padding: 0.1em;
   border-radius: 0.2em;
 }
 
 pre {
-  margin: 0.5em;
-  padding: 0.2em;
+  margin: 1em 0.5em;
+  padding: 0.8em 0.4em;
   background: rgb(0, 43, 54);
   overflow-x: scroll;
   color: var(--solarized-function);
 }
 
-.kw, .cf {
+.kw, .cf, .op {
   color: var(--solarized-green);
 }
 .fu {
@@ -154,6 +162,12 @@ pre {
 .st {
   color: var(--solarized-string);
 }
+.dt {
+  color: var(--solarized-yellow);
+}
+.co {
+  color: var(--solarized-comment);
+}
 
 p + p {
   margin-top: 0.8em;