diff --git a/package-lock.json b/package-lock.json index 0582eab..726980c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 7c8dcdc..a8e66a4 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 9bcb3c5..f346f86 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,14 +1,12 @@
@@ -231,10 +408,15 @@
- {#each technologies as technology} + {#each filtered_technologies as technology}
+

{technology.name}

{#if (technology.license)}

License: {technology.license}

{/if} + {#if (technology.categories)}

{pluraliser('Category','Categories',technology.categories.length)}: {toOxfordCommaString(technology.categories)}

{/if} {#if (technology.analogues)}

Alternative to {toOxfordCommaString(technology.analogues)}

{/if}

{technology.description}

{#if hasInstances(technology)} @@ -310,12 +492,12 @@ .tiles { display: grid; grid-gap: 15px; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } /* flip card stuff: https://www.w3schools.com/howto/howto_css_flip_card.asp */ .tile { - height: 400px; - min-width: 250px; + height: 500px; + min-width: 270px; max-width: 400px; overflow: hidden; box-sizing: border-box; @@ -324,7 +506,18 @@ text-overflow: ellipsis; overflow: hidden; position: relative; + background-color: #eee; } + .tile .links { + position: absolute; + top: 0; + right: 0; + padding: 2px 6px; + font-size: 90%; + } + .tile .links a { color: #e6c4fc; } + .tile .links a:visited { color: #ced0ff; } + .tile .links a:hover { color: #fff; } .tile h2 { background-color: #999; text-align: center; @@ -335,7 +528,7 @@ .tile h2 a:visited { color: #ced0ff; } .tile h2 a:hover { color: #fff; } .tile .description { - height: 200px; + height: 260px; text-overflow: ellipsis; overflow: hidden; } @@ -345,7 +538,7 @@ color: #555; } .instances { - background-color: #eee; + background-color: #ddd; position: absolute; bottom: 0; height: 3em; @@ -357,14 +550,14 @@ .webservices li { list-style-type: none; } .value { font-weight: bold; color: #000; } .marker { vertical-align: middle; } - .triangle { + /* .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;