Indie RPG Club

A webring for the indie ttrpg and larp community — including blogs, podcasters, groups, meetups, mini-cons, and small press publishers.

Code of Conduct

What's this?

A community of sites around indie ttrpg and larp! Also known as a webring. Each member includes a badge on their site that links to the previous and next sites in the ring. Kids in the 90s used to love it!

How to join!

  1. Read our Code of Conduct
  2. Add your site using the form below. The webring admins will then look at your site and handle your request.
  3. Add the webring links to your website (see Add The Banner below). I'm trusting everyone will add the webring links to their site. You don't want to break the ring! I will review sites after a week or so and bug you if you have not yet added the links.

* alternately if know your way around Github, you can open a pull request.

Add the banner

Once you've joined the ring, embed the web component banner using the code shown below or build it yourself with html.

Large Banner

<webring-banner>
<!-- placeholder replaced when component javascript loads -->
<p>Member of the <a href="https://www.indierpg.club">Indie RPG Club</a> webring</p>
<a href="https://www.indierpg.club/prev">Previous</a>
<a href="https://www.indierpg.club/random">Random</a>
<a href="https://www.indierpg.club/next">Next</a>
</webring-banner>
<script async src="https://www.indierpg.club/embed.js" charset="utf-8"></script>

Small Banner

<webring-banner-small>
<!-- placeholder replaced when component javascript loads -->
<p>Member of the <a href="https://www.indierpg.club">Indie RPG Club</a> webring</p>
<a href="https://www.indierpg.club/prev">Previous</a>
<a href="https://www.indierpg.club/random">Random</a>
<a href="https://www.indierpg.club/next">Next</a>
</webring-banner-small>
<script async src="https://www.indierpg.club/embed.js" charset="utf-8"></script>

Styling The Banner Component

The banner is a web component can be styled using css variables and by targeting parts. See CSS-Tricks Styling Web Components for info on this.

  • The banner wrapper — including background color, border, shadow, max-width — can be styled just by using the element name (i.e., webring-banner or webring-banner-small)
  • Using css variables: --wr-link; --wr-hover: #2b16ff; --wr-border: 1px solid #DDD;
  • Targeting the parts: image, desc, prefix, title, members, info, prev, random, next

Build Your Own HTML

You can also just include the image, title, and links without the web component and style it yourself.

<img src="https://www.indierpg.club/assets/images/avatar.png'" alt="Indie RPG Club dice logo"/>
<p>Member of the <a href="https://www.indierpg.club">Indie RPG Club</a> webring</p>
<a href="https://www.indierpg.club/prev">Previous</a>
<a href="https://www.indierpg.club/random">Random</a>
<a href="https://www.indierpg.club/next">Next</a>

Credits

This site is a fork of the Webring Starter Kit. If you want to start your own webring, you can fork mine or the original and follow the instructions in the README.