mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-05 22:14:13 +00:00
128 lines
2.6 KiB
CSS
128 lines
2.6 KiB
CSS
/* Base styles for better text rendering */
|
|
@layer base {
|
|
html {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizelegibility;
|
|
/* Apply the runtime font vars injected by Hugo's typography partial */
|
|
font-family: var(--hb-font-body);
|
|
}
|
|
|
|
body {
|
|
font-family: var(--hb-font-body);
|
|
font-weight: var(--hb-font-weight-body, 400);
|
|
line-height: var(--hb-font-leading-body, 1.6);
|
|
letter-spacing: var(--hb-font-tracking-body, 0);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: var(--hb-font-heading);
|
|
font-weight: var(--hb-font-weight-heading, 700);
|
|
line-height: var(--hb-font-leading-heading, 1.2);
|
|
letter-spacing: var(--hb-font-tracking-heading, -0.02em);
|
|
}
|
|
|
|
code,
|
|
pre,
|
|
kbd,
|
|
samp {
|
|
font-family: var(--hb-font-code);
|
|
}
|
|
}
|
|
|
|
/* Gradient Mesh Animations */
|
|
@keyframes float {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0) translateX(0);
|
|
}
|
|
|
|
25% {
|
|
transform: translateY(-20px) translateX(10px);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-10px) translateX(-10px);
|
|
}
|
|
|
|
75% {
|
|
transform: translateY(-30px) translateX(5px);
|
|
}
|
|
}
|
|
|
|
@keyframes rotate-slow {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 8s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-rotate-slow {
|
|
animation: rotate-slow 20s linear infinite;
|
|
}
|
|
|
|
/* Custom utilities and components */
|
|
@utility task-list {
|
|
list-style: none;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
/* Custom typography styles - the plugin handles the base styles */
|
|
/* Additional customization for prose elements */
|
|
@layer components {
|
|
.prose a {
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--color-primary-300);
|
|
font-weight: var(--hb-font-weight-body-bold, 600);
|
|
}
|
|
|
|
.prose a:hover {
|
|
color: var(--color-primary-600);
|
|
text-decoration: none;
|
|
border-radius: 0.09rem;
|
|
}
|
|
|
|
.prose mark {
|
|
color: var(--color-neutral-900);
|
|
background-color: var(--color-primary-200);
|
|
padding: 0.1rem 0.2rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.dark .prose-invert a {
|
|
text-decoration-color: var(--color-neutral-500);
|
|
}
|
|
|
|
.dark .prose-invert a:hover {
|
|
color: var(--color-primary-300);
|
|
}
|
|
|
|
.dark .prose-invert mark {
|
|
background-color: var(--color-primary-400);
|
|
color: black;
|
|
}
|
|
|
|
/* Inline Code Styling */
|
|
.prose code:not(:where(pre *)) {
|
|
@apply rounded-md bg-neutral-100 px-1.5 py-0.5 text-[0.875em] font-normal text-primary-700;
|
|
@apply dark:bg-neutral-700/50 dark:text-primary-300;
|
|
}
|
|
|
|
.prose code:not(:where(pre *))::before,
|
|
.prose code:not(:where(pre *))::after {
|
|
content: none;
|
|
}
|
|
}
|