diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c3c4f3c..8d3d774 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -125,7 +125,7 @@
const hosts = getKeys(results.instance_tags.hosts);
//console.log('categories array: ', results.tech_tags.categories);
- console.log('categories keys: ', categories);
+ //console.log('categories keys: ', categories);
@@ -140,25 +140,33 @@
- {#each categories as category}
- {category}
+ {#each categories as category}{category} {/each}
+
+
+ {#each analogues as analogue}
+ {analogue}
+ {/each}
+
+
+ {#each licenses as license}
+ {license}
{/each}
{#each statuses as status}
- {status}
+ {status}
{/each}
{#each affiliates as affiliate}
- {affiliate}
+ {affiliate}
{/each}
{#each hosts as host}
- {host}
+ {host}
{/each}
@@ -198,18 +206,35 @@
.summary {
}
.filters {
- }
- .filters .tags {
- background-color: #f1ff94;
+ /*background-color: #f1ff94;
padding: 0.5em;
border: 3px solid #cbea77;
+ margin: 1em 0;*/
+ margin-bottom: 1em;
+ }
+ .filters .tags {
+ /*padding: 0.5em;*/
margin: 1em 0;
+ display: block;
+ }
+ .tag-list {
+ white-space: normal;
+ word-break: normal;
+ display: inline;
}
.tag {
font-size: 80%;
color: #777;
- margin-right: 1em;
+ margin-right: 0.5em;
+ line-height: 2;
+ background-color: #a369a2;
+ color: #fff;
+ padding: 4px 8px;
+ border-radius: 10px;
+ white-space: nowrap;
+ word-break: keep-all;
}
+ .tag:after { content: "\00a0"; }
.tiles {
display: grid;
grid-gap: 15px;