diff --git a/src/styles/font.css b/src/styles/font.css index 05c1418..453e129 100644 --- a/src/styles/font.css +++ b/src/styles/font.css @@ -10,14 +10,17 @@ html, button { } @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap'); + +code { + font-family: "JetBrains Mono", monospace; +} + pre code { border-radius: calc(var(--r) * 0.25); display: block; padding: calc(var(--pd) * 0.5); color: var(--highlight-color); background: var(--highlight-bg); - - font-family: "JetBrains Mono", monospace; font-optical-sizing: auto; font-weight: 400; font-style: normal; diff --git a/src/styles/highlight-js/tomorrow-night.css b/src/styles/highlight-js/tomorrow-night.css new file mode 100644 index 0000000..3c7779e --- /dev/null +++ b/src/styles/highlight-js/tomorrow-night.css @@ -0,0 +1,59 @@ +/* Tomorrow Night Theme */ +/* https://jmblog.github.io/color-themes-for-google-code-highlightjs */ +/* Original theme - https://github.com/chriskempson/tomorrow-theme */ +/* https://jmblog.github.io/color-themes-for-google-code-highlightjs */ + +:root { + --color-comment: #969896; + --color-red: #cc6666; + --color-orange: #de935f; + --color-yellow: #f0c674; + --color-green: #b5bd68; + --color-aqua: #8abeb7; + --color-blue: #81a2be; + --color-purple: #b294bb; + --color-background: #1d1f21; /* Added for background */ + --color-text: #c5c8c6; /* Added for main text */ +} + +.tomorrow-comment, pre .comment, pre .title { + color: var(--color-comment); +} + +.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo { + color: var(--color-red); +} + +.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant { + color: var(--color-orange); +} + +.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute { + color: var(--color-yellow); +} + +.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata { + color: var(--color-green); +} + +.tomorrow-aqua, pre .css .hexcolor { + color: var(--color-aqua); +} + +.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title { + color: var(--color-blue); +} + +.tomorrow-purple, pre .keyword, pre .javascript .function { + color: var(--color-purple); +} + +pre code { + display: block; + background: var(--color-background); + color: var(--color-text); + font-family: Menlo, Monaco, Consolas, monospace; + line-height: 1.5; + border: 1px solid #ccc; + padding: 10px; +} diff --git a/src/styles/index.css b/src/styles/index.css index 963f0db..3762183 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -239,4 +239,19 @@ button.history-back { background: transparent; border: 0; cursor: pointer; +} + +.colx2 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--rh2); +} + +.text { + --r-count: 2; + --r-factor: 0.75; +} + +.text code { + color: var(--shade6); } \ No newline at end of file