Compare commits
No commits in common. "e0fd7714bef2a4eec697ac48dd2978bf6f5fa287" and "368340817c8af27f9d67a51c243bcd0058617c81" have entirely different histories.
e0fd7714be
...
368340817c
5 changed files with 102 additions and 323 deletions
59
Notes.md
59
Notes.md
|
|
@ -1,61 +1,2 @@
|
|||
# My notes...
|
||||
|
||||
colours20 = {
|
||||
"dimgray": "#696969",
|
||||
"seagreen": "#2e8b57",
|
||||
"darkred": "#8b0000",
|
||||
"olive": "#808000",
|
||||
"darkblue": "#00008b",
|
||||
"maroon3": "#b03060",
|
||||
"orangered": "#ff4500",
|
||||
"orange": "#ffa500",
|
||||
"lime": "#00ff00",
|
||||
"mediumorchid": "#ba55d3",
|
||||
"darksalmon": "#e9967a",
|
||||
"aqua": "#00ffff",
|
||||
"blue": "#0000ff",
|
||||
"fuchsia": "#ff00ff",
|
||||
"dodgerblue": "#1e90ff",
|
||||
"palegoldenrod": "#eee8aa",
|
||||
"laserlemon": "#ffff54",
|
||||
"plum": "#dda0dd",
|
||||
"palegreen": "#98fb98",
|
||||
"lightskyblue": "#87cefa"
|
||||
}
|
||||
const colours20 = [ "#696969", "#2e8b57", "#8b0000", "#808000", "#00008b", "#b03060", "#ff4500", "#ffa500", "#00ff00", "#ba55d3", "#e9967a", "#00ffff", "#0000ff", "#ff00ff", "#1e90ff", "#eee8aa", "#ffff54", "#dda0dd", "#98fb98", "#87cefa" ];
|
||||
|
||||
|
||||
colours30 = {
|
||||
"gray": "#808080",
|
||||
"maroon2": "#7f0000",
|
||||
"darkgreen": "#006400",
|
||||
"olive": "#808000",
|
||||
"darkslateblue": "#483d8b",
|
||||
"darkcyan": "#008b8b",
|
||||
"peru": "#cd853f",
|
||||
"darkblue": "#00008b",
|
||||
"purple2": "#7f007f",
|
||||
"darkseagreen": "#8fbc8f",
|
||||
"maroon3": "#b03060",
|
||||
"red": "#ff0000",
|
||||
"darkorange": "#ff8c00",
|
||||
"lime": "#00ff00",
|
||||
"darkviolet": "#9400d3",
|
||||
"springgreen": "#00ff7f",
|
||||
"crimson": "#dc143c",
|
||||
"aqua": "#00ffff",
|
||||
"deepskyblue": "#00bfff",
|
||||
"blue": "#0000ff",
|
||||
"lightcoral": "#f08080",
|
||||
"greenyellow": "#adff2f",
|
||||
"dodgerblue": "#1e90ff",
|
||||
"laserlemon": "#ffff54",
|
||||
"lightgreen": "#90ee90",
|
||||
"lightblue": "#add8e6",
|
||||
"deeppink": "#ff1493",
|
||||
"mediumslateblue": "#7b68ee",
|
||||
"violet": "#ee82ee",
|
||||
"moccasin": "#ffe4b5"
|
||||
}
|
||||
|
||||
const colours30 = [ "#808080", "#7f0000", "#006400", "#808000", "#483d8b", "#008b8b", "#cd853f", "#00008b", "#7f007f", "#8fbc8f", "#b03060", "#ff0000", "#ff8c00", "#00ff00", "#9400d3", "#00ff7f", "#dc143c", "#00ffff", "#00bfff", "#0000ff", "#f08080", "#adff2f", "#1e90ff", "#ffff54", "#90ee90", "#add8e6", "#ff1493", "#7b68ee", "#ee82ee", "#ffe4b5" ];
|
||||
|
|
|
|||
8
package-lock.json
generated
8
package-lock.json
generated
|
|
@ -23,7 +23,6 @@
|
|||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-svelte": "^3.1.2",
|
||||
"svelte": "^4.2.7",
|
||||
"svelte-popover": "^2.0.8",
|
||||
"vite": "^5.0.3",
|
||||
"vitest": "^2.0.0"
|
||||
}
|
||||
|
|
@ -3112,13 +3111,6 @@
|
|||
"svelte": "^3.19.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-popover": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/svelte-popover/-/svelte-popover-2.0.8.tgz",
|
||||
"integrity": "sha512-Yvz4FpvvXc5aBGyIE/TlGlqULLKkcfc7N0MoaqNXHMRVXxla+sc7G1xSCCURP3VqP0nZ5cIyPWOLLWFXuJjTRA==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/svelte-preprocess": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-6.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-svelte": "^3.1.2",
|
||||
"svelte": "^4.2.7",
|
||||
"svelte-popover": "^2.0.8",
|
||||
"vite": "^5.0.3",
|
||||
"vitest": "^2.0.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ export const load = async ({ fetch }) => {
|
|||
return {
|
||||
webservices: {
|
||||
technologies: webservicesData.technologies,
|
||||
affiliates: webservicesData.affiliates,
|
||||
hosts: webservicesData.hosts
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,129 +2,94 @@
|
|||
export let data;
|
||||
const { webservices } = data;
|
||||
|
||||
//console.log('orig:', webservices);
|
||||
//console.log('orig affiliates:', webservices.affiliates);
|
||||
//console.log('orig hosts:', webservices.hosts);
|
||||
|
||||
// source: https://mokole.com/palette.html 20 colors with default settings otherwise
|
||||
const colours30 = [ "#808080", "#7f0000", "#006400", "#808000", "#483d8b", "#008b8b", "#cd853f", "#00008b", "#7f007f", "#8fbc8f", "#b03060", "#ff0000", "#ff8c00", "#00ff00", "#9400d3", "#00ff7f", "#dc143c", "#00ffff", "#00bfff", "#0000ff", "#f08080", "#adff2f", "#1e90ff", "#ffff54", "#90ee90", "#add8e6", "#ff1493", "#7b68ee", "#ee82ee", "#ffe4b5" ];
|
||||
|
||||
function processData(webservices) {
|
||||
let instances = 0;
|
||||
let current = [];
|
||||
let future = [];
|
||||
let current = {};
|
||||
let current_status = [];
|
||||
let future = {};
|
||||
// properties of technologies
|
||||
let category_list = [];
|
||||
let analogue_list = [];
|
||||
let license_list = [];
|
||||
let categories = [];
|
||||
let analogues = [];
|
||||
let licenses = [];
|
||||
// properties of instances
|
||||
let status_list = [];
|
||||
let affiliate_list = [];
|
||||
let host_list = [];
|
||||
|
||||
// actual objects
|
||||
let hosts = [];
|
||||
let statuses = [];
|
||||
let affiliates = [];
|
||||
|
||||
let hosts = [];
|
||||
//
|
||||
// just a trivial reassignment
|
||||
//let hosts = webservices.hosts;
|
||||
//
|
||||
// pull out relevant info in useful chunks.
|
||||
for (let key in webservices.technologies) {
|
||||
let tech = webservices.technologies[key];
|
||||
webservices.technologies.forEach(function(tech, i) {
|
||||
if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array ) {
|
||||
tech.categories.forEach(function(category, index) {
|
||||
if (category_list.hasOwnProperty(category)) category_list[category]++;
|
||||
else category_list[category] = 1;
|
||||
if (categories.hasOwnProperty(category)) categories[category]++;
|
||||
else categories[category] = 1;
|
||||
});
|
||||
}
|
||||
if (tech.hasOwnProperty('analogues') && tech.analogues.constructor === Array ) {
|
||||
tech.analogues.forEach(function(analogue, index) {
|
||||
if (analogue_list.hasOwnProperty(analogue)) analogue_list[analogue]++;
|
||||
else analogue_list[analogue] = 1;
|
||||
if (analogues.hasOwnProperty(analogue)) analogues[analogue]++;
|
||||
else analogues[analogue] = 1;
|
||||
});
|
||||
}
|
||||
if (tech.hasOwnProperty('license')) {
|
||||
let license = tech.license;
|
||||
if (license_list.hasOwnProperty(license)) license_list[license]++;
|
||||
else license_list[license] = 1;
|
||||
if (licenses.hasOwnProperty(license)) licenses[license]++;
|
||||
else licenses[license] = 1;
|
||||
}
|
||||
|
||||
if (hasInstances(tech)) {
|
||||
tech['name'] = key;
|
||||
current.push(tech);
|
||||
//console.log(tech.name + ': ' + tech.instances.length + ' instances...');
|
||||
tech.instances.forEach(function(instance, i) {
|
||||
instances++;
|
||||
if (instance.hasOwnProperty('status')) {
|
||||
let tag = instance.status;
|
||||
if (status_list.hasOwnProperty(tag)) status_list[tag]++;
|
||||
else status_list[tag] = 1;
|
||||
if (statuses.hasOwnProperty(tag)) statuses[tag]++;
|
||||
else statuses[tag] = 1;
|
||||
}
|
||||
if (instance.hasOwnProperty('affiliation')) {
|
||||
let tag = instance.affiliation;
|
||||
if (affiliate_list.hasOwnProperty(tag)) affiliate_list[tag]++;
|
||||
else affiliate_list[tag] = 1;
|
||||
if (affiliates.hasOwnProperty(tag)) affiliates[tag]++;
|
||||
else affiliates[tag] = 1;
|
||||
}
|
||||
if (instance.hasOwnProperty('host')) {
|
||||
let tag = instance.host;
|
||||
if (host_list.hasOwnProperty(tag)) host_list[tag]++;
|
||||
else host_list[tag] = 1;
|
||||
if (hosts.hasOwnProperty(tag)) hosts[tag]++;
|
||||
else hosts[tag] = 1;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
future[key] = tech;
|
||||
}
|
||||
|
||||
};
|
||||
for (let key in webservices.hosts) {
|
||||
//console.log('key: ', key);
|
||||
let host = webservices.hosts[key];
|
||||
host['name'] = key;
|
||||
//console.log('host: ', host);
|
||||
if (host.hasOwnProperty('domain') && !(host.hasOwnProperty('status') && host.status == 'retired')) {
|
||||
hosts[key] = host;
|
||||
}
|
||||
}
|
||||
//console.log('webservices.affiliates: ', webservices.affiliates);
|
||||
for (let key in webservices.affiliates) {
|
||||
//console.log('key: ', key);
|
||||
let affiliate = webservices.affiliates[key];
|
||||
//console.log('affiliate assignment: ', affiliate);
|
||||
affiliates[key] = affiliate;
|
||||
// if (affiliate.hasOwnProperty('name')) {
|
||||
// affiliate_data[key] = affiliate;
|
||||
// }
|
||||
}
|
||||
//console.log('categories: ', categories);
|
||||
//console.log('analogues: ', analogues);
|
||||
//console.log('licenses: ', licenses);
|
||||
//console.log('statuses: ', statuses);
|
||||
//console.log('affiliates: ', affiliates);
|
||||
//console.log('hosts: ', hosts);
|
||||
});
|
||||
/*console.log('categories: ', categories);
|
||||
console.log('analogues: ', analogues);
|
||||
console.log('licenses: ', licenses);
|
||||
console.log('statuses: ', statuses);
|
||||
console.log('affiliates: ', affiliates);
|
||||
console.log('hosts: ', hosts); */
|
||||
|
||||
return {
|
||||
total_instances: instances,
|
||||
active_services: current,
|
||||
candidate_services: future,
|
||||
tech_lists: {
|
||||
category_list: category_list,
|
||||
analogue_list: analogue_list,
|
||||
license_list: license_list
|
||||
tech_tags: {
|
||||
categories: categories,
|
||||
analogues: analogues,
|
||||
licenses: licenses
|
||||
},
|
||||
instance_lists: {
|
||||
status_list: status_list,
|
||||
affiliate_list: affiliate_list,
|
||||
host_list: host_list
|
||||
},
|
||||
hosts: hosts,
|
||||
affiliates: affiliates
|
||||
instance_tags: {
|
||||
statuses: statuses,
|
||||
affiliates: affiliates,
|
||||
hosts: hosts
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// console.log(technologies);
|
||||
function hasInstances(tech) {
|
||||
if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array && tech.instances.length) return true;
|
||||
if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
@ -132,82 +97,35 @@
|
|||
let keys = [];
|
||||
for (let key in ob) {
|
||||
keys.push(key);
|
||||
//console.log('pushing key ' + key);
|
||||
};
|
||||
return keys;
|
||||
}
|
||||
|
||||
function toOxfordCommaString(arr) {
|
||||
if (arr.length == 1) return arr;
|
||||
else {
|
||||
var last = arr.pop();
|
||||
return arr.join(', ') + ', and ' + last;
|
||||
}
|
||||
}
|
||||
|
||||
function hostColours(host_list, colours, hosts) {
|
||||
let host_array = {};
|
||||
let i = 0;
|
||||
|
||||
//console.log('hosts:', hosts);
|
||||
|
||||
host_list.forEach(function(host) {
|
||||
//console.log(host);
|
||||
if (hosts[host].hasOwnProperty('domain') && hosts[host].hasOwnProperty('affiliation')) {
|
||||
host_array[host] = {
|
||||
"colour": colours[i++],
|
||||
"domain": hosts[host].domain,
|
||||
"affiliation": hosts[host].affiliation
|
||||
}
|
||||
}
|
||||
});
|
||||
return host_array;
|
||||
}
|
||||
|
||||
function affiliateColours(affiliate_list, colours, affiliates) {
|
||||
let affiliate_array = {};
|
||||
let i = 0;
|
||||
|
||||
//console.log('affiliates:', affiliates);
|
||||
|
||||
for (const affiliate of affiliate_list) {
|
||||
//console.log('affiliate:', affiliate);
|
||||
if (affiliates[affiliate].hasOwnProperty('name') && affiliates[affiliate].hasOwnProperty('website')) {
|
||||
affiliate_array[affiliate] = {
|
||||
"colour": colours[i++],
|
||||
"name": affiliates[affiliate].name,
|
||||
"website": affiliates[affiliate].website
|
||||
}
|
||||
}
|
||||
}
|
||||
return affiliate_array;
|
||||
}
|
||||
|
||||
|
||||
const results = processData(webservices);
|
||||
//console.log('results: ', results);
|
||||
// console.log('results: ', results);
|
||||
/*console.log('stats = ' + results.total_instances);
|
||||
console.log('tech_tags: ', results.tech_tags);
|
||||
console.log('instance_tags: ', results.instance_tags);*/
|
||||
|
||||
//const technologies = webservices.technologies;
|
||||
const technologies = results.active_services;
|
||||
//console.log(technologies);
|
||||
|
||||
const category_list = getKeys(results.tech_lists.category_list).sort();
|
||||
const analogue_list = getKeys(results.tech_lists.analogue_list).sort();
|
||||
const license_list = getKeys(results.tech_lists.license_list).sort();
|
||||
const status_list = getKeys(results.instance_lists.status_list).sort();
|
||||
const affiliate_list = getKeys(results.instance_lists.affiliate_list).sort();
|
||||
const host_list = getKeys(results.instance_lists.host_list).sort();
|
||||
|
||||
const hosts = results.hosts;
|
||||
//console.log('host_data: ', results.hosts);
|
||||
const affiliates = results.affiliates;
|
||||
//console.log('affiliate_data: ', results.affiliates);
|
||||
const host_colours = hostColours(host_list, colours30, hosts);
|
||||
//console.log('host_colours:', host_colours);
|
||||
const affiliate_colours = affiliateColours(affiliate_list, colours30, affiliates);
|
||||
//console.log('affiliate_colours:',affiliate_colours);
|
||||
const technologies = webservices.technologies;
|
||||
//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);
|
||||
console.log('categories keys: ', categories);
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -221,29 +139,48 @@
|
|||
</div>
|
||||
<div class="filters">
|
||||
<div class="tag-list tech">
|
||||
<div class="tags tech categories">Categories: {#each category_list as category}<span class="tag category">{category}</span> {/each}</div>
|
||||
<!--<div class="tags tech analogues">{#each analogues as analogue}<span class="tag analogue">{analogue}</span> {/each}</div>-->
|
||||
<div class="tags tech licenses">Licenses: {#each license_list as license}<span class="tag license">{license}</span> {/each}</div>
|
||||
<div class="tags tech categories">
|
||||
{#each categories as category}
|
||||
<span class="tag">{category}</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag-list instance">
|
||||
<div class="tags instance statuses">Statuses: {#each status_list as status}<span class="tag status">{status}</span> {/each}</div> <div class="tags instance affiliates">Affiliates: {#each affiliate_list as affiliate}<span class="tag affiliate"><span class="marker circle" style="background-color: {affiliate_colours[affiliate].colour}"></span> {affiliate}</span> {/each}</div>
|
||||
<div class="tags instance hosts">Hosts: {#each host_list as host}<span class="tag host"><span class="marker square" style="background-color: {host_colours[host].colour}"></span> {host}</span> {/each}</div>
|
||||
<div class="tags instance statuses">
|
||||
{#each statuses as status}
|
||||
<span class="tag">{status}</span>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="tags instance affiliates">
|
||||
{#each affiliates as affiliate}
|
||||
<span class="tag">{affiliate}</span>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="tags instance hosts">
|
||||
{#each hosts as host}
|
||||
<span class="tag">{host}</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tiles">
|
||||
{#each technologies as technology}
|
||||
<div class="tile technology">
|
||||
<h2><a href="{technology.website}">{technology.name}</a></h2>
|
||||
{#if (technology.license)}<p class="license" title="The libre license for this project is {technology.license}">License: <span class="value">{technology.license}</span></p>{/if}
|
||||
{#if (technology.analogues)}<p class="analogues">Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
|
||||
<p class="description">{technology.description}</p>
|
||||
<!--<p>{technology.description}</p>-->
|
||||
{#if hasInstances(technology)}
|
||||
<div class="instances"><p>{#each technology.instances as instance}
|
||||
<a href="https://{instance.domain}" title="{technology.name} instance {instance.domain} hosted on '{instance.host}' by {instance.affiliation}"><span class="marker circle" style="background-color: {affiliate_colours[instance.affiliation].colour}"></span></a>{/each}</p>
|
||||
<div class="instances">
|
||||
<ul class="instances">
|
||||
{#each technology.instances as instance}
|
||||
<li><a href="https://{instance.domain}">{instance.domain}</a> <span class="affiliation {instance.affiliation}">{instance.affiliation}</span></li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="instances">
|
||||
Nothing here yet...
|
||||
<div class="instances cell">
|
||||
<ul class="instances">
|
||||
<li>Nothing here yet...</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -254,128 +191,39 @@
|
|||
<style>
|
||||
.webservices {
|
||||
display: grid;
|
||||
width: 96%;
|
||||
width: 90%;
|
||||
margin: 0 auto 3em auto;
|
||||
padding: 0;
|
||||
}
|
||||
.summary {
|
||||
}
|
||||
.filters {
|
||||
/*background-color: #f1ff94;
|
||||
padding: 0.5em;
|
||||
border: 3px solid #cbea77;
|
||||
margin: 1em 0;*/
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.filters .tags {
|
||||
/*padding: 0.5em;*/
|
||||
background-color: #f1ff94;
|
||||
padding: 0.5em;
|
||||
border: 3px solid #cbea77;
|
||||
margin: 1em 0;
|
||||
display: block;
|
||||
}
|
||||
.tag-list {
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
display: inline;
|
||||
}
|
||||
.tag {
|
||||
font-size: 80%;
|
||||
margin-right: 0.5em;
|
||||
line-height: 2.5;
|
||||
padding: 6px 8px;
|
||||
border-radius: 14px;
|
||||
white-space: nowrap;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.tag:after { content: "\00a0"; }
|
||||
.tag.category {
|
||||
background-color: #a369a2;
|
||||
color: #fff;
|
||||
}
|
||||
.tag.license {
|
||||
background-color: #a369a2;
|
||||
color: #fff;
|
||||
}
|
||||
.tag.status {
|
||||
background-color: #a369a2;
|
||||
color: #fff;
|
||||
}
|
||||
.tag.affiliate {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
.tag.host {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
color: #777;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.tiles {
|
||||
display: grid;
|
||||
grid-gap: 15px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
/* flip card stuff: https://www.w3schools.com/howto/howto_css_flip_card.asp */
|
||||
.tile {
|
||||
height: 400px;
|
||||
min-width: 250px;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 5px 5px 3px #71ba71;
|
||||
min-width: 250px;
|
||||
max-width: 400px;
|
||||
padding: 0.8em 1.2em;
|
||||
overflow: hidden;
|
||||
border: solid 3px #1e6831;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.tile h2 {
|
||||
background-color: #999;
|
||||
text-align: center;
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
}
|
||||
.tile h2 a { color: #e6c4fc; }
|
||||
.tile h2 a:visited { color: #ced0ff; }
|
||||
.tile h2 a:hover { color: #fff; }
|
||||
.tile .description {
|
||||
height: 200px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tile p {
|
||||
padding: 0 1em 0.2em 1em;
|
||||
font-size: 80%;
|
||||
color: #555;
|
||||
}
|
||||
.instances {
|
||||
background-color: #eee;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 3em;
|
||||
width: 100%;
|
||||
}
|
||||
.instances .marker {
|
||||
margin-right: 3px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.webservices li { list-style-type: none; }
|
||||
.value { font-weight: bold; color: #000; }
|
||||
.marker { vertical-align: middle; }
|
||||
.triangle {
|
||||
--side-size: 20px;
|
||||
border-left: var(--side-size) solid transparent;
|
||||
border-right: var(--side-size) solid transparent;
|
||||
border-bottom: calc(2 * var(--side-size) * 0.866) solid green;
|
||||
border-top: var(--side-size) solid transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
.circle {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: #555;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
.square {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: #555;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue