mo tweaks

makesite.py

@@ -344,7 +344,8 @@ def _split(self):
                 # Process header
                 level = len(line.split(" ")[0])
                 title = line.split(" ", 1)[1]
-                title_short = title.split("(")[0].split("<")[0].strip().replace("`", "")
+                title_short = "".join(c for c in title if ord(c) < 256).strip()
+                title_short = title_short.split("(")[0].split("<")[0].strip().replace("`", "")
                 headers.append((level, title_short))
                 parts.append((level, title_short, title))
             else:
@@ -366,7 +367,7 @@ def to_html(self):
                     .replace("`", "<code>", 1)
                     .replace("`", "</code>", 1)
                 )
-                ts = title_short.lower()
+                ts = title_short.lower().replace(" ", "-")
                 if part[0] == 1:
                     htmlparts.append(self.date_and_tags_html)
                     htmlparts.append("<h1>%s</h1>" % title_html)

pages/index.md

@@ -1,48 +1,47 @@
 <img src='pygfx.png' width='96px' height='96px' />
-<span style='font-size:64px; font-family:Consolas, "DejaVu Sans Mono", Monaco, "Courier New", Courier, monospace; position: relative; top: -20px; left: 10px;'>pygfx.org</span>
+<span style='font-size:64px; font-family:Consolas, "DejaVu Sans Mono", Monaco, "Courier New", Courier, monospace; position: relative; top: -20px; left: 10px;'>pygfx-org</span>
 
+*The collective behind the Pygfx render engine and associated projects.*
 
 ## 💫 Projects
 
 <div class=projectbox>
-    <h3>Pygfx</h3>
     <img class='stars-badge' src='https://img.shields.io/github/stars/pygfx/pygfx'/>
+    <h3>Pygfx</h3>
     <i>A powerful render engine for Python</i><br><br>
-    Repo: <a href="https://github.com/pygfx/pygfx">github.com/pygfx/<b>pygfx</b></a><br>
-    Docs: <a href="https://pygfx.readthedocs.io"><b>pygfx</b>.readthedocs.io</a><br>
+    <img src='gh32.png' height=16 /> <a href="https://github.com/pygfx/pygfx">github.com/pygfx/<b>pygfx</b></a><br>
+    <img src='rtd.png' height=16 /> <a href="https://pygfx.readthedocs.io"><b>pygfx</b>.readthedocs.io</a><br>
 </div>
 
 <div class=projectbox>
-    <h3>wgpu-py</h3>
     <img class='stars-badge' src='https://img.shields.io/github/stars/pygfx/wgpu-py'/>
+    <h3>wgpu-py</h3>
     <i>WebGPU for Python</i><br><br>
-    Repo: <a href="https://github.com/pygfx/wgpu">github.com/pygfx/<b>wgpu</b></a><br>
-    Docs: <a href="https://wgpu-py.readthedocs.io"><b>wgpu-py</b>.readthedocs.io</a><br>
+    <img src='gh32.png' height=16 /> <a href="https://github.com/pygfx/wgpu">github.com/pygfx/<b>wgpu</b></a><br>
+    <img src='rtd.png' height=16 /> <a href="https://wgpu-py.readthedocs.io"><b>wgpu-py</b>.readthedocs.io</a><br>
 </div>
 
 <div class=projectbox>
     <h3>Other</h3>
     <i>Projects that we also contribute to</i><br><br>
-    <a href='https://github.com/gfx-rs/wgpu-native'>wgpu-native</a><br>
-    <a href='https://github.com/vispy/jupyter_rfb'>jupyter_rfb</a><br>
-    <a href='https://github.com/pygfx/pylinalg'>pylinalg</a>
+    <img src='gh32.png' height=16 /> <a href='https://github.com/gfx-rs/wgpu-native'>wgpu-native</a><br>
+    <img src='gh32.png' height=16 /> <a href='https://github.com/vispy/jupyter_rfb'>jupyter_rfb</a><br>
+    <img src='gh32.png' height=16 /> <a href='https://github.com/pygfx/pylinalg'>pylinalg</a>
 </div>
 
 
 ## 🚀 Mission
 
 We are dedicated to bring powerful and reliable visualization to the Python world.
-
-We believe that wgpu is the future for graphics and bring it to Python with the wgpu-py library. On top of that, we build pygfx: a modern, versatile, and Pythonic rendering engine.
-
+We believe that WebGPU is the future for graphics and bring it to Python with the wgpu-py library. On top of that, we build Pygfx: a modern, versatile, and Pythonic rendering engine.
 Pygfx provides a basis on top of which a multitude of visualizations become possible. From applications to libraries, from games to plotting.
 
 
 <a name='sponsors' />
 
 ## ❤️ Current sponsors
 
-Pygfx and wgpu are free. To develop these projects we rely on [funding from our sponsors](sponsor.html). The more groups "chip in", the more time we can spend on moving the projects forwards. Recurring funding is especially welcome.
+Pygfx and wgpu are open source and free to use. To develop these projects we rely on funding from our sponsors. The more groups "chip in", the more time we can spend on moving the projects forwards. Recurring funding is especially welcome. [Learn more ...](sponsor.html)
 
 <div class=sponsorbox>
     <h3>Ramona optics</h3>

pages/sponsor.md

@@ -3,15 +3,15 @@
 # Sponsoring Pygfx
 
 
-## 🧑‍🤝‍🧑 Keep pygfx independent and active
+## 🧑‍🤝‍🧑 Keep Pygfx independent and active
 
-Maintaining and growing wgpu and pygfx costs time and dedication. We rely on sponsors to maintain (and grow) the project further.
-If you represent a company / group that relies on pygfx or wgpu-pu, we kindly ask for a sponsorship. That way we can keep replying to issues, review pull request, and move pygfx further.
+Maintaining and growing wgpu and Pygfx costs time and dedication. We rely on sponsors to maintain (and grow) the project further.
+If you represent a company / group that relies on Pygfx or wgpu-pu, we kindly ask for a sponsorship. That way we can keep replying to issues, review pull request, and move Pygfx further.
 
 
 ## 🎁 What you get
 
-* Most importantly, sponsors help ensure that pygfx is actively maintained!
+* Most importantly, sponsors help ensure that Pygfx is actively maintained!
 * Sponsors also get priority on bug reports and feature requests.
 * An honorable mention on the front page of pygfx.org!
 * In the top tiers, one-on-one support to help you use Pygfx to the max.
@@ -25,18 +25,19 @@ We provide a few ways to get funds to us. If you have questions, do not hesitate
 
 ### Directly
 
-You can sponsor us directly via *Almar Klein scientific computing*, based in The Netherlands. We can provide an invoice and you pay by bank transfer.
-Incoming funds for Pygfx are received at a dedicated bank account, and insights into how the funds are spent will be published on a yearly basis.
+The pygfx-org is a trademark of *Almar Klein scientific computing*, based in The Netherlands.
+We can provide an invoice and you pay by bank transfer.
+Incoming funds for Pygfx are received at a dedicated bank account, and insights into how the funds are spent are published on a yearly basis.
 
 
-### Via OpenCollective
+### Via Github
 
-You can sponsor us via [https://opencollective.com/pygfx](https://opencollective.com/pygfx). These funds and how they are spent are publicly visible.
+You can also sponsor via Github's sponsor system: [https://github.com/sponsors/pygfx](https://github.com/sponsors/pygfx). These funds are payed out by GitHub to the same bank account as mentioned above.
 
 
-### Via Github
+### Via OpenCollective
 
-You can also sponsor via Github's sponsor system: https://github.com/sponsors/pygfx
+You can sponsor us via [https://opencollective.com/pygfx](https://opencollective.com/pygfx). These funds and how they are spent are publicly visible.
 
 
 ## 💰 How funds are spent

style.css

@@ -41,7 +41,7 @@ body {
     font-family: Ubuntu,"Helvetica Neue",Arial,sans-serif;
     color: #404040;
     font-weight: normal;
-    background: #fcfcfc;
+    background: #fafafa;
 }
 .content {
     box-sizing: border-box;
@@ -53,11 +53,10 @@ body {
     margin: 0;
     margin-top: 1em;
 
-    /*
-    background: #fcfcfc;
-    */
-    border-radius: 6px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #fff;
+    border: 1px solid #aaa;
+    border-radius: 8px;
+    xx-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }
 p, li {
     line-height: 150%;
@@ -68,28 +67,34 @@ p, li {
     width: 100%;
     max-width: none;
 
-    background: #f8f8f8;
     padding: 0.5em 1em;
     overflow: hidden;
     white-space: nowrap;
 
-    border-radius: 6px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #fff;
+    border: 1px solid #aaa;
+    border-radius: 8px;
+    xx-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }
 
 .projectbox, .sponsorbox, .profilebox {
     box-sizing: border-box;
     display: inline-block;
     position: relative; /* so stuff can be abs-positined inside */
     width: 100%;
-    background: #f1f1f1;
-    padding: 1em 1em;
+    line-height: 1.5;
+    background: #fcfcfc;
+    padding: 20px;
     margin: 0.5em;
-    border-radius: 6px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
 }
 .profilebox {
     text-align: center;
 }
+.projectbox, .sponsorbox {
+    padding-top: 0;
+}
 .projectbox h3, .sponsorbox h3 {
     color:#444;
     font-size: 110%;
@@ -102,14 +107,14 @@ p, li {
 img.stars-badge {
     position: absolute;
     display: block;
-    top: 7px;
-    right: 7px;
+    top: 10px;
+    right: 10px;
 }
 
 img.profile {
-    width: 100px;
-    height: 100px;
-    border-radius: 50px;
+    width: 80px;
+    height: 80px;
+    border-radius: 40px;
 }
 
 @media screen and (min-width:  500px) {
@@ -120,7 +125,7 @@ img.profile {
         width: 450px;
     }
     .profilebox {
-        width: 150px;
+        width: 130px;
     }
 }
 @media screen and (min-width:  1300px) {
@@ -228,15 +233,15 @@ code {
     padding: 0em 1em;
 }
 h1, h2, h3, h4 {
-    color: #999;
+    color: #555;
     font-family: Consolas, "DejaVu Sans Mono", Monaco, "Courier New", Courier, monospace;
 }
 a.header:hover {
     color: #2A4;
 }
 h2 {
     margin-top: 1.3em;
-    border-bottom: 1px solid rgba(20, 100, 40, 0.3);
+    xx-border-bottom: 1px solid rgba(20, 100, 40, 0.3);
 }
 h2 code, h3 code, h4 code {
     color: #369;