diff --git a/astro.config.ts b/astro.config.ts index 3562ef7..a38cc4c 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -14,6 +14,7 @@ import remarkEmoji from 'remark-emoji' import remarkMath from 'remark-math' import remarkSectionize from 'remark-sectionize' import remarkToc from 'remark-toc' +import remarkCallout from "@r4ai/remark-callout"; import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections' import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers' @@ -105,6 +106,6 @@ export default defineConfig({ }, ], ], - remarkPlugins: [remarkToc, remarkMath, remarkEmoji, remarkSectionize], + remarkPlugins: [remarkToc, remarkMath, remarkEmoji, remarkSectionize, remarkCallout,], }, }) diff --git a/bun.lock b/bun.lock index 8838282..cd244c2 100644 --- a/bun.lock +++ b/bun.lock @@ -15,6 +15,7 @@ "@fontsource-variable/geist-mono": "^5.2.5", "@fontsource/geist-mono": "^5.2.5", "@iconify-json/lucide": "^1.2.32", + "@r4ai/remark-callout": "^0.6.2", "@radix-ui/react-avatar": "^1.1.3", "@radix-ui/react-dropdown-menu": "^2.1.6", "@radix-ui/react-icons": "^1.3.2", @@ -256,6 +257,8 @@ "@oslojs/encoding": ["@oslojs/encoding@1.1.0", "", {}, "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ=="], + "@r4ai/remark-callout": ["@r4ai/remark-callout@0.6.2", "", { "dependencies": { "defu": "^6.1.4", "unist-util-visit": "^5.0.0" } }, "sha512-yRj0dzEqdGYquJqTcr68CtAAh47AamWGMbZwiXBTeH6tf2MAh3Rc8C3xYhsRHKX91j9h5JZPTV2YLv+zL08AHQ=="], + "@radix-ui/number": ["@radix-ui/number@1.1.0", "", {}, "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ=="], "@radix-ui/primitive": ["@radix-ui/primitive@1.1.1", "", {}, "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="], diff --git a/package.json b/package.json index eb5ad95..826e56a 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@fontsource-variable/geist-mono": "^5.2.5", "@fontsource/geist-mono": "^5.2.5", "@iconify-json/lucide": "^1.2.32", + "@r4ai/remark-callout": "^0.6.2", "@radix-ui/react-avatar": "^1.1.3", "@radix-ui/react-dropdown-menu": "^2.1.6", "@radix-ui/react-icons": "^1.3.2", diff --git a/src/components/Head.astro b/src/components/Head.astro index f5fe25b..7867fd1 100644 --- a/src/components/Head.astro +++ b/src/components/Head.astro @@ -1,6 +1,7 @@ --- import '@fontsource-variable/geist' import '@fontsource-variable/geist-mono' +import '../styles/callout.css' import '../styles/global.css' import '../styles/typography.css' diff --git a/src/content/artix-install-guide/index.md b/src/content/artix-install-guide/index.md index 397d783..557b14f 100644 --- a/src/content/artix-install-guide/index.md +++ b/src/content/artix-install-guide/index.md @@ -32,7 +32,7 @@ Use [Rufus](https://rufus.ie/en) 2. Find the corresponding block device for the flash drive in `/dev` folder. Usually it is `/dev/sdb1`. 3. Write the image to the flash drive (assuming your flash drive is `/dev/sdb1`). -> [!Warning] +> [!warning] > This command will wipe the `/dev/sdb1` partition @@ -44,7 +44,7 @@ sudo dd bs=4M if=~/Downloads/artix-base-openrc-*-x86_64.iso of=/dev/sdb1 conv=fs ## Boot the live environment -> [!Info] +> [!info] > Artix Linux installation images do not support Secure Boot. You will need to disable Secure Boot in your BIOS to boot the installation medium. 1. Power off your PC. @@ -80,7 +80,7 @@ scan wifi services ``` -> [!Tip] +> [!tip] > Network names can be tab-completed. > [!example] @@ -116,7 +116,7 @@ pacman -Sy gdisk gdisk /dev/nvme0n1 ``` -> [!Note] +> [!note] > `nvme0n1` will be used as the target install drive throughout this guide, adapt it to your drive name. 2. Delete any existing partitions. Repeat until none are left. @@ -153,15 +153,15 @@ Do you want to proceed? (Y/N): y lsblk ``` -> [!Note] ->It should look something like this: - -```shell title="lsblk" -NAME MAJ:MIN RM SIZE RO TYPE -nvme0n1 259:0 0 465,8G 0 disk -├─nvme0n1p1 259:1 0 512M 0 part -└─nvme0n1p2 259:2 0 465,3G 0 part -``` +> [!note] +> It should look something like this +> +> ```shell title="lsblk" +> NAME MAJ:MIN RM SIZE RO TYPE +> nvme0n1 259:0 0 465,8G 0 disk +> ├─nvme0n1p1 259:1 0 512M 0 part +> └─nvme0n1p2 259:2 0 465,3G 0 part +> ``` --- @@ -169,7 +169,7 @@ nvme0n1 259:0 0 465,8G 0 disk 1. Encrypt your root partition -> [!Tip] +> [!tip] >Make sure to enter a secure passphrase and to write it down ```shell @@ -215,16 +215,16 @@ mount -m /dev/nvme0n1p1 /mnt/boot lsblk ``` -> [!Note] -> It should look something like this: - -```shell title="lsblk" -NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINTS -nvme0n1 259:0 0 465,8G 0 disk -├─nvme0n1p1 259:1 0 512M 0 part /mnt/boot -└─nvme0n1p2 259:2 0 465,3G 0 part - └─root 254:0 0 465,2G 0 crypt /mnt -``` +> [!note] +> It should look something like this +> +> ```shell title="lsblk" +> NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINTS +> nvme0n1 259:0 0 465,8G 0 disk +> ├─nvme0n1p1 259:1 0 512M 0 part /mnt/boot +> └─nvme0n1p2 259:2 0 465,3G 0 part +> └─root 254:0 0 465,2G 0 crypt /mnt +> ``` --- @@ -236,7 +236,7 @@ Install the base system, kernel, init system and other essential packages. basestrap /mnt base linux linux-firmware openrc elogind-openrc cryptsetup cryptsetup-openrc efibootmgr doas nano ``` -> [!Note] +> [!note] > Install AMD or Intel microcode, depending on your system's CPU ### AMD CPU @@ -289,7 +289,7 @@ wifi.backend=iwd ### MAC randomization -> [!Info] +> [!info] >MAC randomization can be used for increased privacy by not disclosing your real MAC address to the WiFi network. ```ini @@ -306,7 +306,7 @@ wifi.cloned-mac-address=random ### Set the locale -> [!Note] +> [!tip] >Feel free to change `en_DK.UTF-8` to your preferred locale such as `en_US.UTF-8` or `en_GB.UTF-8` 1. Uncomment `en_DK.UTF-8` @@ -331,7 +331,7 @@ locale-gen ## Set the time zone -> [!Example] +> [!example] >`ln -sf /usr/share/zoneinfo/Asia/Dubai /etc/localtime` ```shell @@ -350,7 +350,7 @@ hwclock --systohc ## Hostname -- Set your preffered hostname, in this case I will be using `artix` +Set your preffered hostname, in this case I will be using `artix` ```shell echo 'artix' > /etc/hostname ``` @@ -400,7 +400,7 @@ passwd 2. Create a user and set his password. -> [!Tip] +> [!tip] >Change `artix` to your desired username ```sh @@ -431,7 +431,7 @@ chmod -c 0400 /etc/doas.conf ## Boot loader ### Check for UEFI support -> [!Tip] +> [!tip] >If you see a bunch of files listed, use EFISTUB. >If you do not see a bunch of files listed, your system does not support UEFI and you should use GRUB. @@ -448,7 +448,7 @@ blkid -s UUID -o value /dev/nvme0n1p2 2. Create a boot entry -> [!Tip] +> [!tip] >Replace xxxx with the UUID that you just obtained >Replace `intel-ucode.img` with `amd-ucode.img` if you have an AMD CPU @@ -471,19 +471,19 @@ blkid -s UUID -o value /dev/nvme0n1p2 3. Edit the GRUB config file -> [!Note] ->It should look something like this with xxxx being the UUID that you just obtained - -```ini -GRUB_CMDLINE_LINUX="cryptdevice=UUID=550e8400-e29b-41d4-a716-446655440000:root root=/dev/mapper/root" -GRUB_ENABLE_CRYPTODISK=y -``` +> [!note] +> It should look something like this with xxxx being the UUID that you just obtained +> +> ```ini +> GRUB_CMDLINE_LINUX="cryptdevice=UUID=550e8400-e29b-41d4-a716-446655440000:root root=/dev/mapper/root" +> GRUB_ENABLE_CRYPTODISK=y +> ``` ```diff + GRUB_CMDLINE_LINUX_DEFAULT="cryptdevice=UUID=xxxx:root root=/dev/mapper/root" ... -- #GRUB_ENABLE_CRYPTODISK=y + GRUB_ENABLE_CRYPTODISK=y +- #GRUB_ENABLE_CRYPTODISK=y ``` 6. Generate the config file @@ -497,7 +497,7 @@ grub-mkconfig -o /boot/grub/grub.cfg 1. You can now reboot and enter into your new installation -> [!Note] +> [!note] > Unplug your flash drive after the screen turns black ```sh @@ -525,7 +525,7 @@ doas sh -c "curl https://archlinux.org/mirrorlist/all -o /etc/pacman.d/mirrorlis 2. Activate Arch mirrors -> [!Note] +> [!note] > This file requires root permissions to edit ```diff @@ -543,7 +543,7 @@ doas sh -c "curl https://archlinux.org/mirrorlist/all -o /etc/pacman.d/mirrorlis 3. Edit the pacman config file -> [!Note] +> [!note] > This file requires root permissions to edit ```ini diff --git a/src/styles/callout.css b/src/styles/callout.css new file mode 100644 index 0000000..3e70d21 --- /dev/null +++ b/src/styles/callout.css @@ -0,0 +1,386 @@ +@import 'tailwindcss'; + +[data-callout] { + & { + @apply my-6 space-y-2 rounded-lg border border-blue-600/20 bg-blue-400/20 p-4 pb-5 dark:border-blue-800/20 dark:bg-blue-600/10; + } + + & > [data-callout-title] { + & { + @apply flex flex-row items-start gap-2 p-0 font-bold text-blue-500; + } + + &:not:only-child { + @apply mb-2; + } + + &:empty::after { + content: "Note"; + } + + &::before { + @apply mt-1 block h-5 w-5 bg-current content-[""]; + mask-repeat: no-repeat; + mask-size: cover; + + /* lucide-pencil */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTE3IDNhMi44NSAyLjgzIDAgMSAxIDQgNEw3LjUgMjAuNUwyIDIybDEuNS01LjVabS0yIDJsNCA0Ii8+PC9zdmc+"); + } + } + + & > [data-callout-body] { + & { + @apply space-y-2; + } + + & > * { + @apply m-0; + } + } +} + +details[data-callout] > summary[data-callout-title] { + & { + @apply cursor-pointer; + } + + &::after { + @apply w-full bg-right bg-no-repeat; + content: ""; + + /* lucide:chevron-right */ + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im05IDE4bDYtNmwtNi02Ii8+PC9zdmc+"); + background-size: 1.5rem; + } + + &:not(:empty)::after { + @apply my-auto ml-auto h-6 w-6; + } +} + +details[data-callout][open] > summary[data-callout-title]::after { + /* lucide:chevron-down */ + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im02IDlsNiA2bDYtNiIvPjwvc3ZnPg=="); +} + +[data-callout][data-callout-type="info"] { + & { + @apply border-blue-600/20 bg-blue-400/20 dark:border-blue-800/20 dark:bg-blue-600/10; + } + + & > [data-callout-title] { + & { + @apply text-blue-500; + } + + &:empty::after { + content: "Info"; + } + + &::before { + /* lucide:info */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTEyIDE2di00bTAtNGguMDEiLz48L2c+PC9zdmc+"); + } + } +} + +[data-callout][data-callout-type="todo"] { + & { + @apply border-blue-600/20 bg-blue-400/20 dark:border-blue-800/20 dark:bg-blue-600/10; + } + + & > [data-callout-title] { + & { + @apply text-blue-500; + } + + &:empty::after { + content: "ToDo"; + } + + &::before { + /* lucide:circle-check-big */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0yMiAxMS4wOFYxMmExMCAxMCAwIDEgMS01LjkzLTkuMTQiLz48cGF0aCBkPSJtOSAxMWwzIDNMMjIgNCIvPjwvZz48L3N2Zz4="); + } + } +} + +[data-callout][data-callout-type="abstract"], +[data-callout][data-callout-type="summary"], +[data-callout][data-callout-type="tldr"] { + & { + @apply border-cyan-600/20 bg-cyan-400/20 dark:border-cyan-800/20 dark:bg-cyan-600/10; + } + + & > [data-callout-title] { + & { + @apply text-cyan-500; + } + + &::before { + /* lucide:clipboard-list */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHJlY3Qgd2lkdGg9IjgiIGhlaWdodD0iNCIgeD0iOCIgeT0iMiIgcng9IjEiIHJ5PSIxIi8+PHBhdGggZD0iTTE2IDRoMmEyIDIgMCAwIDEgMiAydjE0YTIgMiAwIDAgMS0yIDJINmEyIDIgMCAwIDEtMi0yVjZhMiAyIDAgMCAxIDItMmgybTQgN2g0bS00IDVoNG0tOC01aC4wMU04IDE2aC4wMSIvPjwvZz48L3N2Zz4="); + } + } +} + +[data-callout][data-callout-type="abstract"] > [data-callout-title]:empty::after { + content: "Abstract"; +} + +[data-callout][data-callout-type="summary"] > [data-callout-title]:empty::after { + content: "Summary"; +} + +[data-callout][data-callout-type="tldr"] > [data-callout-title]:empty::after { + content: "TL;DR"; +} + +[data-callout][data-callout-type="tip"], +[data-callout][data-callout-type="hint"], +[data-callout][data-callout-type="important"] { + & { + @apply border-cyan-600/20 bg-cyan-400/20 dark:border-cyan-800/20 dark:bg-cyan-600/10; + } + + & > [data-callout-title] { + & { + @apply text-cyan-500; + } + + &::before { + /* lucide:flame */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTguNSAxNC41QTIuNSAyLjUgMCAwIDAgMTEgMTJjMC0xLjM4LS41LTItMS0zYy0xLjA3Mi0yLjE0My0uMjI0LTQuMDU0IDItNmMuNSAyLjUgMiA0LjkgNCA2LjVjMiAxLjYgMyAzLjUgMyA1LjVhNyA3IDAgMSAxLTE0IDBjMC0xLjE1My40MzMtMi4yOTQgMS0zYTIuNSAyLjUgMCAwIDAgMi41IDIuNSIvPjwvc3ZnPg=="); + } + } +} + +[data-callout][data-callout-type="tip"] > [data-callout-title]:empty::after { + content: "Tip"; +} + +[data-callout][data-callout-type="hint"] > [data-callout-title]:empty::after { + content: "Hint"; +} + +[data-callout][data-callout-type="important"] > [data-callout-title]:empty::after { + content: "Important"; +} + +[data-callout][data-callout-type="success"], +[data-callout][data-callout-type="check"], +[data-callout][data-callout-type="done"] { + & { + @apply border-green-600/20 bg-green-400/20 dark:border-green-800/20 dark:bg-green-600/10; + } + + & > [data-callout-title] { + & { + @apply text-green-500; + } + + &::before { + /* lucide:check */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTIwIDZMOSAxN2wtNS01Ii8+PC9zdmc+"); + } + } +} + +[data-callout][data-callout-type="success"] > [data-callout-title]:empty::after { + content: "Success"; +} + +[data-callout][data-callout-type="check"] > [data-callout-title]:empty::after { + content: "Check"; +} + +[data-callout][data-callout-type="done"] > [data-callout-title]:empty::after { + content: "Done"; +} + +[data-callout][data-callout-type="question"], +[data-callout][data-callout-type="help"], +[data-callout][data-callout-type="faq"] { + & { + @apply border-orange-600/20 bg-orange-400/20 dark:border-orange-800/20 dark:bg-orange-600/10; + } + + & > [data-callout-title] { + & { + @apply text-orange-500; + } + + &::before { + /* lucide:circle-help */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cGF0aCBkPSJNOS4wOSA5YTMgMyAwIDAgMSA1LjgzIDFjMCAyLTMgMy0zIDNtLjA4IDRoLjAxIi8+PC9nPjwvc3ZnPg=="); + } + } +} + +[data-callout][data-callout-type="question"] > [data-callout-title]:empty::after { + content: "Question"; +} + +[data-callout][data-callout-type="help"] > [data-callout-title]:empty::after { + content: "Help"; +} + +[data-callout][data-callout-type="faq"] > [data-callout-title]:empty::after { + content: "FAQ"; +} + +[data-callout][data-callout-type="warning"], +[data-callout][data-callout-type="caution"], +[data-callout][data-callout-type="attention"] { + & { + @apply border-orange-600/20 bg-orange-400/20 dark:border-orange-800/20 dark:bg-orange-600/10; + } + + & > [data-callout-title] { + & { + @apply text-orange-500; + } + + &::before { + /* lucide:triangle-alert */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTIxLjczIDE4bC04LTE0YTIgMiAwIDAgMC0zLjQ4IDBsLTggMTRBMiAyIDAgMCAwIDQgMjFoMTZhMiAyIDAgMCAwIDEuNzMtM00xMiA5djRtMCA0aC4wMSIvPjwvc3ZnPg=="); + } + } +} + +[data-callout][data-callout-type="warning"] > [data-callout-title]:empty::after { + content: "Warning"; +} + +[data-callout][data-callout-type="caution"] > [data-callout-title]:empty::after { + content: "Caution"; +} + +[data-callout][data-callout-type="attention"] > [data-callout-title]:empty::after { + content: "Attention"; +} + +[data-callout][data-callout-type="failure"], +[data-callout][data-callout-type="fail"], +[data-callout][data-callout-type="missing"] { + & { + @apply border-red-600/20 bg-red-400/20 dark:border-red-800/20 dark:bg-red-600/10; + } + + & > [data-callout-title] { + & { + @apply text-red-500; + } + + &::before { + /* lucide:check */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTIwIDZMOSAxN2wtNS01Ii8+PC9zdmc+"); + } + } +} + +[data-callout][data-callout-type="failure"] > [data-callout-title]:empty::after { + content: "Failure"; +} + +[data-callout][data-callout-type="fail"] > [data-callout-title]:empty::after { + content: "Fail"; +} + +[data-callout][data-callout-type="missing"] > [data-callout-title]:empty::after { + content: "Missing"; +} + +[data-callout][data-callout-type="danger"], +[data-callout][data-callout-type="error"] { + & { + @apply border-red-600/20 bg-red-400/20 dark:border-red-800/20 dark:bg-red-600/10; + } + + & > [data-callout-title] { + & { + @apply text-red-500; + } + + &::before { + /* lucide:zap */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXphcCI+PHBhdGggZD0iTTQgMTRhMSAxIDAgMCAxLS43OC0xLjYzbDkuOS0xMC4yYS41LjUgMCAwIDEgLjg2LjQ2bC0xLjkyIDYuMDJBMSAxIDAgMCAwIDEzIDEwaDdhMSAxIDAgMCAxIC43OCAxLjYzbC05LjkgMTAuMmEuNS41IDAgMCAxLS44Ni0uNDZsMS45Mi02LjAyQTEgMSAwIDAgMCAxMSAxNHoiLz48L3N2Zz4="); + } + } +} + +[data-callout][data-callout-type="danger"] > [data-callout-title]:empty::after { + content: "Danger"; +} + +[data-callout][data-callout-type="error"] > [data-callout-title]:empty::after { + content: "Error"; +} + +[data-callout][data-callout-type="bug"] { + & { + @apply border-red-600/20 bg-red-400/20 dark:border-red-800/20 dark:bg-red-600/10; + } + + & > [data-callout-title] { + & { + @apply text-red-500; + } + + &::before { + /* lucide:bug */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHBhdGggZD0ibTggMmwxLjg4IDEuODhtNC4yNCAwTDE2IDJNOSA3LjEzdi0xYTMuMDAzIDMuMDAzIDAgMSAxIDYgMHYxIi8+PHBhdGggZD0iTTEyIDIwYy0zLjMgMC02LTIuNy02LTZ2LTNhNCA0IDAgMCAxIDQtNGg0YTQgNCAwIDAgMSA0IDR2M2MwIDMuMy0yLjcgNi02IDZtMCAwdi05Ii8+PHBhdGggZD0iTTYuNTMgOUM0LjYgOC44IDMgNy4xIDMgNW0zIDhIMm0xIDhjMC0yLjEgMS43LTMuOSAzLjgtNE0yMC45NyA1YzAgMi4xLTEuNiAzLjgtMy41IDRNMjIgMTNoLTRtLS44IDRjMi4xLjEgMy44IDEuOSAzLjggNCIvPjwvZz48L3N2Zz4="); + } + } +} + +[data-callout][data-callout-type="bug"] > [data-callout-title]:empty::after { + content: "Bug"; +} + +[data-callout][data-callout-type="example"] { + & { + @apply border-purple-600/20 bg-purple-400/20 dark:border-purple-800/20 dark:bg-purple-600/10; + } + + & > [data-callout-title] { + & { + @apply text-purple-500; + } + + &::before { + /* lucide:list */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTggNmgxM004IDEyaDEzTTggMThoMTNNMyA2aC4wMU0zIDEyaC4wMU0zIDE4aC4wMSIvPjwvc3ZnPg=="); + } + } +} + +[data-callout][data-callout-type="example"] > [data-callout-title]:empty::after { + content: "Example"; +} + +[data-callout][data-callout-type="quote"], +[data-callout][data-callout-type="cite"] { + & { + @apply border-zinc-600/20 bg-zinc-400/20 dark:border-zinc-800/20 dark:bg-zinc-600/15; + } + + & > [data-callout-title] { + & { + @apply text-zinc-500; + } + + &::before { + /* lucide:quote */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTMgMjFjMyAwIDctMSA3LThWNWMwLTEuMjUtLjc1Ni0yLjAxNy0yLTJINGMtMS4yNSAwLTIgLjc1LTIgMS45NzJWMTFjMCAxLjI1Ljc1IDIgMiAyYzEgMCAxIDAgMSAxdjFjMCAxLTEgMi0yIDJzLTEgLjAwOC0xIDEuMDMxVjIwYzAgMSAwIDEgMSAxbTEyIDBjMyAwIDctMSA3LThWNWMwLTEuMjUtLjc1Ny0yLjAxNy0yLTJoLTRjLTEuMjUgMC0yIC43NS0yIDEuOTcyVjExYzAgMS4yNS43NSAyIDIgMmguNzVjMCAyLjI1LjI1IDQtMi43NSA0djNjMCAxIDAgMSAxIDEiLz48L3N2Zz4="); + } + } +} + +[data-callout][data-callout-type="quote"] > [data-callout-title]:empty::after { + content: "Quote"; +} + +[data-callout][data-callout-type="cite"] > [data-callout-title]:empty::after { + content: "Cite"; +} \ No newline at end of file diff --git a/src/styles/typography.css b/src/styles/typography.css index 1d4be95..c83705d 100644 --- a/src/styles/typography.css +++ b/src/styles/typography.css @@ -119,4 +119,4 @@ @apply my-6 overflow-x-auto overflow-y-hidden tracking-normal; } } -} +} \ No newline at end of file