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] 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