reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-15 11:12:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: optimize animation curves and duration

Browse source
This commit is contained in:
radishzzz 2025-05-17 13:27:35 +01:00
parent 3ee10e2d18
commit 312a57c07e
7 changed files with 11 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Navbar.astro
View file

@ -12,7 +12,7 @@ const isAboutActive = isAbout
function getNavItemClass(isActive: boolean) {
return isActive
? 'highlight-static c-primary font-bold after:bottom-0.5em'
: 'highlight-hover transition-colors after:bottom-0.5em hover:(c-primary font-bold)'
: 'highlight-hover transition-colors transition-font-weight after:bottom-0.5em hover:(c-primary font-bold)'
}
const navItems = [

2
src/components/Widgets/GoBack.astro
View file

@ -5,7 +5,7 @@ import GoBackIcon from '@/assets/icons/go-back.svg';
<button
id="back-button"
class="hidden"
lg="block absolute c-secondary/40 left--10 top-1/2 aspect-square w-4.5 translate-y--1/2 transition-colors ease-out c-secondary active:scale-90 hover:c-primary/80"
lg="block absolute c-secondary/40 left--10 top-1/2 aspect-square w-4.5 translate-y--1/2 transition-colors c-secondary active:scale-90 hover:c-primary/80"
aria-label="Go back"
>
<GoBackIcon

4
src/components/Widgets/TOC.astro
View file

@ -29,7 +29,7 @@ const filteredHeadings = headings.filter(heading =>
<div class="relative h-12 w-full">
<label
for="toc-toggle"
class="absolute inset-0 flex cursor-pointer items-center 2xl:(static flex c-secondary/40 transition-colors ease-out hover:c-secondary/80)"
class="absolute inset-0 flex cursor-pointer items-center 2xl:(static flex c-secondary/40 transition-colors hover:c-secondary/80)"
>
<span class="toc-title">
{currentUI.toc}
@ -86,7 +86,7 @@ const filteredHeadings = headings.filter(heading =>
--at-apply: 'list-none pl-0 space-y-2 mt-1 mb-4 2xl:space-y-1.2';
}
.toc-link-h2, .toc-link-h3, .toc-link-h4 {
--at-apply: 'text-sm no-underline font-normal text-balance select-none 2xl:(text-3.2 c-secondary/60 transition-colors ease-in hover:(c-secondary font-medium))';
--at-apply: 'text-sm no-underline font-normal text-balance select-none 2xl:(text-3.2 c-secondary/60 transition-colors transition-font-weight duration-300 ease-out hover:(c-secondary font-medium))';
}
/* Initial collapsed state with zero height grid row */

2
src/pages/[...tags_tag].astro
View file

@ -52,7 +52,7 @@ const supportedLangs = await getTagSupportedLangs(tag)
href={getTagPath(tagName, lang)}
class={`uno-tags-style ${
tag === tagName
? 'border-secondary/75 text-primary'
? 'border-secondary/80 text-primary'
: ''
}`}
>

8
src/styles/global.css
View file

@ -21,16 +21,16 @@ body::selection {
/* Heading Anchor Link */
.heading-anchor-link {
--at-apply: 'inline-block translate-y-0.08em';
--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';
--at-apply: 'op-80';
}
.heading-anchor-link svg {
--at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-colors active:scale-90';
--at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-opacity duration-300 ease-out active:scale-90';
}
h1:hover .heading-anchor-link svg:hover,
h2:hover .heading-anchor-link svg:hover,
@ -53,7 +53,7 @@ h4:hover .heading-anchor-link svg:hover {
--at-apply: 'origin-bottom-left scale-x-100';
}
.highlight-hover::after {
--at-apply: 'origin-bottom-right scale-x-0 transition-transform duration-150 ease-out lg:duration-300';
--at-apply: 'origin-bottom-right scale-x-0 transition-transform';
}
/* Fix Position Issue on iOS */
@supports (-webkit-touch-callout: none) {

2
src/styles/heti.css
View file

@ -60,7 +60,7 @@
/* Links */
.heti :where(a:not(.gc-container)) {
--at-apply: 'break-all font-semibold tracking-0 underline underline-0.075em decoration-secondary/80 underline-offset-0.1em';
--at-apply: 'transition-colors ease-out hover:(c-primary decoration-primary/80) lg:underline-0.1em';
--at-apply: 'transition-colors hover:(c-primary decoration-primary/80) lg:underline-0.1em';
}
/* Images */

2
uno.config.ts
View file

@ -56,7 +56,7 @@ export default defineConfig({
],
shortcuts: {
'uno-desktop-column': 'fixed right-[max(5rem,calc(50vw-35rem))] w-14rem',
'uno-tags-style': 'inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary/75 text-primary)',
'uno-tags-style': 'inline-block whitespace-nowrap border border-secondary/40 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary/80 text-primary)',
'uno-decorative-line': 'mb-4.5 h-0.25 w-10 bg-secondary/25 lg:(mb-6 w-11)',
'uno-tags-wrapper': 'flex flex-wrap gap-x-3 gap-y-3.2',
'uno-round-border': 'border border-secondary/5 rounded border-solid',