131 lines
2.8 KiB
CSS
131 lines
2.8 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;
|
|
}
|
|
|
|
.hero-title {
|
|
position: relative;
|
|
display: inline-flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-title__sweep {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(120deg, transparent 10%, rgba(59, 130, 246, 0.35) 45%, transparent 90%);
|
|
transform: translateX(-120%);
|
|
animation: hero-sweep 4s var(--motion-ease-snappy) infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toc-list {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.toc-list li {
|
|
list-style: none;
|
|
}
|
|
|
|
@keyframes hero-sweep {
|
|
0% {
|
|
transform: translateX(-120%);
|
|
opacity: 0;
|
|
}
|
|
30% {
|
|
opacity: 0.4;
|
|
}
|
|
60% {
|
|
transform: translateX(120%);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateX(120%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.tag-chip {
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: color var(--motion-duration-short) var(--motion-ease-snappy), background-color var(--motion-duration-short) var(--motion-ease-snappy);
|
|
}
|
|
|
|
.tag-chip::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 4px;
|
|
width: 0;
|
|
height: 2px;
|
|
background: currentColor;
|
|
opacity: 0.5;
|
|
transition: width var(--motion-duration-short) var(--motion-ease-snappy), left var(--motion-duration-short) var(--motion-ease-snappy);
|
|
}
|
|
|
|
.tag-chip:hover::after,
|
|
.tag-chip:focus-visible::after {
|
|
width: 100%;
|
|
left: 0;
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|