minor tweaks to CSS ordering, precedence + formatting tweaks and shifting titles -> Popovers. Still have probs with Popovers being clipped by parent

src/app.css

@@ -4,16 +4,17 @@ html {
 }
 body {
 	font-family: 'Moderustic';
-	background-color: #ddfafa;
+	background-color: #ddfafa !important;
 	box-sizing: border-box;
 	margin: 0 auto;
 	min-height: 100%;
 	padding: 1em;
 	width: 100%;
-	font-size: 1.15em;
+	font-size: 1.15em !important;
 	border: double 3px #ddd;
 	border-top: none;
 	border-bottom: none;
+	font-size: 100%;
 }
 h1 {
 	padding-left: 0;
@@ -46,7 +47,7 @@ a:visited {
 	width: 90%;
 	margin: 1em auto;
 	max-width: 40em;
-	height: auto;
+	height: auto !important;
 	padding: 0;
 }
 .y-modal .y-modal-container .y-modal-content {

src/lib/components/TechnologyTile.svelte

@@ -65,8 +65,12 @@
 		{/if}
     </div>
 
-    <p class="description">{technology.description}{#if technology.extended_description}<span
-        title={technology.extended_description}>i</span>{/if}
+    <p class="description">{technology.description}{#if technology.extended_description}
+		<span class="circle-info">i</span>
+		<Popover trigger="hover">
+				<PopoverHeader><strong>Extra information</strong></PopoverHeader>
+				<PopoverBody>{technology.extended_description}</PopoverBody>
+		</Popover>{/if}
     </p>
     <div class="details">
     {#if technology.categories}<p class="property categories">{pluraliser('Category',
@@ -210,9 +214,11 @@
 		height: 200px;
 		line-height: 1.2em;
 		text-overflow: ellipsis;
-		overflow: hidden;
+		overflow: visible;
 		padding-top: 0.5em;
-		vertical-align: top;
+		/*vertical-align: top;*/
+		position: absolute;
+		top: 4em;
 	}
 	.tile.technology p {
 		padding: 0 0.7em 0.2em 0.7em;
@@ -224,7 +230,10 @@
 		margin: 0;
 	}
 	.tile.technology .details {
-		vertical-align: bottom;
+		/*vertical-align: bottom;*/
+		position: absolute;
+		bottom: 3em;
+		margin-bottom: 10px;
 	}
 	.tile.technology .instances {
 		background-color: #ddd;
@@ -260,4 +269,17 @@
 	.circle:hover {
 		border: 1px solid #000;
 	}
+	.circle-info {
+		height: 18px;
+		width: 18px;
+		font-style: italic;
+		background-color: #777;
+		border-radius: 50%;
+		display: inline-block;
+		border: 0px solid #777;
+		color: #fff;
+		margin-left: 5px;
+		padding: 0px 0px 2px 6px;
+		text-align: middle;
+	}
 </style>

src/routes/+layout.svelte

@@ -1,10 +1,11 @@
 <script>
    	import tabler from 'yesvelte/css/tabler.min.css?url';
- 	import '../app.css';
 
  	import { Navbar, NavbarItem } from 'yesvelte';
 
 	let theme = 'tabler';
+
+	import '../app.css';
 </script>
 
 <svelte:head>

src/routes/+page.svelte

@@ -714,7 +714,7 @@
 			</AccordionBody>
 		</Accordion>
 	</Accordions>
-	<p>Showing {filteredTechnologies.length} technology tiles.</p>
+	<p>Showing {filteredTechnologies.length} active technology tiles.</p>
 	<!--<p>Current URL: {$page.url}...</p>-->
 	<div class="tiles">
 		{#each filteredTechnologies as technology, index}
@@ -724,7 +724,7 @@
 				<TechnologyTile {technology} {affiliate_colours} {licenses} {showModal}/>
 			{/if}-->
 		{:else}
-			<p class='no-tiles'>No technologies are selected</p>
+			<p class='no-tiles'>No technologies with active instances are selected.<br/> If you selected a filter tag but no technologies appear, it is because that technology is in a testing or planning stage and does not yet have a publicly visible instance.</p>
 		{/each}
 	</div>
 </div>