From 08cc1bacbedd35ccc472421f2aca1903832fe159 Mon Sep 17 00:00:00 2001 From: f Date: Wed, 17 Jun 2020 16:52:43 -0300 Subject: [PATCH] Botones para compartir --- _data/en.yml | 38 ++++++++++++++++++++++++++++++++++++++ _data/es.yml | 38 ++++++++++++++++++++++++++++++++++++++ _sass/helpers.scss | 1 + _sass/share.html | 12 ++++++++++++ _sass/share_box.html | 16 ++++++++++++++++ _sass/share_box.scss | 26 ++++++++++++++++++++++++++ _sass/toggler.scss | 14 +++++++++----- assets/css/styles.scss | 1 + 8 files changed, 141 insertions(+), 5 deletions(-) create mode 100644 _data/en.yml create mode 100644 _data/es.yml create mode 100644 _sass/share.html create mode 100644 _sass/share_box.html create mode 100644 _sass/share_box.scss diff --git a/_data/en.yml b/_data/en.yml new file mode 100644 index 0000000..cf2b078 --- /dev/null +++ b/_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 diff --git a/_data/es.yml b/_data/es.yml new file mode 100644 index 0000000..9610649 --- /dev/null +++ b/_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 diff --git a/_sass/helpers.scss b/_sass/helpers.scss index a7510bb..2796eed 100644 --- a/_sass/helpers.scss +++ b/_sass/helpers.scss @@ -1,3 +1,4 @@ +$bezier: cubic-bezier(0.75, 0, 0.25, 1); /* * Crea una propiedad con prefijos de navegador diff --git a/_sass/share.html b/_sass/share.html new file mode 100644 index 0000000..e75ffa3 --- /dev/null +++ b/_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 %} + + + + {{ include.share.title }} + diff --git a/_sass/share_box.html b/_sass/share_box.html new file mode 100644 index 0000000..3270986 --- /dev/null +++ b/_sass/share_box.html @@ -0,0 +1,16 @@ + + + diff --git a/_sass/share_box.scss b/_sass/share_box.scss new file mode 100644 index 0000000..3ce97d8 --- /dev/null +++ b/_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; + } + } +} diff --git a/_sass/toggler.scss b/_sass/toggler.scss index 7957bfa..94ceaf6 100644 --- a/_sass/toggler.scss +++ b/_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 { diff --git a/assets/css/styles.scss b/assets/css/styles.scss index d647ab0..c2da9fc 100644 --- a/assets/css/styles.scss +++ b/assets/css/styles.scss @@ -13,3 +13,4 @@ @import "fork-awesome/scss/fork-awesome"; @import "accessibility"; @import "helpers"; +@import "share_box";