Add image to xware

Author: makowildcat

_data/hardware.yml

@@ -2,10 +2,10 @@
   description : "The bbk3 stand for baby keycube, a very compact version of the original with only one switch per face."
   keywords : 1x1, backlight, IMU, small
   url : https://github.com/keycube/bbk3
-  image : "../assets/img/post1.jpg"
+  image : "../assets/img/hardware/bbk3.jpg"
 
 - title : k3Plush
   description : "The k3plush is a cube-shaped plush game controller."
   keywords : 2x2, fabric, sewing, soft
   url : https://github.com/keycube/k3plush
-  image : "../assets/img/post1.jpg"
+  image : "../assets/img/hardware/k3plush.jpg"

_layouts/xware.html

@@ -13,18 +13,20 @@ <h1 class="post-title">{{ page.title | escape }}</h1>
   <b>{{ content }}</b>
 </div>
 
-<ul class="post-list">
+<ul class="xware-list">
   {% assign title = page.title | downcase %}
   {% for xware in site.data[title] %}
   <li>
-    <span class="post-meta">{{ xware.keywords }}</span>
-    <br/>{{ xware.description }}
+    <img class="xware-img" src="{{ xware.image }}" alt="{{ xware.title }}"/>
     <h3>
       <a class="post-link" href="{{ xware.url }}">
         {{ xware.title }}
       </a>
     </h3>
-    
+    <span class="post-meta">{{ xware.keywords }}</span>
+    <p class="xware-meta">
+      {{ xware.description }}
+    </p>
   </li>
   {% endfor %}
 </ul>

_sass/minima/_layout.scss

@@ -260,4 +260,41 @@
   border-radius: 3px;
   margin-bottom: 30px;
   text-align: center;
+}
+
+/**
+ * xware
+ */
+
+.xware-list {
+  margin-left: 0;
+  list-style: none;
+
+  > li {
+    margin-bottom: $spacing-unit*3.5;
+
+    @include media-query($on-palm) {
+      margin-bottom: $spacing-unit*1;
+    }
+  }
+}
+
+.xware-img {
+  margin-right: 16px;
+  border-radius: 8px;
+  border: 1px solid $grey-color-light;
+
+  float: left;
+  height: 192px;
+  width: 192px;
+
+  @include media-query($on-palm) {
+    float: none;
+    width: 100%;
+    height: auto;
+  }
+}
+
+h3 {
+  margin-bottom: 0px;
 }