Indie RPG Club
A webring for the indie ttrpg and larp community — including blogs, podcasters, groups, meetups, mini-cons, and small press publishers.
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!
- Read our Code of Conduct
- Add your site using the form below. The webring admins will then look at your site and handle your request.
- 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.