mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 11:41:17 +02:00
58 lines
1.6 KiB
CSS
58 lines
1.6 KiB
CSS
:root {
|
|
--uno-colors-primary: theme('colors.primary');
|
|
--uno-colors-secondary: theme('colors.secondary');
|
|
--uno-colors-background: theme('colors.background');
|
|
}
|
|
html {
|
|
--at-apply: 'bg-background c-secondary antialiased';
|
|
scrollbar-width: thin;
|
|
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.25) transparent;
|
|
scrollbar-gutter: stable both-edges;
|
|
}
|
|
|
|
/* Fix Flash Issue On iOS */
|
|
body {
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
}
|
|
body::selection {
|
|
--at-apply: 'bg-highlight';
|
|
}
|
|
|
|
/* Heading Anchor Link */
|
|
.heading-anchor-link {
|
|
--at-apply: 'inline-block translate-y-0.1em';
|
|
}
|
|
h1:hover .heading-anchor-link svg,
|
|
h2:hover .heading-anchor-link svg,
|
|
h3:hover .heading-anchor-link svg,
|
|
h4:hover .heading-anchor-link svg {
|
|
--at-apply: 'op-40';
|
|
}
|
|
.heading-anchor-link svg {
|
|
--at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-opacity ease-out active:scale-90';
|
|
}
|
|
h1:hover .heading-anchor-link svg:hover,
|
|
h2:hover .heading-anchor-link svg:hover,
|
|
h3:hover .heading-anchor-link svg:hover,
|
|
h4:hover .heading-anchor-link svg:hover {
|
|
--at-apply: 'op-80';
|
|
}
|
|
|
|
/* Highlight Hover Animation */
|
|
.highlight-static,
|
|
.highlight-hover {
|
|
--at-apply: 'relative inline-block';
|
|
}
|
|
.highlight-static::after,
|
|
.highlight-hover::after {
|
|
content: '';
|
|
--at-apply: 'absolute left-0 z--1 h-0.5em w-full bg-highlight';
|
|
}
|
|
.highlight-static::after,
|
|
.highlight-hover:hover::after {
|
|
--at-apply: 'origin-bottom-left scale-x-100';
|
|
}
|
|
.highlight-hover::after {
|
|
--at-apply: 'origin-bottom-right scale-x-0 transition-transform ease-out lg:duration-300';
|
|
}
|