💫 Add transitions to author/article nav links

This commit is contained in:
James Panther
2022-11-10 12:36:05 +11:00
parent 8a1dbe4777
commit 023678f628
4 changed files with 34 additions and 19 deletions
+26 -12
View File
@@ -1807,12 +1807,12 @@ body:has(#menu-controller:checked) {
margin-top: -1rem;
}
.mr-3 {
margin-right: 0.75rem;
.mr-2 {
margin-right: 0.5rem;
}
.ml-3 {
margin-left: 0.75rem;
.ml-2 {
margin-left: 0.5rem;
}
.mt-\[0\.1rem\] {
@@ -1831,10 +1831,6 @@ body:has(#menu-controller:checked) {
margin-bottom: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
@@ -1843,10 +1839,6 @@ body:has(#menu-controller:checked) {
margin-bottom: -0.25rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.\!mb-9 {
margin-bottom: 2.25rem !important;
}
@@ -2447,6 +2439,12 @@ body:has(#menu-controller:checked) {
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2457,6 +2455,12 @@ body:has(#menu-controller:checked) {
margin-top: 2rem;
}
.hover\:scale-125:hover {
--tw-scale-x: 1.25;
--tw-scale-y: 1.25;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-primary-300:hover {
--tw-border-opacity: 1;
border-color: rgba(var(--color-primary-300), var(--tw-border-opacity));
@@ -2540,6 +2544,16 @@ body:has(#menu-controller:checked) {
outline-color: transparent;
}
.group:hover .group-hover\:-translate-x-\[2px\] {
--tw-translate-x: -2px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-\[2px\] {
--tw-translate-x: 2px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:text-primary-600 {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-600), var(--tw-text-opacity));