Distributopia = distributed utopia. The name's inspired by Framasoft's "Contributopia". Mainly, small Fediverse projects / research.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
lostinlight 83c4600928 Initial commit 2 years ago
..
public Initial commit 2 years ago
src Initial commit 2 years ago
.eslintrc Initial commit 2 years ago
.gitignore Initial commit 2 years ago
.gitlab-ci.yml Initial commit 2 years ago
.stylelintrc Initial commit 2 years ago
LICENSE.md Initial commit 2 years ago
README.md Initial commit 2 years ago
cool.png Initial commit 2 years ago
gulpfile.js Initial commit 2 years ago
package.json Initial commit 2 years ago
uncool.png Initial commit 2 years ago

README.md

🐧 share / connect / support buttons

You are probably tired of seeing this everywhere

preview screen

*How about this instead?

preview screen

*inspired by FSFE buttons

Make your visitors wonder what those icons represent.

Help promoting federated, privacy-friendly networks.

DEMO page

What are these?

These are social buttons for your personal blog, profile. They can be added to any page, including static websites.

Usage

The collection of buttons is basically a set of SVGs and some styles.

1. Install

Copy styles.min.css and share.min.js into your project directory. You will also find unminified versions in public folder.

Note: Only sharing buttons require the script. If you intend to use connect or support buttons, add just the styles file.

2. Include

Include styles.min.css with a <link> tag in the <head> of your page, and share.min.js with a <script> tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>...</title>
    <link rel="stylesheet" href="styles.min.css">
  </head>
  <body>
    <!-- buttons go here -->
    <script src="share.min.js"></script>
  </body>
</html>

Include icons that you plan to use as <symbol> in <head>. You'll find all available SVGs in example page code. This way of using SVGs provides easy manipulation.

<!-- ... -->
  <head>
    <link rel="stylesheet" href="styles.min.css">
    <svg xmlns="https://www.w3.org/2000/svg" style="display: none;">
      <symbol id="icon-friendica" viewBox="0 0 24 24">
        <path d="M7.525 23.347c-.847-.005-2.535-.86-2.908-3.15-.035-.216 0-15.89 0-15.89S5.2 1.086 8.01.65h11.433v6.37h-7.267v5.087h7.267v4.796h-7.267v6.445s-4.65-.002-4.65 0z"/>
      </symbol>
    </svg>
  </head>
<!-- ... -->

3. Use

Now add buttons referencing SVGs in <use> tag, like so:

<a href="https://yourfriendicalink.wow" class="dex-btn wo-text circle friendica" title="Connect on Friendica" target="_blank" rel="external noopener">
  <svg role="img" class="dex-icon" width="16" height="16">
    <use xlink:href="#icon-friendica"></use>
  </svg>
</a>

Note: Don't forget to replace demo href URL with your link.

Sharing buttons are a bit more complex. They require a script mentioned above and an overlay input.

<input name="popup" id="overlay" class="overlay" type="radio">

<div class="share">
  <label class="dex-btn rounded  wo-text mastodon" title="Share this page on Mastodon" for="mastodon-share">
    <svg role="img" class="dex-icon" width="16" height="16">
      <use xlink:href="#icon-mastodon"></use>
    </svg>
  </label>
  <input name="popup" id="mastodon-share" class="hidden" type="radio">
  <span class="popup">
    <label for="overlay"></label>
    <input name="podurl" value="" placeholder="Mastodon URL (witches.town)" type="text"><button class="share-btn" type="submit"  value="mastodon">OK</button>
  </span>
</div>

Styling

Following utility classes are provided to change button styling.

  1. .rounded - rounded corners

  2. .oval - more rounded corners

  3. .circle - circle icon

  4. .wo-text - fixed width (34px by default) for buttons without text

For more examples see demo page.

Examples

Some websites using these buttons: To include yours, please, add a link below and open a merge request