Syntax highlighting on client (optional JS)

2 files changed, 122 insertions, 15 deletions

diff --git a/themes/elenq/static/css/prism.css b/themes/elenq/static/css/prism.css
new file mode 100644
index 0000000..cc87b8d
--- /dev/null
+++ b/themes/elenq/static/css/prism.css
@@ -0,0 +1,111 @@
+/* PrismJS 1.16.0
+https://prismjs.com/download.html#themes=prism&languages=bash+clojure+latex+lisp+lua+makefile+perl+sql+python+scheme+yaml */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ * 
+ * Edited by Ekaitz Zarraga to make it fit in ElenQ Technology style.
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  -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-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
diff --git a/themes/elenq/static/css/style.css b/themes/elenq/static/css/style.css
index c8efd73..3b52122 100644
--- a/themes/elenq/static/css/style.css
+++ b/themes/elenq/static/css/style.css
@@ -96,7 +96,7 @@ hr.short{
   z-index: 99;
   border-top: 1px solid #eee;
   border-bottom: 1px solid #eee;
-  margin-bottom: 3ex;
+  margin-bottom: 6.5rem;
 }
 .navbar {
   width: 100%;
@@ -125,22 +125,9 @@ hr.short{
 }
 
 
-/* Large devices everything inline and the header floating fixed on top
+/* Large devices everything inline and the header floating
  */
 @media (min-width: 801px) {
-  .mainheader{
-    position: fixed;
-    height: 6.5rem;
-  }
-
-  /* Push content down, because the header is floating over it */
-  .content:before{
-    display: block;
-    content: " ";
-    height: 10rem;
-    visibility: hidden;
-  }
-
   .link-right {
     margin-left: 15px;
     margin-right: 0px;
@@ -348,3 +335,12 @@ li{
     font-style: normal;
   }
 }
+
+
+/* Code rendering
+ */
+pre > code {
+  overflow: auto;
+  border: none;
+  border-radius: 0;
+}