supporters.md

layout	page
title	Supporters
page-class	page--blog page--supporters
meta
main
permalink	/supporters/
lux	Supporters
supporters	name url avatar tier Joan Leon https://www.nucliweb.net/ joan-leon.jpg insider name url avatar tier alessioalex https://github.com/alessioalex alessioalex.jpeg subscriber name url avatar tier Rich Holman https://richholman.com rich-holman.png supporter name url avatar tier Risko Ruus https://www.linkedin.com/in/risko-ruus/ risko-ruus.jpeg seeker name url avatar tier Hekla https://hekla.dev hekla.png insider name url avatar tier Robin Marx https://www.linkedin.com/in/rmarx/ robin-marx.jpg insider name url avatar tier Andy Bell https://bell.bz andy-bell.jpg insider name url avatar tier Paul Calvano https://paulcalvano.com/ paul-calvano.jpg insider name url avatar tier Sylvain Laneyrie https://www.linkedin.com/in/sylvainlaneyrie/ sylvain-laneyrie.webp insider name url avatar tier Patrick Meenan https://bsky.app/profile/patmeenan.com patrick-meenan.jpg name url avatar tier Speed Kit https://www.speedkit.com/ fabian-krumbholz.jpg insider

<style> .c-list-supporters { list-style: none; margin-left: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.5rem; align-items: center; } .c-list-supporters__item { display: flex; align-items: center; width: 100%; position: relative; } .c-list-supporters__item:target { background-color: #ffc; outline: 0.75rem solid #ffc; scroll-margin-block-start: 1.5rem; } .c-list-supporters__item::before { content: var(--tier); position: absolute; top: 0; left: 0; transform: translate(-25%, -25%); font-size: 1.5rem; line-height: 1; width: 1em; background-color: #f9f9f9; border-radius: 100%; } .c-list-supporters__link { text-decoration: none; display: flex; align-items: center; width: 100%; gap: 0.75rem; } .c-list-supporters__avatar { border-radius: 50%; flex-shrink: 0; width: 4.5rem; height: 4.5rem; object-fit: cover; } </style>

These wonderful people support CSS Wizardry.

Become a Supporter or Shuffle Supporters

---

{% assign shuffled = page.supporters | sample: page.supporters.size %}

{% for person in page.supporters %} {% assign slug = person.name | slugify: 'default' %}

<li id="supporter:{{ slug }}" class="c-list-supporters__item" style="
  {% case person.tier %}
    {% when 'supporter' %}
      --tier: '☕️';
    {% when 'subscriber' %}
      --tier: '🧑‍💻';
    {% when 'insider' %}
      --tier: '🗝️';
    {% when 'seeker' %}
      --tier: '🔮';
    {% when 'partner' %}
      --tier: '🤝';
    {% else %}
  {% endcase %}
">
  <a href="{{ person.url }}" class="c-list-supporters__link" rel="ugc">
    <img
      src="/img/content/supporters/{{ person.avatar }}"
      alt="{{ person.name }}’s avatar"
      width="48"
      height="48"
      class="c-list-supporters__avatar"
    >
    {{ person.name }}
  </a>
</li>

{% endfor %}

<script> (() => { function randomiseSupporters() { const list = document.getElementById('jsSupportersList'); const items = Array.from(list.children); for (let i = items.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [items[i], items[j]] = [items[j], items[i]]; } items.forEach(item => list.appendChild(item)); } randomiseSupporters(); document.getElementById('jsRandomiseSupporters') .addEventListener('click', randomiseSupporters); })(); </script>