diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss index 0ca2e39..57c56e7 100644 --- a/assets/css/color/blue.scss +++ b/assets/css/color/blue.scss @@ -11,6 +11,7 @@ --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); --syntax-value-color: color-mix(in srgb, var(--accent), white); --syntax-comment-color: rgba(255, 255, 255, 0.3); + --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); --syntax-line-highlight-color: hsl(24, 20%, 95%); --syntax-line-highlight-box-shadow: white; diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss index 52ecb54..d7db043 100644 --- a/assets/css/color/green.scss +++ b/assets/css/color/green.scss @@ -11,6 +11,7 @@ --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); --syntax-value-color: color-mix(in srgb, var(--accent), white); --syntax-comment-color: rgba(255, 255, 255, 0.3); + --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); --syntax-line-highlight-color: hsl(24, 20%, 95%); --syntax-line-highlight-box-shadow: white; diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss index 2023d7a..475f606 100644 --- a/assets/css/color/orange.scss +++ b/assets/css/color/orange.scss @@ -11,6 +11,7 @@ --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); --syntax-value-color: color-mix(in srgb, var(--accent), white); --syntax-comment-color: rgba(255, 255, 255, 0.3); + --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); --syntax-line-highlight-color: hsl(24, 20%, 95%); --syntax-line-highlight-box-shadow: white; diff --git a/assets/css/color/paper.scss b/assets/css/color/paper.scss new file mode 100644 index 0000000..243f91e --- /dev/null +++ b/assets/css/color/paper.scss @@ -0,0 +1,22 @@ +:root { + --accent: #1d1e28; + --accent-contrast-color: white; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #fefcfa 98%); + --border-color: rgba(0, 0, 0, 0.1); + --color: black; + + // Use in code syntax highlighting + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #000 30%); + --syntax-var-color: color-mix(in srgb, var(--accent) 90%, #000); + --syntax-value-color: color-mix(in srgb, var(--accent), black); + --syntax-comment-color: rgba(0, 0, 0, 0.3); + --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #000 10%); + --syntax-line-highlight-background-color: hsla(336, 20%, 50%, 0.4); + --syntax-line-highlight-color: hsl(336, 20%, 95%); + --syntax-line-highlight-box-shadow: black; + --syntax-code-border-color: rgba(0, 0, 0, 0.1); + --syntax-code-copy-button-background: hsla(360, 0%, 87.8%, 0.2); + --syntax-code-copy-button-color: #444; + --syntax-code-copy-button-box-shadow-color: rgba(255, 255, 255, 0.2); +} diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss index 3514769..f86a24d 100644 --- a/assets/css/color/pink.scss +++ b/assets/css/color/pink.scss @@ -11,6 +11,7 @@ --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); --syntax-value-color: color-mix(in srgb, var(--accent), white); --syntax-comment-color: rgba(255, 255, 255, 0.3); + --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); --syntax-line-highlight-color: hsl(24, 20%, 95%); --syntax-line-highlight-box-shadow: white; diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss index 7a730ad..a63db95 100644 --- a/assets/css/color/red.scss +++ b/assets/css/color/red.scss @@ -11,6 +11,7 @@ --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); --syntax-value-color: color-mix(in srgb, var(--accent), white); --syntax-comment-color: rgba(255, 255, 255, 0.3); + --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); --syntax-line-highlight-color: hsl(24, 20%, 95%); --syntax-line-highlight-box-shadow: white; diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss index 445ab15..8279dbf 100644 --- a/assets/css/syntax.scss +++ b/assets/css/syntax.scss @@ -75,13 +75,12 @@ pre[class*="language-"] { } .line-highlight { - --line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); position: absolute; left: 0; right: 0; padding: 0; margin: 0; - background: color-mix(in srgb, var(--line-highlight-mix), transparent 92%); + background: color-mix(in srgb, var(--syntax-line-highlight-mix), transparent 92%); pointer-events: none; line-height: inherit; white-space: pre; diff --git a/static/img/theme-colors/paper.png b/static/img/theme-colors/paper.png new file mode 100644 index 0000000..974d719 Binary files /dev/null and b/static/img/theme-colors/paper.png differ