.link {
@apply text-blue-600 transition duration-75 dark:text-blue-400;
}
.link:hover {
@apply text-blue-400 dark:text-blue-500;
}
.markdown_summary, .markdown {
a:not(.no_color) {
@apply link;
}
}
.markdown_summary {
@apply inline text-stone-600 dark:text-stone-400;
p {
max-width: 100%;
@apply inline-block line-clamp-4 leading-normal;
}
:not(pre) > code {
@apply font-mono text-sm py-0.5 px-1.5 rounded bg-stone-200
dark:bg-stone-800;
}
}
.copyButton {
svg.check {
@apply hidden;
}
&.copied {
svg.copy {
@apply hidden;
}
svg.check {
@apply block;
}
}
}
.markdown {
@apply space-y-3 shrink min-w-0 max-w-prose sm:max-w-screen-sm
md:max-w-screen-md lg:max-w-[75ch];
summary {
h1, h2, h3, h4, h5, h6 {
display: inline-block;
}
}
h1 {
@apply text-xl md:text-2xl lg:text-3xl border-b border-stone-300 pb-1
dark:border-stone-700;
}
h2 {
@apply text-lg md:text-xl lg:text-2xl border-b border-stone-300 pb-1
dark:border-stone-700;
}
h3 {
@apply font-bold md:text-lg md:font-normal lg:text-xl lg:font-normal;
}
h4 {
@apply font-semibold md:font-bold lg:text-lg lg:font-normal;
}
h5 {
@apply italic md:font-semibold lg:font-bold;
}
h6 {
@apply md:italic lg:font-semibold;
}
hr {
@apply m-2 border-stone-500 dark:border-stone-400;
}
ol, ul {
@apply list-outside ml-4;
}
ol {
@apply list-decimal;
}
ul {
@apply list-disc;
}
:not(pre) > code {
@apply font-mono text-sm py-0.5 px-1.5 rounded-md bg-stone-200
dark:bg-stone-800;
}
h1, h2, h3, h4, h5, h6 {
& > code {
font-size: inherit !important;
}
}
pre {
@apply font-mono text-sm text-black bg-slate-50 border-t-1.5 border-b-1.5
border-slate-300 -mx-4 rounded-none md:rounded-md md:border-1.5 md:mx-0
dark:bg-stone-800 dark:border-gray-600;
& > code:first-child {
@apply overflow-x-auto px-6 py-4 block;
}
}
p {
@apply my-1 mx-0;
}
table {
@apply block table-auto overflow-auto w-max max-w-full;
}
td {
@apply p-2;
}
th {
@apply font-bold text-center py-1.5;
}
th, td {
@apply border-1.5 border-slate-300 dark:border-stone-700;
}
tr:nth-child(2n) {
@apply bg-slate-50 dark:bg-stone-800;
}
img {
display: inline-block;
}
.alert {
@apply py-4 px-6 border-2 space-y-2 rounded-lg;
div:first-child {
@apply font-medium flex items-center gap-1.5;
svg {
@apply size-5;
}
}
}
.alert-note {
@apply border-blue-600 bg-blue-600/5 dark:bg-blue-600/5;
div:first-child {
@apply text-blue-600 stroke-blue-600 dark:text-blue-600
dark:stroke-blue-600;
}
}
.alert-tip {
@apply border-green-600 bg-green-600/5 dark:bg-green-600/5;
div:first-child {
@apply text-green-600 stroke-green-600 dark:text-green-600
dark:stroke-green-600;
}
}
.alert-important {
@apply border-purple-600 bg-purple-600/5 dark:bg-purple-600/5;
div:first-child {
@apply text-purple-600 stroke-purple-600 dark:text-purple-600
dark:stroke-purple-600;
}
}
.alert-warning {
@apply border-yellow-600 bg-yellow-600/5 dark:bg-yellow-600/5;
div:first-child {
@apply text-yellow-600 stroke-yellow-600 dark:text-yellow-600
dark:stroke-yellow-600;
}
}
.alert-caution {
@apply border-red-600 bg-red-600/5 dark:bg-red-600/5;
div:first-child {
@apply text-red-600 stroke-red-600 dark:text-red-600 dark:stroke-red-600;
}
}
code {
@apply w-full;
}
.highlight {
@apply relative text-black bg-gray-50 dark:bg-gray-800 dark:text-white;
.lineNumbers {
@apply border-r-2 border-gray-300 pr-1 text-right flex-none
dark:border-gray-600;
}
}
}