Refactor social service logic and UX

README.md

@@ -123,6 +123,66 @@ This theme includes a shortcode for a contact form that you can add to any page
 {{< form-contact action="https://formspree.io/your@email.com" >}}
 ```
 
+### Social Follow + Share
+
+The theme automatically adds "Follow" link icons to the header and footer and "Share" link icons to pages unless `disable_share` site parameter is set to true. Each built-in services sports a label, an icon and a color.
+
+In order to register a service to be used, user must add an `ananke_socials` parameter to its project configuration file and list them through it in the desired order. Each entry must bear a 
+- name*: It matches the built-in service reference (Ex: twitter, github)
+- url*: The url of the handle's profile on the service (Ex: https://twitter.com/theNewDynamic, https://github.com/
+theNewDynamic)
+
+```yaml
+params:
+  ananke_socials:
+  - name: twitter
+    url: https://twitter.com/theNewDynamic
+  - name: github
+    url: https://github.com/theNewDynamic
+```
+
+If user needs to overwrite default `color` and `label` of the service, they simply need to append the following to the entry:
+- label: The displayed name of the service to be used to popuplate `[title]` attributes and read-only. (Ex: Twitter, GitHub)
+- color: Used for styling purposes. (Ex: '#1da1f2', '#6cc644')
+
+```yaml
+params:
+  ananke_socials:
+  - name: twitter
+    url: https://twitter.com/theNewDynamic
+    label: TND Twitter
+  - name: github
+    url: https://github.com/theNewDynamic
+    label: TND GitHub Account
+    color: '#ff6800'
+```
+
+#### Social Icons Customization
+
+On top of easily customizing the built-in services' label and color, user can overwrite their icon by adding an svg file at `/assets/ananke/socials` with a filename matching the service's name.
+For example, in order to use your own GitHub icon, simply add an svg file at `/assets/ananke/socials/github.svg`
+
+#### Built-in Services
+Here is the list of built-in services. Those marked with an `*` are also part of the "Share" module.
+
+- twitter*
+- instagram
+- youtube
+- github
+- gitlab
+- keybase
+- linkedin*
+- medium
+- mastodon
+- slack
+- stackoverflow
+- facebook*
+- rss
+
+#### Complement
+
+In order to add an unkown service (absent from the list above), you simply need to add all three settings to `ananke_socials`: name, url, label, color, and optionally add an icon file matching the `name` to the `assets/ananke/socials` directory. In the absence of an icon, the theme will print the service's label.
+
 ### Update font or body classes
 
 The theme is set, by default, to use a near-white background color and the "Avenir" or serif typeface. You can change these in your config file with the `body_classes` parameter, like this:

assets/ananke/css/_social-icons.css

@@ -1,7 +1,16 @@
-.facebook, .twitter, .instagram, .youtube, .github, .gitlab, .keybase, .linkedin, .medium, .mastodon, .slack, .stackoverflow, .rss, .tiktok {
-  fill: #BABABA;
+.ananke-socials a{
+  display: inline-block;
+  vertical-align: middle;
+  color: #BABABA;
+  fill: currentColor;
+}
+.ananke-socials a .icon svg{
+  width: 32px;
+  height: 32px;
+}
+.ananke-socials a:hover {
+  color: rgb(107, 114, 128);
 }
-
 .new-window {
   opacity: 0;
   display: inline-block;
@@ -10,59 +19,3 @@
 .link-transition:hover .new-window{
   opacity: 1;
 }
-
-.facebook:hover {
-  fill: #3b5998;
-}
-
-.twitter:hover {
-  fill: #1da1f2;
-}
-
-.instagram:hover {
-  fill: #e1306c;
-}
-
-.youtube:hover {
-  fill: #cd201f;
-}
-
-.github:hover {
-  fill: #6cc644;
-}
-
-.gitlab:hover {
-  fill: #FC6D26;
-}
-
-.keybase:hover {
-  fill: #3d76ff;
-}
-
-.linkedin:hover {
-  fill: #0077b5
-}
-
-.medium:hover {
-  fill: #0077b5
-}
-
-.mastodon:hover {
-  fill: #3088d4;
-}
-
-.slack:hover {
-  fill: #E01E5A;
-}
-
-.stackoverflow:hover {
-  fill: #f48024;
-}
-
-.rss:hover{
-  fill: #ff6f1a;
-}
-
-.tiktok:hover{
-  fill: #FE2C55;
-}