From babd08dfba3c5ccfe0c06cdd2a827520f87713b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C4=A9nh=20Ph=C6=B0=E1=BB=9Bc?= Date: Sat, 8 Mar 2025 15:03:05 +0700 Subject: [PATCH 1/8] chore: Move color variables The themes should be able to decide all of its colors. --- assets/css/color/blue.scss | 7 ++++++- assets/css/color/green.scss | 7 ++++++- assets/css/color/orange.scss | 7 ++++++- assets/css/color/pink.scss | 7 ++++++- assets/css/color/red.scss | 7 ++++++- assets/css/variables.scss | 13 ++----------- 6 files changed, 32 insertions(+), 16 deletions(-) diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss index 55dce5c..1988a58 100644 --- a/assets/css/color/blue.scss +++ b/assets/css/color/blue.scss @@ -1,3 +1,8 @@ :root { --accent: #23B0FF; -} \ No newline at end of file + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); + --border-color: rgba(255, 255, 255, .1); + --color: white; +} diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss index ca21aaf..b7f8ce1 100644 --- a/assets/css/color/green.scss +++ b/assets/css/color/green.scss @@ -1,3 +1,8 @@ :root { --accent: #78E2A0; -} \ No newline at end of file + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); + --border-color: rgba(255, 255, 255, .1); + --color: white; +} diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss index 93e3a72..f5f0d7e 100644 --- a/assets/css/color/orange.scss +++ b/assets/css/color/orange.scss @@ -1,3 +1,8 @@ :root { --accent: #FFA86A; -} \ No newline at end of file + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); + --border-color: rgba(255, 255, 255, .1); + --color: white; +} diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss index c2a8b1c..73a0eac 100644 --- a/assets/css/color/pink.scss +++ b/assets/css/color/pink.scss @@ -1,3 +1,8 @@ :root { --accent: #EE72F1; -} \ No newline at end of file + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); + --border-color: rgba(255, 255, 255, .1); + --color: white; +} diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss index f5b2016..30b0b15 100644 --- a/assets/css/color/red.scss +++ b/assets/css/color/red.scss @@ -1,3 +1,8 @@ :root { --accent: #FF6266; -} \ No newline at end of file + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); + --border-color: rgba(255, 255, 255, .1); + --color: white; +} diff --git a/assets/css/variables.scss b/assets/css/variables.scss index 9764e04..82d8599 100644 --- a/assets/css/variables.scss +++ b/assets/css/variables.scss @@ -1,15 +1,6 @@ -:root { - /* COLOR VARIABLES */ - --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); - --accent-contrast-color: black; - --color: white; - --border-color: rgba(255, 255, 255, .1); - --article-link-color: var(inherit); -} - -// Native CSS Variable aren't supported in a combination with MEDIA QUERIES. Wait for a new standard https://drafts.csswg.org/css-env-1/ +// Native CSS Variable aren't supported in a combination with MEDIA QUERIES. Wait for a new standard https://drafts.csswg.org/css-env-1/ // --phone: "max-width: 684px"; // --tablet: "max-width: 900px"; $phone: 684px; -$tablet: 900px; \ No newline at end of file +$tablet: 900px; From 232748983c5a6ae9b5ca0e43e84eeab0ae4d20ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C4=A9nh=20Ph=C6=B0=E1=BB=9Bc?= Date: Sat, 8 Mar 2025 15:21:48 +0700 Subject: [PATCH 2/8] fix: Extract hardcoded color from syntax.scss Syntax highlighting is hardcoded to support dark mode so I extract them into variables to enable customization. --- assets/css/color/blue.scss | 25 +++++-- assets/css/color/green.scss | 25 +++++-- assets/css/color/orange.scss | 25 +++++-- assets/css/color/pink.scss | 25 +++++-- assets/css/color/red.scss | 25 +++++-- assets/css/syntax.scss | 141 ++++++++++++++++++----------------- 6 files changed, 166 insertions(+), 100 deletions(-) diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss index 1988a58..0ca2e39 100644 --- a/assets/css/color/blue.scss +++ b/assets/css/color/blue.scss @@ -1,8 +1,21 @@ :root { - --accent: #23B0FF; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); - --border-color: rgba(255, 255, 255, .1); - --color: white; + --accent: #23b0ff; + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); + --border-color: rgba(255, 255, 255, 0.1); + --color: white; + + // Use in code syntax highlighting + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); + --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-background-color: hsla(24, 20%, 50%, 0.4); + --syntax-line-highlight-color: hsl(24, 20%, 95%); + --syntax-line-highlight-box-shadow: white; + --syntax-code-border-color: rgba(255, 255, 255, 0.1); + --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); + --syntax-code-copy-button-color: #bbb; + --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); } diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss index b7f8ce1..52ecb54 100644 --- a/assets/css/color/green.scss +++ b/assets/css/color/green.scss @@ -1,8 +1,21 @@ :root { - --accent: #78E2A0; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); - --border-color: rgba(255, 255, 255, .1); - --color: white; + --accent: #78e2a0; + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); + --border-color: rgba(255, 255, 255, 0.1); + --color: white; + + // Use in code syntax highlighting + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); + --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-background-color: hsla(24, 20%, 50%, 0.4); + --syntax-line-highlight-color: hsl(24, 20%, 95%); + --syntax-line-highlight-box-shadow: white; + --syntax-code-border-color: rgba(255, 255, 255, 0.1); + --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); + --syntax-code-copy-button-color: #bbb; + --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); } diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss index f5f0d7e..2023d7a 100644 --- a/assets/css/color/orange.scss +++ b/assets/css/color/orange.scss @@ -1,8 +1,21 @@ :root { - --accent: #FFA86A; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); - --border-color: rgba(255, 255, 255, .1); - --color: white; + --accent: #ffa86a; + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); + --border-color: rgba(255, 255, 255, 0.1); + --color: white; + + // Use in code syntax highlighting + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); + --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-background-color: hsla(24, 20%, 50%, 0.4); + --syntax-line-highlight-color: hsl(24, 20%, 95%); + --syntax-line-highlight-box-shadow: white; + --syntax-code-border-color: rgba(255, 255, 255, 0.1); + --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); + --syntax-code-copy-button-color: #bbb; + --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); } diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss index 73a0eac..3514769 100644 --- a/assets/css/color/pink.scss +++ b/assets/css/color/pink.scss @@ -1,8 +1,21 @@ :root { - --accent: #EE72F1; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); - --border-color: rgba(255, 255, 255, .1); - --color: white; + --accent: #ee72f1; + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); + --border-color: rgba(255, 255, 255, 0.1); + --color: white; + + // Use in code syntax highlighting + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); + --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-background-color: hsla(24, 20%, 50%, 0.4); + --syntax-line-highlight-color: hsl(24, 20%, 95%); + --syntax-line-highlight-box-shadow: white; + --syntax-code-border-color: rgba(255, 255, 255, 0.1); + --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); + --syntax-code-copy-button-color: #bbb; + --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); } diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss index 30b0b15..7a730ad 100644 --- a/assets/css/color/red.scss +++ b/assets/css/color/red.scss @@ -1,8 +1,21 @@ :root { - --accent: #FF6266; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); - --border-color: rgba(255, 255, 255, .1); - --color: white; + --accent: #ff6266; + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); + --border-color: rgba(255, 255, 255, 0.1); + --color: white; + + // Use in code syntax highlighting + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); + --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-background-color: hsla(24, 20%, 50%, 0.4); + --syntax-line-highlight-color: hsl(24, 20%, 95%); + --syntax-line-highlight-box-shadow: white; + --syntax-code-border-color: rgba(255, 255, 255, 0.1); + --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); + --syntax-code-copy-button-color: #bbb; + --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); } diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss index 0018971..445ab15 100644 --- a/assets/css/syntax.scss +++ b/assets/css/syntax.scss @@ -17,7 +17,7 @@ code.language-scss, .token.number, .token.inserted, .token.important { - color: var(--syntax-value-color, color-mix(in srgb, var(--accent), white)) !important; + color: var(--syntax-value-color, color-mix(in srgb, var(--accent), white)) !important; } .token.tag-id, @@ -34,7 +34,7 @@ code.language-scss, .token.class-name, .token.constant, .token.symbol { - color: var(--syntax-var-color, color-mix(in srgb, var(--accent) 90%, transparent)) !important; + color: var(--syntax-var-color, color-mix(in srgb, var(--accent) 90%, transparent)) !important; } .token.property, @@ -44,111 +44,112 @@ code.language-scss, code.language-javascript, code.language-html, .command-line-prompt > span:before { - color: var(--syntax-func-color, color-mix(in srgb, var(--accent) 70%, #999 30%)) !important; + color: var(--syntax-func-color, color-mix(in srgb, var(--accent) 70%, #999 30%)) !important; } .token.selector, .token.tag, .token.punctuation { - color: white; + color: white; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: rgba(255, 255, 255, .3) !important; + color: var(--syntax-comment-color) !important; } .token.namespace { - opacity: .7 !important; + opacity: 0.7 !important; } pre[data-line] { - position: relative; + position: relative; } pre[class*="language-"] { - margin: 0; - padding: 0; - overflow: auto; + margin: 0; + padding: 0; + overflow: auto; } .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%); - pointer-events: none; - line-height: inherit; - white-space: pre; + --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%); + pointer-events: none; + line-height: inherit; + white-space: pre; } .line-highlight:before, .line-highlight[data-end]:after { - content: attr(data-start); - position: absolute; - /* top: .4em; */ - left: .6em; - min-width: 1em; - padding: 0 .5em; - background-color: hsla(24, 20%, 50%, .4); - color: hsl(24, 20%, 95%); - font: bold 65%/1.5 sans-serif; - text-align: center; - vertical-align: .3em; - border-radius: 999px; - text-shadow: none; - box-shadow: 0 1px white; + content: attr(data-start); + position: absolute; + /* top: .4em; */ + left: 0.6em; + min-width: 1em; + padding: 0 0.5em; + background-color: var(--syntax-line-highlight-background-color); + color: var(--syntax-line-highlight-color); + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: 0.3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px var(--syntax-line-highlight-box-shadow); } .line-highlight[data-end]:after { - content: attr(data-end); - top: auto; - bottom: .4em; + content: attr(data-end); + top: auto; + bottom: 0.4em; } .line-numbers .line-highlight:before, .line-numbers .line-highlight:after { - content: none; + content: none; } .code-toolbar { - --code-margin: 40px; - position: relative; - margin: var(--code-margin) 0; - padding: 20px; - border: 1px solid rgba(255, 255, 255, .1); + --code-margin: 40px; + position: relative; + margin: var(--code-margin) 0; + padding: 20px; + border: 1px solid var(--syntax-code-border-color); - + .code-toolbar, - + .highlight, - + .highlight .code-toolbar { - border-top: 0; - margin-top: calc(-1 * var(--code-margin)); - } - - pre, code { - border: none; - } - - code { - display: block; - color: inherit; - } - - > .toolbar { - button { - font-size: .8em !important; - background: hsla(0,0%,87.8%,.2) !important; - color: #bbb !important; - box-shadow: 0 2px 0 0 rgba(0,0,0,.2) !important; - border-radius: 0 !important; - margin: 6px !important; - padding: 10px !important; - user-select:none + + .code-toolbar, + + .highlight, + + .highlight .code-toolbar { + border-top: 0; + margin-top: calc(-1 * var(--code-margin)); + } + + pre, + code { + border: none; + } + + code { + display: block; + color: inherit; + } + + > .toolbar { + button { + font-size: 0.8em !important; + background: var(--syntax-code-copy-button-background) !important; + color: var(--syntax-code-copy-button-color) !important; + box-shadow: 0 2px 0 0 var(--syntax-code-copy-button-box-shadow-color) !important; + border-radius: 0 !important; + margin: 6px !important; + padding: 10px !important; + user-select: none; + } } - } } From 1d17b9a8efe2a819158618556a56d46d34303079 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C4=A9nh=20Ph=C6=B0=E1=BB=9Bc?= Date: Sat, 8 Mar 2025 15:32:53 +0700 Subject: [PATCH 3/8] feat: Add new light theme called paper --- assets/css/color/blue.scss | 1 + assets/css/color/green.scss | 1 + assets/css/color/orange.scss | 1 + assets/css/color/paper.scss | 22 ++++++++++++++++++++++ assets/css/color/pink.scss | 1 + assets/css/color/red.scss | 1 + assets/css/syntax.scss | 3 +-- static/img/theme-colors/paper.png | Bin 0 -> 208 bytes 8 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 assets/css/color/paper.scss create mode 100644 static/img/theme-colors/paper.png 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 0000000000000000000000000000000000000000..974d719ee0ff5e72b63f8e05ea4ca9e7c0145130 GIT binary patch literal 208 zcmeAS@N?(olHy`uVBq!ia0vp^Mj*_=1|;R|J2nET>7Fi*AsNnZFJ0t3pdfNIK=w%8 z?*C1@oD~#Q|JIA2c^Pxx?lJrQH;Vn5YM&%dc&G@jbl5*lMC`m;(`C>0PLIToIZ76D fOJ;OXStxGrHP`Tu8xAP~oyg$n>gTe~DWM4f6B|&y literal 0 HcmV?d00001 From a0bcb9c5f6775bda1e79366db778052ab2c59917 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C4=A9nh=20Ph=C6=B0=E1=BB=9Bc?= Date: Sat, 8 Mar 2025 15:46:05 +0700 Subject: [PATCH 4/8] fix: Extract punctuation color to variable --- assets/css/color/blue.scss | 1 + assets/css/color/green.scss | 1 + assets/css/color/orange.scss | 1 + assets/css/color/paper.scss | 1 + assets/css/color/pink.scss | 1 + assets/css/color/red.scss | 1 + assets/css/syntax.scss | 2 +- 7 files changed, 7 insertions(+), 1 deletion(-) diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss index 57c56e7..7167fe4 100644 --- a/assets/css/color/blue.scss +++ b/assets/css/color/blue.scss @@ -9,6 +9,7 @@ // Use in code syntax highlighting --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); + --syntax-punctuation-color: white; --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%); diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss index d7db043..308aab2 100644 --- a/assets/css/color/green.scss +++ b/assets/css/color/green.scss @@ -10,6 +10,7 @@ --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); --syntax-value-color: color-mix(in srgb, var(--accent), white); + --syntax-punctuation-color: 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); diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss index 475f606..c030d87 100644 --- a/assets/css/color/orange.scss +++ b/assets/css/color/orange.scss @@ -10,6 +10,7 @@ --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); --syntax-value-color: color-mix(in srgb, var(--accent), white); + --syntax-punctuation-color: 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); diff --git a/assets/css/color/paper.scss b/assets/css/color/paper.scss index 243f91e..192e843 100644 --- a/assets/css/color/paper.scss +++ b/assets/css/color/paper.scss @@ -10,6 +10,7 @@ --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-punctuation-color: 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); diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss index f86a24d..7850feb 100644 --- a/assets/css/color/pink.scss +++ b/assets/css/color/pink.scss @@ -10,6 +10,7 @@ --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); --syntax-value-color: color-mix(in srgb, var(--accent), white); + --syntax-punctuation-color: 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); diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss index a63db95..a8880d4 100644 --- a/assets/css/color/red.scss +++ b/assets/css/color/red.scss @@ -10,6 +10,7 @@ --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); --syntax-value-color: color-mix(in srgb, var(--accent), white); + --syntax-punctuation-color: 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); diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss index 8279dbf..7eff1e7 100644 --- a/assets/css/syntax.scss +++ b/assets/css/syntax.scss @@ -50,7 +50,7 @@ code.language-html, .token.selector, .token.tag, .token.punctuation { - color: white; + color: var(--syntax-punctuation-color); } .token.comment, From 2cff086048557fb9b84299ba28275ad2dd0c5dda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C4=A9nh=20Ph=C6=B0=E1=BB=9Bc?= Date: Sat, 8 Mar 2025 15:50:11 +0700 Subject: [PATCH 5/8] fix: Package name in Go always white Some how the `fmt` in `fmt.Println("Hello, World")` is not recognized as a token so there is no color apply to it. Fixed this by setting a default color for the `code` tag. --- assets/css/syntax.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss index 7eff1e7..9c9a763 100644 --- a/assets/css/syntax.scss +++ b/assets/css/syntax.scss @@ -41,8 +41,7 @@ code.language-scss, .token.function, .token.function-name, .token.deleted, -code.language-javascript, -code.language-html, +code[class*="language-"], .command-line-prompt > span:before { color: var(--syntax-func-color, color-mix(in srgb, var(--accent) 70%, #999 30%)) !important; } From c51feb34c32a6cb7c97c66ae8fee455afc38abdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C4=A9nh=20Ph=C6=B0=E1=BB=9Bc?= Date: Sat, 8 Mar 2025 15:57:53 +0700 Subject: [PATCH 6/8] chore: Change spaces indent back to 2 --- assets/css/color/blue.scss | 42 +++++------ assets/css/color/green.scss | 42 +++++------ assets/css/color/orange.scss | 42 +++++------ assets/css/color/paper.scss | 42 +++++------ assets/css/color/pink.scss | 42 +++++------ assets/css/color/red.scss | 42 +++++------ assets/css/syntax.scss | 137 +++++++++++++++++------------------ assets/css/terms.scss | 2 +- 8 files changed, 195 insertions(+), 196 deletions(-) diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss index 7167fe4..92ad485 100644 --- a/assets/css/color/blue.scss +++ b/assets/css/color/blue.scss @@ -1,23 +1,23 @@ :root { - --accent: #23b0ff; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); - --border-color: rgba(255, 255, 255, 0.1); - --color: white; + --accent: #23b0ff; + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); + --border-color: rgba(255, 255, 255, 0.1); + --color: white; - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); - --syntax-punctuation-color: white; - --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; - --syntax-code-border-color: rgba(255, 255, 255, 0.1); - --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #bbb; - --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); -} + // Use in code syntax highlighting + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); + --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); + --syntax-punctuation-color: white; + --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; + --syntax-code-border-color: rgba(255, 255, 255, 0.1); + --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); + --syntax-code-copy-button-color: #bbb; + --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); +} \ No newline at end of file diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss index 308aab2..384bc34 100644 --- a/assets/css/color/green.scss +++ b/assets/css/color/green.scss @@ -1,23 +1,23 @@ :root { - --accent: #78e2a0; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); - --border-color: rgba(255, 255, 255, 0.1); - --color: white; + --accent: #78e2a0; + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); + --border-color: rgba(255, 255, 255, 0.1); + --color: white; - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); - --syntax-value-color: color-mix(in srgb, var(--accent), white); - --syntax-punctuation-color: 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; - --syntax-code-border-color: rgba(255, 255, 255, 0.1); - --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #bbb; - --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); -} + // Use in code syntax highlighting + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); + --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); + --syntax-value-color: color-mix(in srgb, var(--accent), white); + --syntax-punctuation-color: 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; + --syntax-code-border-color: rgba(255, 255, 255, 0.1); + --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); + --syntax-code-copy-button-color: #bbb; + --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); +} \ No newline at end of file diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss index c030d87..c5eeb39 100644 --- a/assets/css/color/orange.scss +++ b/assets/css/color/orange.scss @@ -1,23 +1,23 @@ :root { - --accent: #ffa86a; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); - --border-color: rgba(255, 255, 255, 0.1); - --color: white; + --accent: #ffa86a; + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); + --border-color: rgba(255, 255, 255, 0.1); + --color: white; - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); - --syntax-value-color: color-mix(in srgb, var(--accent), white); - --syntax-punctuation-color: 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; - --syntax-code-border-color: rgba(255, 255, 255, 0.1); - --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #bbb; - --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); -} + // Use in code syntax highlighting + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); + --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); + --syntax-value-color: color-mix(in srgb, var(--accent), white); + --syntax-punctuation-color: 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; + --syntax-code-border-color: rgba(255, 255, 255, 0.1); + --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); + --syntax-code-copy-button-color: #bbb; + --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); +} \ No newline at end of file diff --git a/assets/css/color/paper.scss b/assets/css/color/paper.scss index 192e843..130d9a0 100644 --- a/assets/css/color/paper.scss +++ b/assets/css/color/paper.scss @@ -1,23 +1,23 @@ :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; + --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-punctuation-color: 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); -} + // 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-punctuation-color: 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); +} \ No newline at end of file diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss index 7850feb..c47a269 100644 --- a/assets/css/color/pink.scss +++ b/assets/css/color/pink.scss @@ -1,23 +1,23 @@ :root { - --accent: #ee72f1; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); - --border-color: rgba(255, 255, 255, 0.1); - --color: white; + --accent: #ee72f1; + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); + --border-color: rgba(255, 255, 255, 0.1); + --color: white; - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); - --syntax-value-color: color-mix(in srgb, var(--accent), white); - --syntax-punctuation-color: 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; - --syntax-code-border-color: rgba(255, 255, 255, 0.1); - --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #bbb; - --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); -} + // Use in code syntax highlighting + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); + --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); + --syntax-value-color: color-mix(in srgb, var(--accent), white); + --syntax-punctuation-color: 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; + --syntax-code-border-color: rgba(255, 255, 255, 0.1); + --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); + --syntax-code-copy-button-color: #bbb; + --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); +} \ No newline at end of file diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss index a8880d4..b8ace53 100644 --- a/assets/css/color/red.scss +++ b/assets/css/color/red.scss @@ -1,23 +1,23 @@ :root { - --accent: #ff6266; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); - --border-color: rgba(255, 255, 255, 0.1); - --color: white; + --accent: #ff6266; + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); + --border-color: rgba(255, 255, 255, 0.1); + --color: white; - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); - --syntax-value-color: color-mix(in srgb, var(--accent), white); - --syntax-punctuation-color: 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; - --syntax-code-border-color: rgba(255, 255, 255, 0.1); - --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #bbb; - --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); -} + // Use in code syntax highlighting + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); + --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); + --syntax-value-color: color-mix(in srgb, var(--accent), white); + --syntax-punctuation-color: 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; + --syntax-code-border-color: rgba(255, 255, 255, 0.1); + --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); + --syntax-code-copy-button-color: #bbb; + --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); +} \ No newline at end of file diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss index 9c9a763..830cd14 100644 --- a/assets/css/syntax.scss +++ b/assets/css/syntax.scss @@ -17,7 +17,7 @@ code.language-scss, .token.number, .token.inserted, .token.important { - color: var(--syntax-value-color, color-mix(in srgb, var(--accent), white)) !important; + color: var(--syntax-value-color, color-mix(in srgb, var(--accent), white)) !important; } .token.tag-id, @@ -34,7 +34,7 @@ code.language-scss, .token.class-name, .token.constant, .token.symbol { - color: var(--syntax-var-color, color-mix(in srgb, var(--accent) 90%, transparent)) !important; + color: var(--syntax-var-color, color-mix(in srgb, var(--accent) 90%, transparent)) !important; } .token.property, @@ -42,112 +42,111 @@ code.language-scss, .token.function-name, .token.deleted, code[class*="language-"], -.command-line-prompt > span:before { - color: var(--syntax-func-color, color-mix(in srgb, var(--accent) 70%, #999 30%)) !important; +.command-line-prompt>span:before { + color: var(--syntax-func-color, color-mix(in srgb, var(--accent) 70%, #999 30%)) !important; } .token.selector, .token.tag, .token.punctuation { - color: var(--syntax-punctuation-color); + color: var(--syntax-punctuation-color); } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: var(--syntax-comment-color) !important; + color: var(--syntax-comment-color) !important; } .token.namespace { - opacity: 0.7 !important; + opacity: 0.7 !important; } pre[data-line] { - position: relative; + position: relative; } pre[class*="language-"] { - margin: 0; - padding: 0; - overflow: auto; + margin: 0; + padding: 0; + overflow: auto; } .line-highlight { - position: absolute; - left: 0; - right: 0; - padding: 0; - margin: 0; - background: color-mix(in srgb, var(--syntax-line-highlight-mix), transparent 92%); - pointer-events: none; - line-height: inherit; - white-space: pre; + position: absolute; + left: 0; + right: 0; + padding: 0; + margin: 0; + background: color-mix(in srgb, var(--syntax-line-highlight-mix), transparent 92%); + pointer-events: none; + line-height: inherit; + white-space: pre; } .line-highlight:before, .line-highlight[data-end]:after { - content: attr(data-start); - position: absolute; - /* top: .4em; */ - left: 0.6em; - min-width: 1em; - padding: 0 0.5em; - background-color: var(--syntax-line-highlight-background-color); - color: var(--syntax-line-highlight-color); - font: bold 65%/1.5 sans-serif; - text-align: center; - vertical-align: 0.3em; - border-radius: 999px; - text-shadow: none; - box-shadow: 0 1px var(--syntax-line-highlight-box-shadow); + content: attr(data-start); + position: absolute; + left: 0.6em; + min-width: 1em; + padding: 0 0.5em; + background-color: var(--syntax-line-highlight-background-color); + color: var(--syntax-line-highlight-color); + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: 0.3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px var(--syntax-line-highlight-box-shadow); } .line-highlight[data-end]:after { - content: attr(data-end); - top: auto; - bottom: 0.4em; + content: attr(data-end); + top: auto; + bottom: 0.4em; } .line-numbers .line-highlight:before, .line-numbers .line-highlight:after { - content: none; + content: none; } .code-toolbar { - --code-margin: 40px; - position: relative; - margin: var(--code-margin) 0; - padding: 20px; - border: 1px solid var(--syntax-code-border-color); + --code-margin: 40px; + position: relative; + margin: var(--code-margin) 0; + padding: 20px; + border: 1px solid var(--syntax-code-border-color); - + .code-toolbar, - + .highlight, - + .highlight .code-toolbar { - border-top: 0; - margin-top: calc(-1 * var(--code-margin)); - } + +.code-toolbar, + +.highlight, + +.highlight .code-toolbar { + border-top: 0; + margin-top: calc(-1 * var(--code-margin)); + } - pre, - code { - border: none; - } + pre, + code { + border: none; + } - code { - display: block; - color: inherit; - } + code { + display: block; + color: inherit; + } - > .toolbar { - button { - font-size: 0.8em !important; - background: var(--syntax-code-copy-button-background) !important; - color: var(--syntax-code-copy-button-color) !important; - box-shadow: 0 2px 0 0 var(--syntax-code-copy-button-box-shadow-color) !important; - border-radius: 0 !important; - margin: 6px !important; - padding: 10px !important; - user-select: none; - } + >.toolbar { + button { + font-size: 0.8em !important; + background: var(--syntax-code-copy-button-background) !important; + color: var(--syntax-code-copy-button-color) !important; + box-shadow: 0 2px 0 0 var(--syntax-code-copy-button-box-shadow-color) !important; + border-radius: 0 !important; + margin: 6px !important; + padding: 10px !important; + user-select: none; } -} + } +} \ No newline at end of file diff --git a/assets/css/terms.scss b/assets/css/terms.scss index d2525c2..67f3755 100644 --- a/assets/css/terms.scss +++ b/assets/css/terms.scss @@ -19,4 +19,4 @@ color: var(--accent); } } -} +} \ No newline at end of file From 3e101bd51ef5ecf2a285e841cf4425100d89c4a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C4=A9nh=20Ph=C6=B0=E1=BB=9Bc?= Date: Sat, 8 Mar 2025 16:28:43 +0700 Subject: [PATCH 7/8] fix: Menu color is hardcoded as white --- assets/css/color/blue.scss | 1 + assets/css/color/green.scss | 1 + assets/css/color/orange.scss | 1 + assets/css/color/paper.scss | 1 + assets/css/color/pink.scss | 1 + assets/css/color/red.scss | 1 + assets/css/menu.scss | 14 ++++++++------ 7 files changed, 14 insertions(+), 6 deletions(-) diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss index 92ad485..5e88334 100644 --- a/assets/css/color/blue.scss +++ b/assets/css/color/blue.scss @@ -5,6 +5,7 @@ --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); --border-color: rgba(255, 255, 255, 0.1); --color: white; + --menu-color: white; // Use in code syntax highlighting --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss index 384bc34..9637c72 100644 --- a/assets/css/color/green.scss +++ b/assets/css/color/green.scss @@ -5,6 +5,7 @@ --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); --border-color: rgba(255, 255, 255, 0.1); --color: white; + --menu-color: white; // Use in code syntax highlighting --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss index c5eeb39..bc7c240 100644 --- a/assets/css/color/orange.scss +++ b/assets/css/color/orange.scss @@ -5,6 +5,7 @@ --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); --border-color: rgba(255, 255, 255, 0.1); --color: white; + --menu-color: white; // Use in code syntax highlighting --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); diff --git a/assets/css/color/paper.scss b/assets/css/color/paper.scss index 130d9a0..9555d5b 100644 --- a/assets/css/color/paper.scss +++ b/assets/css/color/paper.scss @@ -5,6 +5,7 @@ --background: color-mix(in srgb, var(--accent) 2%, #fefcfa 98%); --border-color: rgba(0, 0, 0, 0.1); --color: black; + --menu-color: black; // Use in code syntax highlighting --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #000 30%); diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss index c47a269..e99b477 100644 --- a/assets/css/color/pink.scss +++ b/assets/css/color/pink.scss @@ -5,6 +5,7 @@ --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); --border-color: rgba(255, 255, 255, 0.1); --color: white; + --menu-color: white; // Use in code syntax highlighting --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss index b8ace53..38b6229 100644 --- a/assets/css/color/red.scss +++ b/assets/css/color/red.scss @@ -5,6 +5,7 @@ --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); --border-color: rgba(255, 255, 255, 0.1); --color: white; + --menu-color: white; // Use in code syntax highlighting --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); diff --git a/assets/css/menu.scss b/assets/css/menu.scss index 5038dd2..3252f91 100644 --- a/assets/css/menu.scss +++ b/assets/css/menu.scss @@ -2,11 +2,12 @@ --shadow-color: color-mix(in srgb, var(--background), transparent 20%); display: none; flex-direction: column; - --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color); + --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), + 10px 10px var(--shadow-color); position: absolute; background: var(--background); box-shadow: var(--shadow); - color: white; + color: var(--menu-color); border: 2px solid; margin: 0; padding: 10px; @@ -45,7 +46,7 @@ margin: 0; padding: 0; - > li { + >li { flex: 0 0 auto; margin-bottom: 10px; white-space: nowrap; @@ -91,6 +92,7 @@ &--title { padding: 5px; } + &--list { list-style-type: unset; } @@ -103,7 +105,7 @@ display: flex; } - > li { + >li { flex: 0 0 auto; &:not(:last-of-type) { @@ -119,7 +121,7 @@ &--desktop { @media (max-width: $phone) { - display: none + display: none; } } @@ -163,4 +165,4 @@ right: 0; } } -} +} \ No newline at end of file From 41fe5f3cc7475bdf36ffb323419a1ef1af66c269 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C4=A9nh=20Ph=C6=B0=E1=BB=9Bc?= Date: Tue, 11 Mar 2025 18:31:51 +0700 Subject: [PATCH 8/8] refactor: De-duplicate CSS variable definition in color --- assets/css/color/blue.scss | 23 +---------------------- assets/css/color/green.scss | 23 +---------------------- assets/css/color/orange.scss | 23 +---------------------- assets/css/color/paper.scss | 23 +---------------------- assets/css/color/pink.scss | 23 +---------------------- assets/css/color/red.scss | 23 +---------------------- assets/css/style.scss | 4 ++++ assets/css/variables-light.scss | 29 +++++++++++++++++++++++++++++ assets/css/variables.scss | 27 +++++++++++++++++++++++++-- 9 files changed, 64 insertions(+), 134 deletions(-) create mode 100644 assets/css/variables-light.scss diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss index 5e88334..747d3d2 100644 --- a/assets/css/color/blue.scss +++ b/assets/css/color/blue.scss @@ -1,24 +1,3 @@ -:root { +html:root { --accent: #23b0ff; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); - --border-color: rgba(255, 255, 255, 0.1); - --color: white; - --menu-color: white; - - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); - --syntax-punctuation-color: white; - --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; - --syntax-code-border-color: rgba(255, 255, 255, 0.1); - --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #bbb; - --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); } \ No newline at end of file diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss index 9637c72..8193ab3 100644 --- a/assets/css/color/green.scss +++ b/assets/css/color/green.scss @@ -1,24 +1,3 @@ -:root { +html:root { --accent: #78e2a0; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); - --border-color: rgba(255, 255, 255, 0.1); - --color: white; - --menu-color: white; - - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); - --syntax-value-color: color-mix(in srgb, var(--accent), white); - --syntax-punctuation-color: 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; - --syntax-code-border-color: rgba(255, 255, 255, 0.1); - --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #bbb; - --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); } \ No newline at end of file diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss index bc7c240..0cc71b1 100644 --- a/assets/css/color/orange.scss +++ b/assets/css/color/orange.scss @@ -1,24 +1,3 @@ -:root { +html:root { --accent: #ffa86a; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); - --border-color: rgba(255, 255, 255, 0.1); - --color: white; - --menu-color: white; - - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); - --syntax-value-color: color-mix(in srgb, var(--accent), white); - --syntax-punctuation-color: 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; - --syntax-code-border-color: rgba(255, 255, 255, 0.1); - --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #bbb; - --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); } \ No newline at end of file diff --git a/assets/css/color/paper.scss b/assets/css/color/paper.scss index 9555d5b..1ae8f3b 100644 --- a/assets/css/color/paper.scss +++ b/assets/css/color/paper.scss @@ -1,24 +1,3 @@ -:root { +html: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; - --menu-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-punctuation-color: 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); } \ No newline at end of file diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss index e99b477..373b4c9 100644 --- a/assets/css/color/pink.scss +++ b/assets/css/color/pink.scss @@ -1,24 +1,3 @@ -:root { +html:root { --accent: #ee72f1; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); - --border-color: rgba(255, 255, 255, 0.1); - --color: white; - --menu-color: white; - - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); - --syntax-value-color: color-mix(in srgb, var(--accent), white); - --syntax-punctuation-color: 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; - --syntax-code-border-color: rgba(255, 255, 255, 0.1); - --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #bbb; - --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); } \ No newline at end of file diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss index 38b6229..ba1ea95 100644 --- a/assets/css/color/red.scss +++ b/assets/css/color/red.scss @@ -1,24 +1,3 @@ -:root { +html:root { --accent: #ff6266; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); - --border-color: rgba(255, 255, 255, 0.1); - --color: white; - --menu-color: white; - - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); - --syntax-value-color: color-mix(in srgb, var(--accent), white); - --syntax-punctuation-color: 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; - --syntax-code-border-color: rgba(255, 255, 255, 0.1); - --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #bbb; - --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); } \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss index 173b292..9779cca 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -1,6 +1,10 @@ $centerTheme: {{ if $.Site.Params.CenterTheme }}center{{ else }}flex-start{{ end }}; +{{ if in (slice "paper") $.Site.Params.ThemeColor }} +@import "variables-light"; +{{ else }} @import "variables"; +{{ end }} @import "font"; @import "buttons"; diff --git a/assets/css/variables-light.scss b/assets/css/variables-light.scss new file mode 100644 index 0000000..8d71369 --- /dev/null +++ b/assets/css/variables-light.scss @@ -0,0 +1,29 @@ +:root { + --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; + --menu-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-punctuation-color: 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); +} + +// Native CSS Variable aren't supported in a combination with MEDIA QUERIES. Wait for a new standard https://drafts.csswg.org/css-env-1/ +// --phone: "max-width: 684px"; +// --tablet: "max-width: 900px"; +$phone: 684px; +$tablet: 900px; \ No newline at end of file diff --git a/assets/css/variables.scss b/assets/css/variables.scss index 82d8599..d178b22 100644 --- a/assets/css/variables.scss +++ b/assets/css/variables.scss @@ -1,6 +1,29 @@ +:root { + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); + --border-color: rgba(255, 255, 255, 0.1); + --color: white; + --menu-color: white; + + // Use in code syntax highlighting + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); + --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); + --syntax-punctuation-color: white; + --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; + --syntax-code-border-color: rgba(255, 255, 255, 0.1); + --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); + --syntax-code-copy-button-color: #bbb; + --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); +} + // Native CSS Variable aren't supported in a combination with MEDIA QUERIES. Wait for a new standard https://drafts.csswg.org/css-env-1/ // --phone: "max-width: 684px"; // --tablet: "max-width: 900px"; - $phone: 684px; -$tablet: 900px; +$tablet: 900px; \ No newline at end of file