119 lines
2.0 KiB
CSS
119 lines
2.0 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* FONTS */
|
|
|
|
@layer base {
|
|
h1, h2, h3, h4, h5 {
|
|
@apply font-sans;
|
|
}
|
|
|
|
.twitter-tweet iframe {
|
|
@apply !border !border-2 !border-neutral-900 !rounded-2xl !bg-neutral-900 shadow;
|
|
}
|
|
}
|
|
|
|
/* OTHERS */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.c-heading a {
|
|
@apply transition-colors no-underline break-normal;
|
|
}
|
|
|
|
.c-heading a:hover {
|
|
@apply text-yellow-li;
|
|
}
|
|
|
|
/* 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 classes */
|
|
/* nav element */
|
|
.toc {
|
|
@apply
|
|
hidden
|
|
lg:block
|
|
w-[20rem]
|
|
my-12
|
|
pt-12
|
|
px-8
|
|
fixed
|
|
top-16
|
|
bottom-0
|
|
right-[max(2rem,calc(50%-40rem+2rem))]
|
|
overflow-y-auto
|
|
/* border-l */
|
|
/* border-slate-800 */
|
|
}
|
|
|
|
/* toc title */
|
|
.toc::before {
|
|
position: absolute;
|
|
content: "On this page";
|
|
@apply text-white text-xl font-semibold top-1
|
|
}
|
|
|
|
/* list (ol) element */
|
|
.toc-level {
|
|
@apply list-none p-0;
|
|
}
|
|
|
|
.toc-level:not(.toc-level-1) {
|
|
@apply pl-2
|
|
}
|
|
|
|
/* list item (li) element */
|
|
.toc-item {
|
|
@apply leading-3;
|
|
}
|
|
|
|
.toc-item-h1 {
|
|
@apply p-0;
|
|
}
|
|
|
|
/* link (a) element */
|
|
.toc-link {
|
|
@apply transition-colors relative text-sm text-slate-400 no-underline break-normal;
|
|
}
|
|
|
|
.toc-link:not(.active) {
|
|
@apply hover:text-white;
|
|
}
|
|
|
|
.toc-link.active {
|
|
@apply text-yellow-li;
|
|
}
|
|
|
|
.toc-link::before {
|
|
position: absolute;
|
|
content: "";
|
|
@apply transition-opacity opacity-0 border-l border-yellow-li h-[110%] -top-[5%] -left-[0.5rem];
|
|
}
|
|
|
|
.toc-link.active::before {
|
|
@apply opacity-100;
|
|
}
|