diff --git a/assets/css/style.css b/assets/css/style.css index 1a91953..a12b283 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,62 +1,95 @@ -: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; +@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; + } - text-align: left; + body { + font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif; - /* 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; + text-align: left; + line-height: 1.4; - @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; + /* 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); + + @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; + } + + footer { + margin-top: 4rem; + } + + 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; + } + + section { + margin-top: 3rem; + } + + details { + border: 1px solid var(--accent-color); + border-radius: 8px; + background-color: color-mix(in hsl, var(--accent-color) 20%, var(--bg-color) 80%); + + & > * { + padding: 0.5rem 1ch; + } + + & > summary { + cursor: pointer; + user-select: none; + } + + &[open] > summary { + border-bottom: 1px solid var(--accent-color); + margin-left: 0; + margin-right: 0; + } } } - -.container { - max-width: 600px; - margin: 0 auto; - padding: 0 5px; -} - -footer { - margin-top: 4rem; -} - -img { - width: 100%; -} - - -a:link, a:visited { - color: var(--accent-color-light); - @media (prefers-color-scheme: dark) { - color: var(--accent-color-dark); - } -} - - -.title { - text-align: center; -} - -.hero-img { - max-width: 500px; - display: block; - margin: 0 auto; -} - -p.bigger { - font-size: 1.2rem; -} diff --git a/assets/img/rgb-guide-esp-labeled.jpeg b/assets/img/rgb-guide-esp-labeled.jpeg new file mode 100644 index 0000000..b6dc08a Binary files /dev/null and b/assets/img/rgb-guide-esp-labeled.jpeg differ diff --git a/assets/img/rgb-guide-soldered-isolated-strip.jpeg b/assets/img/rgb-guide-soldered-isolated-strip.jpeg new file mode 100644 index 0000000..dee4243 Binary files /dev/null and b/assets/img/rgb-guide-soldered-isolated-strip.jpeg differ diff --git a/assets/img/rgb-guide-strip.webp b/assets/img/rgb-guide-strip.webp new file mode 100644 index 0000000..5e1dd4d Binary files /dev/null and b/assets/img/rgb-guide-strip.webp differ diff --git a/index.html b/index.html index 69686ac..bd4735b 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. diff --git a/rgb-ears-39c3.html b/rgb-ears-39c3.html new file mode 100755 index 0000000..cb1b662 --- /dev/null +++ b/rgb-ears-39c3.html @@ -0,0 +1,683 @@ + + + + + + + c3cat + + + + +

+

RGB Catear Build Instructions

+ + + + C3CAT with a cat ear headband around the 'A' + + +
+
+ Choose the grade of details you want this guide to appear in + + + + + + + + +
+ +

+ This guide aims to explain in simple terms how to assemble the c3cat catear build kit. + To follow it, you need soldering equipment, a heatgun, a pair of striping pliers as well as one of our build kits.
+ If you did not get a hold of one of those kits, take a look at our BOM. +

+

+ The general project assembly looks like this where each of the components must be connected via soldering points. +

+
+ 
+┌─────┐                          ╭───╮
+│ ESP ├┄┄╼ ╾┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄│   │
+└─────┘
+         ╱ ╲         ╱ ╲          ╱ ╲
+     pluggable      long         catear
+     connector      cable        & leds
+
+
+ +

+ Inside this guide, you will find the following content +

+ +
+ + +
+

Flash the microcontroller

+

+ We recommend to use WLED as a firmware on all our catears. + It offers a wide range of features for display and animation and can be controlled comfortably from your smartphone. +

+
    +
  1. +
    + + +
    +
    2. + +
  2. +
    + + +
    +
    3. + +
  3. +
    + + +
    +
    4. + +
  4. +
    + + +
    +
    5. +
+
+ + +
+

Solder cables to LED strip

+

+ One of the most important steps is to electircally connect the microcontroller to the LED strip. + We will start with the LED side. + + +

+ +
+ TODO: Make the images appear horizontally on large screens + Picture of the backside of an LED strip with its contacts exposed. Three labeled arrows explain which connector carries what + TODO: Actually take a picture of the cables too + Picture of a three-core wire with its insulation stripped off. The three cores are labeled similarly to the picture of the LED strip +
+
    + +
  1. +
    + + +
    +
    2. + +
  2. +
    + + +
    +
    3. + +
  3. +
    + + +
    +
    4. +
+
+ + +
+

Solder Cable to pluggable connector

+

+ The other side of the long cable now needs to be connected to the pluggable connector. +

+
    + +
  1. +
    + + +
    +
    2. + +
  2. +
    + + +
    +
    3. + +
  3. +
    + + +
    +
    4. + +
+
+ + +
+

Solder Pluggable Connector to Microcontroller

+

+ Now you need to solder the other part of the pluggable connector to your microcontroller. +

+

+ TODO: Replace picture with actual ESP +

+ Picture of the microcontroller with labeled arrows pointing to the relevant contacts + +
    + +
  1. +
    + + +
    +
    2. + +
  2. +
    + + +
    +
    3. + +
  3. +
    + + +
    +
    4. + +
+
+ + +
+

Test It!

+

+ Test the whole assembly by connecting the microcontroller to USB-C power. + The LEDs strip should turn on and glow in a warm orange tone. +

+
    +
  1. +
    + + +
    +
    2. +
+
+ + +
+

Finalize the Assembly

+
    + +
  1. +
    + + +
    +
    2. + +
  2. +
    + + +
    +
    3. + +
+
+ + + + + + +
+ + +