From 93ff5b24fd5d35ed130494c00d768aabb440e987 Mon Sep 17 00:00:00 2001 From: JP Hastings-Spital Date: Fri, 31 Jan 2025 14:12:37 +0000 Subject: [PATCH] Label my socials My brother pointed out that, for the uninitiated, the list of icons can be a bit opaque. I've tried to add some context without overburdening the homepage. --- assets/scss/_main.scss | 40 +++++++++++++++ config.toml | 79 ++++++++++++++++++------------ layouts/index.html | 4 +- layouts/partials/social-icons.html | 9 +++- layouts/partials/svg.html | 10 ++-- 5 files changed, 102 insertions(+), 40 deletions(-) diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss index c5b2d846..792dbdbf 100644 --- a/assets/scss/_main.scss +++ b/assets/scss/_main.scss @@ -1055,4 +1055,44 @@ nav { color: var(--accent); } } +} + +main ul.social { + list-style: none; + + li { + display: inline-block; + margin: 0 0.6rem; + position: relative; + + a { + margin: 0.3rem; + } + + label { + position: absolute; + border-top: 1px solid $light-color-secondary; + top: 2rem; + left: 0; + right: 0; + width: 100%; + text-align: center; + font-size: small; + color: $light-color-secondary; + + @media (prefers-color-scheme: dark) { + border-top: 1px solid $light-color-dim; + color: $dark-color-dim; + } + } + + &:hover label { + border-color: var(--accent); + color: $light-color; + + @media (prefers-color-scheme: dark) { + color: $dark-color; + } + } + } } \ No newline at end of file diff --git a/config.toml b/config.toml index 16fe4ec1..9868f3c5 100644 --- a/config.toml +++ b/config.toml @@ -98,43 +98,58 @@ date = ["date", "publishDate", "lastmod", ":git"] reading-lists = "📚" contact-me = "📮" + [params.logo] + logoHomeLink = "/" + + [[params.social]] + name = "email" + url = "mailto:hello@byjp.me" + category = "chat" + + [[params.social]] + name = "signal" + url = "https://signal.me/#eu/092dSvsDjSYGU_6W2Z4fvXJfktdozKIidYs91EA9I3kukc-3xOtB_aAg3QxUOznZ" + category = "chat" + + + [[params.social]] + name = "bluesky" + url = "https://bsky.app/profile/byjp.me" + category = "follow" + + [[params.social]] + name = "pixelfed" + url = "https://pixelfed.social/@jphastings" + category = "follow" + + [[params.social]] + name = "mastodon" + url = "https://hachyderm.io/@byjp" + category = "follow" + + + [[params.social]] + name = "github" + url = "https://github.com/jphastings" + category = "geek out" + + + [[params.social]] + name = "keyoxide" + url = "https://id.byjp.me" + category = "geek out" + + [[params.social]] + name = "gpg" + url = "https://openpgpkey.byjp.me/.well-known/openpgpkey/byjp.me/hu/im4cc8qhazwkfsi65a8us1bc5gzk1o4p" + rel = "pgpkey authn" + category = "geek out" + [languages] [languages.en] title = "byJP" copyright = "CC BY-NC-SA 4.0" - [languages.en.params.logo] - logoHomeLink = "/" - - [[languages.en.params.social]] - name = "email" - url = "mailto:hello@byjp.me" - - [[languages.en.params.social]] - name = "bluesky" - url = "https://bsky.app/profile/byjp.me" - - [[languages.en.params.social]] - name = "mastodon" - url = "https://hachyderm.io/@byjp" - - [[languages.en.params.social]] - name = "signal" - url = "https://signal.me/#eu/092dSvsDjSYGU_6W2Z4fvXJfktdozKIidYs91EA9I3kukc-3xOtB_aAg3QxUOznZ" - - [[languages.en.params.social]] - name = "github" - url = "https://github.com/jphastings" - - [[languages.en.params.social]] - name = "keyoxide" - url = "https://id.byjp.me" - - [[languages.en.params.social]] - name = "gpg" - url = "https://openpgpkey.byjp.me/.well-known/openpgpkey/byjp.me/hu/im4cc8qhazwkfsi65a8us1bc5gzk1o4p" - rel = "pgpkey authn" - # You can create a language based menu [languages.en.menu] [[languages.en.menu.main]] diff --git a/layouts/index.html b/layouts/index.html index 34e60340..702aee8b 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -10,9 +10,9 @@ {{ partial "subtitle.html" . }} {{- with .Site.Params.social }} -
+
+ {{- end }}
diff --git a/layouts/partials/social-icons.html b/layouts/partials/social-icons.html index 10efb3c5..8b327db3 100644 --- a/layouts/partials/social-icons.html +++ b/layouts/partials/social-icons.html @@ -1,3 +1,10 @@ +{{- $cat := "" -}} {{ range . -}} -   {{ partialCached "svg.html" . . }}   + {{- if ne $cat .category -}} + {{- if ne $cat "" -}}{{- end -}} + {{- $cat = .category -}} +
  • + {{- end -}} + {{- partialCached "svg.html" . . -}} {{- end -}} +
    • {{- "" -}} diff --git a/layouts/partials/svg.html b/layouts/partials/svg.html index ab49de71..4bbeb68e 100644 --- a/layouts/partials/svg.html +++ b/layouts/partials/svg.html @@ -146,11 +146,11 @@ {{- else if (eq .name "paypal") -}} -{{- else if (eq .name "peertube") }} +{{- else if (eq .name "peertube") -}} -{{- else if (eq .name "pinterest") }} +{{- else if (eq .name "pinterest") -}} -{{- else if (eq .name "pixelfed") }} +{{- else if (eq .name "pixelfed") -}} {{- else if (eq .name "podcasts-apple") -}} @@ -198,7 +198,7 @@ {{- else if (eq .name "tryhackme") -}} -{{- else if (eq .name "tumblr") }} +{{- else if (eq .name "tumblr") -}} {{- else if (eq .name "twitch") -}} @@ -208,7 +208,7 @@ {{- else if (eq .name "video") -}} -{{- else if (eq .name "whatsapp") }} +{{- else if (eq .name "whatsapp") -}} {{- else if (eq .name "xampp") -}}