80 lines
1.4 KiB
CSS
80 lines
1.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* FONTS */
|
|
|
|
@layer base {
|
|
h1, h2, h3, h4, h5 {
|
|
@apply font-sans;
|
|
}
|
|
}
|
|
|
|
/* OTHERS */
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* bg-neutral-800
|
|
@apply bg-slate-800
|
|
*/
|
|
body {
|
|
@apply bg-slate-900;
|
|
@apply text-slate-400;
|
|
}
|
|
|
|
.extra-small {
|
|
font-size: 0.50rem;
|
|
}
|
|
|
|
/* tooltip fade-out clip */
|
|
.tooltip-body::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
top: 3.6rem; /* multiple of $line-height used on the tooltip body (defined in tooltipBodyStyle) */
|
|
height: 1.2rem; /* ($top + $height)/$line-height is the number of lines we want to clip tooltip text at*/
|
|
width: 10rem;
|
|
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
|
|
}
|
|
|
|
/* rehype-toc plugin classes */
|
|
.toc {
|
|
@apply hidden lg:block w-[16rem] p-8 pt-14 fixed top-16 bottom-0 right-[max(0px,50%-40rem)] overflow-y-auto border-2 border-blue-500;
|
|
}
|
|
|
|
.toc::before {
|
|
position: absolute;
|
|
content: "On this page";
|
|
top: 1.5rem;
|
|
line-height: 1.125rem;
|
|
color: white;
|
|
font-size: 1.125rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.toc-item {
|
|
@apply leading-5;
|
|
}
|
|
|
|
.toc-item-h1 {
|
|
@apply p-0;
|
|
}
|
|
|
|
.toc-level {
|
|
@apply list-none p-0;
|
|
}
|
|
|
|
.toc-level:not(.toc-level-1) {
|
|
@apply pl-2
|
|
}
|
|
|
|
.toc-item .toc-link {
|
|
@apply text-sm text-slate-400 hover:text-white no-underline break-normal
|
|
}
|
|
|
|
.toc-link.active {
|
|
@apply text-yellow-li
|
|
}
|