comments widget

pages/_components/card-comments.html

+---
+title: Comments card
+columns: 2
+---
+
+{% include cards/comments.html %}

pages/_data/comments.yml

+- "Where's the old video of you guys going out? I really liked that one... Nonetheless, love the music! :)"
+- "This is PERFECT"
+- "She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD"
+- "Did anyone go camping in Oshkosh Wisconsin last month?"
+- "Hey i am subbed but i didnt get the notification how?"
+- "This is the best by far! I laughed for the hole sticking time 😂"

pages/_includes/cards/comments.html

+<div class="card">
+   <div class="card-header">
+      <div class="card-title">Comments</div>
+   </div>
+   <div class="card-body">
+
+      {% for person in site.data.people limit: 3 %}
+      <div class="d-flex{% unless forloop.last %} mb-5{% endunless %}">
+         <div class="mr-4">
+            {% include ui/avatar.html person=person status="green" %}
+         </div>
+         <div class="flex-fill">
+            <div class="d-flex mb-1 mt-n1">
+               <div class="strong d-flex">
+                  {{ person.full_name }}
+               </div>
+               <div class="ml-auto small text-muted">{{ forloop.index | random_date_ago: 23 | timeago }}</div>
+            </div>
+            <p class="mb-2">
+               {{ site.data.comments[forloop.index] }}
+            </p>
+            <div class="small">
+               <span class="text-success mr-1">+{{ forloop.index | random_number: 20, 50 }}</span>
+               <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up">{% include ui/icon.html icon="chevron-up" %}</a>
+               <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
+                  {% include ui/icon.html icon="chevron-down" %}
+               </a>
+               <span class="mr-1">·</span>
+               <a href="#" class="mr-1 text-muted">Reply</a>
+               <span class="mr-1">·</span>
+               <a href="#" class="text-muted">Edit</a>
+            </div>
+         </div>
+      </div>
+      {% endfor %}
+
+   </div>
+</div>

pages/_includes/ui/icon.html

-
 {% assign provider = include.provider | default: "fe" %}<i class="icon {{ provider }} {{ provider }}-{{ include.icon }}{% if include.class %} {{ include.class }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}"></i>

scss/_variables.scss

@@ -131,6 +131,7 @@ $spacers: (
   0: 0rem,
   1: .25rem,
   2: .5rem,
+  3: .75rem,
   4: 1rem,
   5: 1.5rem,
   6: 2rem,