Botones para compartir

_data/en.yml

@@ -0,0 +1,38 @@
+---
+locale: English
+date: '%m/%d/%Y'
+layouts:
+  post: Article
+menu:
+  title: Menu
+  items:
+  - title: Home
+    href: ''
+share:
+  text: Share
+  icon: share-alt
+  items:
+  - title: Fediverse
+    url: "https://fediverse.sutty.nl/en/?u=%url&t=%title&d=%description"
+    icon: mastodon-alt
+  - title: Facebook
+    url: "https://www.facebook.com/sharer/sharer.php?u=%url&t=%title%0A%0A%description"
+    icon: facebook-official
+  - title: Twitter
+    url: "https://twitter.com/intent/tweet?url=%url&text=%title%0A%0A%description&hashtags=ContamosConVoz"
+    icon: twitter
+  - title: Whatsapp
+    url: "https://api.whatsapp.com/send?text=%title%0A%0A%description%0A%0A%url"
+    icon: whatsapp
+  - title: Telegram
+    url: "https://t.me/share/url?url=%url&text=%title%0A%0A%description"
+    icon: telegram
+  - title: Tumblr
+    url: "https://www.tumblr.com/widgets/share/tool?canonicalUrl=%url&title=%title&caption=%description&tags=ContamosConVoz"
+    icon: tumblr
+  - title: Reddit
+    url: "https://reddit.com/submit?url=%url&title=ConVozContamos%20-%20%title"
+    icon: reddit
+  - title: E-mail
+    url: "mailto:?subject=%title&body=%description%0A%0A%url"
+    icon: envelope

_data/es.yml

@@ -0,0 +1,38 @@
+---
+locale: Castellano
+date: '%d/%m/%Y'
+layouts:
+  post: Artículo
+menu:
+  title: Menú
+  items:
+  - title: Inicio
+    href: ''
+share:
+  text: Compartir
+  icon: share-alt
+  items:
+  - title: Fediverso
+    url: "https://fediverse.sutty.nl/es/?u=%url&t=%title&d=%description"
+    icon: mastodon-alt
+  - title: Facebook
+    url: "https://www.facebook.com/sharer/sharer.php?u=%url&t=%title%0A%0A%description"
+    icon: facebook-official
+  - title: Twitter
+    url: "https://twitter.com/intent/tweet?url=%url&text=%title%0A%0A%description&hashtags=ContamosConVoz"
+    icon: twitter
+  - title: Whatsapp
+    url: "https://api.whatsapp.com/send?text=%title%0A%0A%description%0A%0A%url"
+    icon: whatsapp
+  - title: Telegram
+    url: "https://t.me/share/url?url=%url&text=%title%0A%0A%description"
+    icon: telegram
+  - title: Tumblr
+    url: "https://www.tumblr.com/widgets/share/tool?canonicalUrl=%url&title=%title&caption=%description&tags=ContamosConVoz"
+    icon: tumblr
+  - title: Reddit
+    url: "https://reddit.com/submit?url=%url&title=ConVozContamos%20-%20%title"
+    icon: reddit
+  - title: Correo
+    url: "mailto:?subject=%title&body=%description%0A%0A%url"
+    icon: envelope

_sass/helpers.scss

@@ -1,3 +1,4 @@
+$bezier: cubic-bezier(0.75, 0, 0.25, 1);
 
 /*
  * Crea una propiedad con prefijos de navegador

_sass/share.html

@@ -0,0 +1,12 @@
+{% assign url = site.url | append: include.url | uri_escape %}
+{% assign title = include.title | default: site.title | uri_escape %}
+{% assign description = include.description | default: '' | uri_escape %}
+
+<a
+  target="_blank"
+  title="{{ include.share.title }}"
+  class="d-flex flex-column align-items-center p-3"
+  href="{{ include.share.url | replace: '%url', url | replace: '%title', title | replace: '%description', description }}">
+  <i class="fa fa-fw fa-2x fa-{{ include.share.icon }}"></i>
+  <span>{{ include.share.title }}</span>
+</a>

_sass/share_box.html

@@ -0,0 +1,16 @@
+<input type="checkbox" id="share" class="toggler" autocomplete="off" />
+
+<label class="share btn border btn-block" for="share">
+  {{ site.i18n.share.text }}
+  <i class="fa fa-{{ site.i18n.share.icon }}"></i>
+
+  <div class="share-box toggled d-flex align-items-center justify-content-center">
+    <div class="box background-white color-redpink row no-gutters align-items-center justify-content-center p-3">
+      {% for share in site.i18n.share.items %}
+        <div class="col-4">
+          {% include_cached share.html share=share url=include.url title=include.title description=include.description %}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</label>

_sass/share_box.scss

@@ -0,0 +1,26 @@
+input[type="checkbox"].toggler {
+  &:focus + label {
+    outline: none;
+  }
+}
+
+.share-box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0,0,0,.5);
+
+  @include vendor-prefix(transition, all 0.2s $bezier);
+
+  a {
+    border: $border-width solid transparent;
+
+    &:focus,
+    &:hover {
+      text-decoration: none;
+      border: $border-width solid $border-color;
+    }
+  }
+}

_sass/toggler.scss

@@ -12,14 +12,18 @@ input[type="checkbox"].toggler {
   position: absolute;
 
   // Ocultamos el elemento colapsable
-  & ~ .collapse {
-    z-index: 10;
-    visibility: hidden;
+  & ~ label {
+    .toggled {
+      z-index: 10;
+      visibility: hidden;
+    }
   }
 
   // Al tildar el input, mostramos el elemento
-  &:checked ~ .collapse {
-    visibility: visible;
+  &:checked ~ label {
+    .toggled {
+      visibility: visible;
+    }
   }
 
   & + label {

assets/css/styles.scss

@@ -13,3 +13,4 @@
 @import "fork-awesome/scss/fork-awesome";
 @import "accessibility";
 @import "helpers";
+@import "share_box";