diff --git a/.vuepress/scss/components/_feature-links.scss b/.vuepress/scss/components/_feature-links.scss index 2df3813..ddba929 100644 --- a/.vuepress/scss/components/_feature-links.scss +++ b/.vuepress/scss/components/_feature-links.scss @@ -12,16 +12,33 @@ display: inline-block; margin-bottom: 1rem; position: relative; + transition: box-shadow 0.2s; vertical-align: top; > div:first-of-type { top: 85px; left: 5%; position: relative; + text-align: center; width: 90%; z-index: 1; } + &:not(:hover) { + .feature-link__background { + // filter: grayscale(50%); + filter: brightness(0.5); + } + } + + &:hover { + box-shadow: 0 0 15px rgba($black, 0.15); + + .feature-link__title { + color: $teal; + } + } + &:not(:last-of-type) { margin-right: 1rem; } @@ -29,12 +46,15 @@ .feature-link__title { background-color: $white; - border: 1px solid rgba($black, 0.1); + border: 1px solid rgba(gray, 0.1); + box-shadow: 0 2px 5px rgba($black, 0.025); + border-radius: 3px; box-decoration-break: clone; display: inline; - font-size: 1.15rem; + font-size: 1rem; line-height: 1.7; padding: 0.25rem 0.5rem; + transition: color 0.2s; position: relative; } @@ -45,6 +65,8 @@ background-color: $teal; border-top-right-radius: 3px; border-top-left-radius: 3px; + transition: filter 0.2s; + overflow: hidden; position: absolute; z-index: 0; diff --git a/.vuepress/scss/pages/_page.scss b/.vuepress/scss/pages/_page.scss index 49c46c8..767cd3f 100644 --- a/.vuepress/scss/pages/_page.scss +++ b/.vuepress/scss/pages/_page.scss @@ -179,7 +179,7 @@ } } - a:not(.button) { + a:not(.button):not(.feature-link__title) { color: $teal; position: relative;