From 8d2172f0133e436adab6925026adf90abad61bf0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?= =?UTF-8?q?=E3=83=96?= Date: Tue, 29 May 2018 11:27:21 -0500 Subject: [PATCH] Cleanup --- .vuepress/components/FeatureLinks.vue | 81 ++++++++++++++++++- .vuepress/scss/components/_feature-links.scss | 79 ------------------ 2 files changed, 79 insertions(+), 81 deletions(-) delete mode 100644 .vuepress/scss/components/_feature-links.scss diff --git a/.vuepress/components/FeatureLinks.vue b/.vuepress/components/FeatureLinks.vue index 89feef0..c338ed9 100644 --- a/.vuepress/components/FeatureLinks.vue +++ b/.vuepress/components/FeatureLinks.vue @@ -19,6 +19,83 @@ diff --git a/.vuepress/scss/components/_feature-links.scss b/.vuepress/scss/components/_feature-links.scss deleted file mode 100644 index ddba929..0000000 --- a/.vuepress/scss/components/_feature-links.scss +++ /dev/null @@ -1,79 +0,0 @@ -.feature-links { - list-style-type: none; - padding-top: 0.5rem; -} - -.feature-link { - width: 320px; min-height: 135px; - - background-color: $white; - border: 1px solid rgba($black, 0.1); - border-radius: 3px; - 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; - } -} - -.feature-link__title { - background-color: $white; - 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: 1rem; - line-height: 1.7; - padding: 0.25rem 0.5rem; - transition: color 0.2s; - position: relative; -} - -.feature-link__background { - width: calc(100% + 2px); height: 100px; - top: -1px; left: -1px; - - background-color: $teal; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - transition: filter 0.2s; - overflow: hidden; - position: absolute; - z-index: 0; - - img { - width: 100%; height: 100%; - - object-fit: cover; - object-position: center; - } -}