STYLE Refining links behaviour

This commit is contained in:
Antoine M 2026-04-08 16:33:03 +02:00
parent a49f479510
commit 6756f895c8

View File

@ -1,6 +1,10 @@
a[target='_blank'] {
.entry-content,
.site-content {
a[target='_blank'] {
@apply external-link;
}
}
.external-link {
&:after {
@apply content-[''] w-7 h-7 ml-2 inline-block;
@ -30,6 +34,33 @@ a[target='_blank'] {
}
}
.internal-link-with-icon,
.internal-link-with-svg-icon,
.external-link-with-svg-icon {
@apply flex items-center;
transition: transform 0.3s ease-out;
svg {
flex-shrink: 0;
transition: transform 0.3s ease-out;
@apply content-[''] w-9 h-9 ml-2 inline-block;
transform: rotate(0deg) translateX(0px);
}
&:hover {
filter: brightness(1.2);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 8px;
transform: translateX(-4px);
}
&--white {
@apply text-white;
&:after {
filter: brightness(0) invert(1);
}
}
}
.internal-link-with-icon {
@apply flex items-center;
transition: transform 0.3s ease-out;
@ -57,6 +88,19 @@ a[target='_blank'] {
}
}
}
.internal-link-with-svg-icon {
&:hover {
transform: translateX(0px);
}
&:hover svg {
transform: translateY(4px) rotate(0deg);
}
}
.external-link-with-svg-icon {
&:hover svg {
transform: translateX(4px) rotate(45deg);
}
}
.internal-link-self-page-anchor {
&:hover {