updated styles for tiles, first commit with tags

src/routes/+page.svelte

@@ -1,8 +1,6 @@
 <script>
     export let data;
     const { webservices } = data;
-    //console.log(webservices);
-
 
     function processData(webservices) {
         let instances = 0;
@@ -16,6 +14,7 @@
         // properties of instances
         let statuses = [];
         let affiliates = [];
+
         let hosts = [];
         //
         // just a trivial reassignment
@@ -42,7 +41,7 @@
             }
 
             if (hasInstances(tech)) {
-                console.log(tech.name + ': ' + tech.instances.length + ' instances...');
+                //console.log(tech.name + ': ' + tech.instances.length + ' instances...');
                 tech.instances.forEach(function(instance, i) {
                     instances++;
                     if (instance.hasOwnProperty('status')) {
@@ -94,13 +93,39 @@
         return false;
     }
 
+    function getKeys(ob) {
+        let keys = [];
+        for (let key in ob) {
+            keys.push(key);
+            //console.log('pushing key ' + key);
+        };
+        return keys;
+    }
+
     const results = processData(webservices);
-    console.log('stats = ' + results.total_instances);
+   // console.log('results: ', results);
+    /*console.log('stats = ' + results.total_instances);
     console.log('tech_tags: ', results.tech_tags);
-    console.log('instance_tags: ', results.instance_tags);
+    console.log('instance_tags: ', results.instance_tags);*/
 
     const technologies = webservices.technologies;
-    const hosts = webservices.hosts;
+    //const hosts = webservices.hosts;
+    /*const categories = results.tech_tags.categories);
+    const analogues = results.tech_tags.analogues);
+    const licenses = results.tech_tags.licenses);
+    const statuses = results.instance_tags.statuses);
+    const affiliates = results.instance_tags.affiliates);
+    const hosts = results.instance_tags.hosts);*/
+    const categories = getKeys(results.tech_tags.categories);
+    //const categories = results.tech_tags.categories);
+    const analogues = getKeys(results.tech_tags.analogues);
+    const licenses = getKeys(results.tech_tags.licenses);
+    const statuses = getKeys(results.instance_tags.statuses);
+    const affiliates = getKeys(results.instance_tags.affiliates);
+    const hosts = getKeys(results.instance_tags.hosts);
+
+    //console.log('categories array: ', results.tech_tags.categories);
+    console.log('categories keys: ', categories);
 
 </script>
 
@@ -113,27 +138,27 @@
         </ul>
     </div>
     <div class="filters">
-        <div class="tags tech">
+        <div class="tag-list tech">
-            <div class="tags tech catergories">
+            <div class="tags tech categories">
-            {#each results.tech_tags.categories as category}
+            {#each categories as category}
-                <span>{category}</span>
+                <span class="tag">{category}</span>
             {/each}
             </div>
         </div>
-        <div class="tags instance">
+        <div class="tag-list instance">
             <div class="tags instance statuses">
-            {#each results.instance_tags.statuses as status}
+            {#each statuses as status}
-                <span>{status}</span>
+                <span class="tag">{status}</span>
             {/each}
             </div>
             <div class="tags instance affiliates">
-            {#each results.instance_tags.affiliates as affiliate}
+            {#each affiliates as affiliate}
-                <span>{affiliate}</span>
+                <span class="tag">{affiliate}</span>
             {/each}
             </div>
             <div class="tags instance hosts">
-            {#each results.instance_tags.hosts as host}
+            {#each hosts as host}
-                <span>{host}</span>
+                <span class="tag">{host}</span>
             {/each}
             </div>
         </div>
@@ -174,6 +199,17 @@
     }
     .filters {
     }
+    .filters .tags {
+        background-color: #f1ff94;
+        padding: 0.5em;
+        border: 3px solid #cbea77;
+        margin: 1em 0;
+    }
+    .tag {
+        font-size: 80%;
+        color: #777;
+        margin-right: 1em;
+    }
     .tiles {
         display: grid;
         grid-gap: 15px;
@@ -189,28 +225,5 @@
         border: solid 3px #1e6831;
         background-color: #fff;
     }
-/*    .technology {
-        background-color: #fff;
-    }
-    .instances {
-        background-color: #ddd;
-    } */
     .webservices li { list-style-type: none; }
-    /*
-     * Breakpoints
-     */
-    @media all and (max-width: 500px) {
-        .collapse { display: block; }
-        .collapse > .cell { width: 100% !important; }
-    }
-  /*  .no-flexbox .webservices {
-        display: block;
-        .no-flexbox .webservices > cell { width: 100%; }
-    }
-    div {
-        h2 {
-            color: green;
-        }
-    }*/
-
 </style>