Full CSS rework:

    - add light/dark colorscheme support (also for code)
    - remove Skeleton
    - Split elenq CSS in pelican-specific vs general

1 files changed, 64 insertions, 14 deletions

diff --git a/themes/elenq/static/css/prism.css b/themes/elenq/static/css/prism.css
index cc87b8d..c24467d 100644
--- a/themes/elenq/static/css/prism.css
+++ b/themes/elenq/static/css/prism.css
@@ -10,16 +10,22 @@ https://prismjs.com/download.html#themes=prism&languages=bash+clojure+latex+lisp
 
 code[class*="language-"],
 pre[class*="language-"] {
+  background: none;
+  font-family: monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
-
   -webkit-hyphens: none;
   -moz-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
 }
-
 @media print {
   code[class*="language-"],
   pre[class*="language-"] {
@@ -29,23 +35,27 @@ pre[class*="language-"] {
 
 /* Code blocks */
 pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
   overflow: auto;
+  border-radius: 0.3em;
 }
 
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-  background: #f5f2f0;
+:not(pre) > code {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: slategray;
+  color: var(--comment);
 }
 
 .token.punctuation {
-  color: #999;
+  color: var(--punctuation);
 }
 
 .namespace {
@@ -59,7 +69,7 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-  color: #905;
+  color: var(--property);
 }
 
 .token.selector,
@@ -68,7 +78,7 @@ pre[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.inserted {
-  color: #690;
+  color: var(--builtin);
 }
 
 .token.operator,
@@ -76,25 +86,24 @@ pre[class*="language-"] {
 .token.url,
 .language-css .token.string,
 .style .token.string {
-  color: #9a6e3a;
-  background: hsla(0, 0%, 100%, .5);
+  color: var(--operator);
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-  color: #07a;
+  color: var(--keyword);
 }
 
 .token.function,
 .token.class-name {
-  color: #DD4A68;
+  color: var(--function);
 }
 
 .token.regex,
 .token.important,
 .token.variable {
-  color: #e90;
+  color: var(--variable);
 }
 
 .token.important,
@@ -109,3 +118,44 @@ pre[class*="language-"] {
   cursor: help;
 }
 
+
+/**
+ * Prism default colorscheme
+ */
+@media (prefers-color-scheme: light) or (prefers-color-scheme: no-preference) {
+  :root{
+    --base: black;
+    --comment: slategray;
+    --punctuation: #999;
+    --property: #905;
+    --builtin: #690;
+    --operator: #9a6e3a;
+    --keyword: #07a;
+    --function: #DD4A68;
+    --variable: #e90;
+  }
+}
+
+/**
+ * Dracula Theme originally by Zeno Rocha [@zenorocha]
+ * https://draculatheme.com/
+ *
+ * Ported for PrismJS by Albert Vallverdu [@byverdu]
+ *
+ * Strongly edited by Ekaitz Zárraga to fit on the default theme
+ */
+
+@media (prefers-color-scheme: dark){
+  :root{
+    --base: #f8f8f2;
+    --comment: #6272a4;
+    --punctuation: #f8f8f2;
+    --property: #ff79c6;
+    --builtin: #50fa7b;
+    --operator: #f8f8f2;
+    --keyword: #8be9fd;
+    --function: #f1fa8c;
+    --variable: #ffb86c;
+  }
+}
+