feat: add code-blocks styling

3 files changed, 232 insertions, 5 deletions

diff --git a/Makefile b/Makefile
index 359c8a3..da817c9 100644
--- a/Makefile
+++ b/Makefile
@@ -6,7 +6,7 @@ STYLESHEET=/style.css
 HEADER=header.html
 ICON=icon.html
 PAGETITLE="Eugene's Space"
-PANDOC_ARGS=-s --from=$(MARKDOWN) --to=html -c $(STYLESHEET) -B $(HEADER) -H $(ICON) -M pagetitle=$(PAGETITLE) --shift-heading-level-by=1
+PANDOC_ARGS=-s --from=$(MARKDOWN) --to=html -c $(STYLESHEET) -B $(HEADER) -H $(ICON) -M pagetitle=$(PAGETITLE) --shift-heading-level-by=1 --highlight-style=gruvbox.theme
 
 LINK_SEDSTRING=s/.md)/.html)/g;
 EMOJI_SEDSTRING=$(shell ./compile_emoji_sedstring.sh)
diff --git a/gruvbox.theme b/gruvbox.theme
new file mode 100644
index 0000000..4023e34
--- /dev/null
+++ b/gruvbox.theme
@@ -0,0 +1,225 @@
+{
+    "text-color": "#cfcfc2",
+    "background-color": "#121212",
+    "line-number-color": "#7a7c7d",
+    "line-number-background-color": "#232629",
+    "text-styles": {
+        "Annotation": {
+            "text-color": "#3f8058",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Information": {
+            "text-color": "#c45b00",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Keyword": {
+            "text-color": "#cfcfc2",
+            "background-color": null,
+            "bold": true,
+            "italic": false,
+            "underline": false
+        },
+        "SpecialChar": {
+            "text-color": "#3daee9",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Preprocessor": {
+            "text-color": "#27ae60",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Constant": {
+            "text-color": "#27aeae",
+            "background-color": null,
+            "bold": true,
+            "italic": false,
+            "underline": false
+        },
+        "CommentVar": {
+            "text-color": "#7f8c8d",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Alert": {
+            "text-color": "#95da4c",
+            "background-color": "#4d1f24",
+            "bold": true,
+            "italic": false,
+            "underline": false
+        },
+        "Comment": {
+            "text-color": "#7a7c7d",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Normal": {
+            "text-color": "#cfcfc2",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Float": {
+            "text-color": "#f67400",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Operator": {
+            "text-color": "#cfcfc2",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Import": {
+            "text-color": "#27ae60",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "ControlFlow": {
+            "text-color": "#fdbc4b",
+            "background-color": null,
+            "bold": true,
+            "italic": false,
+            "underline": false
+        },
+        "Documentation": {
+            "text-color": "#a43340",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Function": {
+            "text-color": "#8e44ad",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "RegionMarker": {
+            "text-color": "#2980b9",
+            "background-color": "#153042",
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Warning": {
+            "text-color": "#da4453",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "VerbatimString": {
+            "text-color": "#da4453",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Other": {
+            "text-color": "#27ae60",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Attribute": {
+            "text-color": "#2980b9",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "SpecialString": {
+            "text-color": "#da4453",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "BuiltIn": {
+            "text-color": "#7f8c8d",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Extension": {
+            "text-color": "#0099ff",
+            "background-color": null,
+            "bold": true,
+            "italic": false,
+            "underline": false
+        },
+        "DecVal": {
+            "text-color": "#f67400",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Variable": {
+            "text-color": "#27aeae",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "BaseN": {
+            "text-color": "#f67400",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "DataType": {
+            "text-color": "#2980b9",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Char": {
+            "text-color": "#3daee9",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        },
+        "Error": {
+            "text-color": "#da4453",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": true
+        },
+        "String": {
+            "text-color": "#f44f4f",
+            "background-color": null,
+            "bold": false,
+            "italic": false,
+            "underline": false
+        }
+    }
+}
diff --git a/style.css b/style.css
index 00d7707..1a3ffc4 100644
--- a/style.css
+++ b/style.css
@@ -61,20 +61,22 @@ code {
   font-size: 85%;
   margin: 0;
   padding: 4px;
-  background: black;
+  background: #121212;
   border-radius: 4px;
 }
 pre {
   margin: 1em 0;
   overflow: auto;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  padding: 8px 4px;
 }
 pre code {
-  padding: 0;
   overflow: visible;
 }
 .sourceCode {
- background-color: transparent;
- overflow: visible;
+  background-color: transparent;
+  overflow: visible;
+  border-radius: 4px;
 }
 hr {
   background-color: #1a1a1a;