From c84d88153e0a35402f8c56765ed95decdfd875c1 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?= <netopwibby@thenetwork.email>
Date: Tue, 29 May 2018 10:23:44 -0500
Subject: [PATCH] "FeatureLinks" component done, with example backgrounds

---
 .vuepress/components/FeatureLinks.vue         | 13 +++--
 .vuepress/scss/components/_feature-links.scss | 57 +++++++++++++++++++
 .vuepress/scss/pages/_page.scss               |  6 +-
 community/index.md                            |  9 ++-
 4 files changed, 75 insertions(+), 10 deletions(-)
 create mode 100644 .vuepress/scss/components/_feature-links.scss

diff --git a/.vuepress/components/FeatureLinks.vue b/.vuepress/components/FeatureLinks.vue
index 0ace0cc..89feef0 100644
--- a/.vuepress/components/FeatureLinks.vue
+++ b/.vuepress/components/FeatureLinks.vue
@@ -1,12 +1,14 @@
 <template>
 
   <ul class="feature-links">
-    <li v-for="featureLink in this.$page.frontmatter.featureLinks">
-      <a :href="featureLink.href">{{ featureLink.title }}</a>
-      <div v-if="featureLink.details">{{ featureLink.details }}</div>
+    <li v-for="featureLink in this.$page.frontmatter.featureLinks" class="feature-link">
+      <div>
+        <a :href="featureLink.href" class="feature-link__title">{{ featureLink.title }}</a>
+        <div v-if="featureLink.details" class="feature-link__details">{{ featureLink.details }}</div>
+      </div>
 
-      <figure>
-        <img v-if="featureLink.image" src="featureLink.image" alt="featureLink.title"/>
+      <figure class="feature-link__background">
+        <img v-if="featureLink.image" :src="featureLink.image" :alt="featureLink.title"/>
       </figure>
     </li>
   </ul>
@@ -18,4 +20,5 @@
 <style lang="scss">
   @import "../scss/init/colors";
   @import "../scss/init/mixins";
+  @import "../scss/components/feature-links";
 </style>
diff --git a/.vuepress/scss/components/_feature-links.scss b/.vuepress/scss/components/_feature-links.scss
new file mode 100644
index 0000000..2df3813
--- /dev/null
+++ b/.vuepress/scss/components/_feature-links.scss
@@ -0,0 +1,57 @@
+.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;
+  vertical-align: top;
+
+  > div:first-of-type {
+    top: 85px; left: 5%;
+
+    position: relative;
+    width: 90%;
+    z-index: 1;
+  }
+
+  &:not(:last-of-type) {
+    margin-right: 1rem;
+  }
+}
+
+.feature-link__title {
+  background-color: $white;
+  border: 1px solid rgba($black, 0.1);
+  box-decoration-break: clone;
+  display: inline;
+  font-size: 1.15rem;
+  line-height: 1.7;
+  padding: 0.25rem 0.5rem;
+  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;
+  position: absolute;
+  z-index: 0;
+
+  img {
+    width: 100%; height: 100%;
+
+    object-fit: cover;
+    object-position: center;
+  }
+}
diff --git a/.vuepress/scss/pages/_page.scss b/.vuepress/scss/pages/_page.scss
index e924e76..49c46c8 100644
--- a/.vuepress/scss/pages/_page.scss
+++ b/.vuepress/scss/pages/_page.scss
@@ -130,7 +130,7 @@
     }
   }
 
-  p, ol, ul:not(.overview__ecosystem__module) {
+  p, ol, ul:not(.overview__ecosystem__module):not(.feature-links) {
     position: relative;
 
     @media (min-width: 901px) {
@@ -144,7 +144,7 @@
     }
   }
 
-  ol, ul:not(.overview__ecosystem__module) {
+  ol, ul:not(.overview__ecosystem__module):not(.feature-links) {
     padding-top: 0.5rem;
 
     li {
@@ -163,7 +163,7 @@
     padding-left: 1.6rem;
   }
 
-  ul:not(.overview__ecosystem__module) {
+  ul:not(.overview__ecosystem__module):not(.feature-links) {
     padding-left: 1.25rem;
   }
 
diff --git a/community/index.md b/community/index.md
index 381b27b..c955caf 100644
--- a/community/index.md
+++ b/community/index.md
@@ -3,17 +3,22 @@ title: Community
 featureLinks:
   - title: Join us in chat
     href: https://discord.gg/YjYbwhS
-    details: we need a chat that devs actually hang out in :/
-  - title: Join the developer email list for technical updates
+    image: http://static.simpledesktops.com/static/images/sd-bg.png
+  - title: Join the developer email list
     href: https://lbry.io/developer
+    image: http://static.simpledesktops.com/uploads/desktops/2017/02/28/GeoShapes_2880x1800.png
   - title: Host a meet-up
     href: https://lbry.io/meet
+    image: http://static.simpledesktops.com/uploads/desktops/2016/12/05/Untitled-1-03-01.png
   - title: Reddit
     href: https://www.reddit.com/r/lbry
+    image: http://static.simpledesktops.com/uploads/desktops/2016/08/28/Wind-Vector-resize.png
   - title: Get funding for a project
     href: https://lbry.fund
+    image: http://static.simpledesktops.com/uploads/desktops/2015/08/20/Sunset_by_Banned.png
   - title: Get a job
     href: https://lbry.io/join-us
+    image: http://static.simpledesktops.com/uploads/desktops/2015/09/25/Siri.png
   - title: Twitter
     href: https://lbry.io/twitter
 ---