diff --git a/config.toml b/config.toml
index 10d1b8a..0e044d8 100644
--- a/config.toml
+++ b/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 = "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,
diff --git a/sass/_home.scss b/sass/_home.scss
index a0437da..2ac6b89 100644
--- a/sass/_home.scss
+++ b/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;
}
diff --git a/sass/_main.scss b/sass/_main.scss
index d87d11a..ada787e 100644
--- a/sass/_main.scss
+++ b/sass/_main.scss
@@ -1,6 +1,14 @@
-:root.dark {
- .lightOnly {
- display: none;
+:root {
+ &.dark {
+ .light-only {
+ display: none;
+ }
+ }
+
+ &.light {
+ .dark-only {
+ display: none;
+ }
}
}
diff --git a/templates/index.html b/templates/index.html
index 270f9f7..2fc9292 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,3 +1,4 @@
+{% import "macros/svg.html" as svg %}
{% extends "base.html" %}
{% block content %}
@@ -8,22 +9,23 @@
{{ config.title }}
{% endif %}
{% if config.extra.home.subtitle %}
- {{ config.extra.home.subtitle }}
+ {{ config.extra.home.subtitle }}
{% elif config.description %}
- {{ config.description }}
+ {{ config.description }}
+ {% endif %}
+ {% if config.extra.home.social_icons %}
+ {{ svg::draw_icons(icons=config.extra.home.social_icons) }}
{% endif %}
- {% include "svg.html" %}
{% if config.extra.home.subtitle_suffixes %}
-
-
{% endif %}
diff --git a/templates/svg.html b/templates/macros/svg.html
similarity index 92%
rename from templates/svg.html
rename to templates/macros/svg.html
index c71e914..82d08b3 100644
--- a/templates/svg.html
+++ b/templates/macros/svg.html
@@ -1,192 +1,213 @@
-
+{%- macro draw_icons(icons) -%}
+
+{%- for icon in icons -%}
+ {%- if icon.link is defined -%}{%- set link = icon.link -%}{%- else -%}{%- set link = true -%}{%- endif -%}
+ {%- if link == false -%}{%- set class = "nolink" -%}{%- else -%}{%- set class = "" -%}{%- endif -%}
+
+ {%- if not loop.last -%} {%- endif -%}
+{%- endfor -%}
+
-{% if icon.name == "amazon" %}
-
-{% elif icon.name == "anilist" %}
-