From 8fd120aba382375d9ab0c5192f065641bf0a40c4 Mon Sep 17 00:00:00 2001 From: Sebastian Frank <sebastian@webmakers.de> Date: Thu, 3 Nov 2022 08:50:08 +0000 Subject: [PATCH] styling --- docpress.json | 8 +- docs/docpress.css | 26 ++++++ docs/github-dark-dimmed.css | 130 ++++++++++++++++++++++++++++++ markdown-it-code-include/index.js | 2 +- yarn.lock | 4 +- 5 files changed, 163 insertions(+), 7 deletions(-) create mode 100644 docs/docpress.css create mode 100644 docs/github-dark-dimmed.css diff --git a/docpress.json b/docpress.json index 9346c13..4873212 100644 --- a/docpress.json +++ b/docpress.json @@ -1,8 +1,8 @@ { "markdown": { "plugins": { - "code-include": { - } + "code-include": {} } - } -} \ No newline at end of file + }, + "css": ["docs/docpress.css", "docs/github-dark-dimmed.css"] +} diff --git a/docs/docpress.css b/docs/docpress.css new file mode 100644 index 0000000..17f57f1 --- /dev/null +++ b/docs/docpress.css @@ -0,0 +1,26 @@ +.title, h1, h2, h3, h4, h5, .link.title.link-index { + color: #531414!important; +} + +.link.title { + color: black!important; +} + +.toc-menu .link.-active, .toc-menu .hlink.-active { + box-shadow: inset -2px 0 #7c2828!important; +} + +ul.heading-list .hlink, ul.heading-list .hlink:visited { + color: #414141!important; +} + +.menu-toggle:hover, .footer-nav a:hover, .footer-nav a:hover:after, .footer-nav a:hover:before { + color: #7c2828!important; +} + +.code-file-label { + background: #dcd9d9!important; + color: #3a0909!important; + right: 0px; + opacity: 1!important; +} \ No newline at end of file diff --git a/docs/github-dark-dimmed.css b/docs/github-dark-dimmed.css new file mode 100644 index 0000000..233672a --- /dev/null +++ b/docs/github-dark-dimmed.css @@ -0,0 +1,130 @@ +/*! + Theme: GitHub Dark Dimmed + Description: Dark dimmed theme as seen on github.com + Author: github.com + Maintainer: @Hirse + Updated: 2021-05-15 + + Colors taken from GitHub's CSS +*/ + +.hljs, pre { + color: #adbac7!important; + background: #22272e!important; +} + +.hljs-doctag, +.hljs-keyword, +.hljs-meta .hljs-keyword, +.hljs-template-tag, +.hljs-template-variable, +.hljs-type, +.hljs-variable.language_, +.pl-k { + /* prettylights-syntax-keyword */ + color: #f47067!important; +} + +.hljs-title, +.hljs-title.class_, +.hljs-title.class_.inherited__, +.hljs-title.function_i, +.pl-s { + /* prettylights-syntax-entity */ + color: #dcbdfb!important; +} + +.hljs-attr, +.hljs-attribute, +.hljs-literal, +.hljs-meta, +.hljs-number, +.hljs-operator, +.hljs-variable, +.hljs-selector-attr, +.hljs-selector-class, +.hljs-selector-id, +.pl-e { + /* prettylights-syntax-constant */ + color: #6cb6ff!important; +} + +.hljs-regexp, +.hljs-string, +.hljs-meta .hljs-string, +.pl-s { + /* prettylights-syntax-string */ + color: #96d0ff!important; +} + +.hljs-built_in, +.hljs-symbol, +.pl-c1 { + /* prettylights-syntax-variable */ + color: #f69d50!important; +} + +.hljs-comment, +.hljs-code, +.hljs-formula, +.pl-c { + /* prettylights-syntax-comment */ + color: #768390!important; +} + +.hljs-name, +.hljs-quote, +.hljs-selector-tag, +.hljs-selector-pseudo { + /* prettylights-syntax-entity-tag */ + color: #8ddb8c!important; +} + +.hljs-subst { + /* prettylights-syntax-storage-modifier-import */ + color: #adbac7!important; +} + +.hljs-section { + /* prettylights-syntax-markup-heading */ + color: #316dca!important; + font-weight: bold!important; +} + +.hljs-bullet { + /* prettylights-syntax-markup-list */ + color: #eac55f!important; +} + +.hljs-emphasis { + /* prettylights-syntax-markup-italic */ + color: #adbac7!important; + font-style: italic!important; +} + +.hljs-strong { + /* prettylights-syntax-markup-bold */ + color: #adbac7!important; + font-weight: bold!important; +} + +.hljs-addition { + /* prettylights-syntax-markup-inserted */ + color: #b4f1b4!important; + background-color: #1b4721!important; +} + +.hljs-deletion { + /* prettylights-syntax-markup-deleted */ + color: #ffd8d3!important; + background-color: #78191b!important; +} + +.hljs-char.escape_, +.hljs-link, +.hljs-params, +.hljs-property, +.hljs-punctuation, +.hljs-tag { + /* purposely ignored */ +} \ No newline at end of file diff --git a/markdown-it-code-include/index.js b/markdown-it-code-include/index.js index 353bc28..266605c 100644 --- a/markdown-it-code-include/index.js +++ b/markdown-it-code-include/index.js @@ -87,7 +87,7 @@ const include_plugin = (md, options) => { const labelStyle = `padding: 0 4px; font-size: 12px; font-weight: bold; color: #ffffff; background: #444444; opacity: .6;` - const fileLabel = `<div style="position:relative; height: 0px;"><div style="position:absolute; top: -10px;${labelStyle}">${includePath}</div></div>\n\n` + const fileLabel = `<div style="position:relative; height: 0px;"><div class="code-file-label" style="position:absolute; top: -10px;${labelStyle}">${includePath}</div></div>\n\n` const fileExt = includePath.replace(/^.+\./, "") // replace include by file content diff --git a/yarn.lock b/yarn.lock index 4c9cf23..773fc5e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3986,10 +3986,10 @@ __metadata: "markdown-it-code-include@file:./markdown-it-code-include::locator=tibi-docs%40workspace%3A.": version: 0.0.0 - resolution: "markdown-it-code-include@file:./markdown-it-code-include#./markdown-it-code-include::hash=a6a515&locator=tibi-docs%40workspace%3A." + resolution: "markdown-it-code-include@file:./markdown-it-code-include#./markdown-it-code-include::hash=8d8a72&locator=tibi-docs%40workspace%3A." dependencies: node-html-parser: ^1.3.1 - checksum: 03b3a6c463b7fbc1c6fddb47a29f0bfeb44b4a2afbe2b78c195949f6ca963b9d254209d533c09b191502bcade61442598a2bf6a63ae7633fde03b5a509420e8c + checksum: 3e79581a4d1ec0b796b6c3ae5a83f8a197daba7440c5bb5c6447b80f5cc04943e8eef5549af5408958c13e62bfe4fb5632c758da74668f90dc21bb22396d7813 languageName: node linkType: hard