feat: icons with tooltip instead of link

config.toml

@@ -75,10 +75,11 @@ subtitle_suffixes = [
 
 # Social icons, list here: https://github.com/rhazdon/hugo-theme-hello-friend-ng/blob/master/layouts/partials/svg.html
 social_icons = [
-	{ name = "github", url = "https://github.com/zaaarf" },
+	{ name = "github", at = "https://github.com/zaaarf" },
-	{ name = "codeberg", url = "https://codeberg.org/zaaarf" },
+	{ name = "codeberg", at = "https://codeberg.org/zaaarf" },
-	{ name = "matrix", url = "https://matrix.to/#/@zaaarf:fantabos.co" },
+	{ name = "matrix", at = "https://matrix.to/#/@zaaarf:fantabos.co" },
-	{ name = "email", url = "mailto:me@zaaarf.foo" }
+	{ name = "discord", at = "@zaaarf", link = false },
+	{ name = "email", at = "mailto:me@zaaarf.foo" }
 ]
 
 # Valid keys are "post" and "list", one referring to individual blogposts,

sass/_home.scss

@@ -26,8 +26,64 @@ div.home-container {
 	}
 }
 
-a.social-icon {
+.social-icon {
 	padding: .2em .3em 0 .3em;
 	font-size: 32px;
+	cursor: pointer;
+
+	&-container {
+		position: relative;
+		display: inline-block;
+		text-align: center;
+	}
+
+	&-menu {
+		position: absolute;
+
+		display: none;
+		opacity: 0;
+		transition: all 0.15s ease-out 0.15s;
+
+		background-color: transparent;	
+
+		left: 50%;
+		transform: translateX(-50%);
+		top: 100%;
+
+		z-index: 10;
+
+		&-arrow {
+			margin: 0 auto;
+			width: 0;
+			height: 0;
+			border-left: 4px solid transparent;
+			border-right: 4px solid transparent;
+			border-bottom: 4px solid var(--metaColor);
+		}
+
+		&-inner {
+			position: relative;
+			padding: .2em .5em;
+			border: thin solid var(--metaColor);
+			border-radius: 2px;
+			
+			&:before {
+				content: "";
+				border-color: transparent;
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				z-index: -1;
+				box-shadow: 0 0 20px 1px #000;
+			}
+		}
+	}
+}
+
+.nolink:hover .social-icon-menu {
+	display: inline-block;
+	opacity: 1;
 }
 

sass/_main.scss

@@ -1,9 +1,17 @@
-:root.dark {
+:root {
-	.lightOnly {
+	&.dark {
+		.light-only {
 			display: none;
 		}
 	}
 
+	&.light {
+		.dark-only {
+			display: none;
+		}
+	}
+}
+
 :root.light {
 	.darkOnly {
 		display: none;

templates/index.html

@@ -1,3 +1,4 @@
+{% import "macros/svg.html" as svg %}
 {% extends "base.html" %}
 
 {% block content %}
@@ -8,22 +9,23 @@
 	<h1>{{ config.title }}</h1>
 	{% endif %}
 	{% if config.extra.home.subtitle %}
-		<p>{{ config.extra.home.subtitle }}<span id="subtitleRand"></span></p>
+		<p>{{ config.extra.home.subtitle }}<span id="subtitle-rand"></span></p>
 	{% elif config.description %}
-		<p>{{ config.description }}<span id="subtitleRand"></span></p>
+		<p>{{ config.description }}<span id="subtitle-rand"></span></p>
+	{% endif %}
+	{% if config.extra.home.social_icons %}
+		{{ svg::draw_icons(icons=config.extra.home.social_icons) }}
 	{% endif %}
-	{% include "svg.html" %}
 </div></div>
 {% if config.extra.home.subtitle_suffixes %}
-
+<script> //random subtitle logic
-<script>
 const suffixes = [
 	{% for s in config.extra.home.subtitle_suffixes %}
 	"{{ s }}",
 	{% endfor %}
 ]
 var current = suffixes[Math.floor(Math.random() * suffixes.length)];
-var span = document.getElementById("subtitleRand");
+var span = document.getElementById("subtitle-rand");
 span.textContent = current;
 </script>
 {% endif %}