shr-buttons
Version:
Simple, customizable sharing buttons
124 lines (110 loc) • 4.37 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
Shr - Simple, clean, and customizable social sharing buttons
</title>
<meta name="description" content="Simple, clean, and customizable social sharing buttons" />
<meta name="author" content="Sam Potts" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Styles -->
<link rel="stylesheet" href="../dist/shr.css" />
<!-- Demo styles -->
<link rel="stylesheet" href="../dist/app.css" />
<!-- Opengraph -->
<meta property="og:title" content="Shr - Simple, clean, and customizable social sharing buttons" />
<meta property="og:site_name" content="Shr" />
<meta property="og:url" content="https://shr.one" />
<!-- Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@sam_potts" />
<meta name="twitter:creator" content="@sam_potts" />
<meta name="twitter:card" content="summary_large_image" />
<!-- Preload -->
<link
rel="preload"
as="font"
crossorigin
type="font/woff2"
href="https://cdn.plyr.io/static/fonts/gordita-regular.woff2"
/>
<link
rel="preload"
as="font"
crossorigin
type="font/woff2"
href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2"
/>
<link
rel="preload"
as="font"
crossorigin
type="font/woff2"
href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2"
/>
<link
rel="preload"
as="font"
crossorigin
type="font/woff2"
href="https://cdn.plyr.io/static/fonts/gordita-black.woff2"
/>
<!-- Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132699580-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
window.dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-132699580-2');
</script>
</head>
<body>
<header>
<h1>Sh<span>a</span>r<span>e</span></h1>
<p>
Simple, clean, and customizable social sharing buttons by
<a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a>
</p>
</header>
<main id="main">
<div class="examples">
<a
href="https://github.com/sampotts/shr"
target="_blank"
class="shr__button shr__button--github js-shr"
>
<svg><use xlink:href="#shr-github"></use></svg>Star
</a>
<a
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fshr.one"
target="_blank"
class="shr__button shr__button--facebook js-shr"
>
<svg><use xlink:href="#shr-facebook"></use></svg>Share
</a>
<a
href="https://twitter.com/intent/tweet?text=Simple+sharing+buttons+for+social+networks.&url=https%3A%2F%2Fshr.one&via=sam_potts"
target="_blank"
class="shr__button shr__button--twitter js-shr"
>
<svg><use xlink:href="#shr-twitter"></use></svg>Tweet
</a>
<a
href="http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fshr.one&description=Simple+sharing+buttons+for+social+networks."
target="_blank"
class="shr__button shr__button--pinterest js-shr"
>
<svg><use xlink:href="#shr-pinterest"></use></svg>Pin it
</a>
</div>
</main>
<aside>
<a href="https://github.com/sampotts/shr" target="_blank" class="btn">Download on GitHub</a>
</aside>
<!-- Demo script -->
<script src="../dist/app.js"></script>
</body>
</html>