reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 19:51:07 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: add highlight hover animation to navigation and footer

Browse source 
- add dynamic accessible labels to heading anchors
- update theme toggle button svg
This commit is contained in:
radishzzz 2025-05-13 23:33:09 +01:00
parent 2d80d7effd
commit 610c86db0d
21 changed files with 131 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/styles/global.css
View file

@ -6,16 +6,31 @@
html {
--at-apply: 'bg-background c-secondary antialiased';
}
/* Fix flash issue on iOS */
::selection {
--at-apply: 'bg-mark';
}
/* Fix Flash Issue On iOS */
body {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
::selection {
--at-apply: 'bg-mark';
/* Highlight Hover Animation */
.highlight-static,
.highlight-hover {
--at-apply: 'relative inline-block';
}
html.dark ::selection {
--at-apply: 'c-background';
.highlight-static::after,
.highlight-hover::after {
--at-apply: 'content-[""] absolute bottom-0.5em left-0 z--1 h-0.5em w-full bg-mark';
}
.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 duration-300 ease-out';
}
/* View Transition with Theme Toggle >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */