Merge branch 'prepare-v2-release'
https://codeberg.org/kytta/shareon/pulls/9
This commit is contained in:
Nikita Karamov
commit
60b1f0541a
|
|
@ -1,63 +0,0 @@
|
|||
name: Node.js CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
- v*
|
||||
pull_request:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
lint:
|
||||
name: Lint package
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v2
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "16"
|
||||
- uses: pnpm/action-setup@v2.0.1
|
||||
with:
|
||||
version: 6.0.2
|
||||
- name: Install dependencies
|
||||
run: pnpm i
|
||||
- name: Lint
|
||||
run: pnpm run lint
|
||||
|
||||
build-docs:
|
||||
name: Build and test package and deploy docs
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v2
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "16"
|
||||
- uses: pnpm/action-setup@v2.0.1
|
||||
with:
|
||||
version: 6.0.2
|
||||
- name: Install dependencies
|
||||
run: pnpm i
|
||||
- name: Test package
|
||||
run: pnpm run test
|
||||
|
||||
- name: Copy built files to docs
|
||||
run: cp ./dist/shareon.min.* ./docs
|
||||
if: ${{ github.ref == 'refs/heads/main' }}
|
||||
- name: Deploy to GitHub Pages
|
||||
uses: crazy-max/ghaction-github-pages@v2
|
||||
with:
|
||||
keep_history: true
|
||||
build_dir: docs
|
||||
fqdn: shareon.js.org
|
||||
jekyll: false
|
||||
if: ${{ github.ref == 'refs/heads/main' }}
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
59
CHANGELOG.md
59
CHANGELOG.md
|
|
@ -19,13 +19,24 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|||
<script src="path/to/shareon.js" init>
|
||||
```
|
||||
|
||||
- CSS export for use in Webpack/Rollup/etc. ([#35](https://github.com/kytta/shareon/issues/35))
|
||||
|
||||
```js
|
||||
import "shareon/css";
|
||||
```
|
||||
|
||||
```js
|
||||
require("shareon/css");
|
||||
```
|
||||
|
||||
### Changed
|
||||
|
||||
- **BREAKING:** default version of the package doesn't auto-initialize buttons
|
||||
- **BREAKING:** instead of default export, named exports are now used. If IIFE
|
||||
is used, the global object's name is now `Shareon`, and it has one `init()`
|
||||
method
|
||||
- remove mixins, defining the code/styles directly in the files
|
||||
- updated logos and colours for some social networks
|
||||
- removed mixins, defining the code/styles directly in the files
|
||||
- use [Vite](https://vitejs.dev/) for building, reducing the devDependencies
|
||||
tree and build times drastically
|
||||
- **BREAKING:** newly built files offer worse browser support
|
||||
|
|
@ -226,26 +237,26 @@ Initial release of shareon
|
|||
- Add Twitter button
|
||||
|
||||
[unreleased]: https://codeberg.org/kytta/shareon/compare/v1.6.3...main
|
||||
[1.6.2]: https://github.com/kytta/shareon/compare/v1.6.2...v1.6.3
|
||||
[1.6.2]: https://github.com/kytta/shareon/compare/v1.6.1...v1.6.2
|
||||
[1.6.1]: https://github.com/kytta/shareon/compare/v1.6.0...v1.6.1
|
||||
[1.6.0]: https://github.com/kytta/shareon/compare/v1.5.0...v1.6.0
|
||||
[1.5.0]: https://github.com/kytta/shareon/compare/v1.4.5...v1.5.0
|
||||
[1.4.5]: https://github.com/kytta/shareon/compare/v1.4.2...v1.4.5
|
||||
[1.4.2]: https://github.com/kytta/shareon/compare/v1.4.1...v1.4.2
|
||||
[1.4.1]: https://github.com/kytta/shareon/compare/v1.4.0...v1.4.1
|
||||
[1.4.0]: https://github.com/kytta/shareon/compare/v1.3.1...v1.4.0
|
||||
[1.3.1]: https://github.com/kytta/shareon/compare/v1.3.0...v1.3.1
|
||||
[1.3.0]: https://github.com/kytta/shareon/compare/v1.2.1...v1.3.0
|
||||
[1.2.1]: https://github.com/kytta/shareon/compare/v1.2.0...v1.2.1
|
||||
[1.2.0]: https://github.com/kytta/shareon/compare/v1.1.5...v1.2.0
|
||||
[1.1.5]: https://github.com/kytta/shareon/compare/v1.1.4...v1.1.5
|
||||
[1.1.4]: https://github.com/kytta/shareon/compare/v1.1.3...v1.1.4
|
||||
[1.1.3]: https://github.com/kytta/shareon/compare/v1.1.2...v1.1.3
|
||||
[1.1.2]: https://github.com/kytta/shareon/compare/v1.1.1...v1.1.2
|
||||
[1.1.1]: https://github.com/kytta/shareon/compare/v1.1.0...v1.1.1
|
||||
[1.1.0]: https://github.com/kytta/shareon/compare/v1.0.0...v1.1.0
|
||||
[1.0.0]: https://github.com/kytta/shareon/compare/v1.0.0-beta.3...v1.0.0
|
||||
[1.0.0-beta.3]: https://github.com/kytta/shareon/compare/v1.0.0-beta.2...v1.0.0-beta.3
|
||||
[1.0.0-beta.2]: https://github.com/kytta/shareon/compare/v1.0.0-beta.1...v1.0.0-beta.2
|
||||
[1.0.0-beta.1]: https://github.com/kytta/shareon/compare/3722ada1da60abb768e00621e66b269f8fa60689...v1.0.0-beta.1
|
||||
[1.6.2]: https://codeberg.org/kytta/shareon/compare/v1.6.2...v1.6.3
|
||||
[1.6.2]: https://codeberg.org/kytta/shareon/compare/v1.6.1...v1.6.2
|
||||
[1.6.1]: https://codeberg.org/kytta/shareon/compare/v1.6.0...v1.6.1
|
||||
[1.6.0]: https://codeberg.org/kytta/shareon/compare/v1.5.0...v1.6.0
|
||||
[1.5.0]: https://codeberg.org/kytta/shareon/compare/v1.4.5...v1.5.0
|
||||
[1.4.5]: https://codeberg.org/kytta/shareon/compare/v1.4.2...v1.4.5
|
||||
[1.4.2]: https://codeberg.org/kytta/shareon/compare/v1.4.1...v1.4.2
|
||||
[1.4.1]: https://codeberg.org/kytta/shareon/compare/v1.4.0...v1.4.1
|
||||
[1.4.0]: https://codeberg.org/kytta/shareon/compare/v1.3.1...v1.4.0
|
||||
[1.3.1]: https://codeberg.org/kytta/shareon/compare/v1.3.0...v1.3.1
|
||||
[1.3.0]: https://codeberg.org/kytta/shareon/compare/v1.2.1...v1.3.0
|
||||
[1.2.1]: https://codeberg.org/kytta/shareon/compare/v1.2.0...v1.2.1
|
||||
[1.2.0]: https://codeberg.org/kytta/shareon/compare/v1.1.5...v1.2.0
|
||||
[1.1.5]: https://codeberg.org/kytta/shareon/compare/v1.1.4...v1.1.5
|
||||
[1.1.4]: https://codeberg.org/kytta/shareon/compare/v1.1.3...v1.1.4
|
||||
[1.1.3]: https://codeberg.org/kytta/shareon/compare/v1.1.2...v1.1.3
|
||||
[1.1.2]: https://codeberg.org/kytta/shareon/compare/v1.1.1...v1.1.2
|
||||
[1.1.1]: https://codeberg.org/kytta/shareon/compare/v1.1.0...v1.1.1
|
||||
[1.1.0]: https://codeberg.org/kytta/shareon/compare/v1.0.0...v1.1.0
|
||||
[1.0.0]: https://codeberg.org/kytta/shareon/compare/v1.0.0-beta.3...v1.0.0
|
||||
[1.0.0-beta.3]: https://codeberg.org/kytta/shareon/compare/v1.0.0-beta.2...v1.0.0-beta.3
|
||||
[1.0.0-beta.2]: https://codeberg.org/kytta/shareon/compare/v1.0.0-beta.1...v1.0.0-beta.2
|
||||
[1.0.0-beta.1]: https://codeberg.org/kytta/shareon/compare/3722ada1da60abb768e00621e66b269f8fa60689...v1.0.0-beta.1
|
||||
|
|
|
|||
2
LICENSE
2
LICENSE
|
|
@ -1,6 +1,6 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2020-2021 Nikita Karamov
|
||||
Copyright (c) 2020-2022 Nikita Karamov
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
|
|
|||
194
README.md
194
README.md
|
|
@ -1,100 +1,94 @@
|
|||
# shareon
|
||||
# Shareon
|
||||
|
||||
<img src="./assets/logo.svg" align="right" alt="shareon logo — the Postal Horn emoji" width="96" height="96">
|
||||
<img src="./assets/logo.svg" align="right" alt="Shareon logo — the Postal Horn emoji" width="96" height="96">
|
||||
|
||||
> Lightweight, stylish and ethical share buttons
|
||||
> Lightweight, stylish, and ethical share buttons
|
||||
|
||||
- **Small.** Dependency-free. CSS+JS bundle is only 6 KB minified and gzipped.
|
||||
- **Stylish.** Uses official vector logos and colors with no visual mess.
|
||||
- **Stylish.** Uses official vector logos and colours with no visual mess.
|
||||
- **Ethical.** Embeds no tracking code. JS is required only for the setup.
|
||||
|
||||
<img src="./assets/demo@2x.png" height="84" width="392" alt="shareon demo screenshot">
|
||||
<a href="https://shareon.js.org/"><img src="./assets/demo@2x.png" height="84" width="392" alt="Shareon demo screenshot"></a>
|
||||
|
||||
---
|
||||
|
||||
Observe the live demo here: [shareon.js.org](https://shareon.js.org)
|
||||
See the live demo at [shareon.js.org](https://shareon.js.org)
|
||||
|
||||
## Install
|
||||
|
||||
Include the link to shareon's JS and CSS in your website:
|
||||
Simply load the needed files from the CDN:
|
||||
|
||||
```html
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
|
||||
href="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js"
|
||||
type="text/javascript"
|
||||
src="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.iife.js"
|
||||
defer
|
||||
init
|
||||
></script>
|
||||
```
|
||||
|
||||
or install it via NPM use it in a JS file that you will bundle:
|
||||
- `defer` makes sure Shareon is loaded after HTML is parsed
|
||||
- `init` will automatically initialize Shareon buttons
|
||||
|
||||
```sh
|
||||
npm install shareon
|
||||
# or
|
||||
yarn add shareon
|
||||
```
|
||||
### Do not auto-initialize
|
||||
|
||||
```js
|
||||
const shareon = require("shareon");
|
||||
// or
|
||||
import shareon from "shareon";
|
||||
```
|
||||
|
||||
## Initialization
|
||||
|
||||
By default, shareon will initialize every button after page load. It also
|
||||
exports the `shareon` function, that will let you repopulate your buttons with
|
||||
updated information (for example, if you changed the page title):
|
||||
|
||||
```js
|
||||
// shareon auto-initializes
|
||||
|
||||
window.title = "Cool new window title";
|
||||
shareon();
|
||||
```
|
||||
|
||||
If you want to postpone the initialization, you can import the `noinit`-version
|
||||
of the package. You'll need to manually call the `shareon` function when you
|
||||
want the buttons to be initialized:
|
||||
Remove the `init` attribute and initialize Shareon when you need it:
|
||||
|
||||
```html
|
||||
<!-- notice the 'noinit' section of the url for JS -->
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/shareon@1/dist/noinit/shareon.min.js"
|
||||
type="text/javascript"
|
||||
src="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.iife.js"
|
||||
defer
|
||||
></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
// do something important
|
||||
shareon();
|
||||
<script>
|
||||
// do something
|
||||
Shareon.init();
|
||||
</script>
|
||||
```
|
||||
|
||||
or, if you're using Node:
|
||||
### Use ESM build
|
||||
|
||||
There is also a ESM build for the browsers, which doesn't support
|
||||
auto-initialization:
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import { init } from "https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.es.js";
|
||||
// do something
|
||||
init();
|
||||
</script>
|
||||
```
|
||||
|
||||
### Bundle with Node
|
||||
|
||||
You can also install Shareon using your favourite package manager and include it
|
||||
in your source files:
|
||||
|
||||
```sh
|
||||
pnpm add shareon # or `npm install`, or `yarn add`
|
||||
```
|
||||
|
||||
```js
|
||||
const shareon = require("shareon/dist/noinit/shareon");
|
||||
// or
|
||||
import shareon from "shareon/dist/noinit/shareon";
|
||||
import { init } from "shareon";
|
||||
import "shareon/css"; // most bundlers will transpile this CSS
|
||||
|
||||
// do something important
|
||||
shareon();
|
||||
init();
|
||||
```
|
||||
|
||||
CommonJS imports are also supported:
|
||||
|
||||
```js
|
||||
const Shareon = require("shareon");
|
||||
require("shareon/css"); // most bundlers will transpile this CSS
|
||||
|
||||
Shareon.init();
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
> shareon was heavily inspired by [Likely](https://ilyabirman.net/projects/likely/),
|
||||
> and has a backwards-compatible API (excluding themes and sizes).
|
||||
|
||||
Create a container with class `shareon` and populate it with elements, whose
|
||||
classes match the names of social networks:
|
||||
Create a container with class `shareon` and populate it with elements, class
|
||||
names of which match the names of the social networks:
|
||||
|
||||
```html
|
||||
<div class="shareon">
|
||||
|
|
@ -106,24 +100,31 @@ classes match the names of social networks:
|
|||
<a class="odnoklassniki"></a>
|
||||
<a class="pinterest"></a>
|
||||
<a class="pocket"></a>
|
||||
<button class="reddit"></button>
|
||||
<button class="telegram"></button>
|
||||
<button class="twitter"></button>
|
||||
<button class="viber"></button>
|
||||
<button class="vkontakte"></button>
|
||||
<button class="whatsapp"></button>
|
||||
<a class="reddit"></a>
|
||||
<a class="telegram"></a>
|
||||
<a class="twitter"></a>
|
||||
<a class="viber"></a>
|
||||
<a class="vkontakte"></a>
|
||||
<a class="whatsapp"></a>
|
||||
</div>
|
||||
```
|
||||
|
||||
If you use `<a>`, the buttons will get a `href`-attribute to them. In other cases
|
||||
they will get a listener on `click` event, so you can use `<button>`s if you wish.
|
||||
Shareon will populate these `<a>` elements with correct `href` attributes.
|
||||
|
||||
By default, the URL and the title of the page will be used in sharing dialogs.
|
||||
To change this, you can use the `data-url` and `data-title` attributes. Use them
|
||||
on the whole container or on the specific buttons:
|
||||
### Use with `<button>`s
|
||||
|
||||
You can use `<button>` (or any other element) instead of `<a>`s. In this case,
|
||||
Shareon will create an `onclick`-listener for each button. **I do not recommend
|
||||
doing this**, as this is not so good for semantics.
|
||||
|
||||
### Share metadata
|
||||
|
||||
By default, the URL and the title of the active page will be shared. You can
|
||||
customize it with `data-` attributes. These can be applied on a specific button
|
||||
or on the whole `.shareon` container:
|
||||
|
||||
```html
|
||||
<div class="shareon" data-url="https://example.com">
|
||||
<div class="shareon" data-url="https://custom.url/for-this-page">
|
||||
<a class="facebook" data-title="Custom Facebook title"></a>
|
||||
<a class="twitter" data-title="Custom Twitter title"></a>
|
||||
</div>
|
||||
|
|
@ -131,32 +132,51 @@ on the whole container or on the specific buttons:
|
|||
|
||||
Apart from the URL and title, some networks support extra parameters:
|
||||
|
||||
- you **have to** add `data-fb-app-id` to the FB Messenger button to make sharing even possible
|
||||
- add `data-media` to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture
|
||||
- add `data-text` to a WhatsApp, Mastodon, Telegram, or Viber button to add custom message text
|
||||
- you **MUST** add `data-fb-app-id` to the FB Messenger button to make sharing
|
||||
even possible
|
||||
- add `data-media` to an Odnoklassniki, Pinterest, or VK button to customize
|
||||
the pinned picture
|
||||
- add `data-text` to a WhatsApp, Mastodon, Telegram, or Viber button to add
|
||||
custom message text
|
||||
- add `data-via` to a Twitter or Mastodon button to mention a user
|
||||
|
||||
Here are all the custom parameters in their glory:
|
||||
Here are all custom parameters:
|
||||
|
||||
```html
|
||||
<div class="shareon" data-url="https://example.com/custom-url">
|
||||
<div class="shareon" data-url="https://custom.url/for-this-page">
|
||||
<a class="facebook" data-title="Custom Facebook title"></a>
|
||||
<a class="messenger" data-fb-app-id="0123456789012345"></a>
|
||||
<a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
|
||||
<a class="pinterest" data-media="https://custom.picture/for-pinterest">Pin</a>
|
||||
<a class="telegram" data-text="Check this out!"></a>
|
||||
<a class="twitter" data-via="MyNickname"></a>
|
||||
<a class="mastodon" data-via="@MyNickname@myserver.social"></a>
|
||||
<a class="whatsapp" data-url="https://my-cool-website.com">Send</a>
|
||||
<a class="whatsapp" data-url="https://custom.url/for-whatsapp">Send</a>
|
||||
</div>
|
||||
```
|
||||
|
||||
## License
|
||||
## Other versions
|
||||
|
||||
MIT © [Nikita Karamov](https://www.kytta.dev/)
|
||||
- [**WordPress plugin**](https://wordpress.org/plugins/shareon/) by [Gareth](https://github.com/gareth-gillman)
|
||||
|
||||
shareon logo is the [Postal Horn emoji](https://github.com/googlefonts/noto-emoji/blob/v2020-09-16-unicode13_1/svg/emoji_u1f4ef.svg) from [Noto Emoji](https://github.com/googlefonts/noto-emoji/tree/v2020-09-16-unicode13_1), which is licensed under the [Apache License v2.0](https://github.com/googlefonts/noto-emoji/blob/v2020-09-16-unicode13_1/LICENSE).
|
||||
## Licence
|
||||
|
||||
Includes a modified version of the
|
||||
[Mastodon logo](https://commons.wikimedia.org/wiki/File:Mastodon_Logotype_%28Simple%29.svg),
|
||||
which is licensed under the
|
||||
[APGLv3 license](https://www.gnu.org/licenses/agpl.html) or later.
|
||||
Copyright © 2020–2022 [Nikita Karamov](https://www.kytta.dev/)
|
||||
Licenced under the [MIT License](https://spdx.org/licenses/MIT.html).
|
||||
|
||||
Shareon was heavily inspired by [Likely](https://ilyabirman.net/likely/),
|
||||
and has a somewhat backwards-compatible API (excluding themes and sizes).
|
||||
Likely is licenced under the MIT License.
|
||||
|
||||
Shareon's logo is the
|
||||
[Postal Horn emoji](https://github.com/googlefonts/noto-emoji/blob/43f47be9404018cd9d8f73a227363a8f20acdab5/svg/emoji_u1f4ef.svg)
|
||||
from [Noto Emoji](https://github.com/googlefonts/noto-emoji).
|
||||
Noto Emoji is licenced under the
|
||||
[Apache License v2.0](https://github.com/googlefonts/noto-emoji/blob/43f47be9404018cd9d8f73a227363a8f20acdab5/LICENSE).
|
||||
|
||||
Share icons are being sourced from [Simple Icons](https://github.com/simple-icons/simple-icons/).
|
||||
Simple Icons is released under [CC0](https://spdx.org/licenses/CC0-1.0.html),
|
||||
but the icons themselves may be subject to copyright of the respective owners.
|
||||
|
||||
---
|
||||
|
||||
This project is hosted on Codeberg: <https://codeberg.org/kytta/shareon>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 15 KiB |
|
|
@ -1 +0,0 @@
|
|||
shareon.js.org
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
BIN
docs/favicon.ico
BIN
docs/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
|
|
@ -1 +0,0 @@
|
|||
google-site-verification: google1b3b138126470b07.html
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.1 KiB |
337
docs/index.html
337
docs/index.html
|
|
@ -1,337 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Lightweight, stylish and ethical share buttons for popular social networks"
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="share buttons, sharing, social networks, share via, share on"
|
||||
/>
|
||||
<meta name="author" content="Nikita Karamov" />
|
||||
|
||||
<title>shareon – Lightweight, stylish and ethical share buttons</title>
|
||||
|
||||
<meta property="og:title" content="shareon" />
|
||||
<meta property="og:url" content="https://shareon.js.org" />
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://raw.githubusercontent.com/kytta/shareon/main/assets/banner.png"
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Lightweight, stylish and ethical share buttons for popular social networks"
|
||||
/>
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:creator" content="@KyttaWasHere" />
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://igoradamenko.github.io/awsm.css/css/awsm.min.css"
|
||||
/>
|
||||
|
||||
<style>
|
||||
.shareon > a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button:not([disabled]):hover {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<p>
|
||||
<img
|
||||
src="https://raw.githubusercontent.com/NickKaramoff/shareon/main/assets/logo.svg"
|
||||
alt="shareon logo — the Postal Horn emoji"
|
||||
width="64"
|
||||
height="64"
|
||||
/>
|
||||
</p>
|
||||
<h1>shareon</h1>
|
||||
<p>Lightweight, stylish and ethical share buttons</p>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.npmjs.com/package/shareon" target="_blank"
|
||||
>npm</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/kytta/shareon" target="_blank"
|
||||
>github</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h2>
|
||||
<a id="what-is-it" href="#what-is-it" aria-hidden="true"></a>
|
||||
What is it?
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
<code>shareon</code> are share buttons for popular social networks.
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="shareon"
|
||||
data-title="shareon — lightweight, stylish and ethical share buttons"
|
||||
style="text-align: center"
|
||||
>
|
||||
<a class="facebook"></a>
|
||||
<a class="linkedin"></a>
|
||||
<a class="mastodon" data-via="@kytta@fosstodon.org"></a>
|
||||
<a class="messenger" data-fb-app-id="3619024578167617"></a>
|
||||
<a class="odnoklassniki"></a>
|
||||
<a class="pinterest"></a>
|
||||
<a class="pocket"></a>
|
||||
<a class="reddit"></a>
|
||||
<a class="telegram"></a>
|
||||
<a class="twitter" data-via="KyttaWasHere"></a>
|
||||
<a class="viber"></a>
|
||||
<a class="vkontakte"></a>
|
||||
<a class="whatsapp"></a>
|
||||
</div>
|
||||
|
||||
<p>Unlike many other share buttons, <code>shareon</code> are:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<b>lightweight</b>, clocking in at only 6 KB gzipped code (JS+CSS)
|
||||
</li>
|
||||
<li>
|
||||
<b>stylish</b>, by having no visual features other than official
|
||||
colors and logos
|
||||
</li>
|
||||
<li>
|
||||
<b>ethical</b>, since they do not insert any pesky tracking code
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
The whole JavaScript code is quick and simple: it only populates the
|
||||
buttons with set up links. The speed and easy customization make
|
||||
<code>shareon</code> the perfect choice for your blog, news site or
|
||||
project page!
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>
|
||||
<a id="install" href="#install" aria-hidden="true"></a>
|
||||
Install
|
||||
</h2>
|
||||
<p>Include the link to shareon's JS and CSS in your website:</p>
|
||||
|
||||
<pre><code><link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
|
||||
rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js"
|
||||
type="text/javascript"></script></code></pre>
|
||||
|
||||
<p>
|
||||
or install it via NPM and use it in a JS file that you will later
|
||||
bundle:
|
||||
</p>
|
||||
<pre><code>const shareon = require('shareon');</code></pre>
|
||||
<pre><code>import shareon from 'shareon';</code></pre>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>
|
||||
<a id="initialization" href="#initialization" aria-hidden="true"></a>
|
||||
Initialization
|
||||
</h2>
|
||||
<p>
|
||||
By default, shareon will initialize every button after page load. It
|
||||
also exports the <code>shareon</code> function, that will let you
|
||||
repopulate your buttons with updated information (for example, if you
|
||||
changed the page title):
|
||||
</p>
|
||||
|
||||
<pre><code>// shareon auto-initializes
|
||||
|
||||
window.title = "Cool new window title";
|
||||
shareon();</code></pre>
|
||||
|
||||
<p>
|
||||
If you want to postpone the initialization, you can import the
|
||||
<code>noinit</code>-version of the package. You'll need to manually
|
||||
call the <code>shareon</code> function when you want the buttons to be
|
||||
initialized:
|
||||
</p>
|
||||
<pre><code><!-- notice the 'noinit' section of the url for JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/noinit/shareon.min.js"
|
||||
type="text/javascript"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
|
||||
rel="stylesheet">
|
||||
|
||||
<script type="text/javascript">
|
||||
// do something important
|
||||
shareon();
|
||||
</script></code></pre>
|
||||
|
||||
<p>or, if you're using Node:</p>
|
||||
|
||||
<pre><code>const shareon = require('shareon');
|
||||
// or
|
||||
import shareon from 'shareon';
|
||||
|
||||
// do something important
|
||||
shareon();</code></pre>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>
|
||||
<a id="usage" href="#usage" aria-hidden="true"></a>
|
||||
Usage
|
||||
</h2>
|
||||
|
||||
<aside>
|
||||
<p>
|
||||
<code>shareon</code> was heavily inspired by
|
||||
<a href="https://ilyabirman.net/projects/likely/">Likely</a>, and
|
||||
has a backwards-compatible API
|
||||
</p>
|
||||
</aside>
|
||||
|
||||
<p>
|
||||
Create a container with class <code>shareon</code> and populate it
|
||||
with elements, whose classes match the names of social networks:
|
||||
</p>
|
||||
|
||||
<pre><code><div class="shareon">
|
||||
<a class="facebook"></a>
|
||||
<a class="linkedin"></a>
|
||||
<a class="mastodon"></a>
|
||||
<!-- FB App ID is required for the Messenger button to function -->
|
||||
<a class="messenger" data-fb-app-id="0123456789012345"></a>
|
||||
<a class="odnoklassniki"></a>
|
||||
<a class="pinterest"></a>
|
||||
<a class="pocket"></a>
|
||||
<button class="reddit"></button>
|
||||
<button class="telegram"></button>
|
||||
<button class="twitter"></button>
|
||||
<button class="viber"></button>
|
||||
<button class="vkontakte"></button>
|
||||
<button class="whatsapp"></button>
|
||||
</div></code></pre>
|
||||
<div class="shareon">
|
||||
<a class="facebook"></a>
|
||||
<a class="linkedin"></a>
|
||||
<a class="mastodon"></a>
|
||||
<a class="messenger" data-fb-app-id="3619024578167617"></a>
|
||||
<a class="odnoklassniki"></a>
|
||||
<a class="pinterest"></a>
|
||||
<a class="pocket"></a>
|
||||
<button class="reddit"></button>
|
||||
<button class="telegram"></button>
|
||||
<button class="twitter"></button>
|
||||
<button class="viber"></button>
|
||||
<button class="vkontakte"></button>
|
||||
<button class="whatsapp"></button>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
If you use <code><a></code>, the buttons will get a
|
||||
`href`-attribute to them. In other cases they will get a listener on
|
||||
<code>click</code> event, so you can use <code><button></code>s
|
||||
if you wish.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
By default, the URL and the title of the page will be used in sharing
|
||||
dialogs. To change this, you can use the <code>data-url</code> and
|
||||
<code>data-title</code> attributes. Use them on the whole container or
|
||||
on the specific buttons:
|
||||
</p>
|
||||
|
||||
<pre><code><div class="shareon" data-url="https://example.com">
|
||||
<a class="whatsapp" data-title="Custom WhatsApp title"></a>
|
||||
<a class="twitter" data-title="Custom Twitter title"></a>
|
||||
</div></code></pre>
|
||||
|
||||
<div class="shareon" data-url="https://example.com">
|
||||
<a class="whatsapp" data-title="Custom WhatsApp title"></a>
|
||||
<a class="twitter" data-title="Custom Twitter title"></a>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Apart from the URL and title, some networks support extra parameters:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
you <strong>have to</strong> add <code>data-fb-app-id</code> to the
|
||||
FB Messenger button to make sharing even possible
|
||||
</li>
|
||||
<li>
|
||||
add <code>data-media</code> to an Odnoklassniki, Pinterest, or VK
|
||||
button to customize the pinned picture
|
||||
</li>
|
||||
<li>
|
||||
add <code>data-text</code> to a WhatsApp, Mastodon, Telegram, or
|
||||
Viber button to add custom message text
|
||||
</li>
|
||||
<li>
|
||||
add <code>data-via</code> to a Twitter or Mastodon button to mention
|
||||
a user
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Here are all the custom parameters in their glory:</p>
|
||||
|
||||
<pre><code><div class="shareon" data-url="https://example.com/custom-url">
|
||||
<a class="facebook" data-title="Custom Facebook title"></a>
|
||||
<a class="messenger" data-fb-app-id="0123456789012345"></a>
|
||||
<a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
|
||||
<a class="telegram" data-text="Check this out!"></a>
|
||||
<a class="twitter" data-via="MyNickname"></a>
|
||||
<a class="mastodon" data-via="@MyNickname@myserver.social"></a>
|
||||
<a class="whatsapp" data-url="https://my-cool-website.com">Send</a>
|
||||
</div></code></pre>
|
||||
<div class="shareon" data-url="https://example.com/custom-url">
|
||||
<a class="facebook" data-title="Custom Facebook title"></a>
|
||||
<a class="messenger" data-fb-app-id="3619024578167617"></a>
|
||||
<a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
|
||||
<a class="telegram" data-text="Check this out!"></a>
|
||||
<a class="twitter" data-via="MyNickname"></a>
|
||||
<a class="mastodon" data-via="@MyNickname@myserver.social"></a>
|
||||
<a class="whatsapp" data-url="https://my-cool-website.com">Send</a>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
by <a href="https://www.kytta.dev/" target="_blank">Nikita Karamov</a>
|
||||
</p>
|
||||
<p>
|
||||
Website built with
|
||||
<a
|
||||
href="https://igoradamenko.github.io/awsm.css/index.html"
|
||||
target="_blank"
|
||||
>awsm.css</a
|
||||
>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<!-- These files are autocopied on build and will be present on the website -->
|
||||
<!-- See https://github.com/kytta/shareon/blob/main/.github/workflows/node.yml#L29 -->
|
||||
<link href="shareon.min.css" rel="stylesheet" />
|
||||
<script src="shareon.min.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"name": "shareon",
|
||||
"icons": [
|
||||
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
|
||||
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
|
||||
]
|
||||
}
|
||||
13
package.json
13
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "shareon",
|
||||
"version": "2.0.0-beta.3",
|
||||
"version": "2.0.0-rc.0",
|
||||
"description": "Lightweight, stylish and ethical share buttons for popular social networks",
|
||||
"license": "MIT",
|
||||
"homepage": "https://shareon.js.org",
|
||||
|
|
@ -11,16 +11,21 @@
|
|||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/kytta/shareon.git"
|
||||
"url": "https://codeberg.org/kytta/shareon.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/kytta/shareon/issues"
|
||||
"url": "https://codeberg.org/kytta/shareon/issues"
|
||||
},
|
||||
"author": {
|
||||
"name": "Nikita Karamov",
|
||||
"email": "me@kytta.dev",
|
||||
"url": "https://www.kytta.dev"
|
||||
"url": "https://www.kytta.dev/"
|
||||
},
|
||||
"funding": [
|
||||
"https://github.com/sponsors/kytta/",
|
||||
"https://liberapay.com/kytta",
|
||||
"https://www.paypal.com/paypalme/NickKaramoff"
|
||||
],
|
||||
"main": "./dist/shareon.umd.js",
|
||||
"unpkg": "./dist/shareon.iife.js",
|
||||
"jsdelivr": "./dist/shareon.iife.js",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { init } from "./shareon";
|
||||
|
||||
// TODO: update README
|
||||
const s = document.currentScript;
|
||||
if (s && s.hasAttribute("init")) {
|
||||
init();
|
||||
|
|
|
|||
|
|
@ -77,92 +77,92 @@
|
|||
background-color: #1877f2;
|
||||
}
|
||||
.shareon > .facebook:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.shareon > .linkedin {
|
||||
background-color: #2867b2;
|
||||
background-color: #0a66c2;
|
||||
}
|
||||
.shareon > .linkedin:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.722 23.72h-4.91v-7.692c0-1.834-.038-4.194-2.559-4.194-2.56 0-2.95 1.995-2.95 4.06v7.827H8.394V7.902h4.716v2.157h.063c.659-1.244 2.261-2.556 4.655-2.556 4.974 0 5.894 3.274 5.894 7.535zM.388 7.902h4.923v15.819H.388zM2.85 5.738A2.849 2.849 0 0 1 0 2.886a2.851 2.851 0 1 1 2.85 2.852z'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.722 23.72h-4.91v-7.692c0-1.834-.038-4.194-2.559-4.194-2.56 0-2.95 1.995-2.95 4.06v7.827H8.394V7.902h4.716v2.157h.063c.659-1.244 2.261-2.556 4.655-2.556 4.974 0 5.894 3.274 5.894 7.535v8.683ZM.388 7.902h4.923v15.819H.388zM2.85 5.738A2.849 2.849 0 0 1 0 2.886a2.851 2.851 0 1 1 2.85 2.852Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.shareon > .linkedin:not(:empty):before {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.shareon > .mastodon {
|
||||
background-color: #3088d4;
|
||||
}
|
||||
.shareon > .mastodon:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.shareon > .messenger {
|
||||
background-color: #09f;
|
||||
background-color: #00b2ff;
|
||||
}
|
||||
.shareon > .messenger:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 11.64C0 4.95 5.24 0 12 0s12 4.95 12 11.64-5.24 11.64-12 11.64c-1.21 0-2.38-.16-3.47-.46a.96.96 0 0 0-.64.05L5.5 23.92a.96.96 0 0 1-1.35-.85l-.07-2.14a.97.97 0 0 0-.32-.68A11.39 11.39 0 0 1 0 11.64zm8.32-2.19-3.52 5.6c-.35.53.32 1.14.82.75l3.79-2.87c.26-.2.6-.2.87 0l2.8 2.1c.84.63 2.04.4 2.6-.48l3.52-5.6c.35-.53-.32-1.13-.82-.75l-3.79 2.87c-.25.2-.6.2-.86 0l-2.8-2.1a1.8 1.8 0 0 0-2.61.48z'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.001 11.639C.001 4.949 5.241 0 12.001 0S24 4.95 24 11.639c0 6.689-5.24 11.638-12 11.638-1.21 0-2.38-.16-3.47-.46a.96.96 0 0 0-.64.05l-2.39 1.05a.96.96 0 0 1-1.35-.85l-.07-2.14a.97.97 0 0 0-.32-.68A11.39 11.389 0 0 1 .002 11.64zm8.32-2.19-3.52 5.6c-.35.53.32 1.139.82.75l3.79-2.87c.26-.2.6-.2.87 0l2.8 2.1c.84.63 2.04.4 2.6-.48l3.52-5.6c.35-.53-.32-1.13-.82-.75l-3.79 2.87c-.25.2-.6.2-.86 0l-2.8-2.1a1.8 1.8 0 0 0-2.61.48z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.shareon > .odnoklassniki {
|
||||
background-color: #ee8208;
|
||||
}
|
||||
.shareon > .odnoklassniki:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.505 17.44a11.599 11.599 0 0 0 3.6-1.49 1.816 1.816 0 0 0-1.935-3.073 7.866 7.866 0 0 1-8.34 0 1.814 1.814 0 0 0-2.5.565c0 .002 0 .004-.002.005a1.812 1.812 0 0 0 .567 2.5l.002.002c1.105.695 2.322 1.2 3.596 1.488l-3.465 3.465A1.796 1.796 0 0 0 6 23.439l.03.03c.344.354.81.53 1.274.53.465 0 .93-.176 1.275-.53L12 20.065l3.404 3.406a1.815 1.815 0 0 0 2.566-2.565l-3.465-3.466zM12 12.388a6.202 6.202 0 0 0 6.195-6.193C18.195 2.78 15.415 0 12 0S5.805 2.78 5.805 6.197A6.2 6.2 0 0 0 12 12.389zm0-8.757a2.566 2.566 0 0 1 0 5.13 2.569 2.569 0 0 1-2.565-2.564A2.57 2.57 0 0 1 12 3.63z'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0a6.2 6.2 0 0 0-6.194 6.195 6.2 6.2 0 0 0 6.195 6.192 6.2 6.2 0 0 0 6.193-6.192A6.2 6.2 0 0 0 12.001 0zm0 3.63a2.567 2.567 0 0 1 2.565 2.565 2.568 2.568 0 0 1-2.564 2.564 2.568 2.568 0 0 1-2.565-2.564 2.567 2.567 0 0 1 2.565-2.564zM6.807 12.6a1.814 1.814 0 0 0-.91 3.35 11.611 11.611 0 0 0 3.597 1.49l-3.462 3.463a1.815 1.815 0 0 0 2.567 2.566L12 20.066l3.405 3.403a1.813 1.813 0 0 0 2.564 0c.71-.709.71-1.858 0-2.566l-3.462-3.462a11.593 11.593 0 0 0 3.596-1.49 1.814 1.814 0 1 0-1.932-3.073 7.867 7.867 0 0 1-8.34 0c-.318-.2-.674-.29-1.024-.278z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.shareon > .pinterest {
|
||||
background-color: #ee0023;
|
||||
background-color: #bd081c;
|
||||
}
|
||||
.shareon > .pinterest:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026z'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.shareon > .pocket {
|
||||
background-color: #ef4154;
|
||||
background-color: #ef3f56;
|
||||
}
|
||||
.shareon > .pocket:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18.813 10.259-5.646 5.419a1.649 1.649 0 0 1-2.282 0l-5.646-5.419a1.645 1.645 0 0 1 2.276-2.376l4.511 4.322 4.517-4.322a1.643 1.643 0 0 1 2.326.049 1.64 1.64 0 0 1-.045 2.326zm5.083-7.546a2.163 2.163 0 0 0-2.041-1.436H2.179c-.9 0-1.717.564-2.037 1.405-.094.25-.142.511-.142.774v7.245l.084 1.441c.348 3.277 2.047 6.142 4.682 8.139.045.036.094.07.143.105l.03.023a11.899 11.899 0 0 0 4.694 2.072c.786.158 1.591.24 2.389.24.739 0 1.481-.067 2.209-.204.088-.029.176-.045.264-.06.023 0 .049-.015.074-.029a12.002 12.002 0 0 0 4.508-2.025l.029-.031.135-.105c2.627-1.995 4.324-4.862 4.686-8.148L24 10.678V3.445c0-.251-.031-.5-.121-.742z'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18.813 10.259-5.646 5.419a1.649 1.649 0 0 1-2.282 0l-5.646-5.419a1.645 1.645 0 0 1 2.276-2.376l4.511 4.322 4.517-4.322a1.643 1.643 0 0 1 2.326.049 1.64 1.64 0 0 1-.045 2.326l-.011.001zm5.083-7.546a2.163 2.163 0 0 0-2.041-1.436H2.179c-.9 0-1.717.564-2.037 1.405-.094.25-.142.511-.142.774v7.245l.084 1.441c.348 3.277 2.047 6.142 4.682 8.139.045.036.094.07.143.105l.03.023a11.899 11.899 0 0 0 4.694 2.072c.786.158 1.591.24 2.389.24.739 0 1.481-.067 2.209-.204.088-.029.176-.045.264-.06.023 0 .049-.015.074-.029a12.002 12.002 0 0 0 4.508-2.025l.029-.031.135-.105c2.627-1.995 4.324-4.862 4.686-8.148L24 10.678V3.445c0-.251-.031-.5-.121-.742l.017.01z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.shareon > .reddit {
|
||||
background-color: #ff4500;
|
||||
}
|
||||
.shareon > .reddit:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.53 1.148a1.83 1.83 0 0 0-1.667 1.054l-4.372-.928a.522.522 0 0 0-.358.063.515.515 0 0 0-.21.297L11.59 7.925c-2.807.086-5.32.909-7.137 2.237a2.668 2.668 0 0 0-1.815-.737A2.64 2.64 0 0 0 0 12.064a2.634 2.634 0 0 0 1.563 2.407 4.95 4.95 0 0 0-.065.803c0 4.053 4.71 7.326 10.537 7.326s10.537-3.273 10.537-7.326a4.548 4.548 0 0 0-.063-.782 2.732 2.732 0 0 0 1.519-2.428 2.64 2.64 0 0 0-2.639-2.64 2.53 2.53 0 0 0-1.816.74c-1.796-1.288-4.287-2.134-7.031-2.239l1.204-5.637 3.906.823a1.888 1.888 0 0 0 1.878 1.777c1.024 0 1.87-.837 1.88-1.861a1.884 1.884 0 0 0-1.88-1.88zM7.907 18.066c-.13 0-.254.05-.347.141a.498.498 0 0 0 0 .697c1.266 1.267 3.736 1.373 4.454 1.373s3.167-.084 4.454-1.373a.546.546 0 0 0 .044-.697.5.5 0 0 0-.698 0c-.823.802-2.533 1.099-3.779 1.099s-2.977-.295-3.779-1.099a.49.49 0 0 0-.349-.142zm-1.932-4.122c0-1.035.844-1.88 1.88-1.88 1.034 0 1.878.843 1.878 1.879S8.89 15.82 7.856 15.82a1.882 1.882 0 0 1-1.88-1.877zm10.155-1.88c1.035 0 1.88.845 1.88 1.879 0 1.035-.844 1.878-1.879 1.878s-1.879-.843-1.879-1.877c0-1.037.844-1.88 1.878-1.88z' fill-rule='evenodd'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.512 1.173a1.88 1.88 0 0 1 1.877 1.874 1.884 1.884 0 0 1-1.877 1.857c-.99 0-1.817-.783-1.873-1.773l-3.897-.82-1.201 5.623c2.737.105 5.223.949 7.015 2.234a2.525 2.525 0 0 1 1.812-.737A2.634 2.634 0 0 1 24 12.063c0 1.075-.653 2-1.516 2.423.044.258.065.519.063.78 0 4.043-4.698 7.31-10.512 7.31s-10.512-3.267-10.512-7.31c0-.275.022-.55.064-.801a2.627 2.627 0 0 1-1.559-2.402 2.634 2.634 0 0 1 2.633-2.632c.694 0 1.347.294 1.811.735 1.812-1.325 4.32-2.146 7.12-2.232l1.329-6.276a.513.513 0 0 1 .21-.296.521.521 0 0 1 .357-.063l4.361.926c.3-.644.952-1.057 1.663-1.052ZM7.917 18.052c-.13 0-.254.05-.347.14a.497.497 0 0 0 0 .696c1.264 1.263 3.728 1.37 4.444 1.37.716 0 3.16-.084 4.444-1.37a.545.545 0 0 0 .044-.695.498.498 0 0 0-.697 0c-.82.8-2.527 1.095-3.77 1.095-1.243 0-2.97-.294-3.77-1.095a.49.49 0 0 0-.348-.143v.002Zm-.051-5.989A1.88 1.88 0 0 0 5.99 13.94c0 1.031.842 1.873 1.876 1.873a1.878 1.878 0 0 0 1.873-1.874 1.878 1.878 0 0 0-1.873-1.875Zm8.254 0a1.878 1.878 0 0 0-1.873 1.876c0 1.031.842 1.873 1.875 1.873a1.878 1.878 0 0 0 1.875-1.874 1.88 1.88 0 0 0-1.877-1.875Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.shareon > .telegram {
|
||||
background-color: #179cde;
|
||||
background-color: #26a5e4;
|
||||
}
|
||||
.shareon > .telegram:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.517 11.31c-.962.382-1.466.756-1.512 1.122-.088.702.924.921 2.196 1.335 1.037.337 2.433.731 3.158.747.658.014 1.393-.257 2.204-.814 5.533-3.735 8.39-5.622 8.57-5.663.126-.029.301-.065.42.04.119.106.107.306.095.36-.101.429-5.3 5.156-5.599 5.467-1.143 1.187-2.443 1.913-.437 3.235 1.735 1.144 2.746 1.873 4.534 3.045 1.142.75 2.039 1.637 3.218 1.529.543-.05 1.104-.56 1.389-2.083.673-3.598 1.996-11.392 2.302-14.604a3.585 3.585 0 0 0-.034-.8c-.027-.158-.084-.383-.29-.55-.243-.197-.619-.24-.787-.236-.764.013-1.936.42-7.579 2.767C11.39 7.03 7.44 8.73 1.517 11.31z'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.888 3.551c.168-.003.54.039.781.235.162.14.264.335.288.547.026.156.06.514.033.793-.302 3.189-1.616 10.924-2.285 14.495-.282 1.512-.838 2.017-1.378 2.066-1.17.11-2.058-.773-3.192-1.515-1.774-1.165-2.777-1.889-4.5-3.025-1.99-1.31-.7-2.033.434-3.209.297-.309 5.455-5.002 5.556-5.427.012-.054.024-.252-.094-.356-.117-.104-.292-.069-.418-.04-.178.04-3.013 1.915-8.504 5.62-.806.554-1.534.823-2.187.806-.72-.013-2.104-.405-3.134-.739C1.025 13.39.022 13.174.11 12.476c.045-.363.546-.734 1.5-1.114 5.878-2.56 9.796-4.249 11.758-5.064 5.599-2.328 6.763-2.733 7.521-2.747Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.shareon > .twitter {
|
||||
background-color: #1da1f2;
|
||||
}
|
||||
.shareon > .twitter:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.954 4.569a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.061a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.937 4.937 0 0 0 4.604 3.417 9.868 9.868 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 0 0 2.46-2.548l-.047-.02z'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.953 4.57a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.06a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.936 4.936 0 0 0 4.604 3.417 9.867 9.867 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0 0 24 4.59z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.shareon > .viber {
|
||||
background-color: #7360f2;
|
||||
}
|
||||
.shareon > .viber:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.398.002C9.473.028 5.331.344 3.014 2.467 1.294 4.177.693 6.698.623 9.82c-.06 3.11-.13 8.95 5.5 10.541v2.42s-.038.97.602 1.17c.79.25 1.24-.499 1.99-1.299l1.4-1.58c3.85.32 6.8-.419 7.14-.529.78-.25 5.181-.811 5.901-6.652.74-6.031-.36-9.831-2.34-11.551l-.01-.002c-.6-.55-3-2.3-8.37-2.32 0 0-.396-.025-1.038-.016zm.067 1.697c.545-.003.88.02.88.02 4.54.01 6.711 1.38 7.221 1.84 1.67 1.429 2.528 4.856 1.9 9.892-.6 4.88-4.17 5.19-4.83 5.4-.28.09-2.88.73-6.152.52 0 0-2.439 2.941-3.199 3.701-.12.13-.26.17-.35.15-.13-.03-.17-.19-.16-.41l.02-4.019c-4.771-1.32-4.491-6.302-4.441-8.902.06-2.6.55-4.732 2-6.172 1.957-1.77 5.475-2.01 7.11-2.02zm.36 2.6a.299.299 0 0 0-.3.299.3.3 0 0 0 .3.3 5.631 5.631 0 0 1 4.03 1.59c1.09 1.06 1.621 2.48 1.641 4.34a.3.3 0 0 0 .3.3v-.009a.3.3 0 0 0 .3-.3 6.451 6.451 0 0 0-1.81-4.76c-1.19-1.16-2.692-1.76-4.462-1.76zm-3.954.69a.955.955 0 0 0-.615.12h-.012c-.41.24-.788.54-1.148.94-.27.32-.421.639-.461.949a1.24 1.24 0 0 0 .05.541l.02.01a13.722 13.722 0 0 0 1.2 2.6 15.383 15.383 0 0 0 2.32 3.171l.03.04.04.03.03.03.03.03a15.603 15.603 0 0 0 3.18 2.33c1.32.72 2.122 1.06 2.602 1.2v.01c.14.04.268.06.398.06a1.84 1.84 0 0 0 1.102-.472c.39-.35.7-.738.93-1.148v-.01c.23-.43.15-.841-.18-1.121a13.632 13.632 0 0 0-2.15-1.54c-.51-.28-1.03-.11-1.24.17l-.45.569c-.23.28-.65.24-.65.24l-.012.01c-3.12-.8-3.95-3.959-3.95-3.959s-.04-.43.25-.65l.56-.45c.27-.22.46-.74.17-1.25a13.522 13.522 0 0 0-1.54-2.15.843.843 0 0 0-.504-.3zm4.473.89a.3.3 0 0 0 .002.6 3.78 3.78 0 0 1 2.65 1.15 3.5 3.5 0 0 1 .9 2.57.3.3 0 0 0 .3.299l.01.012a.3.3 0 0 0 .3-.301c.03-1.19-.34-2.19-1.07-2.99-.73-.8-1.75-1.25-3.05-1.34a.3.3 0 0 0-.042 0zm.49 1.619a.305.305 0 0 0-.018.611c.99.05 1.47.55 1.53 1.58a.3.3 0 0 0 .3.29h.01a.3.3 0 0 0 .29-.32c-.07-1.34-.8-2.091-2.1-2.161a.305.305 0 0 0-.012 0z'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4 0C9.473.028 5.333.344 3.02 2.467 1.302 4.187.696 6.7.633 9.817.57 12.933.488 18.776 6.12 20.36h.003l-.004 2.416s-.037.977.61 1.177c.777.242 1.234-.5 1.98-1.302.407-.44.972-1.084 1.397-1.58 3.85.326 6.812-.416 7.15-.525.776-.252 5.176-.816 5.892-6.657.74-6.02-.36-9.83-2.34-11.546-.596-.55-3.006-2.3-8.375-2.323 0 0-.395-.025-1.037-.017zm.058 1.693c.545-.004.88.017.88.017 4.542.02 6.717 1.388 7.222 1.846 1.675 1.435 2.53 4.868 1.906 9.897v.002c-.604 4.878-4.174 5.184-4.832 5.395-.28.09-2.882.737-6.153.524 0 0-2.436 2.94-3.197 3.704-.12.12-.26.167-.352.144-.13-.033-.166-.188-.165-.414l.02-4.018c-4.762-1.32-4.485-6.292-4.43-8.895.054-2.604.543-4.738 1.996-6.173 1.96-1.773 5.474-2.018 7.11-2.03zm.38 2.602a.304.304 0 0 0-.004.607c1.624.01 2.946.537 4.028 1.592 1.073 1.046 1.62 2.468 1.633 4.334.002.167.14.3.307.3a.304.304 0 0 0 .3-.304c-.014-1.984-.618-3.596-1.816-4.764-1.19-1.16-2.692-1.753-4.447-1.765zm-3.96.695a.981.981 0 0 0-.616.117l-.01.002c-.43.247-.816.562-1.146.932-.002.004-.006.004-.008.008-.267.323-.42.638-.46.948a.596.596 0 0 0-.007.14c0 .136.022.27.065.4l.013.01c.135.48.473 1.276 1.205 2.604.42.768.903 1.5 1.446 2.186.27.344.56.673.87.984l.132.132c.31.308.64.6.984.87a15.524 15.524 0 0 0 2.186 1.447c1.328.733 2.126 1.07 2.604 1.206l.01.014a1.275 1.275 0 0 0 .54.055c.31-.036.627-.19.948-.46.004 0 .003-.002.008-.005.37-.33.683-.72.93-1.148l.003-.01c.225-.432.15-.842-.18-1.12-.004 0-.698-.58-1.037-.83-.36-.255-.73-.492-1.113-.71-.51-.285-1.032-.106-1.248.174l-.447.564c-.23.283-.657.246-.657.246-3.12-.796-3.955-3.955-3.955-3.955s-.037-.426.248-.656l.563-.448c.277-.215.456-.737.17-1.248a12.73 12.73 0 0 0-.71-1.115 28.35 28.35 0 0 0-.83-1.035.822.822 0 0 0-.502-.297zm4.49.88a.303.303 0 0 0-.018.606c1.16.085 2.017.466 2.645 1.15.63.688.93 1.524.906 2.57a.306.306 0 0 0 .61.013c.025-1.175-.334-2.193-1.067-2.994-.74-.81-1.777-1.253-3.05-1.346h-.024zm.463 1.63a.305.305 0 0 0-.3.287c-.008.167.12.31.288.32.523.028.875.175 1.113.422.24.245.388.62.416 1.164a.304.304 0 0 0 .605-.03c-.03-.644-.215-1.178-.58-1.557-.367-.378-.893-.574-1.52-.607h-.018z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.shareon > .vkontakte {
|
||||
background-color: #4680c2;
|
||||
background-color: #0077ff;
|
||||
}
|
||||
.shareon > .vkontakte:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.058 19.504h-2.616c-.99 0-1.297-.787-3.076-2.59-1.55-1.501-2.236-1.704-2.617-1.704-.534 0-.687.153-.687.89v2.363c0 .636-.202 1.017-1.88 1.017-2.77 0-5.845-1.677-8.004-4.804C.925 10.103.034 6.672.034 5.961c0-.381.153-.737.89-.737H3.54c.66 0 .915.305 1.17 1.016 1.295 3.736 3.456 7.014 4.345 7.014.33 0 .483-.153.483-.99V8.399c-.102-1.78-1.042-1.931-1.042-2.566 0-.306.255-.61.66-.61h4.117c.56 0 .762.304.762.964v5.211c0 .558.255.762.407.762.33 0 .61-.204 1.22-.813 1.88-2.11 3.227-5.362 3.227-5.362.178-.381.483-.737 1.145-.737h2.616c.788 0 .966.405.788.965-.33 1.526-3.532 6.048-3.532 6.048-.28.457-.381.66 0 1.17.28.381 1.194 1.169 1.805 1.88 1.118 1.27 1.98 2.338 2.21 3.076.255.735-.128 1.116-.864 1.116z'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.199 4.841H.11c.194 9.312 4.85 14.907 13.012 14.907h.462v-5.327c3 .299 5.268 2.492 6.178 5.327H24c-1.164-4.237-4.223-6.58-6.133-7.475 1.91-1.105 4.596-3.79 5.238-7.432h-3.85c-.836 2.955-3.313 5.641-5.67 5.895V4.84h-3.85v10.326C7.347 14.57 4.333 11.675 4.199 4.84Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.shareon > .whatsapp {
|
||||
background-color: #25d366;
|
||||
}
|
||||
.shareon > .whatsapp:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue