"FeatureLinks" component done, with example backgrounds

.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>

.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;
+  }
+}

.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;
   }
 

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
 ---