From 40785d8267da1c4c5d5c3ee579b626c3d8f46eba Mon Sep 17 00:00:00 2001 From: zaaarf Date: Tue, 2 Jan 2024 02:52:40 +0100 Subject: [PATCH] feat: icons with tooltip instead of link --- config.toml | 9 +- sass/_home.scss | 58 ++++- sass/_main.scss | 14 +- templates/index.html | 14 +- templates/{ => macros}/svg.html | 403 +++++++++++++++++--------------- 5 files changed, 293 insertions(+), 205 deletions(-) rename templates/{ => macros}/svg.html (92%) 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 -%} +
+{%- endmacro draw_icons -%} -{% if config.extra.home.social_icons %} -{% for icon in config.extra.home.social_icons %} - -{% if icon.name == "amazon" %} - -{% elif icon.name == "anilist" %} - -{% elif icon.name == "box" %} - -{% elif icon.name == "behance" %} - -{% elif icon.name == "bitbucket" %} - -{% elif icon.name == "case" %} - -{% elif icon.name == "chess" %} - -{% elif icon.name == "codeberg" %} - -{% elif icon.name == "codesandbox" %} - -{% elif icon.name == "codechef" %} - -{% elif icon.name == "codepen" %} - -{% elif icon.name == "csgo" %} - -{% elif icon.name == "cyberdefenders" %} - -{% elif icon.name == "dev" %} - -{% elif icon.name == "deviantart" %} - -{% elif icon.name == "discogs" %} - -{% elif icon.name == "discord" %} - -{% elif icon.name == "dribbble" %} - -{% elif icon.name == "docker" %} - -{% elif icon.name == "duolingo" %} - -{% elif icon.name == "email" %} - -{% elif icon.name == "facebook" %} - -{% elif icon.name == "facebook-messenger" %} - -{% elif icon.name == "fitbit" %} - -{% elif icon.name == "git" %} - -{% elif icon.name == "gitea" %} - -{% elif icon.name == "gitbook" %} - -{% elif icon.name == "github" %} - -{% elif icon.name == "gitlab" %} - -{% elif icon.name == "gitter" %} - -{% elif icon.name == "goodreads" %} - -{% elif icon.name == "googleplay" %} - -{% elif icon.name == "googlescholar" %} - -{% elif icon.name == "gpg" %} - -{% elif icon.name == "hackerone" %} - -{% elif icon.name == "hackerrank" %} - -{% elif icon.name == "hackthebox" %} - -{% elif icon.name == "imdb" %} - -{% elif icon.name == "instagram" %} - -{% elif icon.name == "itchio" %} - -{% elif icon.name == "jenkins" %} - -{% elif icon.name == "kaggle" %} - -{% elif icon.name == "keybase" %} - -{% elif icon.name == "kofi" %} - -{% elif icon.name == "lastfm" %} - -{% elif icon.name == "leetcode" %} - -{% elif icon.name == "letterboxd" %} - -{% elif icon.name == "librepay" %} - -{% elif icon.name == "lichess" %} - -{% elif icon.name == "linkedin" %} - -{% elif icon.name == "mastodon" %} - -{% elif icon.name == "matrix" %} - -{% elif icon.name == "medium" %} - -{% elif icon.name == "meetup" %} - -{% elif icon.name == "mixcloud" %} - -{% elif icon.name == "npm" %} - -{% elif icon.name == "opencollective" %} - -{% elif icon.name == "orcid" %} - -{% elif icon.name == "patreon" %} - -{% elif icon.name == "paypal" %} - -{% elif icon.name == "peertube" %} - -{% elif icon.name == "pinterest" %} - -{% elif icon.name == "pixelfed" %} - -{% elif icon.name == "pleroma" %} - -{% elif icon.name == "podcasts-apple" %} - -{% elif icon.name == "podcasts-google" %} - -{% elif icon.name == "polywork" %} - -{% elif icon.name == "reddit" %} - -{% elif icon.name == "researchgate" %} - -{% elif icon.name == "revolut" %} - -{% elif icon.name == "signal" %} - -{% elif icon.name == "slack" %} - -{% elif icon.name == "soundcloud" %} - -{% elif icon.name == "sourcehut" %} - -{% elif icon.name == "spotify" %} - -{% elif icon.name == "stackoverflow" %} - -{% elif icon.name == "steam" %} - -{% elif icon.name == "strava" %} - -{% elif icon.name == "telegram" %} - -{% elif icon.name == "threema" %} - -{% elif icon.name == "tryhackme" %} - -{% elif icon.name == "tumblr" %} - -{% elif icon.name == "twitch" %} - -{% elif icon.name == "twitter" %} - -{% elif icon.name == "unsplash" %} - -{% elif icon.name == "whatsapp" %} - -{% elif icon.name == "xampp" %} - -{% elif icon.name == "xda" %} - -{% elif icon.name == "xing" %} - -{% elif icon.name == "xmpp" %} - -{% elif icon.name == "ycombinator" %} - -{% elif icon.name == "youtube" %} - -{% endif %} -{% endfor %} -{% endif %} +{%- macro draw_svg(icon) -%} +{#- Adapted from https://github.com/rhazdon/hugo-theme-hello-friend-ng/blob/master/layouts/partials/svg.html -#} +{%- if icon == "amazon" -%} + +{%- elif icon == "anilist" -%} + +{%- elif icon == "box" -%} + +{%- elif icon == "behance" -%} + +{%- elif icon == "bitbucket" -%} + +{%- elif icon == "case" -%} + +{%- elif icon == "chess" -%} + +{%- elif icon == "codeberg" -%} + +{%- elif icon == "codesandbox" -%} + +{%- elif icon == "codechef" -%} + +{%- elif icon == "codepen" -%} + +{%- elif icon == "csgo" -%} + +{%- elif icon == "cyberdefenders" -%} + +{%- elif icon == "dev" -%} + +{%- elif icon == "deviantart" -%} + +{%- elif icon == "discogs" -%} + +{%- elif icon == "discord" -%} + +{%- elif icon == "dribbble" -%} + +{%- elif icon == "docker" -%} + +{%- elif icon == "duolingo" -%} + +{%- elif icon == "email" -%} + +{%- elif icon == "facebook" -%} + +{%- elif icon == "facebook-messenger" -%} + +{%- elif icon == "fitbit" -%} + +{%- elif icon == "git" -%} + +{%- elif icon == "gitea" -%} + +{%- elif icon == "gitbook" -%} + +{%- elif icon == "github" -%} + +{%- elif icon == "gitlab" -%} + +{%- elif icon == "gitter" -%} + +{%- elif icon == "goodreads" -%} + +{%- elif icon == "googleplay" -%} + +{%- elif icon == "googlescholar" -%} + +{%- elif icon == "gpg" -%} + +{%- elif icon == "hackerone" -%} + +{%- elif icon == "hackerrank" -%} + +{%- elif icon == "hackthebox" -%} + +{%- elif icon == "imdb" -%} +{%- elif icon == "instagram" -%} + +{%- elif icon == "itchio" -%} + +{%- elif icon == "jenkins" -%} + +{%- elif icon == "kaggle" -%} + +{%- elif icon == "keybase" -%} + +{%- elif icon == "kofi" -%} + +{%- elif icon == "lastfm" -%} + +{%- elif icon == "leetcode" -%} + +{%- elif icon == "letterboxd" -%} + +{%- elif icon == "librepay" -%} + +{%- elif icon == "lichess" -%} + +{%- elif icon == "linkedin" -%} + +{%- elif icon == "mastodon" -%} + +{%- elif icon == "matrix" -%} + +{%- elif icon == "medium" -%} + +{%- elif icon == "meetup" -%} + +{%- elif icon == "mixcloud" -%} + +{%- elif icon == "npm" -%} + +{%- elif icon == "opencollective" -%} + +{%- elif icon == "orcid" -%} + +{%- elif icon == "patreon" -%} + +{%- elif icon == "paypal" -%} + +{%- elif icon == "peertube" -%} + +{%- elif icon == "pinterest" -%} + +{%- elif icon == "pixelfed" -%} + +{%- elif icon == "pleroma" -%} + +{%- elif icon == "podcasts-apple" -%} + +{%- elif icon == "podcasts-google" -%} + +{%- elif icon == "polywork" -%} + +{%- elif icon == "reddit" -%} + +{%- elif icon == "researchgate" -%} + +{%- elif icon == "revolut" -%} + +{%- elif icon == "signal" -%} + +{%- elif icon == "slack" -%} + +{%- elif icon == "soundcloud" -%} + +{%- elif icon == "sourcehut" -%} + +{%- elif icon == "spotify" -%} + +{%- elif icon == "stackoverflow" -%} + +{%- elif icon == "steam" -%} + +{%- elif icon == "strava" -%} + +{%- elif icon == "telegram" -%} + +{%- elif icon == "threema" -%} + +{%- elif icon == "tryhackme" -%} + +{%- elif icon == "tumblr" -%} + +{%- elif icon == "twitch" -%} + +{%- elif icon == "twitter" -%} + +{%- elif icon == "unsplash" -%} + +{%- elif icon == "whatsapp" -%} + +{%- elif icon == "xampp" -%} + +{%- elif icon == "xda" -%} + +{%- elif icon == "xing" -%} + +{%- elif icon == "xmpp" -%} + +{%- elif icon == "ycombinator" -%} + +{%- elif icon == "youtube" -%} +{%- endif -%} +{%- endmacro draw_svg -%}