diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 4a5b2722..c6e734d1 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -47,6 +47,7 @@ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --blur-sm: 8px; + --blur-xl: 24px; --blur-2xl: 40px; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -518,6 +519,7 @@ border-top-width: 1px; margin-top: 3em; margin-bottom: 3em; + border: 0.8px solid rgba(var(--color-neutral-300), 1); } :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 500; @@ -614,7 +616,6 @@ color: var(--tw-prose-code); font-weight: 600; font-size: 0.875em; - background-color: rgba(var(--color-neutral-50), 1); padding-top: 3px; padding-bottom: 3px; padding-left: 5px; @@ -741,9 +742,9 @@ --tw-prose-bold: rgba(var(--color-neutral-900), 1); --tw-prose-counters: rgba(var(--color-neutral-800), 1); --tw-prose-bullets: rgba(var(--color-neutral-500), 1); - --tw-prose-hr: rgba(var(--color-neutral-200), 1); + --tw-prose-hr: oklch(92.8% 0.006 264.531); --tw-prose-quotes: rgba(var(--color-neutral-700), 1); - --tw-prose-quote-borders: rgba(var(--color-primary-200), 1); + --tw-prose-quote-borders: rgba(var(--color-primary-500), 1); --tw-prose-captions: rgba(var(--color-neutral-500), 1); --tw-prose-kbd: oklch(21% 0.034 264.665); --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent); @@ -759,9 +760,9 @@ --tw-prose-invert-bold: rgba(var(--color-neutral), 1); --tw-prose-invert-counters: rgba(var(--color-neutral-400), 1); --tw-prose-invert-bullets: rgba(var(--color-neutral-600), 1); - --tw-prose-invert-hr: rgba(var(--color-neutral-500), 1); + --tw-prose-invert-hr: oklch(37.3% 0.034 259.733); --tw-prose-invert-quotes: rgba(var(--color-neutral-200), 1); - --tw-prose-invert-quote-borders: rgba(var(--color-primary-900), 1); + --tw-prose-invert-quote-borders: rgba(var(--color-primary-600), 1); --tw-prose-invert-captions: rgba(var(--color-neutral-400), 1); --tw-prose-invert-kbd: #fff; --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%); @@ -1609,8 +1610,8 @@ :where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) { background-color: rgba(var(--color-primary-400), 1); } - :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - background-color: rgba(var(--color-neutral-700), 1); + :where(code:not(pre code)):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + background-color: color-mix(in oklab, oklch(21% 0.006 285.885) 70%, transparent); } :where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) { text-decoration-color: rgba(var(--color-primary-400), 1); @@ -1618,6 +1619,9 @@ :where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) { text-decoration-color: rgba(var(--color-primary-400), 1); } + :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + border: 0.8px solid rgba(var(--color-neutral-500), 1); + } } .bg-\[\#6d6d6d\] { background-color: #6d6d6d; @@ -1640,6 +1644,12 @@ background-color: color-mix(in oklab, rgba(var(--color-neutral-100), 1) 50%, transparent); } } + .bg-neutral-100\/75 { + background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-100), 1), 1) 75%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-neutral-100), 1) 75%, transparent); + } + } .bg-neutral-300 { background-color: rgba(var(--color-neutral-300), 1); } @@ -2176,6 +2186,11 @@ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } + .backdrop-blur-xl { + --tw-backdrop-blur: blur(var(--blur-xl)); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -3056,8 +3071,8 @@ :where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) { background-color: rgba(var(--color-primary-400), 1); } - :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - background-color: rgba(var(--color-neutral-700), 1); + :where(code:not(pre code)):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + background-color: color-mix(in oklab, oklch(21% 0.006 285.885) 70%, transparent); } :where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) { text-decoration-color: rgba(var(--color-primary-400), 1); @@ -3065,6 +3080,9 @@ :where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) { text-decoration-color: rgba(var(--color-primary-400), 1); } + :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + border: 0.8px solid rgba(var(--color-neutral-500), 1); + } } } .dark\:bg-neutral-400 { @@ -3095,6 +3113,14 @@ } } } + .dark\:bg-neutral-800\/60 { + &:is(.dark *) { + background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 60%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 60%, transparent); + } + } + } .dark\:bg-neutral-900\/50 { &:is(.dark *) { background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 50%, transparent); @@ -3288,14 +3314,10 @@ .prose .chroma { position: static; border-radius: var(--radius-md); - background-color: rgba(var(--color-neutral-50), 1); - color: rgba(var(--color-neutral-700), 1); - &:is(.dark *) { - background-color: rgba(var(--color-neutral-700), 1); - } - &:is(.dark *) { - color: rgba(var(--color-neutral-200), 1); - } + } + .prose .highlight:not(:has(table)) .chroma, .prose .highlight > .chroma { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .chroma .lntd, .chroma .lntd pre { margin: calc(var(--spacing) * 0); @@ -3318,134 +3340,524 @@ margin-inline: calc(var(--spacing) * -4); display: block; width: auto; - background-color: rgba(var(--color-primary-100), 1); padding-inline: calc(var(--spacing) * 4); - &:is(.dark *) { - background-color: rgba(var(--color-primary-900), 1); - } } .chroma .lntd .hl { margin: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0); } - .chroma .lnt, .chroma .ln { - margin-right: 0.4em; - padding-inline: 0.4em; - padding-block: calc(var(--spacing) * 0); - color: rgba(var(--color-neutral-600), 1); - &:is(.dark *) { - color: rgba(var(--color-neutral-300), 1); + .chroma:not(:is(table *)) > code { + display: block; + min-width: max-content; + } + html:not(.dark) { + .bg { + background-color: #fff; + } + .chroma { + background-color: #fff; + } + .chroma .err { + color: #f6f8fa; + background-color: #82071e; + } + .chroma .lnlinks { + outline: none; + text-decoration: none; + color: inherit; + } + .chroma .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; + } + .chroma .lntable { + border-spacing: 0; + } + .chroma .hl { + background-color: #e5e5e5; + } + .chroma .lnt { + white-space: pre; + -webkit-user-select: none; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #7f7f7f; + } + .chroma .ln { + white-space: pre; + -webkit-user-select: none; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #7f7f7f; + } + .chroma .line { + display: flex; + } + .chroma .k { + color: #cf222e; + } + .chroma .kc { + color: #cf222e; + } + .chroma .kd { + color: #cf222e; + } + .chroma .kn { + color: #cf222e; + } + .chroma .kp { + color: #cf222e; + } + .chroma .kr { + color: #cf222e; + } + .chroma .kt { + color: #cf222e; + } + .chroma .na { + color: #1f2328; + } + .chroma .nc { + color: #1f2328; + } + .chroma .no { + color: #0550ae; + } + .chroma .nd { + color: #0550ae; + } + .chroma .ni { + color: #6639ba; + } + .chroma .nl { + color: #900; + font-weight: bold; + } + .chroma .nn { + color: #24292e; + } + .chroma .nx { + color: #1f2328; + } + .chroma .nt { + color: #0550ae; + } + .chroma .nb { + color: #6639ba; + } + .chroma .bp { + color: #6a737d; + } + .chroma .nv { + color: #953800; + } + .chroma .vc { + color: #953800; + } + .chroma .vg { + color: #953800; + } + .chroma .vi { + color: #953800; + } + .chroma .vm { + color: #953800; + } + .chroma .nf { + color: #6639ba; + } + .chroma .fm { + color: #6639ba; + } + .chroma .s { + color: #0a3069; + } + .chroma .sa { + color: #0a3069; + } + .chroma .sb { + color: #0a3069; + } + .chroma .sc { + color: #0a3069; + } + .chroma .dl { + color: #0a3069; + } + .chroma .sd { + color: #0a3069; + } + .chroma .s2 { + color: #0a3069; + } + .chroma .se { + color: #0a3069; + } + .chroma .sh { + color: #0a3069; + } + .chroma .si { + color: #0a3069; + } + .chroma .sx { + color: #0a3069; + } + .chroma .sr { + color: #0a3069; + } + .chroma .s1 { + color: #0a3069; + } + .chroma .ss { + color: #032f62; + } + .chroma .m { + color: #0550ae; + } + .chroma .mb { + color: #0550ae; + } + .chroma .mf { + color: #0550ae; + } + .chroma .mh { + color: #0550ae; + } + .chroma .mi { + color: #0550ae; + } + .chroma .il { + color: #0550ae; + } + .chroma .mo { + color: #0550ae; + } + .chroma .o { + color: #0550ae; + } + .chroma .ow { + color: #0550ae; + } + .chroma .p { + color: #1f2328; + } + .chroma .c { + color: #57606a; + } + .chroma .ch { + color: #57606a; + } + .chroma .cm { + color: #57606a; + } + .chroma .c1 { + color: #57606a; + } + .chroma .cs { + color: #57606a; + } + .chroma .cp { + color: #57606a; + } + .chroma .cpf { + color: #57606a; + } + .chroma .gd { + color: #82071e; + background-color: #ffebe9; + } + .chroma .ge { + color: #1f2328; + } + .chroma .gi { + color: #116329; + background-color: #dafbe1; + } + .chroma .go { + color: #1f2328; + } + .chroma .gl { + text-decoration: underline; + } + .chroma .w { + color: #fff; } } - .chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o { - color: rgba(var(--color-primary-600), 1); - &:is(.dark *) { - color: rgba(var(--color-primary-300), 1); + html.dark { + .bg { + color: #e6edf3; + background-color: #0d1117; } - } - .chroma .kc { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: rgba(var(--color-secondary-400), 1); - &:is(.dark *) { - color: rgba(var(--color-secondary-500), 1); + .chroma { + color: #e6edf3; + background-color: #0d1117; } - } - .chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo { - color: rgba(var(--color-secondary-400), 1); - &:is(.dark *) { - color: rgba(var(--color-secondary-600), 1); + .chroma .err { + color: #f85149; } - } - .chroma .n, .chroma .nd, .chroma .ni, .chroma .nl { - color: rgba(var(--color-secondary-900), 1); - &:is(.dark *) { - color: rgba(var(--color-secondary-200), 1); + .chroma .lnlinks { + outline: none; + text-decoration: none; + color: inherit; } - } - .chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt { - color: rgba(var(--color-secondary-800), 1); - &:is(.dark *) { - color: rgba(var(--color-secondary-300), 1); + .chroma .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; } - } - .chroma .no, .chroma .ne, .chroma .vg { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: rgba(var(--color-secondary-400), 1); - &:is(.dark *) { - color: rgba(var(--color-secondary-500), 1); + .chroma .lntable { + border-spacing: 0; } - } - .chroma .nf { - color: rgba(var(--color-secondary-600), 1); - &:is(.dark *) { - color: rgba(var(--color-secondary-500), 1); + .chroma .hl { + background-color: #333; } - } - .chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp { - color: rgba(var(--color-primary-800), 1); - &:is(.dark *) { - color: rgba(var(--color-primary-400), 1); + .chroma .lnt { + white-space: pre; + -webkit-user-select: none; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #737679; } - } - .chroma .se { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: rgba(var(--color-secondary-400), 1); - &:is(.dark *) { - color: rgba(var(--color-secondary-500), 1); + .chroma .ln { + white-space: pre; + -webkit-user-select: none; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #6e7681; } - } - .chroma .sr, .chroma .ss { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: rgba(var(--color-primary-800), 1); - &:is(.dark *) { - color: rgba(var(--color-primary-400), 1); + .chroma .line { + display: flex; } - } - .chroma .ow { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: rgba(var(--color-primary-400), 1); - &:is(.dark *) { - color: rgba(var(--color-primary-600), 1); + .chroma .k { + color: #ff7b72; } - } - .chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf { - color: rgba(var(--color-neutral-500), 1); - font-style: italic; - &:is(.dark *) { - color: rgba(var(--color-neutral-400), 1); + .chroma .kc { + color: #79c0ff; } - } - .chroma .ch { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: rgba(var(--color-neutral-500), 1); - font-style: italic; - &:is(.dark *) { - color: rgba(var(--color-neutral-400), 1); + .chroma .kd { + color: #ff7b72; + } + .chroma .kn { + color: #ff7b72; + } + .chroma .kp { + color: #79c0ff; + } + .chroma .kr { + color: #ff7b72; + } + .chroma .kt { + color: #ff7b72; + } + .chroma .nc { + color: #f0883e; + font-weight: bold; + } + .chroma .no { + color: #79c0ff; + font-weight: bold; + } + .chroma .nd { + color: #d2a8ff; + font-weight: bold; + } + .chroma .ni { + color: #ffa657; + } + .chroma .ne { + color: #f0883e; + font-weight: bold; + } + .chroma .nl { + color: #79c0ff; + font-weight: bold; + } + .chroma .nn { + color: #ff7b72; + } + .chroma .py { + color: #79c0ff; + } + .chroma .nt { + color: #7ee787; + } + .chroma .nv { + color: #79c0ff; + } + .chroma .vc { + color: #79c0ff; + } + .chroma .vg { + color: #79c0ff; + } + .chroma .vi { + color: #79c0ff; + } + .chroma .vm { + color: #79c0ff; + } + .chroma .nf { + color: #d2a8ff; + font-weight: bold; + } + .chroma .fm { + color: #d2a8ff; + font-weight: bold; + } + .chroma .l { + color: #a5d6ff; + } + .chroma .ld { + color: #79c0ff; + } + .chroma .s { + color: #a5d6ff; + } + .chroma .sa { + color: #79c0ff; + } + .chroma .sb { + color: #a5d6ff; + } + .chroma .sc { + color: #a5d6ff; + } + .chroma .dl { + color: #79c0ff; + } + .chroma .sd { + color: #a5d6ff; + } + .chroma .s2 { + color: #a5d6ff; + } + .chroma .se { + color: #79c0ff; + } + .chroma .sh { + color: #79c0ff; + } + .chroma .si { + color: #a5d6ff; + } + .chroma .sx { + color: #a5d6ff; + } + .chroma .sr { + color: #79c0ff; + } + .chroma .s1 { + color: #a5d6ff; + } + .chroma .ss { + color: #a5d6ff; + } + .chroma .m { + color: #a5d6ff; + } + .chroma .mb { + color: #a5d6ff; + } + .chroma .mf { + color: #a5d6ff; + } + .chroma .mh { + color: #a5d6ff; + } + .chroma .mi { + color: #a5d6ff; + } + .chroma .il { + color: #a5d6ff; + } + .chroma .mo { + color: #a5d6ff; + } + .chroma .o { + color: #ff7b72; + font-weight: bold; + } + .chroma .ow { + color: #ff7b72; + font-weight: bold; + } + .chroma .c { + color: #8b949e; + font-style: italic; + } + .chroma .ch { + color: #8b949e; + font-style: italic; + } + .chroma .cm { + color: #8b949e; + font-style: italic; + } + .chroma .c1 { + color: #8b949e; + font-style: italic; + } + .chroma .cs { + color: #8b949e; + font-weight: bold; + font-style: italic; + } + .chroma .cp { + color: #8b949e; + font-weight: bold; + font-style: italic; + } + .chroma .cpf { + color: #8b949e; + font-weight: bold; + font-style: italic; + } + .chroma .gd { + color: #ffa198; + background-color: #490202; + } + .chroma .ge { + font-style: italic; + } + .chroma .gr { + color: #ffa198; + } + .chroma .gh { + color: #79c0ff; + font-weight: bold; + } + .chroma .gi { + color: #56d364; + background-color: #0f5323; + } + .chroma .go { + color: #8b949e; + } + .chroma .gp { + color: #8b949e; + } + .chroma .gs { + font-weight: bold; + } + .chroma .gu { + color: #79c0ff; + } + .chroma .gt { + color: #ff7b72; + } + .chroma .gl { + text-decoration: underline; + } + .chroma .w { + color: #6e7681; } - } - .chroma .ge { - font-style: italic; - } - .chroma .gh { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: rgba(var(--color-neutral-500), 1); - } - .chroma .gs { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - } - .chroma .gu, .chroma .gt { - color: rgba(var(--color-neutral-500), 1); - } - .chroma .gl { - text-decoration-line: underline; } } #zen-mode-button { @@ -3522,6 +3934,9 @@ body.zen-mode-enable { .dark .ios-toggle::after { background: #f5f5f5; } +html.dark { + color-scheme: dark; +} body a, body button { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -3610,7 +4025,7 @@ button, [role="button"] { font-weight: var(--font-weight-normal); color: rgba(var(--color-neutral-700), 1); &:is(.dark *) { - color: rgba(var(--color-neutral-400), 1); + color: rgba(var(--color-neutral-300), 1); } } .toc ul > li { diff --git a/assets/css/components/chroma.css b/assets/css/components/chroma.css index 628714b6..3e42f821 100644 --- a/assets/css/components/chroma.css +++ b/assets/css/components/chroma.css @@ -1,8 +1,12 @@ - /* -- Chroma Highlight -- */ /* Background */ .prose .chroma { - @apply static rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200; + @apply static rounded-md; +} + +.prose .highlight:not(:has(table)) .chroma, +.prose .highlight > .chroma { + @apply shadow; } /* LineTableTD */ @@ -19,208 +23,173 @@ /* LineHighlight */ .chroma .hl { - @apply block w-auto px-4 -mx-4 bg-primary-100 dark:bg-primary-900; + @apply block w-auto px-4 -mx-4; } .chroma .lntd .hl { @apply p-0 m-0; } -/* LineNumbersTable */ -/* LineNumbers */ -.chroma .lnt, -.chroma .ln { - @apply text-neutral-600 dark:text-neutral-300 mr-[0.4em] px-[0.4em] py-0; +/* linenos=inline */ +.chroma:not(:is(table *)) > code { + display: block; + min-width: max-content; } -/* Keyword */ -/* KeywordDeclaration */ -/* KeywordNamespace */ -/* KeywordPseudo */ -/* KeywordReserved */ -/* NameClass */ -/* NameFunctionMagic */ -/* NameNamespace */ -/* NameVariableClass */ -/* Operator */ -.chroma .k, -.chroma .kd, -.chroma .kn, -.chroma .kp, -.chroma .kr, -.chroma .nc, -.chroma .fm, -.chroma .nn, -.chroma .vc, -.chroma .o { - @apply text-primary-600 dark:text-primary-300; -} +html:not(.dark) { +/* Generated using: hugo gen chromastyles --style=github */ -/* KeywordConstant */ -.chroma .kc { - @apply font-semibold text-secondary-400 dark:text-secondary-500; +/* Background */ .bg { background-color:#fff; } +/* PreWrapper */ .chroma { background-color:#fff; } +/* Error */ .chroma .err { color:#f6f8fa;background-color:#82071e } +/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } +/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } +/* LineTable */ .chroma .lntable { border-spacing:0; } +/* LineHighlight */ .chroma .hl { background-color:#e5e5e5 } +/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } +/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } +/* Line */ .chroma .line { display:flex; } +/* Keyword */ .chroma .k { color:#cf222e } +/* KeywordConstant */ .chroma .kc { color:#cf222e } +/* KeywordDeclaration */ .chroma .kd { color:#cf222e } +/* KeywordNamespace */ .chroma .kn { color:#cf222e } +/* KeywordPseudo */ .chroma .kp { color:#cf222e } +/* KeywordReserved */ .chroma .kr { color:#cf222e } +/* KeywordType */ .chroma .kt { color:#cf222e } +/* NameAttribute */ .chroma .na { color:#1f2328 } +/* NameClass */ .chroma .nc { color:#1f2328 } +/* NameConstant */ .chroma .no { color:#0550ae } +/* NameDecorator */ .chroma .nd { color:#0550ae } +/* NameEntity */ .chroma .ni { color:#6639ba } +/* NameLabel */ .chroma .nl { color:#900;font-weight:bold } +/* NameNamespace */ .chroma .nn { color:#24292e } +/* NameOther */ .chroma .nx { color:#1f2328 } +/* NameTag */ .chroma .nt { color:#0550ae } +/* NameBuiltin */ .chroma .nb { color:#6639ba } +/* NameBuiltinPseudo */ .chroma .bp { color:#6a737d } +/* NameVariable */ .chroma .nv { color:#953800 } +/* NameVariableClass */ .chroma .vc { color:#953800 } +/* NameVariableGlobal */ .chroma .vg { color:#953800 } +/* NameVariableInstance */ .chroma .vi { color:#953800 } +/* NameVariableMagic */ .chroma .vm { color:#953800 } +/* NameFunction */ .chroma .nf { color:#6639ba } +/* NameFunctionMagic */ .chroma .fm { color:#6639ba } +/* LiteralString */ .chroma .s { color:#0a3069 } +/* LiteralStringAffix */ .chroma .sa { color:#0a3069 } +/* LiteralStringBacktick */ .chroma .sb { color:#0a3069 } +/* LiteralStringChar */ .chroma .sc { color:#0a3069 } +/* LiteralStringDelimiter */ .chroma .dl { color:#0a3069 } +/* LiteralStringDoc */ .chroma .sd { color:#0a3069 } +/* LiteralStringDouble */ .chroma .s2 { color:#0a3069 } +/* LiteralStringEscape */ .chroma .se { color:#0a3069 } +/* LiteralStringHeredoc */ .chroma .sh { color:#0a3069 } +/* LiteralStringInterpol */ .chroma .si { color:#0a3069 } +/* LiteralStringOther */ .chroma .sx { color:#0a3069 } +/* LiteralStringRegex */ .chroma .sr { color:#0a3069 } +/* LiteralStringSingle */ .chroma .s1 { color:#0a3069 } +/* LiteralStringSymbol */ .chroma .ss { color:#032f62 } +/* LiteralNumber */ .chroma .m { color:#0550ae } +/* LiteralNumberBin */ .chroma .mb { color:#0550ae } +/* LiteralNumberFloat */ .chroma .mf { color:#0550ae } +/* LiteralNumberHex */ .chroma .mh { color:#0550ae } +/* LiteralNumberInteger */ .chroma .mi { color:#0550ae } +/* LiteralNumberIntegerLong */ .chroma .il { color:#0550ae } +/* LiteralNumberOct */ .chroma .mo { color:#0550ae } +/* Operator */ .chroma .o { color:#0550ae } +/* OperatorWord */ .chroma .ow { color:#0550ae } +/* Punctuation */ .chroma .p { color:#1f2328 } +/* Comment */ .chroma .c { color:#57606a } +/* CommentHashbang */ .chroma .ch { color:#57606a } +/* CommentMultiline */ .chroma .cm { color:#57606a } +/* CommentSingle */ .chroma .c1 { color:#57606a } +/* CommentSpecial */ .chroma .cs { color:#57606a } +/* CommentPreproc */ .chroma .cp { color:#57606a } +/* CommentPreprocFile */ .chroma .cpf { color:#57606a } +/* GenericDeleted */ .chroma .gd { color:#82071e;background-color:#ffebe9 } +/* GenericEmph */ .chroma .ge { color:#1f2328 } +/* GenericInserted */ .chroma .gi { color:#116329;background-color:#dafbe1 } +/* GenericOutput */ .chroma .go { color:#1f2328 } +/* GenericUnderline */ .chroma .gl { text-decoration:underline } +/* TextWhitespace */ .chroma .w { color:#fff } } +html.dark { +/* Generated using: hugo gen chromastyles --style=github-dark */ -/* KeywordType */ -/* NameVariable */ -/* NameVariableInstance */ -/* NameVariableMagic */ -/* LiteralNumber */ -/* LiteralNumberBin */ -/* LiteralNumberFloat */ -/* LiteralNumberHex */ -/* LiteralNumberInteger */ -/* LiteralNumberIntegerLong */ -/* LiteralNumberOct */ -.chroma .kt, -.chroma .nv, -.chroma .vi, -.chroma .vm, -.chroma .m, -.chroma .mb, -.chroma .mf, -.chroma .mh, -.chroma .mi, -.chroma .il, -.chroma .mo { - @apply text-secondary-400 dark:text-secondary-600; -} - -/* Name */ -/* NameDecorator */ -/* NameEntity */ -/* NameLabel */ -.chroma .n, -.chroma .nd, -.chroma .ni, -.chroma .nl { - @apply text-secondary-900 dark:text-secondary-200; -} - -/* NameAttribute */ -/* NameBuiltin */ -/* NameBuiltinPseudo */ -/* NameOther */ -/* NameProperty */ -/* NameTag */ -.chroma .na, -.chroma .nb, -.chroma .bp, -.chroma .nx, -.chroma .py, -.chroma .nt { - @apply text-secondary-800 dark:text-secondary-300; -} - -/* NameConstant */ -/* NameException */ -/* NameVariableGlobal */ -.chroma .no, -.chroma .ne, -.chroma .vg { - @apply font-semibold text-secondary-400 dark:text-secondary-500; -} - -/* NameFunction */ -.chroma .nf { - @apply text-secondary-600 dark:text-secondary-500; -} - -/* Literal */ -/* LiteralDate */ -/* LiteralString */ -/* LiteralStringAffix */ -/* LiteralStringBacktick */ -/* LiteralStringChar */ -/* LiteralStringDelimiter */ -/* LiteralStringDoc */ -/* LiteralStringDouble */ -/* LiteralStringHeredoc */ -/* LiteralStringInterpol */ -/* LiteralStringOther */ -/* LiteralStringSingle */ -/* GenericInserted */ -/* GenericOutput */ -/* GenericPrompt */ -.chroma .l, -.chroma .ld, -.chroma .s, -.chroma .sa, -.chroma .sb, -.chroma .sc, -.chroma .dl, -.chroma .sd, -.chroma .s2, -.chroma .sh, -.chroma .si, -.chroma .sx, -.chroma .s1, -.chroma .gi, -.chroma .go, -.chroma .gp { - @apply text-primary-800 dark:text-primary-400; -} - -/* LiteralStringEscape */ -.chroma .se { - @apply font-semibold text-secondary-400 dark:text-secondary-500; -} - -/* LiteralStringRegex */ -/* LiteralStringSymbol */ -.chroma .sr, -.chroma .ss { - @apply font-semibold text-primary-800 dark:text-primary-400; -} - -/* OperatorWord */ -.chroma .ow { - @apply font-semibold text-primary-400 dark:text-primary-600; -} - -/* Comment */ -/* CommentMultiline */ -/* CommentSingle */ -/* CommentSpecial */ -/* CommentPreproc */ -/* CommentPreprocFile */ -.chroma .c, -.chroma .cm, -.chroma .c1, -.chroma .cs, -.chroma .cp, -.chroma .cpf { - @apply italic text-neutral-500 dark:text-neutral-400; -} - -/* CommentHashbang */ -.chroma .ch { - @apply italic font-semibold text-neutral-500 dark:text-neutral-400; -} - -/* GenericEmph */ -.chroma .ge { - @apply italic; -} - -/* GenericHeading */ -.chroma .gh { - @apply font-semibold text-neutral-500; -} - -/* GenericStrong */ -.chroma .gs { - @apply font-semibold; -} - -/* GenericSubheading */ -/* GenericTraceback */ -.chroma .gu, -.chroma .gt { - @apply text-neutral-500; -} - -/* GenericUnderline */ -.chroma .gl { - @apply underline; +/* Background */ .bg { color:#e6edf3;background-color:#0d1117; } +/* PreWrapper */ .chroma { color:#e6edf3;background-color:#0d1117; } +/* Error */ .chroma .err { color:#f85149 } +/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } +/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } +/* LineTable */ .chroma .lntable { border-spacing:0; } +/* LineHighlight */ .chroma .hl { background-color:#333 } +/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#737679 } +/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681 } +/* Line */ .chroma .line { display:flex; } +/* Keyword */ .chroma .k { color:#ff7b72 } +/* KeywordConstant */ .chroma .kc { color:#79c0ff } +/* KeywordDeclaration */ .chroma .kd { color:#ff7b72 } +/* KeywordNamespace */ .chroma .kn { color:#ff7b72 } +/* KeywordPseudo */ .chroma .kp { color:#79c0ff } +/* KeywordReserved */ .chroma .kr { color:#ff7b72 } +/* KeywordType */ .chroma .kt { color:#ff7b72 } +/* NameClass */ .chroma .nc { color:#f0883e;font-weight:bold } +/* NameConstant */ .chroma .no { color:#79c0ff;font-weight:bold } +/* NameDecorator */ .chroma .nd { color:#d2a8ff;font-weight:bold } +/* NameEntity */ .chroma .ni { color:#ffa657 } +/* NameException */ .chroma .ne { color:#f0883e;font-weight:bold } +/* NameLabel */ .chroma .nl { color:#79c0ff;font-weight:bold } +/* NameNamespace */ .chroma .nn { color:#ff7b72 } +/* NameProperty */ .chroma .py { color:#79c0ff } +/* NameTag */ .chroma .nt { color:#7ee787 } +/* NameVariable */ .chroma .nv { color:#79c0ff } +/* NameVariableClass */ .chroma .vc { color:#79c0ff } +/* NameVariableGlobal */ .chroma .vg { color:#79c0ff } +/* NameVariableInstance */ .chroma .vi { color:#79c0ff } +/* NameVariableMagic */ .chroma .vm { color:#79c0ff } +/* NameFunction */ .chroma .nf { color:#d2a8ff;font-weight:bold } +/* NameFunctionMagic */ .chroma .fm { color:#d2a8ff;font-weight:bold } +/* Literal */ .chroma .l { color:#a5d6ff } +/* LiteralDate */ .chroma .ld { color:#79c0ff } +/* LiteralString */ .chroma .s { color:#a5d6ff } +/* LiteralStringAffix */ .chroma .sa { color:#79c0ff } +/* LiteralStringBacktick */ .chroma .sb { color:#a5d6ff } +/* LiteralStringChar */ .chroma .sc { color:#a5d6ff } +/* LiteralStringDelimiter */ .chroma .dl { color:#79c0ff } +/* LiteralStringDoc */ .chroma .sd { color:#a5d6ff } +/* LiteralStringDouble */ .chroma .s2 { color:#a5d6ff } +/* LiteralStringEscape */ .chroma .se { color:#79c0ff } +/* LiteralStringHeredoc */ .chroma .sh { color:#79c0ff } +/* LiteralStringInterpol */ .chroma .si { color:#a5d6ff } +/* LiteralStringOther */ .chroma .sx { color:#a5d6ff } +/* LiteralStringRegex */ .chroma .sr { color:#79c0ff } +/* LiteralStringSingle */ .chroma .s1 { color:#a5d6ff } +/* LiteralStringSymbol */ .chroma .ss { color:#a5d6ff } +/* LiteralNumber */ .chroma .m { color:#a5d6ff } +/* LiteralNumberBin */ .chroma .mb { color:#a5d6ff } +/* LiteralNumberFloat */ .chroma .mf { color:#a5d6ff } +/* LiteralNumberHex */ .chroma .mh { color:#a5d6ff } +/* LiteralNumberInteger */ .chroma .mi { color:#a5d6ff } +/* LiteralNumberIntegerLong */ .chroma .il { color:#a5d6ff } +/* LiteralNumberOct */ .chroma .mo { color:#a5d6ff } +/* Operator */ .chroma .o { color:#ff7b72;font-weight:bold } +/* OperatorWord */ .chroma .ow { color:#ff7b72;font-weight:bold } +/* Comment */ .chroma .c { color:#8b949e;font-style:italic } +/* CommentHashbang */ .chroma .ch { color:#8b949e;font-style:italic } +/* CommentMultiline */ .chroma .cm { color:#8b949e;font-style:italic } +/* CommentSingle */ .chroma .c1 { color:#8b949e;font-style:italic } +/* CommentSpecial */ .chroma .cs { color:#8b949e;font-weight:bold;font-style:italic } +/* CommentPreproc */ .chroma .cp { color:#8b949e;font-weight:bold;font-style:italic } +/* CommentPreprocFile */ .chroma .cpf { color:#8b949e;font-weight:bold;font-style:italic } +/* GenericDeleted */ .chroma .gd { color:#ffa198;background-color:#490202 } +/* GenericEmph */ .chroma .ge { font-style:italic } +/* GenericError */ .chroma .gr { color:#ffa198 } +/* GenericHeading */ .chroma .gh { color:#79c0ff;font-weight:bold } +/* GenericInserted */ .chroma .gi { color:#56d364;background-color:#0f5323 } +/* GenericOutput */ .chroma .go { color:#8b949e } +/* GenericPrompt */ .chroma .gp { color:#8b949e } +/* GenericStrong */ .chroma .gs { font-weight:bold } +/* GenericSubheading */ .chroma .gu { color:#79c0ff } +/* GenericTraceback */ .chroma .gt { color:#ff7b72 } +/* GenericUnderline */ .chroma .gl { text-decoration:underline } +/* TextWhitespace */ .chroma .w { color:#6e7681 } } diff --git a/assets/css/main.css b/assets/css/main.css index c270f924..8c19a5d5 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -7,6 +7,10 @@ @import "./components/zen-mode.css"; @import "./components/a11y.css"; +html.dark { + color-scheme: dark; +} + body a, body button { @apply transition-colors; @@ -82,7 +86,7 @@ button, } .toc a { - @apply font-normal text-neutral-700 dark:text-neutral-400; + @apply font-normal text-neutral-700 dark:text-neutral-300; } .toc ul > li { diff --git a/exampleSite/content/docs/advanced-customisation/index.it.md b/exampleSite/content/docs/advanced-customisation/index.it.md index 35e5bc30..1f363b55 100644 --- a/exampleSite/content/docs/advanced-customisation/index.it.md +++ b/exampleSite/content/docs/advanced-customisation/index.it.md @@ -126,7 +126,7 @@ Simply by changing this one value, all the font sizes on your website will be ad ### Changing Syntax Highlighting Theme -Blowfish uses a custom syntax highlighting style, with colors defined in `assets/css/schemes`. To change the syntax highlighting theme, create `assets/css/custom.css` and add the following: +To change the syntax highlighting theme, create `assets/css/custom.css` and add the following: ```css .chroma, diff --git a/exampleSite/content/docs/advanced-customisation/index.ja.md b/exampleSite/content/docs/advanced-customisation/index.ja.md index 59fc0e61..2d6d1988 100644 --- a/exampleSite/content/docs/advanced-customisation/index.ja.md +++ b/exampleSite/content/docs/advanced-customisation/index.ja.md @@ -127,7 +127,7 @@ html { ### シンタックスハイライトテーマの変更 -Blowfish はカスタム構文ハイライトスタイルを使用しており、色は `assets/css/schemes` に定義されています。構文ハイライトテーマを変更するには、`assets/css/custom.css` を作成し、次の内容を追加してください： +構文ハイライトテーマを変更するには、`assets/css/custom.css` を作成し、次の内容を追加してください： ```css .chroma, diff --git a/exampleSite/content/docs/advanced-customisation/index.md b/exampleSite/content/docs/advanced-customisation/index.md index 35e5bc30..1f363b55 100644 --- a/exampleSite/content/docs/advanced-customisation/index.md +++ b/exampleSite/content/docs/advanced-customisation/index.md @@ -126,7 +126,7 @@ Simply by changing this one value, all the font sizes on your website will be ad ### Changing Syntax Highlighting Theme -Blowfish uses a custom syntax highlighting style, with colors defined in `assets/css/schemes`. To change the syntax highlighting theme, create `assets/css/custom.css` and add the following: +To change the syntax highlighting theme, create `assets/css/custom.css` and add the following: ```css .chroma, diff --git a/exampleSite/content/docs/advanced-customisation/index.zh-cn.md b/exampleSite/content/docs/advanced-customisation/index.zh-cn.md index 94ba2ce5..2b014e1b 100644 --- a/exampleSite/content/docs/advanced-customisation/index.zh-cn.md +++ b/exampleSite/content/docs/advanced-customisation/index.zh-cn.md @@ -125,7 +125,7 @@ html { ### 更换语法高亮主题 -Blowfish 使用自定义的语法高亮样式，颜色定义在 `assets/css/schemes` 中。要更换语法高亮主题，请创建 `assets/css/custom.css`，然后添加以下内容： +要更换语法高亮主题，请创建 `assets/css/custom.css`，然后添加以下内容： ```css .chroma, diff --git a/layouts/partials/article-link/_shortcode.html b/layouts/partials/article-link/_shortcode.html index c6cb2f03..44936378 100644 --- a/layouts/partials/article-link/_shortcode.html +++ b/layouts/partials/article-link/_shortcode.html @@ -18,7 +18,7 @@ {{ $cardContentClasses := "" }} {{ if site.Params.list.showCards }} - {{ $cardClasses = printf "%s overflow-hidden rounded-md border-2 border-neutral-200 dark:border-neutral-700" $cardClasses }} + {{ $cardClasses = printf "%s overflow-hidden rounded-lg border border-neutral-300 dark:border-neutral-600" $cardClasses }} {{ $imgWrapperClasses = "" }} {{ $cardContentClasses = printf "%s p-4 pt-2" $cardContentClasses }} {{ else }} @@ -85,7 +85,7 @@
{{ with $target.Params.featuredImageAlt }}{{ . }}{{ else }}{{ $target.Title | emojify }}{{ end }} diff --git a/layouts/partials/article-link/card-related.html b/layouts/partials/article-link/card-related.html index 0e4fdfd7..10b25c1c 100644 --- a/layouts/partials/article-link/card-related.html +++ b/layouts/partials/article-link/card-related.html @@ -51,12 +51,12 @@
+ class="relative min-h-full min-w-full overflow-hidden rounded-lg border border-neutral-300 dark:border-neutral-600"> {{ with $featuredURL }}
{{ $page.Title }} {{ end }} -
+
+ class="relative min-h-full min-w-full overflow-hidden rounded-lg border border-neutral-300 dark:border-neutral-600"> {{ with $featuredURL }}
{{ $page.Title | plainify }} @@ -71,7 +71,7 @@ {{ partial "badge.html" (i18n "article.draft" | emojify) }} {{ end }} -
+
{{ $.Params.featuredImageAlt | default ($.Title | emojify) }} diff --git a/layouts/partials/hero/background.html b/layouts/partials/hero/background.html index bc1cee73..8f1f568d 100644 --- a/layouts/partials/hero/background.html +++ b/layouts/partials/hero/background.html @@ -69,7 +69,7 @@ {{ $.Title }}
+ class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-xl bg-neutral-100/75 dark:bg-neutral-800/60">
{{ $backgroundBlur := resources.Get "js/background-blur.js" }} {{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}