From 4a2e4aa4ed90a1ce338fe44a713512a2674b9060 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20Cora=C3=A7=C3=A3o?= Date: Mon, 26 May 2025 23:41:33 +0100 Subject: [PATCH] add icons to docs --- assets/css/compiled/main.css | 284 ++++++++++++++---- exampleSite/content/samples/icons/index.it.md | 7 +- exampleSite/content/samples/icons/index.ja.md | 6 +- exampleSite/content/samples/icons/index.md | 6 +- .../content/samples/icons/index.zh-cn.md | 11 +- 5 files changed, 248 insertions(+), 66 deletions(-) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index ad8ff2ec..817ee1e9 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1,4 +1,4 @@ -/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */ /*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */ @layer properties; #zen-mode-button { @@ -392,9 +392,15 @@ body.zen-mode-enable { color: var(--tw-prose-links); text-decoration: none; font-weight: 500; - text-decoration-color: rgba(var(--color-primary-300), 1); + text-decoration-color: color-mix(in srgb, rgba(rgba(var(--color-primary-300), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + text-decoration-color: color-mix(in oklab, rgba(var(--color-primary-300), 1) 100%, transparent); + } &:hover { - color: rgba(var(--color-primary-600), 1); + color: color-mix(in srgb, rgba(rgba(var(--color-primary-600), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, rgba(var(--color-primary-600), 1) 100%, transparent); + } text-decoration: none; border-radius: 0.09rem; } @@ -557,14 +563,20 @@ body.zen-mode-enable { padding-inline-end: 0.375em; padding-bottom: 0.1875em; padding-inline-start: 0.375em; - background-color: rgba(var(--color-neutral-200), 1); + background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-200), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-neutral-200), 1) 100%, transparent); + } padding: 0.1rem 0.4rem; } :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-code); font-weight: 600; font-size: 0.875em; - background-color: rgba(var(--color-neutral-50), 1); + background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-50), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-neutral-50), 1) 100%, transparent); + } padding-top: 3px; padding-bottom: 3px; padding-left: 5px; @@ -684,42 +696,138 @@ body.zen-mode-enable { line-height: 1.4285714; margin-top: 0.8571429em; } - --tw-prose-body: rgba(var(--color-neutral-700), 1); - --tw-prose-headings: rgba(var(--color-neutral-800), 1); - --tw-prose-lead: rgba(var(--color-neutral-500), 1); - --tw-prose-links: rgba(var(--color-primary-600), 1); - --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-quotes: rgba(var(--color-neutral-700), 1); - --tw-prose-quote-borders: rgba(var(--color-primary-200), 1); - --tw-prose-captions: rgba(var(--color-neutral-500), 1); + --tw-prose-body: color-mix(in srgb, rgba(rgba(var(--color-neutral-700), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-body: color-mix(in oklab, rgba(var(--color-neutral-700), 1) 100%, transparent); + } + --tw-prose-headings: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-headings: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 100%, transparent); + } + --tw-prose-lead: color-mix(in srgb, rgba(rgba(var(--color-neutral-500), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-lead: color-mix(in oklab, rgba(var(--color-neutral-500), 1) 100%, transparent); + } + --tw-prose-links: color-mix(in srgb, rgba(rgba(var(--color-primary-600), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-links: color-mix(in oklab, rgba(var(--color-primary-600), 1) 100%, transparent); + } + --tw-prose-bold: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-bold: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 100%, transparent); + } + --tw-prose-counters: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-counters: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 100%, transparent); + } + --tw-prose-bullets: color-mix(in srgb, rgba(rgba(var(--color-neutral-500), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-bullets: color-mix(in oklab, rgba(var(--color-neutral-500), 1) 100%, transparent); + } + --tw-prose-hr: color-mix(in srgb, rgba(rgba(var(--color-neutral-200), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-hr: color-mix(in oklab, rgba(var(--color-neutral-200), 1) 100%, transparent); + } + --tw-prose-quotes: color-mix(in srgb, rgba(rgba(var(--color-neutral-700), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-quotes: color-mix(in oklab, rgba(var(--color-neutral-700), 1) 100%, transparent); + } + --tw-prose-quote-borders: color-mix(in srgb, rgba(rgba(var(--color-primary-200), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-quote-borders: color-mix(in oklab, rgba(var(--color-primary-200), 1) 100%, transparent); + } + --tw-prose-captions: color-mix(in srgb, rgba(rgba(var(--color-neutral-500), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-captions: color-mix(in oklab, rgba(var(--color-neutral-500), 1) 100%, transparent); + } --tw-prose-kbd: oklch(21% 0.034 264.665); --tw-prose-kbd-shadows: NaN NaN NaN; - --tw-prose-code: rgba(var(--color-secondary-700), 1); - --tw-prose-pre-code: rgba(var(--color-neutral-700), 1); - --tw-prose-pre-bg: rgba(var(--color-neutral-50), 1); - --tw-prose-th-borders: rgba(var(--color-neutral-500), 1); - --tw-prose-td-borders: rgba(var(--color-neutral-300), 1); - --tw-prose-invert-body: rgba(var(--color-neutral-300), 1); - --tw-prose-invert-headings: rgba(var(--color-neutral-50), 1); - --tw-prose-invert-lead: rgba(var(--color-neutral-500), 1); - --tw-prose-invert-links: rgba(var(--color-primary-400), 1); - --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-quotes: rgba(var(--color-neutral-200), 1); - --tw-prose-invert-quote-borders: rgba(var(--color-primary-900), 1); - --tw-prose-invert-captions: rgba(var(--color-neutral-400), 1); + --tw-prose-code: color-mix(in srgb, rgba(rgba(var(--color-secondary-700), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-code: color-mix(in oklab, rgba(var(--color-secondary-700), 1) 100%, transparent); + } + --tw-prose-pre-code: color-mix(in srgb, rgba(rgba(var(--color-neutral-700), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-pre-code: color-mix(in oklab, rgba(var(--color-neutral-700), 1) 100%, transparent); + } + --tw-prose-pre-bg: color-mix(in srgb, rgba(rgba(var(--color-neutral-50), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-pre-bg: color-mix(in oklab, rgba(var(--color-neutral-50), 1) 100%, transparent); + } + --tw-prose-th-borders: color-mix(in srgb, rgba(rgba(var(--color-neutral-500), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-th-borders: color-mix(in oklab, rgba(var(--color-neutral-500), 1) 100%, transparent); + } + --tw-prose-td-borders: color-mix(in srgb, rgba(rgba(var(--color-neutral-300), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-td-borders: color-mix(in oklab, rgba(var(--color-neutral-300), 1) 100%, transparent); + } + --tw-prose-invert-body: color-mix(in srgb, rgba(rgba(var(--color-neutral-300), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-body: color-mix(in oklab, rgba(var(--color-neutral-300), 1) 100%, transparent); + } + --tw-prose-invert-headings: color-mix(in srgb, rgba(rgba(var(--color-neutral-50), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-headings: color-mix(in oklab, rgba(var(--color-neutral-50), 1) 100%, transparent); + } + --tw-prose-invert-lead: color-mix(in srgb, rgba(rgba(var(--color-neutral-500), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-lead: color-mix(in oklab, rgba(var(--color-neutral-500), 1) 100%, transparent); + } + --tw-prose-invert-links: color-mix(in srgb, rgba(rgba(var(--color-primary-400), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-links: color-mix(in oklab, rgba(var(--color-primary-400), 1) 100%, transparent); + } + --tw-prose-invert-bold: color-mix(in srgb, rgba(rgba(var(--color-neutral), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-bold: color-mix(in oklab, rgba(var(--color-neutral), 1) 100%, transparent); + } + --tw-prose-invert-counters: color-mix(in srgb, rgba(rgba(var(--color-neutral-400), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-counters: color-mix(in oklab, rgba(var(--color-neutral-400), 1) 100%, transparent); + } + --tw-prose-invert-bullets: color-mix(in srgb, rgba(rgba(var(--color-neutral-600), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-bullets: color-mix(in oklab, rgba(var(--color-neutral-600), 1) 100%, transparent); + } + --tw-prose-invert-hr: color-mix(in srgb, rgba(rgba(var(--color-neutral-500), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-hr: color-mix(in oklab, rgba(var(--color-neutral-500), 1) 100%, transparent); + } + --tw-prose-invert-quotes: color-mix(in srgb, rgba(rgba(var(--color-neutral-200), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-quotes: color-mix(in oklab, rgba(var(--color-neutral-200), 1) 100%, transparent); + } + --tw-prose-invert-quote-borders: color-mix(in srgb, rgba(rgba(var(--color-primary-900), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-quote-borders: color-mix(in oklab, rgba(var(--color-primary-900), 1) 100%, transparent); + } + --tw-prose-invert-captions: color-mix(in srgb, rgba(rgba(var(--color-neutral-400), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-captions: color-mix(in oklab, rgba(var(--color-neutral-400), 1) 100%, transparent); + } --tw-prose-invert-kbd: #fff; --tw-prose-invert-kbd-shadows: 255 255 255; - --tw-prose-invert-code: rgba(var(--color-secondary-400), 1); - --tw-prose-invert-pre-code: rgba(var(--color-neutral-200), 1); - --tw-prose-invert-pre-bg: rgba(var(--color-neutral-700), 1); - --tw-prose-invert-th-borders: rgba(var(--color-neutral-500), 1); - --tw-prose-invert-td-borders: rgba(var(--color-neutral-700), 1); + --tw-prose-invert-code: color-mix(in srgb, rgba(rgba(var(--color-secondary-400), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-code: color-mix(in oklab, rgba(var(--color-secondary-400), 1) 100%, transparent); + } + --tw-prose-invert-pre-code: color-mix(in srgb, rgba(rgba(var(--color-neutral-200), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-pre-code: color-mix(in oklab, rgba(var(--color-neutral-200), 1) 100%, transparent); + } + --tw-prose-invert-pre-bg: color-mix(in srgb, rgba(rgba(var(--color-neutral-700), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-pre-bg: color-mix(in oklab, rgba(var(--color-neutral-700), 1) 100%, transparent); + } + --tw-prose-invert-th-borders: color-mix(in srgb, rgba(rgba(var(--color-neutral-500), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-th-borders: color-mix(in oklab, rgba(var(--color-neutral-500), 1) 100%, transparent); + } + --tw-prose-invert-td-borders: color-mix(in srgb, rgba(rgba(var(--color-neutral-700), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-invert-td-borders: color-mix(in oklab, rgba(var(--color-neutral-700), 1) 100%, transparent); + } font-size: 1rem; line-height: 1.75; :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { @@ -805,8 +913,14 @@ body.zen-mode-enable { margin-bottom: 0; } :where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: rgba(var(--color-neutral-800), 1); - background-color: rgba(var(--color-primary-600), 1); + color: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 100%, transparent); + } + background-color: color-mix(in srgb, rgba(rgba(var(--color-primary-600), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-primary-600), 1) 100%, transparent); + } padding: 0.1rem 0.2rem; border-radius: 0.25rem; } @@ -817,10 +931,16 @@ body.zen-mode-enable { display: none; } :where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - text-decoration-color: rgba(var(--color-primary-600), 1); + text-decoration-color: color-mix(in srgb, rgba(rgba(var(--color-primary-600), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + text-decoration-color: color-mix(in oklab, rgba(var(--color-primary-600), 1) 100%, transparent); + } } :where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - text-decoration-color: rgba(var(--color-primary-600), 1); + text-decoration-color: color-mix(in srgb, rgba(rgba(var(--color-primary-600), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + text-decoration-color: color-mix(in oklab, rgba(var(--color-primary-600), 1) 100%, transparent); + } } } .\!mt-0 { @@ -1529,26 +1649,50 @@ body.zen-mode-enable { --tw-prose-th-borders: var(--tw-prose-invert-th-borders); --tw-prose-td-borders: var(--tw-prose-invert-td-borders); :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - text-decoration-color: rgba(var(--color-neutral-600), 1); + text-decoration-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-600), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + text-decoration-color: color-mix(in oklab, rgba(var(--color-neutral-600), 1) 100%, transparent); + } &:hover { - color: rgba(var(--color-primary-400), 1); + color: color-mix(in srgb, rgba(rgba(var(--color-primary-400), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, rgba(var(--color-primary-400), 1) 100%, transparent); + } } } :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: rgba(var(--color-neutral-200), 1); - background-color: rgba(var(--color-neutral-700), 1); + color: color-mix(in srgb, rgba(rgba(var(--color-neutral-200), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, rgba(var(--color-neutral-200), 1) 100%, transparent); + } + background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-700), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-neutral-700), 1) 100%, transparent); + } } :where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - background-color: rgba(var(--color-primary-400), 1); + background-color: color-mix(in srgb, rgba(rgba(var(--color-primary-400), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-primary-400), 1) 100%, transparent); + } } :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - background-color: rgba(var(--color-neutral-700), 1); + background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-700), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-neutral-700), 1) 100%, transparent); + } } :where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - text-decoration-color: rgba(var(--color-primary-400), 1); + text-decoration-color: color-mix(in srgb, rgba(rgba(var(--color-primary-400), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + text-decoration-color: color-mix(in oklab, rgba(var(--color-primary-400), 1) 100%, transparent); + } } :where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - text-decoration-color: rgba(var(--color-primary-400), 1); + text-decoration-color: color-mix(in srgb, rgba(rgba(var(--color-primary-400), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + text-decoration-color: color-mix(in oklab, rgba(var(--color-primary-400), 1) 100%, transparent); + } } } .bg-\[\#6d6d6d\] { @@ -2071,7 +2215,7 @@ body.zen-mode-enable { 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, visibility, content-visibility, overlay, pointer-events; + 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; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } @@ -3061,26 +3205,50 @@ body.zen-mode-enable { --tw-prose-th-borders: var(--tw-prose-invert-th-borders); --tw-prose-td-borders: var(--tw-prose-invert-td-borders); :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - text-decoration-color: rgba(var(--color-neutral-600), 1); + text-decoration-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-600), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + text-decoration-color: color-mix(in oklab, rgba(var(--color-neutral-600), 1) 100%, transparent); + } &:hover { - color: rgba(var(--color-primary-400), 1); + color: color-mix(in srgb, rgba(rgba(var(--color-primary-400), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, rgba(var(--color-primary-400), 1) 100%, transparent); + } } } :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: rgba(var(--color-neutral-200), 1); - background-color: rgba(var(--color-neutral-700), 1); + color: color-mix(in srgb, rgba(rgba(var(--color-neutral-200), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, rgba(var(--color-neutral-200), 1) 100%, transparent); + } + background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-700), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-neutral-700), 1) 100%, transparent); + } } :where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - background-color: rgba(var(--color-primary-400), 1); + background-color: color-mix(in srgb, rgba(rgba(var(--color-primary-400), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-primary-400), 1) 100%, transparent); + } } :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - background-color: rgba(var(--color-neutral-700), 1); + background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-700), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-neutral-700), 1) 100%, transparent); + } } :where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - text-decoration-color: rgba(var(--color-primary-400), 1); + text-decoration-color: color-mix(in srgb, rgba(rgba(var(--color-primary-400), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + text-decoration-color: color-mix(in oklab, rgba(var(--color-primary-400), 1) 100%, transparent); + } } :where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - text-decoration-color: rgba(var(--color-primary-400), 1); + text-decoration-color: color-mix(in srgb, rgba(rgba(var(--color-primary-400), 1), 1) 100%, transparent); + @supports (color: color-mix(in lab, red, red)) { + text-decoration-color: color-mix(in oklab, rgba(var(--color-primary-400), 1) 100%, transparent); + } } } } diff --git a/exampleSite/content/samples/icons/index.it.md b/exampleSite/content/samples/icons/index.it.md index a702a222..dd77f734 100644 --- a/exampleSite/content/samples/icons/index.it.md +++ b/exampleSite/content/samples/icons/index.it.md @@ -28,6 +28,7 @@ The full list of built-in icons and their corresponding names can referenced bel | check | {{< icon check >}} | | circle-info | {{< icon circle-info >}} | | code | {{< icon code>}} | +| codeberg | {{< icon codeberg >}} | | codepen | {{< icon codepen >}} | | comment | {{< icon comment >}} | | dev | {{< icon dev >}} | @@ -58,6 +59,7 @@ The full list of built-in icons and their corresponding names can referenced bel | heart | {{< icon heart >}} | | image | {{< icon image >}} | | instagram | {{< icon instagram >}} | +| itch-io | {{< icon itch-io >}} | | keybase | {{< icon keybase >}} | | kickstarter | {{< icon kickstarter >}} | | ko-fi | {{< icon ko-fi >}} | @@ -78,10 +80,12 @@ The full list of built-in icons and their corresponding names can referenced bel | orcid | {{< icon orcid >}} | | patreon | {{< icon patreon >}} | | paypal | {{< icon paypal >}} | +| peertube | {{< icon peertube >}} | | pencil | {{< icon pencil >}} | | pgpkey | {{< icon pgpkey >}} | | phone | {{< icon phone >}} | | pinterest | {{< icon pinterest >}} | +| pixelfed | {{< icon pixelfed >}} | | poo | {{< icon poo >}} | | reddit | {{< icon reddit >}} | | researchgate | {{< icon researchgate >}} | @@ -94,6 +98,7 @@ The full list of built-in icons and their corresponding names can referenced bel | slack | {{< icon slack >}} | | snapchat | {{< icon snapchat >}} | | soundcloud | {{< icon soundcloud >}} | +| spotify | {{< icon spotify >}} | | stack-overflow | {{< icon stack-overflow >}} | | star | {{< icon star >}} | | steam | {{< icon steam >}} | @@ -113,4 +118,4 @@ The full list of built-in icons and their corresponding names can referenced bel | x-twitter | {{< icon x-twitter >}} | | xing | {{< icon xing >}} | | xmark | {{< icon xmark >}} | -| youtube | {{< icon youtube >}} | +| youtube | {{< icon youtube >}} | \ No newline at end of file diff --git a/exampleSite/content/samples/icons/index.ja.md b/exampleSite/content/samples/icons/index.ja.md index ae1f4e38..092c99fb 100644 --- a/exampleSite/content/samples/icons/index.ja.md +++ b/exampleSite/content/samples/icons/index.ja.md @@ -28,6 +28,7 @@ Blowfish はいくつもの [FontAwesome 6](https://fontawesome.com/icons) の | check | {{< icon check >}} | | circle-info | {{< icon circle-info >}} | | code | {{< icon code>}} | +| codeberg | {{< icon codeberg >}} | | codepen | {{< icon codepen >}} | | comment | {{< icon comment >}} | | dev | {{< icon dev >}} | @@ -79,10 +80,12 @@ Blowfish はいくつもの [FontAwesome 6](https://fontawesome.com/icons) の | orcid | {{< icon orcid >}} | | patreon | {{< icon patreon >}} | | paypal | {{< icon paypal >}} | +| peertube | {{< icon peertube >}} | | pencil | {{< icon pencil >}} | | pgpkey | {{< icon pgpkey >}} | | phone | {{< icon phone >}} | | pinterest | {{< icon pinterest >}} | +| pixelfed | {{< icon pixelfed >}} | | poo | {{< icon poo >}} | | reddit | {{< icon reddit >}} | | researchgate | {{< icon researchgate >}} | @@ -115,5 +118,4 @@ Blowfish はいくつもの [FontAwesome 6](https://fontawesome.com/icons) の | x-twitter | {{< icon x-twitter >}} | | xing | {{< icon xing >}} | | xmark | {{< icon xmark >}} | -| youtube | {{< icon youtube >}} | -| codeberg | {{< icon codeberg >}} | +| youtube | {{< icon youtube >}} | \ No newline at end of file diff --git a/exampleSite/content/samples/icons/index.md b/exampleSite/content/samples/icons/index.md index a6990035..3c321b6f 100644 --- a/exampleSite/content/samples/icons/index.md +++ b/exampleSite/content/samples/icons/index.md @@ -28,6 +28,7 @@ The full list of built-in icons and their corresponding names can referenced bel | check | {{< icon check >}} | | circle-info | {{< icon circle-info >}} | | code | {{< icon code>}} | +| codeberg | {{< icon codeberg >}} | | codepen | {{< icon codepen >}} | | comment | {{< icon comment >}} | | dev | {{< icon dev >}} | @@ -79,10 +80,12 @@ The full list of built-in icons and their corresponding names can referenced bel | orcid | {{< icon orcid >}} | | patreon | {{< icon patreon >}} | | paypal | {{< icon paypal >}} | +| peertube | {{< icon peertube >}} | | pencil | {{< icon pencil >}} | | pgpkey | {{< icon pgpkey >}} | | phone | {{< icon phone >}} | | pinterest | {{< icon pinterest >}} | +| pixelfed | {{< icon pixelfed >}} | | poo | {{< icon poo >}} | | reddit | {{< icon reddit >}} | | researchgate | {{< icon researchgate >}} | @@ -115,5 +118,4 @@ The full list of built-in icons and their corresponding names can referenced bel | x-twitter | {{< icon x-twitter >}} | | xing | {{< icon xing >}} | | xmark | {{< icon xmark >}} | -| youtube | {{< icon youtube >}} | -| codeberg | {{< icon codeberg >}} | +| youtube | {{< icon youtube >}} | \ No newline at end of file diff --git a/exampleSite/content/samples/icons/index.zh-cn.md b/exampleSite/content/samples/icons/index.zh-cn.md index 6cb7bc38..273ca387 100644 --- a/exampleSite/content/samples/icons/index.zh-cn.md +++ b/exampleSite/content/samples/icons/index.zh-cn.md @@ -15,8 +15,8 @@ Blowfish 内置了许多 [FontAwesome 6](https://fontawesome.com/icons) 中的 下面是所有的内置图标及其名称。 -| 图标名称 | 预览 | -|----------------------|-----------------------------------| +| 图标名称 | 预览 | +| -------------------- | --------------------------------- | | amazon | {{< icon amazon >}} | | apple | {{< icon apple >}} | | bars | {{< icon bars >}} | @@ -28,6 +28,7 @@ Blowfish 内置了许多 [FontAwesome 6](https://fontawesome.com/icons) 中的 | check | {{< icon check >}} | | circle-info | {{< icon circle-info >}} | | code | {{< icon code>}} | +| codeberg | {{< icon codeberg >}} | | codepen | {{< icon codepen >}} | | comment | {{< icon comment >}} | | dev | {{< icon dev >}} | @@ -58,6 +59,7 @@ Blowfish 内置了许多 [FontAwesome 6](https://fontawesome.com/icons) 中的 | heart | {{< icon heart >}} | | image | {{< icon image >}} | | instagram | {{< icon instagram >}} | +| itch-io | {{< icon itch-io >}} | | keybase | {{< icon keybase >}} | | kickstarter | {{< icon kickstarter >}} | | ko-fi | {{< icon ko-fi >}} | @@ -78,10 +80,12 @@ Blowfish 内置了许多 [FontAwesome 6](https://fontawesome.com/icons) 中的 | orcid | {{< icon orcid >}} | | patreon | {{< icon patreon >}} | | paypal | {{< icon paypal >}} | +| peertube | {{< icon peertube >}} | | pencil | {{< icon pencil >}} | | pgpkey | {{< icon pgpkey >}} | | phone | {{< icon phone >}} | | pinterest | {{< icon pinterest >}} | +| pixelfed | {{< icon pixelfed >}} | | poo | {{< icon poo >}} | | reddit | {{< icon reddit >}} | | researchgate | {{< icon researchgate >}} | @@ -94,6 +98,7 @@ Blowfish 内置了许多 [FontAwesome 6](https://fontawesome.com/icons) 中的 | slack | {{< icon slack >}} | | snapchat | {{< icon snapchat >}} | | soundcloud | {{< icon soundcloud >}} | +| spotify | {{< icon spotify >}} | | stack-overflow | {{< icon stack-overflow >}} | | star | {{< icon star >}} | | steam | {{< icon steam >}} | @@ -113,4 +118,4 @@ Blowfish 内置了许多 [FontAwesome 6](https://fontawesome.com/icons) 中的 | x-twitter | {{< icon x-twitter >}} | | xing | {{< icon xing >}} | | xmark | {{< icon xmark >}} | -| youtube | {{< icon youtube >}} | +| youtube | {{< icon youtube >}} | \ No newline at end of file