From 369bbbe1200b6bfe4928505ce5e591cf5c4ed6d7 Mon Sep 17 00:00:00 2001 From: Ander Date: Sat, 5 Feb 2022 00:38:36 +0100 Subject: [PATCH] Changes theme and adds new theme options --- gatsby-browser.js | 5 +- src/prism-duotone-sea.css | 172 ++++++++++++++++++++++++++++++++++++++ src/prism-holi-theme.css | 119 ++++++++++++++++++++++++++ src/prism-synthwave84.css | 140 +++++++++++++++++++++++++++++++ src/style.scss | 6 +- 5 files changed, 438 insertions(+), 4 deletions(-) create mode 100644 src/prism-duotone-sea.css create mode 100644 src/prism-holi-theme.css create mode 100644 src/prism-synthwave84.css diff --git a/gatsby-browser.js b/gatsby-browser.js index 0e31bb6..b09f706 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -5,9 +5,12 @@ import "typeface-merriweather" import "./src/normalize.css" // custom CSS styles import "./src/style.scss" +import "./src/prism-synthwave84.css" +//import "./src/prism-duotone-sea.css" +//import "./src/prism-holi-theme.css" // Highlighting for code blocks -import "prismjs/themes/prism.css" +//import "prismjs/themes/prism.css" // font import "typeface-barlow"; diff --git a/src/prism-duotone-sea.css b/src/prism-duotone-sea.css new file mode 100644 index 0000000..747748f --- /dev/null +++ b/src/prism-duotone-sea.css @@ -0,0 +1,172 @@ +/* +Name: Duotone Sea +Author: by Simurai, adapted from DuoTone themes by Simurai for Atom (http://simurai.com/projects/2016/01/01/duotone-themes) + +Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-sea-dark.css) +Generated with Base16 Builder (https://github.com/base16-builder/base16-builder) +*/ + +code[class*="language-"], +pre[class*="language-"] { + font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; + font-size: 14px; + line-height: 1.375; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + background: #1d262f; + color: #57718e; +} + +pre > code[class*="language-"] { + font-size: 1em; +} + +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #004a9e; +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: #004a9e; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #4a5f78; +} + +.token.punctuation { + color: #4a5f78; +} + +.token.namespace { + opacity: .7; +} + +.token.tag, +.token.operator, +.token.number { + color: #0aa370; +} + +.token.property, +.token.function { + color: #57718e; +} + +.token.tag-id, +.token.selector, +.token.atrule-id { + color: #ebf4ff; +} + +code.language-javascript, +.token.attr-name { + color: #7eb6f6; +} + +code.language-css, +code.language-scss, +.token.boolean, +.token.string, +.token.entity, +.token.url, +.language-css .token.string, +.language-scss .token.string, +.style .token.string, +.token.attr-value, +.token.keyword, +.token.control, +.token.directive, +.token.unit, +.token.statement, +.token.regex, +.token.atrule { + color: #47ebb4; +} + +.token.placeholder, +.token.variable { + color: #47ebb4; +} + +.token.deleted { + text-decoration: line-through; +} + +.token.inserted { + border-bottom: 1px dotted #ebf4ff; + text-decoration: none; +} + +.token.italic { + font-style: italic; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.important { + color: #7eb6f6; +} + +.token.entity { + cursor: help; +} + +pre > code.highlight { + outline: .4em solid #34659d; + outline-offset: .4em; +} + +/* overrides color-values for the Line Numbers plugin + * http://prismjs.com/plugins/line-numbers/ + */ +.line-numbers.line-numbers .line-numbers-rows { + border-right-color: #1f2932; +} + +.line-numbers .line-numbers-rows > span:before { + color: #2c3847; +} + +/* overrides color-values for the Line Highlight plugin +* http://prismjs.com/plugins/line-highlight/ +*/ +.line-highlight.line-highlight { + background: rgba(10, 163, 112, 0.2); + background: -webkit-linear-gradient(left, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0)); + background: linear-gradient(to right, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0)); +} diff --git a/src/prism-holi-theme.css b/src/prism-holi-theme.css new file mode 100644 index 0000000..a1f7de3 --- /dev/null +++ b/src/prism-holi-theme.css @@ -0,0 +1,119 @@ +/** + * MIT License + * Copyright (c) 2021 Ayush Saini + * Holi Theme for prism.js + * @author Ayush Saini <@AyushCodes on Twitter> + */ + +code[class*='language-'], +pre[class*='language-'] { + color: #d6e7ff; + background: #030314; + text-shadow: none; + font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; + font-size: 1em; + line-height: 1.5; + letter-spacing: .2px; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + text-align: left; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*='language-']::-moz-selection, +pre[class*='language-'] ::-moz-selection, +code[class*='language-']::-moz-selection, +code[class*='language-'] ::-moz-selection, +pre[class*='language-']::selection, +pre[class*='language-'] ::selection, +code[class*='language-']::selection, +code[class*='language-'] ::selection { + color: inherit; + background: #1d3b54; + text-shadow: none; +} + +pre[class*='language-'] { + border: 1px solid #2a4555; + border-radius: 5px; + padding: 1.5em 1em; + margin: 1em 0; + overflow: auto; +} + +:not(pre) > code[class*='language-'] { + color: #f0f6f6; + background: #2a4555; + padding: 0.2em 0.3em; + border-radius: 0.2em; + box-decoration-break: clone; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #446e69; +} + +.token.punctuation { + color: #d6b007; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #d6e7ff; +} + +.token.selector, +.token.attr-name, +.token.builtin, +.token.inserted { + color: #e60067; +} + +.token.string, +.token.char { + color: #49c6ec; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #ec8e01; + background: transparent; +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #0fe468; +} + +.token.function, +.token.class-name { + color: #78f3e9; +} + +.token.regex, +.token.important, +.token.variable { + color: #d6e7ff; +} diff --git a/src/prism-synthwave84.css b/src/prism-synthwave84.css new file mode 100644 index 0000000..7f0595e --- /dev/null +++ b/src/prism-synthwave84.css @@ -0,0 +1,140 @@ +/* + * Synthwave '84 Theme originally by Robb Owen [@Robb0wen] for Visual Studio Code + * Demo: https://marc.dev/demo/prism-synthwave84 + * + * Ported for PrismJS by Marc Backes [@themarcba] + */ + +code[class*="language-"], +pre[class*="language-"] { + color: #f92aad; + text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3; + background: none; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + 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; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background-color: transparent !important; + background-image: linear-gradient(to bottom, #2a2139 75%, #34294f); +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.block-comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #8e8e8e; +} + +.token.punctuation { + color: #ccc; +} + +.token.tag, +.token.attr-name, +.token.namespace, +.token.number, +.token.unit, +.token.hexcode, +.token.deleted { + color: #e2777a; +} + +.token.property, +.token.selector { + color: #72f1b8; + text-shadow: 0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475; +} + +.token.function-name { + color: #6196cc; +} + +.token.boolean, +.token.selector .token.id, +.token.function { + color: #fdfdfd; + text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975; +} + +.token.class-name { + color: #fff5f6; + text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75; +} + +.token.constant, +.token.symbol { + color: #f92aad; + text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3; +} + +.token.important, +.token.atrule, +.token.keyword, +.token.selector .token.class, +.token.builtin { + color: #f4eee4; + text-shadow: 0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575; +} + +.token.string, +.token.char, +.token.attr-value, +.token.regex, +.token.variable { + color: #f87c32; +} + +.token.operator, +.token.entity, +.token.url { + color: #67cdcc; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + +.token.inserted { + color: green; +} diff --git a/src/style.scss b/src/style.scss index 58fc7e0..b7e4dfa 100644 --- a/src/style.scss +++ b/src/style.scss @@ -56,7 +56,7 @@ --fontSize-5: 2.074rem; --fontSize-6: 2.488rem; --fontSize-7: 2.986rem; - --color-primary: #00b000; + --color-primary: #dc078e; --color-text: #1a2c3d; --color-text-light: #4f5969; --color-heading: #1a202c; @@ -100,8 +100,8 @@ body.dark { --color-background: #202020; --color-text: #fefcf8; --color-text-light: #d1dce5; - --color-heading-black: #00c600; - --color-heading: #00c600 ; + --color-heading-black: #dc078e; + --color-heading: #dc078e ; }