Social Share part 1

_includes/head/custom.html

@@ -1,11 +1,19 @@
-<!-- start custom head snippets -->
-<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png">
-<link rel="manifest" href="/assets/icons/site.webmanifest">
-<link rel="mask-icon" href="/assets/icons/safari-pinned-tab.svg" color="#5bbad5">
-<link rel="shortcut icon" href="/assets/icons/favicon.ico">
-<meta name="msapplication-TileColor" content="#da532c">
-<meta name="msapplication-config" content="/assets/icons/browserconfig.xml">
-<meta name="theme-color" content="#ffffff">
-<!-- end custom head snippets -->
+<!-- start custom head snippets -->
+<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png">
+<link rel="manifest" href="/assets/icons/site.webmanifest">
+<link rel="mask-icon" href="/assets/icons/safari-pinned-tab.svg" color="#5bbad5">
+<link rel="shortcut icon" href="/assets/icons/favicon.ico">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="msapplication-config" content="/assets/icons/browserconfig.xml">
+<meta name="theme-color" content="#ffffff">
+
+<link rel="stylesheet" href="{{ '/assets/css/site.css' | relative_url }}">
+
+<!-- BEGIN SHAREAHOLIC CODE -->
+<link rel="preload" href="https://cdn.shareaholic.net/assets/pub/shareaholic.js" as="script" />
+<meta name="shareaholic:site_id" content="8df305f3465d14bf3a5dd612dce25c32" />
+<script data-cfasync="false" async src="https://cdn.shareaholic.net/assets/pub/shareaholic.js"></script>
+<!-- END SHAREAHOLIC CODE -->
+<!-- end custom head snippets -->

_includes/social-share.html

@@ -0,0 +1,19 @@
+{% assign onclick = "window.open(this.href, 'window', 'left=20,top=20,width=500,height=700,toolbar=1,resizable=1'); return false;" %}
+{% assign pagetitle = page.title | url_encode %}
+{% assign pageurl = page.url | absolute_url | url_encode %}
+<section class="page__share">
+  {% if site.data.ui-text[site.locale].share_on_label %}
+    <h4 class="page__share-title">{{ site.data.ui-text[site.locale].share_on_label | default: "Share on" }}</h4>
+  {% endif %}
+
+  <a href="https://x.com/intent/post?{% if site.twitter.username %}via={{ site.twitter.username | url_encode }}&{% endif %}text={{ pagetitle }}%20{{ pageurl }}" class="btn btn--x-twitter" onclick="{{ onclick }}" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} Twitter"><i class="fab fa-fw fa-x-twitter" aria-hidden="true"></i></a>
+<!--
+  <a href="https://www.facebook.com/sharer/sharer.php?t={{ pagetitle }}&u={{ pageurl }}" class="btn btn--facebook" onclick="{{ onclick }}" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} Facebook"><i class="fab fa-fw fa-facebook" aria-hidden="true"></i></a>
+
+  <a href="https://www.reddit.com/submit?url={{ pageurl }}&title={{ pagetitle }}" class="btn btn--reddit" onclick="{{ onclick }}" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }}Reddit"><i class="fab fa-fw fa-reddit" aria-hidden="true"></i></a>
+
+  <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ pageurl }}&summary={{ pagetitle }}&source={{ site.baseurl | url_encode }}" class="btn btn--linkedin" onclick="{{ onclick }}" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} LinkedIn"><i class="fab fa-fw fa-linkedin" aria-hidden="true"></i></a>
+
+  <a href="https://threads.net/intent/post?text={{ pagetitle }}%20{{ pageurl }}" class="btn btn--threads" onclick="{{ onclick }}" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} Threads"><i class="fab fa-fw fa-threads" aria-hidden="true"></i></a>
+-->
+</section>

assets/css/site.css

@@ -0,0 +1,44 @@
+.btn--reddit {
+  background-color: #ff4500;
+  color: #fff
+}
+
+.btn--reddit:visited {
+  background-color: #ff4500;
+  color: #fff
+}
+
+.btn--reddit:hover {
+  background-color: #cc3700;
+  color: #fff
+}
+
+.btn--x-twitter {
+  background-color: #171516;
+  color: #fff
+}
+
+.btn--x-twitter:visited {
+  background-color: #171516;
+  color: #fff
+}
+
+.btn--x-twitter:hover {
+  background-color: #121112;
+  color: #fff
+}
+
+.btn--threads {
+  background-color: #171516;
+  color: #fff
+}
+
+.btn--threads:visited {
+  background-color: #171516;
+  color: #fff
+}
+
+.btn--threads:hover {
+  background-color: #121112;
+  color: #fff
+}