Something went wrong. Try again.
My blog
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263@import "tailwindcss";
@import "mocha.css";
.mocha { --callout-blend-mode: lighten;}
@theme { /* Remove initial variables we don't need */ --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; --color-trans-pink: #f5abb9; --color-lesbian-orange1: #d62900; --color-lesbian-orange2: #ff790d; --color-lesbian-orange3: #ff9b55; --color-lesbian-pink1: #d462a6; --color-lesbian-pink2: #ef5496; --color-lesbian-pink3: #a50062;}
@layer components { [data-editor-file] { @apply transition-all rounded-md; pointer-events: auto; } [data-editor-file]:hover { @apply transition-all outline-ctp-blue outline-2 outline-offset-4 bg-ctp-blue/10 pl-1; }}
@utility h-entry { a { @apply text-ctp-blue underline; }
h2 { @apply text-2xl font-sans; }
p { @apply mb-6; }
blockquote { @apply border-l-2 pl-6 relative border-ctp-overlay0 italic; left: -0.5rem; }
div.callout-content > p { @apply mb-0; }
h2:has(a.header-anchor) { @apply text-3xl text-ctp-mauve relative mb-8; left: -1.75rem; }
h3:has(a.header-anchor) { @apply text-2xl text-ctp-mauve relative mb-6; left: -1.75rem; }
a.header-anchor::before { @apply relative mr-1 inline-block; font-family: "bootstrap-icons"; content: "\F40A"; top: 0.225rem; }}
@utility header-anchor { @apply text-ctp-mauve!;}
/* Disable <detail> folding on non-folding admonitions */@utility no-fold { pointer-events: none;}
/* Callouts/Admonitions */@utility callout { @apply outline-1 rounded-sm py-2 pl-2 pr-4 outline-solid overflow-hidden; outline-color: --alpha(var(--callout-color) / 50%); margin: 1em 0; mix-blend-mode: var(--callout-blend-mode); 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"; } }
.callout-content { @apply overflow-x-auto pl-2;
[data-editor-file]:hover { @apply relative top-2 mr-2; } } &[data-callout="note"] { --callout-color: var(--color-ctp-blue); --callout-icon: "\F4CB"; }
&[data-callout="todo"] { --callout-color: var(--color-ctp-blue); --callout-icon: "\F26B"; }
&[data-callout="info"] { --callout-color: var(--color-ctp-blue-700); --callout-icon: "\F431"; }
&[data-callout="success"], &[data-callout="check"], &[data-callout="done"] { --callout-color: var(--color-ctp-green); --callout-icon: "\F272"; }
&[data-callout="warning"], &[data-callout="caution"], &[data-callout="attention"] { --callout-color: var(--color-ctp-yellow); --callout-icon: "\F33B"; }
&[data-callout="question"] { --callout-color: var(--color-ctp-yellow-900); --callout-icon: "\F505"; }
&[data-callout="danger"], &[data-callout="error"] { --callout-color: var(--color-ctp-maroon-400); --callout-icon: "\F46F"; }
&[data-callout="failure"] { --callout-color: var(--color-ctp-maroon-800); --callout-icon: "\F659"; }
&[data-callout="bug"] { --callout-color: var(--color-ctp-maroon); --callout-icon: "\F1DC"; }
&[data-callout="tip"], &[data-callout="hint"] { --callout-color: var(--color-ctp-teal); --callout-icon: "\F7F6"; }
&[data-callout="example"] { --callout-color: var(--color-ctp-mauve); --callout-icon: "\F478"; }
&[data-callout="abstract"], &[data-callout="summary"], &[data-callout="tldr"] { --callout-color: var(--color-ctp-sky); --callout-icon: "\F727"; }
&[data-callout="quote"], &[data-callout="cite"] { --callout-color: var(--color-ctp-overlay0); --callout-icon: "\F6B0"; }}
/* Start Footnotes */
@utility fn { @apply mb-2; p { @apply inline; } [data-editor-file] { @apply inline; }}
@utility fn-backref { &::before { @apply inline-block text-ctp-blue align-bottom; content: "\F131"; font-family: "bootstrap-icons"; }}
/* End Footnotes */
/* Start ToC */
@utility toc { @apply mt-3 mb-8;}
@utility toc-l1 { @apply border-l-2 border-ctp-overlay0 pl-2 ml-1 text-xl;}
@utility toc-l2 { @apply text-base border-l-2 pl-2 border-ctp-surface2 first-of-type:mt-1 last-of-type:mb-1;}
/* End ToC */
/* Extra arbitrary styles */details.callout .callout-title { margin: 0; cursor: pointer;}
details.callout > .callout-title > .callout-fold::after { content: "\F285";}
details[open].callout > .callout-title > .callout-fold::after { content: "\F282";}