diff --git a/scss/vendors/prismjs.scss b/scss/vendors/prismjs.scss index b32dfd3..b2e952b 100644 --- a/scss/vendors/prismjs.scss +++ b/scss/vendors/prismjs.scss @@ -1,101 +1,92 @@ /** * Prism Essence Theme, based on Material Theme. + * + * Author: Leo Nguyen */ +$prism-bg: hsl(220, 25%, 25%); +$prism-gray: hsl(230, 40%, 70%); +$prism-red: hsl(0, 100%, 80%); +$prism-orange: hsl(15, 90%, 70%); +$prism-yellow: hsl(50, 100%, 75%); +$prism-green: hsl(100, 80%, 80%); +$prism-cyan: hsl(200, 100%, 80%); +$prism-blue: hsl(230, 100%, 80%); +$prism-purple: hsl(275, 100%, 80%); -code[class*="language-"], -pre[class*="language-"] { - padding: 0; - color: #fff; - background: none; +pre { + margin: 0.5em 0; + padding: 1.5em; + border-radius: 0.5rem; + background: $prism-bg; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 1em; - text-align: left; + font-size: 1rem; + line-height: 1.5; + overflow: auto; 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; + + code { + padding: 0; + color: #fff; + background: $prism-bg; + + } } -/* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; - border-radius: 8px; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: #2d3748; -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; -} - -/* Purple (keywords) */ -.token.important, -.token.atrule, +/* Purple (keyword) */ .token.keyword, -.token.builtin { - color: #d9a9ff; // #cc99cd; +.token.important, +.token.builtin, +.token.atrule { + color: $prism-purple; } -/* Yellow (classes, properties) */ +/* Yellow (entity, class) */ .token.entity, +.token.class, .token.name, .token.class-name, -.token.class, .token.package, .token.scope, .token.attr-name { - color: #ffe484; // #FFCB6B; + color: $prism-yellow; } -/* Blue (functions) */ +/* Blue (function) */ .token.function-name, -.token.boolean, .token.function { - color: #82AAFF; + color: $prism-blue; } -/* Red (tags) */ +/* Red (tag) */ .token.tag, .token.namespace, .token.selector, .token.deleted { - color: #ff8383; // #F07178; + color: $prism-red; } -/* Green (strings, attribute values) */ +/* Green (string, attribute) */ .token.string, .token.char, .token.property, .token.attr-value, .token.regex { - color: #b5f4a5; // #C3E88D; + color: $prism-green; } -/* Orange (numbers) */ +/* Orange (number, literal) */ .token.number, +.token.boolean, .token.constant { - color: #F78C6C; + color: $prism-orange; } -/* Cyan (signs) */ +/* Cyan (sign) */ .token.symbol, .token.punctuation, .token.operator, @@ -103,22 +94,22 @@ pre[class*="language-"] { .token.unit, .token.hexcode, .token.doctype-tag { - color: #89DDFF; + color: $prism-cyan; } -/* White (variables, CSS pseudo classes) */ +/* White (variable, CSS pseudo class) */ .token.variable, .token.pseudo-class { color: #fff; } -/* Gray (comments) */ +/* Gray (comment) */ .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata { - color: #99a3d0; // Palelight + color: $prism-gray; } .token.important,