Skip to content

Commit

Permalink
Merge pull request #151 from jannis-baum/issue/120-consider-css-refactor
Browse files Browse the repository at this point in the history 
CSS refactor
  • Loading branch information
@tuurep
tuurep authored Aug 5, 2024
2 parents 2df370a + 23ae83f commit b257f51
Show file tree
Hide file tree
Showing 6 changed files with 394 additions and 428 deletions.
2 changes: 2 additions & 0 deletions src/routes/viewer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,9 @@ router.get(/.*/, async (req: Request, res: Response) => {
<html>
<head>
<title>${title}</title>
<link rel="stylesheet" type="text/css" href="/static/colors.css"/>
<link rel="stylesheet" type="text/css" href="/static/style.css"/>
<link rel="stylesheet" type="text/css" href="/static/markdown.css"/>
<link rel="stylesheet" type="text/css" href="/static/highlight.css">
<link rel="stylesheet" type="text/css" href="/static/ipynb.css">
<link rel="stylesheet" type="text/css" href="/static/katex/katex.css">
Expand Down
94 changes: 94 additions & 0 deletions static/colors.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
/* --------------------------------------------------------------------------
* DARK MODE ---------------------------------------------------------------- */

:root {
--bg-primary: black;
--bg-secondary: #161616;
--bg-code: #333;
--bg-mark: rgba(255, 255, 175, 0.8);

--text-primary: #aaa;
--text-secondary: #6a6a6a; /* #7d7d7d from foot notes */
--text-link: #859abc;
--text-mark: #222;

--border-regular: #353535;
--border-muted: #303030;

--syntax-text: var(--text-primary);
--syntax-keyword: #aed7ff;
--syntax-entity: #aeafff;
--syntax-constant: #d1b0fa;
--syntax-string: #d787af;
--syntax-symbol: var(--syntax-constant);
--syntax-comment: #949494;
--syntax-entity-tag: #d7afd7;
--syntax-storage-modifier-import: var(--syntax-text);

--syntax-markup-heading: var(--syntax-text);
--syntax-markup-list: var(--syntax-text);
--syntax-markup-italic: var(--syntax-text);
--syntax-markup-bold: var(--syntax-text);
--syntax-markup-inserted-fg: #aff5b4;
--syntax-markup-inserted-bg: #033a16;
--syntax-markup-deleted-fg: #ffdcd7;
--syntax-markup-deleted-bg: #67060c;

--alert-note: #a5d5fe;
--alert-tip: #b4fa72;
--alert-important: #ff8ffd;
--alert-warning: #ffaf00;
--alert-caution: #ff5f5f;

--ipynb-bg-error: rgba(255, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
* LIGHT MODE --------------------------------------------------------------- */

@media (prefers-color-scheme: light) {
:root {
--bg-primary: white;
--bg-secondary: #f6f8fa;
--bg-code: #eff1f3;
--bg-mark: rgba(255, 255, 175, 1);

--text-primary: #1f2328;
--text-secondary: #656d76;
--text-link: #0969da;
--text-mark: var(--text-primary);

--border-regular: #d0d7de;
--border-muted: #d8dee4;

/* source for light mode syntax theme:
* https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css
* */
--syntax-text: #24292e;
--syntax-keyword: #d73a49;
--syntax-entity: #6f42c1;
--syntax-constant: #005cc5;
--syntax-string: #032f62;
--syntax-symbol: #e36209;
--syntax-comment: #6a737d;
--syntax-entity-tag: #22863a;
--syntax-storage-modifier-import: var(--syntax-text);

--syntax-markup-heading: var(--syntax-constant);
--syntax-markup-list: #735c0f;
--syntax-markup-italic: var(--syntax-text);
--syntax-markup-bold: var(--syntax-text);
--syntax-markup-inserted-fg: var(--syntax-entity-tag);
--syntax-markup-inserted-bg: #f0fff4;
--syntax-markup-deleted-fg: #b31d28;
--syntax-markup-deleted-bg: #ffeef0;

--alert-note: var(--text-link);
--alert-tip: #1a7f37;
--alert-important: #8250df;
--alert-warning: #bf8700;
--alert-caution: #cf222e;

--ipynb-bg-error: rgba(255, 0, 0, 0.1);
}
}
213 changes: 76 additions & 137 deletions static/highlight.css
View file
Original file line number Diff line number Diff line change
@@ -1,163 +1,102 @@
/* translucent dark */
.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{
color: #aed7ff;
.hljs {
color: var(--syntax-text);
}

.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{
color: #aeafff;
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
color: var(--syntax-keyword);
}

.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{
color: #d1b0fa;
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
color: var(--syntax-entity);
}

.hljs-meta .hljs-string,.hljs-regexp,.hljs-string,.hljs-subst{
color: #d787af;
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
color: var(--syntax-constant);
}

.hljs-built_in,.hljs-symbol{
color: #d1b0fa;
font-weight: bold;
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
color: var(--syntax-string);
}

.hljs-code,.hljs-comment,.hljs-formula{
color: #949494;
font-style: italic;
.hljs-built_in,
.hljs-symbol {
color: var(--syntax-symbol);
font-style: bold;
}

.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{
color: #d7afd7;
.hljs-comment,
.hljs-code,
.hljs-formula {
color: var(--syntax-comment);
font-style: italic;
}

.hljs-strong,.hljs-emphasis{
font-weight: bold;
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
color: var(--syntax-entity-tag);
}

.hljs-addition{
color: #aff5b4;
background-color: #033a16;
.hljs-subst {
color: var(--syntax-storage-modifier-import);
}

.hljs-deletion{
color: #ffdcd7;
background-color: #67060c;
.hljs-section {
color: var(--syntax-markup-heading);
font-weight: bold;
}

/* light mode */
/* source: https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css */
@media (prefers-color-scheme: light) {
.hljs {
color: #24292e;
background: #ffffff;
}

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
/* prettylights-syntax-keyword */
color: #d73a49;
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
/* prettylights-syntax-entity */
color: #6f42c1;
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
/* prettylights-syntax-constant */
color: #005cc5;
}

.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
/* prettylights-syntax-string */
color: #032f62;
}

.hljs-built_in,
.hljs-symbol {
/* prettylights-syntax-variable */
color: #e36209;
}

.hljs-comment,
.hljs-code,
.hljs-formula {
/* prettylights-syntax-comment */
color: #6a737d;
}

.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
/* prettylights-syntax-entity-tag */
color: #22863a;
}

.hljs-subst {
/* prettylights-syntax-storage-modifier-import */
color: #24292e;
}

.hljs-section {
/* prettylights-syntax-markup-heading */
color: #005cc5;
font-weight: bold;
}

.hljs-bullet {
/* prettylights-syntax-markup-list */
color: #735c0f;
}
.hljs-bullet {
color: var(--syntax-markup-bullet);
}

.hljs-emphasis {
/* prettylights-syntax-markup-italic */
color: #24292e;
font-style: italic;
}
.hljs-emphasis {
color: var(--syntax-markup-italic);
font-style: italic;
}

.hljs-strong {
/* prettylights-syntax-markup-bold */
color: #24292e;
font-weight: bold;
}
.hljs-strong {
color: var(--syntax-markup-bold);
font-weight: bold;
}

.hljs-addition {
/* prettylights-syntax-markup-inserted */
color: #22863a;
background-color: #f0fff4;
}
.hljs-addition {
color: var(--syntax-markup-inserted-fg);
background-color: var(--syntax-markup-inserted-bg);
}

.hljs-deletion {
/* prettylights-syntax-markup-deleted */
color: #b31d28;
background-color: #ffeef0;
}
.hljs-deletion {
color: var(--syntax-markup-deleted-fg);
background-color: var(--syntax-markup-deleted-bg);
}

.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
/* purposely ignored */
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
/* purposely ignored */
color: inherit;
}
4 changes: 2 additions & 2 deletions static/ipynb.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@
padding: unset;
background-color: unset;
}
.ipynb-output-stream-stderr { background-color: rgba(255, 0, 0, 0.1); }
.ipynb-output-stream-stderr { background-color: var(--ipynb-bg-error); }

.ipynb-output-error { background-color: rgba(255, 0, 0, 0.1); }
.ipynb-output-error { background-color: var(--ipynb-bg-error); }

.ipynb-output-plain {
padding: unset;
Expand Down
Loading

0 comments on commit b257f51

Please sign in to comment.