style: color the social links icons (#796)

assets/main/scss/_social-links.scss

@@ -0,0 +1,8 @@
+.social-link {
+    position: relative;
+
+    &:hover {
+        top: -2px;
+        transition: top ease 0.5s;
+    }
+}

assets/main/scss/index.scss

@@ -38,6 +38,7 @@
 @import 'snackbar';
 @import 'docs';
 @import 'carousel';
+@import 'social-links';
 @import 'scrollbar';
 @import 'custom';
 

layouts/partials/header/social-links.html

@@ -1,6 +1,6 @@
 {{- if .Site.Params.topAppBar.social }}
 <li class="nav-item py-2 py-xxl-1 col-12 col-xxl-auto">
-{{- $data := dict "links" .Site.Params.topAppBar.social "OutputFormats" $.OutputFormats "home" (.GetPage "/") "params" .Site.Params "iconText" true }}
+{{- $data := dict "links" .Site.Params.topAppBar.social "OutputFormats" $.OutputFormats "home" (.GetPage "/") "params" .Site.Params "iconText" true "color" false }}
 {{- $data = merge $data (dict "class" "flex-row" "linkClass" "col-6 col-xxl-auto p-1" "iconTextClass" "ms-1 d-xxl-none") }}
 {{- partial "helpers/social-links" $data }}
 </li>

layouts/partials/helpers/social-links.html

@@ -1,52 +1,53 @@
 {{/* url: the URL format, "%s" is the username placeholder */}}
 {{/* icon: the Font Awesome icon class */}}
 {{- $socials := dict
-  "artstation" (dict "url" "https://www.artstation.com/%s" "icon" "fab fa-artstation")
-  "bilibili" (dict "url" "https://space.bilibili.com/%s" "icon" "fab fa-bilibili")
-  "bitbucket" (dict "url" "https://bitbucket.org/%s")
+  "artstation" (dict "url" "https://www.artstation.com/%s" "icon" "fab fa-artstation" "color" "#0a5878")
+  "bilibili" (dict "url" "https://space.bilibili.com/%s" "icon" "fab fa-bilibili" "color" "#fb7299")
+  "bitbucket" (dict "url" "https://bitbucket.org/%s" "color" "#0e65df")
   "discord" (dict "url" "https://discord.com/invite/%s" "icon" "fab fa-discord")
   "discourse" (dict "url" "%s" "icon" "fab fa-discourse")
   "dockerhub" (dict "url" "https://hub.docker.com/u/%s" "icon" "fab fa-docker")
-  "facebook" (dict "url" "https://facebook.com/%s" "icon" "fab fa-facebook-f")
-  "facebookgroup" (dict "url" "https://facebook.com/groups/%s" "icon" "fab fa-facebook-square")
+  "facebook" (dict "url" "https://facebook.com/%s" "icon" "fab fa-facebook-f" "color" "#1877f2")
+  "facebookgroup" (dict "url" "https://facebook.com/groups/%s" "icon" "fab fa-facebook-square" "color" "#1877f2")
   "github" (dict "url" "https://github.com/%s")
-  "gitlab" (dict "url" "https://gitlab.com/%s")
-  "instagram" (dict "url" "https://www.instagram.com/%s")
+  "gitlab" (dict "url" "https://gitlab.com/%s" "color" "#e24329")
+  "instagram" (dict "url" "https://www.instagram.com/%s" "color" "#c03957")
   "itchio" (dict "url" "https://%s.itch.io/" "icon" "fab fa-itch-io")
-  "kaggle" (dict "url" "https://kaggle.com/%s")
-  "lastfm" (dict "url" "https://www.last.fm/user/%s")
+  "kaggle" (dict "url" "https://kaggle.com/%s" "color" "#3cc6ff")
+  "lastfm" (dict "url" "https://www.last.fm/user/%s" "color" "#ba0000")
   "liberapay" (dict "url" "https://liberapay.com/%s" "icon" "fab fa-liberapay")
-  "linkedin" (dict "url" "https://linkedin.com/in/%s" "icon" "fab fa-linkedin-in")
-  "mastodon" (dict "url" "https://mastodon.social/@%s" "icon" "fab fa-mastodon")
+  "linkedin" (dict "url" "https://linkedin.com/in/%s" "icon" "fab fa-linkedin-in" "color" "#0a66c2")
+  "mastodon" (dict "url" "https://mastodon.social/@%s" "icon" "fab fa-mastodon" "color" "#5c4ce2")
   "medium" (dict "url" "https://medium.com/@%s" "icon" "fab fa-medium-m")
-  "patreon" (dict "url" "https://www.patreon.com/%s" "icon" "fab fa-patreon")
+  "patreon" (dict "url" "https://www.patreon.com/%s" "icon" "fab fa-patreon" "color" "#ff424d")
   "paypal" (dict "url" "https://www.paypal.com/paypalme/%s" "icon" "fab fa-paypal")
-  "pinterest" (dict "url" "https://www.pinterest.com/%s" "icon" "fab fa-pinterest")
+  "pinterest" (dict "url" "https://www.pinterest.com/%s" "icon" "fab fa-pinterest" "color" "#cc0000")
   "qq" (dict "url" "http://wpa.qq.com/msgrd?v=3&uin=%s&site=qq&menu=yes")
-  "quora" (dict "url" "https://www.quora.com/profile/%s")
-  "reddit" (dict "url" "https://www.reddit.com/user/%s")
-  "stackoverflow" (dict "url" "https://stackoverflow.com/users/%s" "icon" "fab fa-stack-overflow")
-  "telegram" (dict "url" "https://t.me/%s" "icon" "fab fa-telegram-plane")
+  "quora" (dict "url" "https://www.quora.com/profile/%s" "color" "#b92b27")
+  "reddit" (dict "url" "https://www.reddit.com/user/%s" "color" "#FF4500")
+  "stackoverflow" (dict "url" "https://stackoverflow.com/users/%s" "icon" "fab fa-stack-overflow" "color" "#f48024")
+  "telegram" (dict "url" "https://t.me/%s" "icon" "fab fa-telegram-plane" "color" "#2481cc")
   "tipeee" (dict "url" "https://fr.tipeee.com/%s" "icon" "fab fa-tipeee")
   "tiktok" (dict "url" "https://www.tiktok.com/@%s" "icon" "fab fa-tiktok")
   "tumblr" (dict "url" "https://%s.tumblr.com")
-  "twitter" (dict "url" "https://twitter.com/%s")
+  "twitter" (dict "url" "https://twitter.com/%s" "color" "#1d9bf0")
   "website" (dict "url" "%s" "icon" "fas fa-link")
-  "weibo" (dict "url" "https://weibo.com/%s")
+  "weibo" (dict "url" "https://weibo.com/%s" "color" "#e1162c")
   "xing" (dict "url" "https://www.xing.com/profile/%s" "icon" "fab fa-xing")
-  "youtube" (dict "url" "https://www.youtube.com/channel/%s" "icon" "fab fa-youtube")
-  "zhihu" (dict "url" "https://www.zhihu.com/people/%s")
+  "youtube" (dict "url" "https://www.youtube.com/channel/%s" "icon" "fab fa-youtube" "color" "#ff0000")
+  "zhihu" (dict "url" "https://www.zhihu.com/people/%s" "color" "#056de8")
 -}}
 {{- $size := default "" .size }}
 {{- $linkClass := default "" .linkClass }}
+{{- $color := default true .color }}
 {{- $iconText := default false .iconText }}
 {{- $iconTextClass := default "ms-1" .iconTextClass }}
 
 <nav class="social-links nav justify-content-center{{ with .class }} {{ . }}{{ end }}">
 {{- range $key, $user := .links }}
   {{- if eq $key "email" }}
     <a class="nav-link social-link{{ with $linkClass }} {{ . }}{{ end }}" href="mailto:{{ $user }}" title="{{ "social_email" | i18n }}">
-      <i class="fas fa-fw{{ with $size }} {{ . }}{{ end }} fa-envelope"></i>
+      <i class="fas fa-fw{{ with $size }} {{ . }}{{ end }} fa-envelope"{{ if and $color }} style="color: #0963ac;"{{ end }}></i>
       {{- if $iconText }}
       <span{{ with $iconTextClass }} class="{{ . }}"{{ end }}>Email</span>
       {{- end }}
@@ -57,7 +58,8 @@
       {{- $url := urls.Parse $user }}
       {{- if $url.Scheme }}{{ $link = $url.String }}{{ end }}
       <a class="nav-link social-link{{ with $linkClass }} {{ . }}{{ end }}" target="_blank" href="{{ $link }}" title="{{ printf "social_%s" $key | i18n }}" rel="me">
-        <i class="fa-fw{{ with $size }} {{ . }}{{ end }} {{ default ( printf "fab fa-%s" $key ) .icon }}"></i>
+        <i class="fa-fw{{ with $size }} {{ . }}{{ end }} {{ default ( printf "fab fa-%s" $key ) .icon }}"
+          {{ if and $color .color }} style="color: {{ .color }};"{{ end }}></i>
         {{- if $iconText }}
         <span{{ with $iconTextClass }} class="{{ . }}"{{ end }}>{{ default (title $key) .title }}</span>
         {{- end }}
@@ -81,7 +83,7 @@
   {{- end }}
   {{- with $rss }}
   <a class="nav-link social-link{{ with $linkClass }} {{ . }}{{ end }}" target="_blank" href="{{ .Permalink }}" title="{{ "social_rss" | i18n }}" rel="me">
-    <i class="fas fa-fw{{ with $size }} {{ . }}{{ end }} fa-rss"></i>
+    <i class="fas fa-fw{{ with $size }} {{ . }}{{ end }} fa-rss"{{ if and $color }} style="color: #ea6221;"{{ end }}></i>
     {{- if $iconText }}
     <span{{ with $iconTextClass }} class="{{ . }}"{{ end }}>RSS</span>
     {{- end }}