From 0c8b0737c1425239a8ef04a80f0cbd73ef5ddd9f Mon Sep 17 00:00:00 2001 From: lilly Date: Fri, 12 Dec 2025 12:25:48 +0100 Subject: [PATCH 1/6] split css style into layers for explicit per-site styling --- assets/css/style.css | 108 +++++++++++++++++++++++-------------------- 1 file changed, 58 insertions(+), 50 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 1a91953..a1038c2 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,62 +1,70 @@ -:root { - /* Use a shade of the c3cat logos pink, which works nicely as a link color. */ - --accent-color-light: #DC049B; - /* A modified version of accent-color-light, which works nicely as a link color - * and with the dark theme */ - --accent-color-dark: #dc49b0; -} +@layer base, per-site; -body { - font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif; - - text-align: left; - - /* Use dark grey instead of black to be lighter on the eyes. But also a grey - * which still works with the link color nicely. */ - background-color: #ffffff; - color: #2B2B2B; - - @media (prefers-color-scheme: dark) { - /* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */ - /* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */ - background-color: #1b1b1b; - color: #ebebeb; +@layer base { + :root { + /* Use a shade of the c3cat logos pink, which works nicely as a link color. */ + --accent-color-light: #DC049B; + /* A modified version of accent-color-light, which works nicely as a link color + * and with the dark theme */ + --accent-color-dark: #dc49b0; } -} -.container { - max-width: 600px; - margin: 0 auto; - padding: 0 5px; -} + body { + font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif; -footer { - margin-top: 4rem; -} + text-align: left; -img { - width: 100%; -} + /* Use dark grey instead of black to be lighter on the eyes. But also a grey + * which still works with the link color nicely. */ + --bg-color: #ffffff; + --fg-color: #2b2b2b; + --accent-color: var(--accent-color-light); + background-color: var(--bg-color); + color: var(--fg-color); - -a:link, a:visited { - color: var(--accent-color-light); - @media (prefers-color-scheme: dark) { - color: var(--accent-color-dark); + @media (prefers-color-scheme: dark) { + /* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */ + /* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */ + --bg-color: #1b1b1b; + --fg-color: #ebebeb; + --accent-color: var(--accent-color-dark); + } } -} + .container { + max-width: 600px; + margin: 0 auto; + padding: 0 5px; + } -.title { - text-align: center; -} + footer { + margin-top: 4rem; + } -.hero-img { - max-width: 500px; - display: block; - margin: 0 auto; -} + img { + width: 100%; + } + + a:link, a:visited { + color: var(--accent-color); + } + + u { + text-decoration-color: var(--accent-color); + } + + .title { + text-align: center; + } + + .hero-img { + max-width: 500px; + display: block; + margin: 0 auto; + } + + p.bigger { + font-size: 1.2rem; + } -p.bigger { - font-size: 1.2rem; } From d441ba91c3d6acc4a7a3ed04a065f8f75616d29d Mon Sep 17 00:00:00 2001 From: lilly Date: Fri, 12 Dec 2025 12:25:48 +0100 Subject: [PATCH 2/6] restructure landing page to make specific sub-sites easier to discover --- index.html | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 50 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 69686ac..d344b3a 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,41 @@ c3cat + +
@@ -16,9 +51,21 @@

Resources

-

The "original" cat ear model we used was borrowed from Printables. - Since then, some people started to develop an improved and parametrized version with OpenSCAD.

-

See the CCCHH wiki for the latest information on signs, 3D models, etc.

+ + +

Archive

+

+ These are not necessarily the most up-to-date version but we maintain them here in case you have our link saved or found an old kit from us. +

+

History

A few people from Hamburg started to 3D-print and wear cat ear headbands at EH20 which lead to some "can I get one, too" reactions. From 2c63e03fffd7ee2cfc2157a58278f77f497b7722 Mon Sep 17 00:00:00 2001 From: lilly Date: Fri, 12 Dec 2025 12:25:48 +0100 Subject: [PATCH 3/6] make header img of rbg-ears.html point back to landing page --- rgb-ears.html | 54 ++++++++++++++++++++++++++------------------------- 1 file changed, 28 insertions(+), 26 deletions(-) diff --git a/rgb-ears.html b/rgb-ears.html index ea9f6b0..0cb9718 100755 --- a/rgb-ears.html +++ b/rgb-ears.html @@ -10,15 +10,17 @@

Addressable LED Catears

- - - C3CAT with a cat ear headband around the 'A' - + + + + C3CAT with a cat ear headband around the 'A' + + We started distributing 3D printed cat ears on a large scale a while ago. At the 37C3 we started adding LEDs to some of them in static colors - you can find the needed parts for that over here. Over the year some us wanted to build addressable ligth-up catears, with different functions. - We decided to provide one guide for a more basic version and below some modifications to improve it. + We decided to provide one guide for a more basic version and below some modifications to improve it.

Base version

@@ -37,36 +39,36 @@ You will need a chromium based browser for the flashing process (Firefox will no Picture of soldered cable
Picture of shrinked tubed cables
Fully shrinked tubed cable
- -

Step 2: Prepare the LED strip

+ +

Step 2: Prepare the LED strip

Pull a 1cm piece of the 7mm heat shrink over the long cable. We now solder the 1cm end to the LED strip. To do this, we first need to find the correct end of the strip. Our strip had the following labeling on the back - we need the end with an INPUT pin (marked IN here): Backside of LED strip
Fully assambled LED strip
- Now solder the cable to the LED strip according to the inputs (we have chosen red=5V, black=GND and yellow/green=data). Then protect the soldered joint with the piece of shrink tubing that we put on the cable. + Now solder the cable to the LED strip according to the inputs (we have chosen red=5V, black=GND and yellow/green=data). Then protect the soldered joint with the piece of shrink tubing that we put on the cable.

Step 3: Attach cable to the ESP

We now solder the other connector to the ESP. The red cable to the 5V pin, the black cable to GND and we have chosen pin 3 for the green data cable: - Picture with Pins
+ Picture with Pins
Soldered cables (back)
Soldered cables (front)

Step 4: Prepare the case

As we want to close the case with a screw, we use a heat insert with an M3 thread. Of course, a modified version of the case can also be used, in which the screw is held directly in the 3D print - this is not suitable for frequent opening, as the plastic thread wears out quickly. So: If applicable, heat it according to the instructions of the heat inserts and place it in the 3D print. - + heat set insert - +

Step 6: Assemble the case

Now pack the ESP into the case, place the button and fix the cables with hot glue if necessary. - + finished case - +

Step 7: Glue the LED strip to the 3D-Printed catears

Now we are finished the hardware @@ -92,7 +94,7 @@ you can configure a AP-Password to secure your catears against those Eggdy Hacke Lit-up catears balanced on a glass bottle as a stand. In front of the bottle there is a white plastic box, connected to the catears and a black powerbank next to it. - +

I wore them for the first time at gpn22 and tested them during the party there. Worked well, looked great and quite some people asked me how to built them. So here are instructions on how to build your own.

@@ -127,7 +129,7 @@ you can configure a AP-Password to secure your catears against those Eggdy Hacke
  • connectors
  • small bolts and nuts (I used m2)
    • - +

    Buildsteps

    Electronics and Case
    @@ -136,7 +138,7 @@ you can configure a AP-Password to secure your catears against those Eggdy Hacke

    - Connect the Microphone to the ESP. + Connect the Microphone to the ESP. See here for the pinout. For my INMP441 I've used the following pins : 

    I2S SD: 3
@@ -147,14 +149,14 @@ I2S MCLK: N/A

    But you can pick any supported microphone and are quite flexible in choosing those pins.

    - +

    The ws2812 data pin from the stripe on the ears is connected to `GPIO 4`. See [here](https://mm.kno.wled.ge/basics/getting-started/#quick-start-guide) on general info on howto connect those LEDs. I've picked a 100 Ohm resistor and skipped the level shifter.
    My board has another ws2812 LED on `GPIO 21` connected. I use this one as status LED. It's visible evenfrom outside the case.
    For power I've connected an USB C socket. It's secured with a cable tie. I picked this option over using the port on the devboard because the traces do not like the \~3A peak current I'd like to draw. It's recommended to add some random amount of capacitors as well. Considering I plan to support a 15W LED strob mode as it's probably not a bad idea. WLED recommends 1000µF.
    I've used m2 screws to connect board and case. To protect against stress I'd recommend to secure all external cables and sockets to the case and not only to the PCB.

    - +
    Ears
    Catears with a powered off led strip glued to it. At the end of the cable coming from the catears is a plug with three exposed pins. @@ -167,7 +169,7 @@ I2S MCLK: N/A

    You need a thin LED stripe for this build. I picked up a 4mm wide one from Aliexpress which came in a silicone tube. I'd recommend a high pixel density, like 200/m, for maximum blink. For the linked 3d model this results in the need for 31cm or 60 LEDs of 200 LEDs/m stripe. I'd recommend to power on the stripe, turn on 60 LEDs, mark them, turn the stripe off and then cut it to length.

    - + @@ -175,7 +177,7 @@ I2S MCLK: N/A

    At areas of high stress (narrow bends) I've reinforced the stripe with transparent string and glue. This keeps the stripe and ears from seperating.

    - + @@ -213,31 +215,31 @@ Most importantly: experiment! Find out what looks you like. Try out what effects

    Use a different connector as I did

    - +
    No USB power delivery support

    The USB C breakout I used doesn't support USB PD. Use a different module or USB A -> C cables.

    - +
    Too much bass (lol)

    If it gets too loud the microphone clips out even on minimal gain settings. Either use a line in or add sound isolation. A different microphone could help as well. Or ignore the problem, it still blinks good enough.

    - +
    More Documentation

    I took way too few pictures of the ears in action. I'd realy love to have more pictures of them and some other wearables I plan to build. Hopefully fixable on the next event.

    - +
    Hardware Controlls and Buttons

    Looking at a phone screen is annoying. I'd love a button to cycle presets.

    - +
    Sync

    WLED has the option to sync multiple devices via wifi... I've some plans. -

    +