diff --git a/resources/css/base/links.css b/resources/css/base/links.css index 95cf0ec..1add07f 100644 --- a/resources/css/base/links.css +++ b/resources/css/base/links.css @@ -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 {