feat: icons with tooltip instead of link

This commit is contained in:
zaaarf 2024-01-02 02:52:40 +01:00
parent dc78abbf45
commit 40785d8267
No known key found for this signature in database
GPG key ID: 102E445F4C3F829B
5 changed files with 293 additions and 205 deletions

View file

@ -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 = "codeberg", url = "https://codeberg.org/zaaarf" },
{ name = "matrix", url = "https://matrix.to/#/@zaaarf:fantabos.co" },
{ name = "email", url = "mailto:me@zaaarf.foo" }
{ name = "github", at = "https://github.com/zaaarf" },
{ name = "codeberg", at = "https://codeberg.org/zaaarf" },
{ name = "matrix", at = "https://matrix.to/#/@zaaarf:fantabos.co" },
{ name = "discord", at = "@zaaarf", link = false },
{ name = "email", at = "mailto:me@zaaarf.foo" }
]
# Valid keys are "post" and "list", one referring to individual blogposts,

View file

@ -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;
}

View file

@ -1,6 +1,14 @@
:root.dark {
.lightOnly {
display: none;
:root {
&.dark {
.light-only {
display: none;
}
}
&.light {
.dark-only {
display: none;
}
}
}

View file

@ -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>
<script> //random subtitle logic
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 %}

File diff suppressed because one or more lines are too long