ndf-elements/src/templates/my-fork-me.tpl.html

My collection of useful custom elements.

<meta name="robots" content="noindex">

<!--
  Alt CDN: https://unpkg.com/github-fork-ribbon-css@0.2.3/gh-fork-ribbon.css
-->
<template>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
  <style>
  .green:before {
    background-color: #090;
  }
  .gray:before {
    background-color: #333;
  }
  .orange:before {
    background-color: #f80;
  }

  .github-fork-ribbon:before {
    background-color: var(--my-fork-me-color, #c00);
  }

  .github-fork-ribbon:focus:before,
  .github-fork-ribbon:hover:before {
    background-color: var(--my-fork-me-focus-color, #e00);
    transition: all .7s;
  }
  </style>

  <a
    class="github-fork-ribbon right-top"
    href="http://url.to-your.repo"
    data-ribbon="Fork me on GitHub"
    title="Fork me on GitHub"
  ><slot>Fork me on GitHub</slot></a>
</template>