Adds open source tag to CMS cards

Author: zachleat

src/css/tailwind.css

@@ -54,7 +54,9 @@ dd a:focus {
 p+p {
   @apply mt-4;
 }
-
+section.cards {
+  max-width: 66rem;
+}
 
 /*
   CTA links

src/site/_includes/components/cards.njk

@@ -7,6 +7,11 @@
     {%- elseif loopIndex % 4 === 2 %} bg-gradient-card-seafoam
     {%- elseif loopIndex % 4 === 3 %} bg-gradient-card-gold
     {%- endif -%}">
+      {%- if item.data.opensource -%}
+      <div class="text-xxs mb-2">
+        <span class="inline-block uppercase bg-black text-white leading-5 px-2 rounded">Open Source</span>
+      </div>
+      {% endif %}
       {{ item.data.title }}
     </div>
     <div class="p-4">

src/site/_includes/layouts/tool.njk

@@ -54,6 +54,10 @@ layout: layouts/base.njk
     {%- endif %}
   </dl>
   <dl class="inline-block mb-4">
+    {%- if opensource %}
+    <dt class="inline-block font-bold mr-6">Open Source</dt>
+    <dd class="inline-block sr-only">Yes</dd>
+    {%- endif %}
     {%- if language %}
     <dt class="inline-block font-bold">Language:</dt>
     <dd class="inline-block mr-6">{{ language }}</dd>

tailwind.config.js

@@ -4,7 +4,6 @@ module.exports = {
     './src/site/**/*.md'
   ],
   theme: {
-
     borderRadius: {
       'none': '0',
       'sm': '.125rem',
@@ -14,6 +13,9 @@ module.exports = {
       'full': '9999px',
     },
     extend: {
+      fontSize: {
+        xxs: "0.625rem",
+      },
       colors: {
         orange: {
           500: "#DF4A1F",