wip commit

src/lib/components/TechnologyTile.svelte

@@ -31,46 +31,17 @@
 			tech.hasOwnProperty('instances') &&
 			tech.instances.constructor === Array &&
 			tech.instances.length
-		) return true;
+		) {
+			return true;
+		}
 		return false;
 	}
 
-	function handleClick() {
-		console.log('clicked!');
-	}
-
-	/*document.addEventListener('keydown', (event) => {
-		const { activeElement } = document;
-		const hasButtonRole = activeElement?.getAttribute('role') === 'button';
-
-		if (hasButtonRole) {
-			// prevent default behaviour, including scrolling on spacebar
-			if (['Spacebar', ' ', 'Enter'].includes(event.key)) {
-				event.preventDefault();
-			}
-
-			if (event.key === 'Enter') {
-				activeElement.click();
-			}
-		}
-	});
-
-	document.addEventListener('keyup', (event) => {
-		const { activeElement } = document;
-		const hasButtonRole = activeElement?.getAttribute('role') === 'button';
-
-		if (hasButtonRole && ['Spacebar', ' '].includes(event.key)) {
-			event.preventDefault();
-			activeElement.click();
-		}
-	});*/
-
-	//onclick="handleClick()"
 </script>
 
 <!-- making a dive act like a button: https://kvack.dev/blog/make-that-div-behave-like-a-button -->
 
-<div on:click={() => (showModal = !showModal)} onclick="handleClick()" role="button" tabindex=0 class="tile technology">
+<button on:click={() => (showModal = !showModal)} tabindex=0 class="tile technology">
     <div class="links">
 		<span class="website"><a href="{technology.website}" title="Project site for {technology.name}">P</a></span>
         {#if technology.repository}<span class="repository"><a
@@ -102,33 +73,40 @@
     {:else}
         <div class="instances">Nothing here yet...</div>
     {/if}
-</div>
+</button>
 
 <Modal title="{technology.name}" bind:showModal>
 	<ModalBody>
 		Modal stuff...
 	</ModalBody>
+	<ModalFooter>
+		Modal footer stuff...
+	</ModalFooter>
 </Modal>
 
 <style>
 	.tile {
-        display: inline-block;
-		height: 515px;
-		/*min-width: 240px;
-		max-width: 300px;*/
-		width: 290px;
-		overflow: hidden;
-		box-sizing: border-box;
-		box-shadow: 5px 5px 3px #6a6d6a;
+		/*background: none;
+		border: none;
+		outline: none;
+		box-shadow: none;
+		appearance: none !important; */
+		background-color: #eee;
 		border: solid 3px #3a8ea5;
 		border-radius: 15px;
-		text-overflow: ellipsis;
+		box-shadow: 5px 5px 3px #6a6d6a;
+		box-sizing: border-box;
+        display: inline-block;
+		height: 515px;
+		margin-bottom: 10px;
+		margin-right: 18px;
+		margin-top: 8px;
 		overflow: hidden;
 		position: relative;
-		background-color: #eee;
-		margin-top: 8px;
-		margin-right: 18px;
-		margin-bottom: 10px;
+		text-align: left;
+		text-overflow: ellipsis;
+		vertical-align: top;
+		width: 290px;
 	}
 	.tile .links {
 		position: absolute;
@@ -138,7 +116,7 @@
 		font-size: 90%;
 	}
 	.tile:hover {
-		box-shadow: 10px 10px 6px #727372;
+		box-shadow: 6px 6px 5px #727372;
 	}
 	.tile:active {
 		box-shadow: 0 0 0;
@@ -196,9 +174,9 @@
 	.instances .marker {
 		margin-right: 3px;
 	}
-	.webservices li {
+	/*.webservices li {
 		list-style-type: none;
-	}
+	}*/
 	.value {
 		font-weight: bold;
 		color: #000;
@@ -217,10 +195,10 @@
 	.circle:hover {
 		border: 1px solid #000;
 	}
-	.square {
+	/*.square {
 		height: 20px;
 		width: 20px;
 		background-color: #555;
 		display: inline-block;
-	}
+	}*/
 </style>

src/routes/+page.svelte

@@ -724,7 +724,7 @@
 		min-width: 30em;
 		border: 2px #aaa solid;
 		margin: 0 15px 20px 6px;
-		padding: 0 20px;
+		padding: 10px 20px;
 		box-shadow: 6px 6px 20px #999;
 	}
 	.summary .label {