From eaa28f4d0d366bfec7919a412abf59f627fab3d3 Mon Sep 17 00:00:00 2001 From: Ekaitz Zárraga Date: Thu, 9 May 2019 15:20:18 +0200 Subject: Syntax highlighting on client (optional JS) --- themes/elenq/static/css/prism.css | 111 ++++++++++++++++++++++++++++++++++++++ themes/elenq/static/css/style.css | 26 ++++----- 2 files changed, 122 insertions(+), 15 deletions(-) create mode 100644 themes/elenq/static/css/prism.css (limited to 'themes/elenq/static/css') 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; +} -- cgit v1.2.3