From 702db993f664b73d640447197cd8423f9e74b86f Mon Sep 17 00:00:00 2001 From: andrzej Date: Thu, 14 Nov 2024 19:45:16 +0100 Subject: [PATCH] styling, syntax highlighting --- hugo.toml | 4 + public/categories/index.html | 14 +-- public/css/main.css | 81 ++++++++++++++++- public/css/syntax.css | 86 +++++++++++++++++++ public/index.html | 14 +-- public/posts/hard-problem/index.html | 32 +++---- public/posts/index.html | 14 +-- .../posts/permissions-strike-again/index.html | 14 +-- public/posts/post-1/index.html | 14 +-- public/posts/post-2/index.html | 14 +-- public/posts/post-3/index.html | 14 +-- public/tags/blue/index.html | 14 +-- public/tags/green/index.html | 14 +-- public/tags/index.html | 14 +-- public/tags/red/index.html | 14 +-- themes/cuqui/assets/css/main.css | 81 ++++++++++++++++- themes/cuqui/assets/css/syntax.css | 86 +++++++++++++++++++ themes/cuqui/layouts/partials/head.html | 12 +-- themes/cuqui/layouts/partials/head/css.html | 21 +++-- 19 files changed, 459 insertions(+), 98 deletions(-) create mode 100644 public/css/syntax.css create mode 100644 themes/cuqui/assets/css/syntax.css diff --git a/hugo.toml b/hugo.toml index a6dda10..b3f9f0a 100644 --- a/hugo.toml +++ b/hugo.toml @@ -2,3 +2,7 @@ baseURL = 'https://example.org/' languageCode = 'en-us' title = 'My New Hugo Site' theme = "cuqui" +[markup] + [markup.highlight] + noClasses = false + diff --git a/public/categories/index.html b/public/categories/index.html index f754d5b..1af961d 100644 --- a/public/categories/index.html +++ b/public/categories/index.html @@ -1,13 +1,15 @@ - - -Categories | My New Hugo Site - - - + + + + Categories | My New Hugo Site + + + + diff --git a/public/css/main.css b/public/css/main.css index 166ade9..c72d4f5 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -1,5 +1,63 @@ +:root { + /* Rosé Pine Dawn */ + --rp-base: hsl(32deg, 57%, 95%); + --rp-surface: hsl(35deg, 100%, 98%); + --rp-overlay: hsl(33deg, 43%, 91%); + --rp-muted: hsl(257deg, 9%, 61%); + --rp-subtle: hsl(248deg, 12%, 52%); + --rp-text: hsl(248deg, 19%, 40%); + --rp-love: hsl(343deg, 35%, 55%); + --rp-gold: hsl(35deg, 81%, 56%); + --rp-rose: hsl(3deg, 53%, 67%); + --rp-pine: hsl(197deg, 53%, 34%); + --rp-foam: hsl(189deg, 30%, 48%); + --rp-iris: hsl(268deg, 21%, 57%); + --rp-highlight-low: hsl(25deg, 35%, 93%); + --rp-highlight-med: hsl(10deg, 9%, 86%); + --rp-highlight-high: hsl(315deg, 4%, 80%); +} + +@media (prefers-color-scheme: dark) { + :root { + /* Rosé Pine */ + --rp-base: hsl(249deg, 22%, 12%); + --rp-surface: hsl(247deg, 23%, 15%); + --rp-overlay: hsl(248deg, 25%, 18%); + --rp-muted: hsl(249deg, 12%, 47%); + --rp-subtle: hsl(248deg, 15%, 61%); + --rp-text: hsl(245deg, 50%, 91%); + --rp-love: hsl(343deg, 76%, 68%); + --rp-gold: hsl(35deg, 88%, 72%); + --rp-rose: hsl(2deg, 55%, 83%); + --rp-pine: hsl(197deg, 49%, 38%); + --rp-foam: hsl(189deg, 43%, 73%); + --rp-iris: hsl(267deg, 57%, 78%); + --rp-highlight-low: hsl(244deg, 18%, 15%); + --rp-highlight-med: hsl(249deg, 15%, 28%); + --rp-highlight-high: hsl(248deg, 13%, 36%); + + /* Rosé Pine Moon */ + /* --rp-base: hsl(246deg, 24%, 17%); */ + /* --rp-surface: hsl(248deg, 24%, 20%); */ + /* --rp-overlay: hsl(248deg, 21%, 26%); */ + /* --rp-muted: hsl(249deg, 12%, 47%); */ + /* --rp-subtle: hsl(248deg, 15%, 61%); */ + /* --rp-text: hsl(245deg, 50%, 91%); */ + /* --rp-love: hsl(343deg, 76%, 68%); */ + /* --rp-gold: hsl(35deg, 88%, 72%); */ + /* --rp-rose: hsl(2deg, 66%, 75%); */ + /* --rp-pine: hsl(197deg, 48%, 47%); */ + /* --rp-foam: hsl(189deg, 43%, 73%); */ + /* --rp-iris: hsl(267deg, 57%, 78%); */ + /* --rp-highlight-low: hsl(245deg, 22%, 20%); */ + /* --rp-highlight-med: hsl(247deg, 16%, 30%); */ + /* --rp-highlight-high: hsl(249deg, 15%, 38%); */ + } +} + body { - color: #222; + background-color: var(--rp-base); + color: var(--rp-text); font-family: sans-serif; line-height: 1.5; margin: 1rem; @@ -9,6 +67,7 @@ body { header { border-bottom: 1px solid #222; margin-bottom: 1rem; + /* background-color: var(--rp-muted); */ } footer { @@ -17,6 +76,24 @@ footer { } a { - color: #00e; + color: var(--rp-foam); text-decoration: none; } + +a:visited { + color: var(--rp-pine); +} + +h1 { + color: var(--rp-gold); +} + +h2 { + color: var(--rp-iris); +} + +code pre { + background-color: var(--rp-surface); + padding: 0.6em; + border-radius: 1em; +} diff --git a/public/css/syntax.css b/public/css/syntax.css new file mode 100644 index 0000000..c8c1526 --- /dev/null +++ b/public/css/syntax.css @@ -0,0 +1,86 @@ +/* Background */ .bg { color:#e0def4;background-color:#232136; } +/* PreWrapper */ .chroma { color:#e0def4;background-color:#232136; } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { color:#eb6f92 } +/* CodeLine */ .chroma .cl { } +/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } +/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } +/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; } +/* LineHighlight */ .chroma .hl { background-color:#39374a } +/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } +/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } +/* Line */ .chroma .line { display:flex; } +/* Keyword */ .chroma .k { color:#3e8fb0 } +/* KeywordConstant */ .chroma .kc { color:#3e8fb0 } +/* KeywordDeclaration */ .chroma .kd { color:#3e8fb0 } +/* KeywordNamespace */ .chroma .kn { color:#c4a7e7 } +/* KeywordPseudo */ .chroma .kp { color:#3e8fb0 } +/* KeywordReserved */ .chroma .kr { color:#3e8fb0 } +/* KeywordType */ .chroma .kt { color:#3e8fb0 } +/* Name */ .chroma .n { color:#ea9a97 } +/* NameAttribute */ .chroma .na { color:#ea9a97 } +/* NameBuiltin */ .chroma .nb { color:#ea9a97 } +/* NameBuiltinPseudo */ .chroma .bp { color:#ea9a97 } +/* NameClass */ .chroma .nc { color:#9ccfd8 } +/* NameConstant */ .chroma .no { color:#f6c177 } +/* NameDecorator */ .chroma .nd { color:#908caa } +/* NameEntity */ .chroma .ni { color:#ea9a97 } +/* NameException */ .chroma .ne { color:#3e8fb0 } +/* NameFunction */ .chroma .nf { color:#ea9a97 } +/* NameFunctionMagic */ .chroma .fm { color:#ea9a97 } +/* NameLabel */ .chroma .nl { color:#ea9a97 } +/* NameNamespace */ .chroma .nn { color:#ea9a97 } +/* NameOther */ .chroma .nx { } +/* NameProperty */ .chroma .py { color:#ea9a97 } +/* NameTag */ .chroma .nt { color:#ea9a97 } +/* NameVariable */ .chroma .nv { color:#ea9a97 } +/* NameVariableClass */ .chroma .vc { color:#ea9a97 } +/* NameVariableGlobal */ .chroma .vg { color:#ea9a97 } +/* NameVariableInstance */ .chroma .vi { color:#ea9a97 } +/* NameVariableMagic */ .chroma .vm { color:#ea9a97 } +/* Literal */ .chroma .l { color:#f6c177 } +/* LiteralDate */ .chroma .ld { color:#f6c177 } +/* LiteralString */ .chroma .s { color:#f6c177 } +/* LiteralStringAffix */ .chroma .sa { color:#f6c177 } +/* LiteralStringBacktick */ .chroma .sb { color:#f6c177 } +/* LiteralStringChar */ .chroma .sc { color:#f6c177 } +/* LiteralStringDelimiter */ .chroma .dl { color:#f6c177 } +/* LiteralStringDoc */ .chroma .sd { color:#f6c177 } +/* LiteralStringDouble */ .chroma .s2 { color:#f6c177 } +/* LiteralStringEscape */ .chroma .se { color:#3e8fb0 } +/* LiteralStringHeredoc */ .chroma .sh { color:#f6c177 } +/* LiteralStringInterpol */ .chroma .si { color:#f6c177 } +/* LiteralStringOther */ .chroma .sx { color:#f6c177 } +/* LiteralStringRegex */ .chroma .sr { color:#f6c177 } +/* LiteralStringSingle */ .chroma .s1 { color:#f6c177 } +/* LiteralStringSymbol */ .chroma .ss { color:#f6c177 } +/* LiteralNumber */ .chroma .m { color:#f6c177 } +/* LiteralNumberBin */ .chroma .mb { color:#f6c177 } +/* LiteralNumberFloat */ .chroma .mf { color:#f6c177 } +/* LiteralNumberHex */ .chroma .mh { color:#f6c177 } +/* LiteralNumberInteger */ .chroma .mi { color:#f6c177 } +/* LiteralNumberIntegerLong */ .chroma .il { color:#f6c177 } +/* LiteralNumberOct */ .chroma .mo { color:#f6c177 } +/* Operator */ .chroma .o { color:#908caa } +/* OperatorWord */ .chroma .ow { color:#908caa } +/* Punctuation */ .chroma .p { color:#908caa } +/* Comment */ .chroma .c { color:#6e6a86 } +/* CommentHashbang */ .chroma .ch { color:#6e6a86 } +/* CommentMultiline */ .chroma .cm { color:#6e6a86 } +/* CommentSingle */ .chroma .c1 { color:#6e6a86 } +/* CommentSpecial */ .chroma .cs { color:#6e6a86 } +/* CommentPreproc */ .chroma .cp { color:#6e6a86 } +/* CommentPreprocFile */ .chroma .cpf { color:#6e6a86 } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color:#eb6f92 } +/* GenericEmph */ .chroma .ge { font-style:italic } +/* GenericError */ .chroma .gr { } +/* GenericHeading */ .chroma .gh { } +/* GenericInserted */ .chroma .gi { color:#9ccfd8 } +/* GenericOutput */ .chroma .go { } +/* GenericPrompt */ .chroma .gp { } +/* GenericStrong */ .chroma .gs { font-weight:bold } +/* GenericSubheading */ .chroma .gu { color:#c4a7e7 } +/* GenericTraceback */ .chroma .gt { } +/* GenericUnderline */ .chroma .gl { } +/* TextWhitespace */ .chroma .w { } diff --git a/public/index.html b/public/index.html index 1262745..de89dd4 100644 --- a/public/index.html +++ b/public/index.html @@ -2,13 +2,15 @@ - - -My New Hugo Site - - - + + + + My New Hugo Site + + + + diff --git a/public/posts/hard-problem/index.html b/public/posts/hard-problem/index.html index c7626f3..242b49e 100644 --- a/public/posts/hard-problem/index.html +++ b/public/posts/hard-problem/index.html @@ -1,13 +1,15 @@ - - -Hard Problem: Invalidating the browser cache | My New Hugo Site - - - + + + + Hard Problem: Invalidating the browser cache | My New Hugo Site + + + + @@ -45,27 +47,27 @@

The experienced computer touchers amongst you will be saying “this is obviously a cache problem”, and you’re right, it is obviously a cache problem. Pressing CTR + SHIFT + R (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the problem handily for me, on my machine. But what about other people’s machines?

Invalidating cached HTML

The best way to deal with this problem is to tell the browser not to cache our HTML in the first place. We can achieve this by adding the following meta tag to index.html, and any other HTML files we don’t want cached.

-
  <meta http-equiv="pragma" content="no-cache" />
+
  <meta http-equiv="pragma" content="no-cache" />
 
Invalidating cached CSS

 
A quick google search revealed that the best way to invalidate browser cache is by changing the url of the file you’re telling it to load. So we would change this:

-
<link rel="stylesheet" href="css/defaults.css" />
+
<link rel="stylesheet" href="css/defaults.css" />
 
to this:

-
<link rel="stylesheet" href="css/defaults-2.css" />
+
<link rel="stylesheet" href="css/defaults-2.css" />
 
and the browser would recognize this as new file and load it from the server. Problem solved! Of course, you would have to change the file name too…

-
mv css/defaults.css css/defaults-2.css
+
mv css/defaults.css css/defaults-2.css
 
… and this would get tedious very quickly. Furthermore, it’s going to make a mess of your version history if, as far as Git is concerned, you’re deleting the CSS file and writing a new one with every deployment. Surely there’s a better way?

 
Using a query

 
Of course there is. Look at this:

-
<link rel="stylesheet" href="css/defaults.css?v=2"/>
+
<link rel="stylesheet" href="css/defaults.css?v=2"/>
 
As we’re requesting the file via http, we can append a query. Awesome. Not awesome enough though. I’m too lazy to do this every time I push a commit, and, being human, I’ll probably forget at a critical moment. This can only mean one thing. It’s time to bash (🤣) out a quick build script!

-
#!/usr/bin/env bash
-COMMIT="$(git rev-parse HEAD)"
-sed -i "s/css?=\w*/css?v=${COMMIT}/g" index.html
+
#!/usr/bin/env bash
+COMMIT="$(git rev-parse HEAD)"
+sed -i "s/css?=\w*/css?v=${COMMIT}/g" index.html
 
Let’s talk real quick about what’s happening here:

 
COMMIT="$(git rev-parse HEAD)" gets the commit id from Git and assigns it the variable $COMMIT.

 
Then, sed -i "s/css?=\w*/css?v=${COMMIT}/g" index.html does a find and replace on index.html. The regular expression css?=\w* matches ‘css?=’ plus any number of contiguous alphanumeric characters (everything until the next quote mark, basically) before replacing these alphanumeric characters with the commit id. The flag -i tells sed to edit the file in place. The g tells it to perform the operation on the whole file.

 
Now, whenever we push a new commit, any CSS imports in index.html will be changed to something like this:

-
<link rel="stylesheet" href="css/styles.css?v=ab10c24280844c10c10c1adfb8b85b03b316f72b" />
+
<link rel="stylesheet" href="css/styles.css?v=ab10c24280844c10c10c1adfb8b85b03b316f72b" />
 
Pretty neat, huh?

 
There’s just one thing bugging me: surely I do actually want the CSS to be cached sometimes. Caching exists for a reason, and I don’t want to sacrifice performance. Maybe I can modify the build script so that it only updates the CSS imports when the CSS files have changed… Sounds like a topic for another blogpost!

 
diff --git a/public/posts/index.html b/public/posts/index.html
index 50d7c37..9c21b06 100644
--- a/public/posts/index.html
+++ b/public/posts/index.html
@@ -1,13 +1,15 @@
 
 
 
-  
-
-Posts | My New Hugo Site
-
-    
-
+  
+
+
+  Posts | My New Hugo Site
+
 
+
+
+ 
       
 
 
diff --git a/public/posts/permissions-strike-again/index.html b/public/posts/permissions-strike-again/index.html
index 6c2d7bb..84eaa7c 100644
--- a/public/posts/permissions-strike-again/index.html
+++ b/public/posts/permissions-strike-again/index.html
@@ -1,13 +1,15 @@
 
 
 
-  
-
-Permissions Strike Again | My New Hugo Site
-
-    
-
+  
+
+
+  Permissions Strike Again | My New Hugo Site
+
 
+
+
+ 
       
 
 
diff --git a/public/posts/post-1/index.html b/public/posts/post-1/index.html
index 3530de5..122362a 100644
--- a/public/posts/post-1/index.html
+++ b/public/posts/post-1/index.html
@@ -1,13 +1,15 @@
 
 
 
-  
-
-Post 1 | My New Hugo Site
-
-    
-
+  
+
+
+  Post 1 | My New Hugo Site
+
 
+
+
+ 
       
 
 
diff --git a/public/posts/post-2/index.html b/public/posts/post-2/index.html
index 2e77b60..bca05f9 100644
--- a/public/posts/post-2/index.html
+++ b/public/posts/post-2/index.html
@@ -1,13 +1,15 @@
 
 
 
-  
-
-Post 2 | My New Hugo Site
-
-    
-
+  
+
+
+  Post 2 | My New Hugo Site
+
 
+
+
+ 
       
 
 
diff --git a/public/posts/post-3/index.html b/public/posts/post-3/index.html
index d6ecda0..6e2cb31 100644
--- a/public/posts/post-3/index.html
+++ b/public/posts/post-3/index.html
@@ -1,13 +1,15 @@
 
 
 
-  
-
-Post 3 | My New Hugo Site
-
-    
-
+  
+
+
+  Post 3 | My New Hugo Site
+
 
+
+
+ 
       
 
 
diff --git a/public/tags/blue/index.html b/public/tags/blue/index.html
index 83c8436..da30466 100644
--- a/public/tags/blue/index.html
+++ b/public/tags/blue/index.html
@@ -1,13 +1,15 @@
 
 
 
-  
-
-Blue | My New Hugo Site
-
-    
-
+  
+
+
+  Blue | My New Hugo Site
+
 
+
+
+ 
       
 
 
diff --git a/public/tags/green/index.html b/public/tags/green/index.html
index 6529e43..b0c994c 100644
--- a/public/tags/green/index.html
+++ b/public/tags/green/index.html
@@ -1,13 +1,15 @@
 
 
 
-  
-
-Green | My New Hugo Site
-
-    
-
+  
+
+
+  Green | My New Hugo Site
+
 
+
+
+ 
       
 
 
diff --git a/public/tags/index.html b/public/tags/index.html
index 1b4310f..e698ba8 100644
--- a/public/tags/index.html
+++ b/public/tags/index.html
@@ -1,13 +1,15 @@
 
 
 
-  
-
-Tags | My New Hugo Site
-
-    
-
+  
+
+
+  Tags | My New Hugo Site
+
 
+
+
+ 
       
 
 
diff --git a/public/tags/red/index.html b/public/tags/red/index.html
index 4668bb7..f5156fe 100644
--- a/public/tags/red/index.html
+++ b/public/tags/red/index.html
@@ -1,13 +1,15 @@
 
 
 
-  
-
-Red | My New Hugo Site
-
-    
-
+  
+
+
+  Red | My New Hugo Site
+
 
+
+
+ 
       
 
 
diff --git a/themes/cuqui/assets/css/main.css b/themes/cuqui/assets/css/main.css
index 166ade9..c72d4f5 100644
--- a/themes/cuqui/assets/css/main.css
+++ b/themes/cuqui/assets/css/main.css
@@ -1,5 +1,63 @@
+:root {
+  /* Rosé Pine Dawn */
+  --rp-base: hsl(32deg, 57%, 95%);
+  --rp-surface: hsl(35deg, 100%, 98%);
+  --rp-overlay: hsl(33deg, 43%, 91%);
+  --rp-muted: hsl(257deg, 9%, 61%);
+  --rp-subtle: hsl(248deg, 12%, 52%);
+  --rp-text: hsl(248deg, 19%, 40%);
+  --rp-love: hsl(343deg, 35%, 55%);
+  --rp-gold: hsl(35deg, 81%, 56%);
+  --rp-rose: hsl(3deg, 53%, 67%);
+  --rp-pine: hsl(197deg, 53%, 34%);
+  --rp-foam: hsl(189deg, 30%, 48%);
+  --rp-iris: hsl(268deg, 21%, 57%);
+  --rp-highlight-low: hsl(25deg, 35%, 93%);
+  --rp-highlight-med: hsl(10deg, 9%, 86%);
+  --rp-highlight-high: hsl(315deg, 4%, 80%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Rosé Pine */
+    --rp-base: hsl(249deg, 22%, 12%);
+    --rp-surface: hsl(247deg, 23%, 15%);
+    --rp-overlay: hsl(248deg, 25%, 18%);
+    --rp-muted: hsl(249deg, 12%, 47%);
+    --rp-subtle: hsl(248deg, 15%, 61%);
+    --rp-text: hsl(245deg, 50%, 91%);
+    --rp-love: hsl(343deg, 76%, 68%);
+    --rp-gold: hsl(35deg, 88%, 72%);
+    --rp-rose: hsl(2deg, 55%, 83%);
+    --rp-pine: hsl(197deg, 49%, 38%);
+    --rp-foam: hsl(189deg, 43%, 73%);
+    --rp-iris: hsl(267deg, 57%, 78%);
+    --rp-highlight-low: hsl(244deg, 18%, 15%);
+    --rp-highlight-med: hsl(249deg, 15%, 28%);
+    --rp-highlight-high: hsl(248deg, 13%, 36%);
+
+    /* Rosé Pine Moon */
+    /* --rp-base: hsl(246deg, 24%, 17%); */
+    /* --rp-surface: hsl(248deg, 24%, 20%); */
+    /* --rp-overlay: hsl(248deg, 21%, 26%); */
+    /* --rp-muted: hsl(249deg, 12%, 47%); */
+    /* --rp-subtle: hsl(248deg, 15%, 61%); */
+    /* --rp-text: hsl(245deg, 50%, 91%); */
+    /* --rp-love: hsl(343deg, 76%, 68%); */
+    /* --rp-gold: hsl(35deg, 88%, 72%); */
+    /* --rp-rose: hsl(2deg, 66%, 75%); */
+    /* --rp-pine: hsl(197deg, 48%, 47%); */
+    /* --rp-foam: hsl(189deg, 43%, 73%); */
+    /* --rp-iris: hsl(267deg, 57%, 78%); */
+    /* --rp-highlight-low: hsl(245deg, 22%, 20%); */
+    /* --rp-highlight-med: hsl(247deg, 16%, 30%); */
+    /* --rp-highlight-high: hsl(249deg, 15%, 38%); */
+  }
+}
+
 body {
-  color: #222;
+  background-color: var(--rp-base);
+  color: var(--rp-text);
   font-family: sans-serif;
   line-height: 1.5;
   margin: 1rem;
@@ -9,6 +67,7 @@ body {
 header {
   border-bottom: 1px solid #222;
   margin-bottom: 1rem;
+  /* background-color: var(--rp-muted); */
 }
 
 footer {
@@ -17,6 +76,24 @@ footer {
 }
 
 a {
-  color: #00e;
+  color: var(--rp-foam);
   text-decoration: none;
 }
+
+a:visited {
+  color: var(--rp-pine);
+}
+
+h1 {
+  color: var(--rp-gold);
+}
+
+h2 {
+  color: var(--rp-iris);
+}
+
+code pre {
+  background-color: var(--rp-surface);
+  padding: 0.6em;
+  border-radius: 1em;
+}
diff --git a/themes/cuqui/assets/css/syntax.css b/themes/cuqui/assets/css/syntax.css
new file mode 100644
index 0000000..c8c1526
--- /dev/null
+++ b/themes/cuqui/assets/css/syntax.css
@@ -0,0 +1,86 @@
+/* Background */ .bg { color:#e0def4;background-color:#232136; }
+/* PreWrapper */ .chroma { color:#e0def4;background-color:#232136; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color:#eb6f92 }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
+/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
+/* LineHighlight */ .chroma .hl { background-color:#39374a }
+/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+/* Line */ .chroma .line { display:flex; }
+/* Keyword */ .chroma .k { color:#3e8fb0 }
+/* KeywordConstant */ .chroma .kc { color:#3e8fb0 }
+/* KeywordDeclaration */ .chroma .kd { color:#3e8fb0 }
+/* KeywordNamespace */ .chroma .kn { color:#c4a7e7 }
+/* KeywordPseudo */ .chroma .kp { color:#3e8fb0 }
+/* KeywordReserved */ .chroma .kr { color:#3e8fb0 }
+/* KeywordType */ .chroma .kt { color:#3e8fb0 }
+/* Name */ .chroma .n { color:#ea9a97 }
+/* NameAttribute */ .chroma .na { color:#ea9a97 }
+/* NameBuiltin */ .chroma .nb { color:#ea9a97 }
+/* NameBuiltinPseudo */ .chroma .bp { color:#ea9a97 }
+/* NameClass */ .chroma .nc { color:#9ccfd8 }
+/* NameConstant */ .chroma .no { color:#f6c177 }
+/* NameDecorator */ .chroma .nd { color:#908caa }
+/* NameEntity */ .chroma .ni { color:#ea9a97 }
+/* NameException */ .chroma .ne { color:#3e8fb0 }
+/* NameFunction */ .chroma .nf { color:#ea9a97 }
+/* NameFunctionMagic */ .chroma .fm { color:#ea9a97 }
+/* NameLabel */ .chroma .nl { color:#ea9a97 }
+/* NameNamespace */ .chroma .nn { color:#ea9a97 }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py { color:#ea9a97 }
+/* NameTag */ .chroma .nt { color:#ea9a97 }
+/* NameVariable */ .chroma .nv { color:#ea9a97 }
+/* NameVariableClass */ .chroma .vc { color:#ea9a97 }
+/* NameVariableGlobal */ .chroma .vg { color:#ea9a97 }
+/* NameVariableInstance */ .chroma .vi { color:#ea9a97 }
+/* NameVariableMagic */ .chroma .vm { color:#ea9a97 }
+/* Literal */ .chroma .l { color:#f6c177 }
+/* LiteralDate */ .chroma .ld { color:#f6c177 }
+/* LiteralString */ .chroma .s { color:#f6c177 }
+/* LiteralStringAffix */ .chroma .sa { color:#f6c177 }
+/* LiteralStringBacktick */ .chroma .sb { color:#f6c177 }
+/* LiteralStringChar */ .chroma .sc { color:#f6c177 }
+/* LiteralStringDelimiter */ .chroma .dl { color:#f6c177 }
+/* LiteralStringDoc */ .chroma .sd { color:#f6c177 }
+/* LiteralStringDouble */ .chroma .s2 { color:#f6c177 }
+/* LiteralStringEscape */ .chroma .se { color:#3e8fb0 }
+/* LiteralStringHeredoc */ .chroma .sh { color:#f6c177 }
+/* LiteralStringInterpol */ .chroma .si { color:#f6c177 }
+/* LiteralStringOther */ .chroma .sx { color:#f6c177 }
+/* LiteralStringRegex */ .chroma .sr { color:#f6c177 }
+/* LiteralStringSingle */ .chroma .s1 { color:#f6c177 }
+/* LiteralStringSymbol */ .chroma .ss { color:#f6c177 }
+/* LiteralNumber */ .chroma .m { color:#f6c177 }
+/* LiteralNumberBin */ .chroma .mb { color:#f6c177 }
+/* LiteralNumberFloat */ .chroma .mf { color:#f6c177 }
+/* LiteralNumberHex */ .chroma .mh { color:#f6c177 }
+/* LiteralNumberInteger */ .chroma .mi { color:#f6c177 }
+/* LiteralNumberIntegerLong */ .chroma .il { color:#f6c177 }
+/* LiteralNumberOct */ .chroma .mo { color:#f6c177 }
+/* Operator */ .chroma .o { color:#908caa }
+/* OperatorWord */ .chroma .ow { color:#908caa }
+/* Punctuation */ .chroma .p { color:#908caa }
+/* Comment */ .chroma .c { color:#6e6a86 }
+/* CommentHashbang */ .chroma .ch { color:#6e6a86 }
+/* CommentMultiline */ .chroma .cm { color:#6e6a86 }
+/* CommentSingle */ .chroma .c1 { color:#6e6a86 }
+/* CommentSpecial */ .chroma .cs { color:#6e6a86 }
+/* CommentPreproc */ .chroma .cp { color:#6e6a86 }
+/* CommentPreprocFile */ .chroma .cpf { color:#6e6a86 }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color:#eb6f92 }
+/* GenericEmph */ .chroma .ge { font-style:italic }
+/* GenericError */ .chroma .gr {  }
+/* GenericHeading */ .chroma .gh {  }
+/* GenericInserted */ .chroma .gi { color:#9ccfd8 }
+/* GenericOutput */ .chroma .go {  }
+/* GenericPrompt */ .chroma .gp {  }
+/* GenericStrong */ .chroma .gs { font-weight:bold }
+/* GenericSubheading */ .chroma .gu { color:#c4a7e7 }
+/* GenericTraceback */ .chroma .gt {  }
+/* GenericUnderline */ .chroma .gl {  }
+/* TextWhitespace */ .chroma .w {  }
diff --git a/themes/cuqui/layouts/partials/head.html b/themes/cuqui/layouts/partials/head.html
index 02c2240..f3e002b 100644
--- a/themes/cuqui/layouts/partials/head.html
+++ b/themes/cuqui/layouts/partials/head.html
@@ -1,5 +1,7 @@
-
-
-{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}
-{{ partialCached "head/css.html" . }}
-{{ partialCached "head/js.html" . }}
+
+
+
+  {{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title
+  site.Title }}{{ end }}
+
+{{ partialCached "head/css.html" . }} {{ partialCached "head/js.html" . }}
diff --git a/themes/cuqui/layouts/partials/head/css.html b/themes/cuqui/layouts/partials/head/css.html
index 91b928d..ce77167 100644
--- a/themes/cuqui/layouts/partials/head/css.html
+++ b/themes/cuqui/layouts/partials/head/css.html
@@ -1,9 +1,14 @@
-{{- with resources.Get "css/main.css" }}
-  {{- if eq hugo.Environment "development" }}
-    
-  {{- else }}
-    {{- with . | minify | fingerprint }}
-      
-    {{- end }}
-  {{- end }}
+{{- with resources.Get "css/main.css" }} {{- if eq hugo.Environment
+"development" }}
+
 {{- end }}
+{{- with resources.Get "css/syntax.css" }}
+
+{{- else }} {{- with . | minify | fingerprint }}
+
+{{- end }} {{- end }} {{- end }}