STYLE Refining links behaviour
This commit is contained in:
parent
a49f479510
commit
6756f895c8
|
|
@ -1,6 +1,10 @@
|
|||
a[target='_blank'] {
|
||||
@apply external-link;
|
||||
.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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user