update markdown callouts to be our own with css

pyrox.dev 2c6a9257 96f300e3

verified
+2 -20
_config.ts
···
// Custom Plugins
import validateHTML from "./plugins/validateHTML.ts";
-
-
// Open in Editor
import openInEditor from "./plugins/openInEditor.ts";
// Disabled Plugins:
···
dir: Deno.cwd() + "/src/",
stillRenderNoMatched: false,
}));
-
site.hooks.addMarkdownItPlugin(mdItObsidianCallouts, {
-
icons: {
-
abstract: '<i class="bi bi-clipboard2-data"></i>',
-
bug: '<i class="bi bi-bug"></i>',
-
danger: '<i class="bi bi-lightning"></i>',
-
example: '<i class="bi bi-list-ul"></i>',
-
failure: '<i class="bi bi-x-lg"></i>',
-
info: '<i class="bi bi-info-circle"></i>',
-
note: '<i class="bi bi-pencil"></i>',
-
question: '<i class="bi bi-question-circle"></i>',
-
quote: '<i class="bi bi-quote"></i>',
-
success: '<i class="bi bi-check2"></i>',
-
tip: '<i class="bi bi-fire"></i>',
-
todo: '<i class="bi bi-check-circle"></i>',
-
warning: '<i class="bi bi-exclamation-triangle"></i>',
-
},
-
});
// Copy Static Files
site.add(".css");
···
);
// Open in Editor in Dev mode
-
site.data("production", Deno.env.get("PRODUCTION"));
if (Deno.env.get("PRODUCTION") == "false") {
site.use(openInEditor());
site.add("static/scripts/open-in-editor.js");
···
// Custom Plugins
import validateHTML from "./plugins/validateHTML.ts";
import openInEditor from "./plugins/openInEditor.ts";
// Disabled Plugins:
···
dir: Deno.cwd() + "/src/",
stillRenderNoMatched: false,
}));
+
site.hooks.addMarkdownItPlugin(mdItObsidianCallouts, {});
// Copy Static Files
site.add(".css");
···
);
// Open in Editor in Dev mode
+
site.data("production", Deno.env.get("PRODUCTION") == "true");
if (Deno.env.get("PRODUCTION") == "false") {
site.use(openInEditor());
site.add("static/scripts/open-in-editor.js");
+2 -3
deno.json
···
"imports": {
"@img/sharp-wasm32": "npm:@img/sharp-wasm32@0.33.5",
"@nolebase/markdown-it-bi-directional-links": "npm:@nolebase/markdown-it-bi-directional-links@^2.15.0",
-
"csstree-validator": "npm:csstree-validator@^4.0.1",
"lume/": "https://cdn.jsdelivr.net/gh/lumeland/lume@3ca4e1ff0077bc5239d853e9efdc60889546ce30/",
-
"markdown-it-obsidian-callouts": "npm:markdown-it-obsidian-callouts@^0.3.1",
-
"html-validate": "npm:html-validate@9.4.0"
},
"tasks": {
"lume": "echo \"import 'lume/cli.ts'\" | deno run --env-file=.env.dev -A -",
···
"imports": {
"@img/sharp-wasm32": "npm:@img/sharp-wasm32@0.33.5",
"@nolebase/markdown-it-bi-directional-links": "npm:@nolebase/markdown-it-bi-directional-links@^2.15.0",
"lume/": "https://cdn.jsdelivr.net/gh/lumeland/lume@3ca4e1ff0077bc5239d853e9efdc60889546ce30/",
+
"markdown-it-obsidian-callouts": "https://deno.land/x/markdown_it_obsidian_callouts_lite@0.4.0/src/index.ts",
+
"html-validate": "npm:html-validate@9.4.1"
},
"tasks": {
"lume": "echo \"import 'lume/cli.ts'\" | deno run --env-file=.env.dev -A -",
+8 -56
deno.lock
···
"npm:@nolebase/markdown-it-bi-directional-links@^2.15.0": "2.15.0_markdown-it@14.1.0",
"npm:@tailwindcss/oxide@4.0.3": "4.0.3",
"npm:@tailwindcss/oxide@4.0.6": "4.0.6",
-
"npm:csstree-validator@^4.0.1": "4.0.1",
"npm:date-fns@4.1.0": "4.1.0",
"npm:dprint@*": "0.49.0",
"npm:estree-walker@3.0.3": "3.0.3",
-
"npm:html-validate@9.4.0": "9.4.0_ajv@8.17.1",
"npm:ico-endec@0.1.6": "0.1.6",
"npm:lightningcss-wasm@1.29.1": "1.29.1",
"npm:markdown-it-attrs@4.3.1": "4.3.1_markdown-it@14.1.0",
"npm:markdown-it-deflist@3.0.0": "3.0.0",
-
"npm:markdown-it-obsidian-callouts@~0.3.1": "0.3.1_markdown-it@14.1.0",
"npm:markdown-it@14.1.0": "14.1.0",
"npm:meriyah@6.0.5": "6.0.5",
"npm:remove-markdown@0.6.0": "0.6.0",
···
"require-from-string"
]
},
-
"ansi-colors@4.1.3": {
-
"integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw=="
-
},
"ansi-regex@5.0.1": {
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
},
···
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
"dependencies": [
"balanced-match"
-
]
-
},
-
"clap@3.1.1": {
-
"integrity": "sha512-vp42956Ax06WwaaheYEqEOgXZ3VKJxgccZ0gJL0HpyiupkIS9RVJFo5eDU1BPeQAOqz+cclndZg4DCqG1sJReQ==",
-
"dependencies": [
-
"ansi-colors"
]
},
"color-convert@2.0.1": {
···
"source-map-js"
]
},
-
"css-tree@3.1.0": {
-
"integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
-
"dependencies": [
-
"mdn-data@2.12.2",
-
"source-map-js"
-
]
-
},
"css-what@6.1.0": {
"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
},
···
"integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
"dependencies": [
"css-tree@2.2.1"
-
]
-
},
-
"csstree-validator@4.0.1": {
-
"integrity": "sha512-ywwDonvo6BuhXkrNSCAW4JLxsNd8HzpOtVVv22W5BNtZNeviZORSOLb7CLskeaKnL9jjvi24kL7UNh5m52ygpw==",
-
"dependencies": [
-
"clap",
-
"css-tree@3.1.0",
-
"enhanced-resolve"
]
},
"date-fns@4.1.0": {
···
"emoji-regex@9.2.2": {
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
},
-
"enhanced-resolve@5.18.1": {
-
"integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
-
"dependencies": [
-
"graceful-fs",
-
"tapable"
-
]
-
},
"entities@4.5.0": {
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
},
···
"picomatch"
]
},
-
"foreground-child@3.3.0": {
-
"integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
"dependencies": [
"cross-spawn",
"signal-exit"
···
"path-scurry"
]
},
-
"graceful-fs@4.2.11": {
-
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
-
},
-
"html-validate@9.4.0_ajv@8.17.1": {
-
"integrity": "sha512-Io8vjeAf2JJJTHJDGvozVB6Vv/IZRkNRruSENg9lmLzE1gUcr77sIdtE2rzwLkBsCESDv5+nAAtk2TCer78jxA==",
"dependencies": [
"@html-validate/stylish",
"@sidvind/better-ajv-errors",
···
"markdown-it-deflist@3.0.0": {
"integrity": "sha512-OxPmQ/keJZwbubjiQWOvKLHwpV2wZ5I3Smc81OjhwbfJsjdRrvD5aLTQxmZzzePeO0kbGzAo3Krk4QLgA8PWLg=="
},
-
"markdown-it-obsidian-callouts@0.3.1_markdown-it@14.1.0": {
-
"integrity": "sha512-MCvbHofaDxUD9hwrQg9+62Yq5Ev1K2glr5ogUxvFWm7WGG3SKqC90/ozWZ/ofqUvD5iw2KLElSWLHvL1crUeqA==",
-
"dependencies": [
-
"markdown-it"
-
]
-
},
"markdown-it@14.1.0": {
"integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
"dependencies": [
···
},
"mdn-data@2.0.30": {
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
-
},
-
"mdn-data@2.12.2": {
-
"integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA=="
},
"mdurl@2.0.0": {
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
···
},
"tailwindcss@4.0.6": {
"integrity": "sha512-mysewHYJKaXgNOW6pp5xon/emCsfAMnO8WMaGKZZ35fomnR/T5gYnRg2/yRTTrtXiEl1tiVkeRt0eMO6HxEZqw=="
-
},
-
"tapable@2.2.1": {
-
"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="
},
"tinyglobby@0.2.12_picomatch@4.0.2": {
"integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
···
"https://deno.land/x/lume_markdown_plugins@v0.8.0/utils.ts": "6e6c3c394709eff39080562732c2dafe404f225253aaded937133ea694c4b735",
"https://deno.land/x/lz4@v0.1.2/mod.ts": "4decfc1a3569d03fd1813bd39128b71c8f082850fe98ecfdde20025772916582",
"https://deno.land/x/lz4@v0.1.2/wasm.js": "b9c65605327ba273f0c76a6dc596ec534d4cda0f0225d7a94ebc606782319e46",
"https://deno.land/x/minify_html@0.15.0/mod.js": "0974387d0bee4646a9cb959c641c170442b0d2a6bddcb9857758636afd8676d5",
"https://deno.land/x/vento@v1.12.15/deps.ts": "155958dfada8d8cb3c8a001413c759928647b23e0e9db25195614549b58d085f",
"https://deno.land/x/vento@v1.12.15/mod.ts": "cfaac455f70af8e59aa0c03ef39b641635094225255f0fbaa76f4771e683f2ca",
···
"dependencies": [
"npm:@img/sharp-wasm32@0.33.5",
"npm:@nolebase/markdown-it-bi-directional-links@^2.15.0",
-
"npm:csstree-validator@^4.0.1",
-
"npm:html-validate@9.4.0",
-
"npm:markdown-it-obsidian-callouts@~0.3.1"
]
}
}
···
"npm:@nolebase/markdown-it-bi-directional-links@^2.15.0": "2.15.0_markdown-it@14.1.0",
"npm:@tailwindcss/oxide@4.0.3": "4.0.3",
"npm:@tailwindcss/oxide@4.0.6": "4.0.6",
"npm:date-fns@4.1.0": "4.1.0",
"npm:dprint@*": "0.49.0",
"npm:estree-walker@3.0.3": "3.0.3",
+
"npm:html-validate@9.4.1": "9.4.1_ajv@8.17.1",
"npm:ico-endec@0.1.6": "0.1.6",
"npm:lightningcss-wasm@1.29.1": "1.29.1",
"npm:markdown-it-attrs@4.3.1": "4.3.1_markdown-it@14.1.0",
"npm:markdown-it-deflist@3.0.0": "3.0.0",
"npm:markdown-it@14.1.0": "14.1.0",
"npm:meriyah@6.0.5": "6.0.5",
"npm:remove-markdown@0.6.0": "0.6.0",
···
"require-from-string"
]
},
"ansi-regex@5.0.1": {
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
},
···
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
"dependencies": [
"balanced-match"
]
},
"color-convert@2.0.1": {
···
"source-map-js"
]
},
"css-what@6.1.0": {
"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
},
···
"integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
"dependencies": [
"css-tree@2.2.1"
]
},
"date-fns@4.1.0": {
···
"emoji-regex@9.2.2": {
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
},
"entities@4.5.0": {
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
},
···
"picomatch"
]
},
+
"foreground-child@3.3.1": {
+
"integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
"dependencies": [
"cross-spawn",
"signal-exit"
···
"path-scurry"
]
},
+
"html-validate@9.4.1_ajv@8.17.1": {
+
"integrity": "sha512-eyb/0RdmQFFajSvL1Ak+yxtRY6hBJ5fx3yt9XAQFH6S7+7PWsnEeWsDhKaOo5fdTtljgXNiyvcicB7OS599m3g==",
"dependencies": [
"@html-validate/stylish",
"@sidvind/better-ajv-errors",
···
"markdown-it-deflist@3.0.0": {
"integrity": "sha512-OxPmQ/keJZwbubjiQWOvKLHwpV2wZ5I3Smc81OjhwbfJsjdRrvD5aLTQxmZzzePeO0kbGzAo3Krk4QLgA8PWLg=="
},
"markdown-it@14.1.0": {
"integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
"dependencies": [
···
},
"mdn-data@2.0.30": {
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
},
"mdurl@2.0.0": {
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
···
},
"tailwindcss@4.0.6": {
"integrity": "sha512-mysewHYJKaXgNOW6pp5xon/emCsfAMnO8WMaGKZZ35fomnR/T5gYnRg2/yRTTrtXiEl1tiVkeRt0eMO6HxEZqw=="
},
"tinyglobby@0.2.12_picomatch@4.0.2": {
"integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
···
"https://deno.land/x/lume_markdown_plugins@v0.8.0/utils.ts": "6e6c3c394709eff39080562732c2dafe404f225253aaded937133ea694c4b735",
"https://deno.land/x/lz4@v0.1.2/mod.ts": "4decfc1a3569d03fd1813bd39128b71c8f082850fe98ecfdde20025772916582",
"https://deno.land/x/lz4@v0.1.2/wasm.js": "b9c65605327ba273f0c76a6dc596ec534d4cda0f0225d7a94ebc606782319e46",
+
"https://deno.land/x/markdown_it_obsidian_callouts_lite@0.4.0/src/index.ts": "f388a00e36a020d3e8ebad1fe60911e6fa8b001db8747a60efd11571377a22fa",
+
"https://deno.land/x/markdown_it_obsidian_callouts_lite@0.4.0/src/inspect.ts": "8a9e14136661eb45ef97bb09c2385f7c42df1e82cb1bd2cc287f673379a263c2",
"https://deno.land/x/minify_html@0.15.0/mod.js": "0974387d0bee4646a9cb959c641c170442b0d2a6bddcb9857758636afd8676d5",
"https://deno.land/x/vento@v1.12.15/deps.ts": "155958dfada8d8cb3c8a001413c759928647b23e0e9db25195614549b58d085f",
"https://deno.land/x/vento@v1.12.15/mod.ts": "cfaac455f70af8e59aa0c03ef39b641635094225255f0fbaa76f4771e683f2ca",
···
"dependencies": [
"npm:@img/sharp-wasm32@0.33.5",
"npm:@nolebase/markdown-it-bi-directional-links@^2.15.0",
+
"npm:html-validate@9.4.1"
]
}
}
-1
src/_components/footer.vto
···
>version {{ commit |> substring(0, 8) }}</a>
</div>
</footer>
-
<div style="display:none" class="latte"></div>
···
>version {{ commit |> substring(0, 8) }}</a>
</div>
</footer>
+1 -1
src/_components/head.vto
···
{{# Page Metadata #}}
<link rel="canonical" href="{{ url |> url(true) }}" />
<title>{{ title }}</title>
-
{{ if production == "false" }}
<script defer="defer" src="/static/scripts/open-in-editor.js"></script>
{{ /if }}
···
{{# Page Metadata #}}
<link rel="canonical" href="{{ url |> url(true) }}" />
<title>{{ title }}</title>
+
{{ if !production }}
<script defer="defer" src="/static/scripts/open-in-editor.js"></script>
{{ /if }}
+10
src/blog/example-blog-post.md
···
---
## meow meow! {#meow-meow}
···
---
## meow meow! {#meow-meow}
+
<!-- deno-fmt-ignore-start -->
+
> [!info]- Closed default
+
> You shouldn't see this
+
+
> [!warning]+ Open default
+
> You should see this
+
+
> [!question] No folding
+
> You shouldn't be able to close this
+
<!-- deno-fmt-ignore-end -->
+1 -1
src/blog/hello-world.md
···
neato!), and hopefully inspires you to create your own Lume-based blog.
<!-- deno-fmt-ignore-start -->
-
> [!note] Disclaimer!
> I'm by no means a wizard with this stuff, my code is pretty messy.
> However, I am happy with it, and that's what matters for me.
<!-- deno-fmt-ignore-end -->
···
neato!), and hopefully inspires you to create your own Lume-based blog.
<!-- deno-fmt-ignore-start -->
+
> [!note]- Disclaimer!
> I'm by no means a wizard with this stuff, my code is pretty messy.
> However, I am happy with it, and that's what matters for me.
<!-- deno-fmt-ignore-end -->
+70 -12
src/static/styles.css
···
@import "tailwindcss";
-
.latte {
--ctp-rosewater: rgb(220 138 120);
--ctp-flamingo: rgb(221 120 120);
--ctp-pink: rgb(234 118 203);
···
--ctp-mantle: rgb(230 233 239);
--ctp-crust: rgb(220 224 232);
--callout-blend-mode: darken;
-
}
.mocha {
--ctp-rosewater: rgb(245 224 220);
--ctp-flamingo: rgb(242 205 205);
···
}
@theme {
--color-*: initial;
--font-sans: "Inter", "ui-sans-serif", "system-ui", "sans-serif";
--font-serif: "IBM Plex Serif", "ui-serif", "serif";
-
-
--text-inherit: inherit;
-
--p-callout: 12px 12px 12px 24px;
/* Flag Colors */
--color-trans-blue: #5bcffa;
···
}
[data-editor-file]:hover {
@apply transition-all outline-blue outline-2 outline-offset-4
-
dark:bg-blue/10 bg-blue/10 pl-1;
}
}
···
@apply text-mauve!;
}
@utility callout {
@apply outline-1 rounded-sm py-2 pl-2 pr-4 outline-solid overflow-hidden;
outline-color: --alpha(var(--callout-color) / 50%);
···
background-color: --alpha(var(--callout-color) / 15%);
.callout-title {
-
@apply text-lg mb-1 flex gap-2 items-start font-semibold text-inherit;
color: rgb(var(--callout-color));
-
.callout-title-icon {
@apply flex items-center text-xl leading-7 mr-1;
flex: 0 0 auto;
}
-
.callout-fold {
-
@apply justify-self-end ml-auto;
font-family: "bootstrap-icons";
background-color: rgb(var(--callout-color));
}
}
···
@apply relative top-2 mr-2;
}
}
-
&[data-callout="todo"],
-
&[data-callout="info"],
&[data-callout="note"] {
--callout-color: var(--ctp-blue);
}
&[data-callout="success"],
&[data-callout="check"],
&[data-callout="done"] {
--callout-color: var(--ctp-green);
}
&[data-callout="warning"],
&[data-callout="caution"],
&[data-callout="attention"] {
--callout-color: var(--ctp-yellow);
}
&[data-callout="danger"],
&[data-callout="error"] {
--callout-color: var(--ctp-red);
}
&[data-callout="tip"],
&[data-callout="hint"] {
--callout-color: var(--ctp-teal);
}
&[data-callout="example"] {
--callout-color: var(--ctp-mauve);
}
&[data-callout="abstract"],
&[data-callout="summary"],
&[data-callout="tldr"] {
--callout-color: var(--ctp-sky);
}
&[data-callout="quote"],
&[data-callout="cite"] {
--callout-color: var(--ctp-overlay0);
}
}
···
@import "tailwindcss";
+
/*
+
Remove latte classes
+
They're not being used right now, so no reason to ship them
+
*/
+
/* .latte {
--ctp-rosewater: rgb(220 138 120);
--ctp-flamingo: rgb(221 120 120);
--ctp-pink: rgb(234 118 203);
···
--ctp-mantle: rgb(230 233 239);
--ctp-crust: rgb(220 224 232);
--callout-blend-mode: darken;
+
} */
.mocha {
--ctp-rosewater: rgb(245 224 220);
--ctp-flamingo: rgb(242 205 205);
···
}
@theme {
+
/* Remove initial variables we don't need */
--color-*: initial;
+
--blur-*: initial;
+
--perspective-*: initial;
+
--drop-shadow-*: initial;
+
--shadow-*: initial;
+
--inset-shadow-*: initial;
+
--ease-*: initial;
+
--animate-*: initial;
--font-sans: "Inter", "ui-sans-serif", "system-ui", "sans-serif";
--font-serif: "IBM Plex Serif", "ui-serif", "serif";
/* Flag Colors */
--color-trans-blue: #5bcffa;
···
}
[data-editor-file]:hover {
@apply transition-all outline-blue outline-2 outline-offset-4
+
bg-blue/10 pl-1;
}
}
···
@apply text-mauve!;
}
+
@utility no-fold {
+
pointer-events: none;
+
}
+
@utility callout {
@apply outline-1 rounded-sm py-2 pl-2 pr-4 outline-solid overflow-hidden;
outline-color: --alpha(var(--callout-color) / 50%);
···
background-color: --alpha(var(--callout-color) / 15%);
.callout-title {
+
@apply text-lg mb-2 flex gap-2 items-start font-semibold w-full;
color: rgb(var(--callout-color));
+
&::before {
@apply flex items-center text-xl leading-7 mr-1;
flex: 0 0 auto;
+
font-family: "bootstrap-icons";
+
content: var(--callout-icon);
}
+
.no-fold &::after {
+
content: "" !important;
+
}
+
+
&::after {
+
margin-left: auto;
font-family: "bootstrap-icons";
background-color: rgb(var(--callout-color));
+
content: "\F285";
+
}
+
+
[open] &::after {
+
margin-left: auto;
+
font-family: "bootstrap-icons";
+
background-color: rgb(var(--callout-color));
+
content: "\F282";
}
}
···
@apply relative top-2 mr-2;
}
}
&[data-callout="note"] {
--callout-color: var(--ctp-blue);
+
--callout-icon: "\F4CB";
+
}
+
+
&[data-callout="todo"] {
+
--callout-color: var(--ctp-blue);
+
--callout-icon: "\F26B";
+
}
+
+
&[data-callout="info"] {
+
--callout-color: var(--ctp-blue);
+
--callout-icon: "\F431";
}
&[data-callout="success"],
&[data-callout="check"],
&[data-callout="done"] {
--callout-color: var(--ctp-green);
+
--callout-icon: "\F272";
}
&[data-callout="warning"],
&[data-callout="caution"],
&[data-callout="attention"] {
--callout-color: var(--ctp-yellow);
+
--callout-icon: "\F33B";
+
}
+
+
&[data-callout="question"] {
+
--callout-color: var(--ctp-yellow);
+
--callout-icon: "\F505";
}
&[data-callout="danger"],
&[data-callout="error"] {
--callout-color: var(--ctp-red);
+
--callout-icon: "\F46F";
+
}
+
+
&[data-callout="failure"] {
+
--callout-color: var(--ctp-red);
+
--callout-icon: "\F659";
+
}
+
+
&[data-callout="bug"] {
+
--callout-color: var(--ctp-red);
+
--callout-icon: "\F1DC";
}
&[data-callout="tip"],
&[data-callout="hint"] {
--callout-color: var(--ctp-teal);
+
--callout-icon: "\F7F6";
}
&[data-callout="example"] {
--callout-color: var(--ctp-mauve);
+
--callout-icon: "\F478";
}
&[data-callout="abstract"],
&[data-callout="summary"],
&[data-callout="tldr"] {
--callout-color: var(--ctp-sky);
+
--callout-icon: "\F727";
}
&[data-callout="quote"],
&[data-callout="cite"] {
--callout-color: var(--ctp-overlay0);
+
--callout-icon: "\F6B0";
}
}