feat: Links on cover image

src/app.css

@@ -126,7 +126,7 @@ a.disabled-link {
 	color: rgb(128,128,128);
 	pointer-events: none;
 }
-a:not(.icon) {
+main a:not(.icon) {
 	position: relative;
 	text-decoration: inherit;
 

src/routes/+page.svelte

@@ -15,7 +15,7 @@
 
 	onMount(() => {
 		let entity_blog = document.getElementById("visor");
-		entity_blog.appendChild(button_blog);
+		let link_about = document.getElementById("link-about");
 	});
 	function onScroll() {
 		if (scrollHeight > 1) {
@@ -59,42 +59,29 @@
 	<title>{metadata.name}</title>
 </svelte:head>
 
-<div class="cover" style="opacity: {1 - progress}">
+<div id="cover" style="opacity: {1 - progress}">
 	<Cover />
-						<a
-							bind:this={button_blog}
-							href="/post"
-										 class="entity-nav-link nav-link"><text style="font: 14pt">Placeholder</text></a>
 </div>
 
-<!--
+<div id="cover-mobile">
-<div id="front">
+	<div id="linkbox">
-	<div id="floater">
 		<p class="text-2xl floater-elem" style="color: #888">{metadata.frontDescription}</p>
-		<div
-			class="floater-elem"
-				 style="padding-bottom: {(1 - progress) * 50}vh"
-		>
 			<div id="navbar" class="h-5 items-center space-x-4 text-sm">
 				<a class="nav-link" href="#bio">Bio</a>
-				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 				{#each routes as item}
 					{#if item.route !== "/"}
 						<a
 							href={item.route}
 							class="nav-link"
 							class:disabled-link={item.disabled}>{item.name}</a>
-						<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 					{/if}
 				{/each}
 				<a class="icon nav-link" href="/rss.xml"><Rss /></a>
-				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 				<ThemeSwitch />
 			</div>
-		</div>
 	</div>
 </div>
--->
+
 <main>
 	<div id="bio">
 		<div class="p-1">
@@ -125,9 +112,8 @@
 />
 
 <style>
-	.cover {
+	#cover {
 		background:
-			/* no-repeat url("/cover.svg"), */
 			repeating-linear-gradient(129deg, transparent, #aaa 1px, #aaa 2px, transparent 1px, transparent 60px),
 			repeating-linear-gradient(11deg,  transparent, #aaa 1px, #aaa 2px, transparent 1px, transparent 40px),
 			#707078
@@ -141,27 +127,38 @@
 		min-height: 100svh;
 		overscroll-behaviour: none;
 	}
-	:global(.cover > svg) {
+	:global(#cover > svg) {
 		max-width: 100svw;
 		max-height: 100svh;
 		z-index: -10;
 		width: 100%;
 		height: 100%;
 	}
-	:global(svg > .entity) {
+	:global(svg a) {
-		filter: contrast(50%);
+		pointer-events: all;
+		:global(path) {
+			filter: contrast(50%);
+		}
+		:global(.shadow) {
+			visibility: hidden;
+		}
 		&:hover,
 		&:focus {
-			filter: contrast(100%);
+			:global(.shadow) {
+				visibility: visible;
+			}
+			:global(path) {
+				filter: contrast(100%);
+			}
 		}
 	}
-	.entity-nav-link {
+	:global(svg .shadow) {
-		display: block;
+		pointer-events: none;
-		height: 20px;
-		width: 50px;
-		z-index: 10;
 	}
-	#front {
+	.nav-link {
+		display: inline-block;
+	}
+	#cover-mobile {
 		height: 100svh;
 		display: flex;
 		flex-direction: column;
@@ -179,11 +176,25 @@
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: center;
+		flex-direction: column;
 	}
-	.floater-elem {
+	@media (max-width: 700px) {
-		margin-left: auto;
+		#cover {
-		margin-right: auto;
+			visibility: hidden;
+		}
+		#cover-mobile {
+			visibility: visible;
+		}
 	}
+	@media (min-width: 701px) {
+		#cover {
+			visibility: visible;
+		}
+		#cover-mobile {
+			visibility: hidden;
+		}
+	}
+
 	main {
 		width: 100%;
 		@apply bg-background;