64 lines
1.6 KiB
CSS
64 lines
1.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--motion-duration-short: 180ms;
|
|
--motion-duration-medium: 260ms;
|
|
--motion-ease-snappy: cubic-bezier(0.32, 0.72, 0, 1);
|
|
--card-translate-y: -6px;
|
|
}
|
|
|
|
body {
|
|
@apply bg-white text-gray-900 transition-colors duration-200 ease-snappy dark:bg-gray-950 dark:text-gray-100 text-[15px] sm:text-base;
|
|
}
|
|
|
|
.toc-target-highlight {
|
|
@apply bg-yellow-50/60 dark:bg-yellow-900/40 transition-colors duration-500;
|
|
}
|
|
|
|
/* Subtle hover for article elements */
|
|
.prose blockquote {
|
|
@apply transition-transform transition-shadow duration-180 ease-snappy;
|
|
}
|
|
|
|
.prose blockquote:hover {
|
|
@apply -translate-y-0.5 shadow-sm;
|
|
}
|
|
|
|
.prose pre {
|
|
@apply transition-transform transition-shadow duration-180 ease-snappy;
|
|
}
|
|
|
|
.prose pre:hover {
|
|
@apply -translate-y-0.5 shadow-md;
|
|
}
|
|
|
|
.prose h1 > a,
|
|
.prose h2 > a,
|
|
.prose h3 > a,
|
|
.prose h4 > a,
|
|
.prose h5 > a,
|
|
.prose h6 > a {
|
|
text-decoration: none !important;
|
|
color: inherit !important;
|
|
}
|
|
|
|
@layer components {
|
|
.motion-card {
|
|
transition: transform var(--motion-duration-medium) var(--motion-ease-snappy),
|
|
box-shadow var(--motion-duration-medium) var(--motion-ease-snappy),
|
|
background-color var(--motion-duration-medium) var(--motion-ease-snappy),
|
|
border-color var(--motion-duration-medium) var(--motion-ease-snappy);
|
|
}
|
|
|
|
.motion-card:hover {
|
|
transform: translateY(var(--card-translate-y));
|
|
}
|
|
|
|
.motion-link {
|
|
transition: color var(--motion-duration-short) var(--motion-ease-snappy),
|
|
transform var(--motion-duration-short) var(--motion-ease-snappy);
|
|
}
|
|
}
|