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

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

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]]

layouts/index.html

@@ -10,9 +10,9 @@
             {{ partial "subtitle.html" . }}
 
             {{- with .Site.Params.social }}
-                <div class="social">
+                <ul class="social">
                     {{ partial "social-icons.html" . }}
-                </div>
+                </ul>
             {{- end }}
         </div>
         <br />

layouts/partials/social-icons.html

@@ -1,3 +1,10 @@
+{{- $cat := "" -}}
 {{ range . -}}
-    &nbsp; <a href="{{ .url }}" target="_blank" rel="{{ if .rel }}{{ .rel }}{{ else }}me noopener{{ end }}" title="{{ .name | humanize }}">{{ partialCached "svg.html" . . }}</a> &nbsp;
+    {{- if ne $cat .category -}}
+        {{- if ne $cat "" -}}<label>{{ $cat }}</label></li>{{- end -}}
+        {{- $cat = .category -}}
+        <li>
+    {{- end -}}
+    <a href="{{ .url }}" target="_blank" rel="{{ if .rel }}{{ .rel }}{{ else }}me noopener{{ end }}" title="{{ .name | humanize }}">{{- partialCached "svg.html" . . -}}</a>
 {{- end -}}
+<label>{{ $cat }}</label></li>{{- "" -}}