diff --git a/assets/css/style.css b/assets/css/style.css index 1a91953..7df0fb6 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -10,17 +10,22 @@ body { font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif; text-align: left; + line-height: 1.4; /* 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; + --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 */ - background-color: #1b1b1b; - color: #ebebeb; + --bg-color: #1b1b1b; + --fg-color: #ebebeb; + --accent-color: var(--accent-color-dark); } } @@ -40,12 +45,12 @@ img { a:link, a:visited { - color: var(--accent-color-light); - @media (prefers-color-scheme: dark) { - color: var(--accent-color-dark); - } + color: var(--accent-color); } +u { + text-decoration-color: var(--accent-color); +} .title { text-align: center; @@ -60,3 +65,123 @@ a:link, a:visited { 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; + } +} + +ol.step-by-step-instructions { + margin-top: 1rem; + + li { + margin-top: 0.5rem; + margin-bottom: 1rem; + + &::marker { + color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%); + font-size: larger; + } + + &>div { + display: flex; + flex-direction: row; + gap: 1ch; + justify-content: space-between; + } + + input[type="checkbox"] { + margin: 4px; + width: 2rem; + height: 2rem; + flex-shrink: 0; + flex-grow: 0; + } + } +} + +dl.key-value { + display: grid; + grid-template-columns: 2ch [keys] fit-content(30ch) [values] auto; + column-gap: 2ch; + row-gap: 0.2rem; + + &>dt { + text-decoration-line: underline; + text-decoration-color: var(--accent-color); + grid-column-start: keys; + text-align: end; + } + &>dd { + margin-left: 0; + grid-column-start: values; + &::before { + content: "➡"; + margin-right: 2ch; + color: color-mix(in hsl, var(--bg-color) 30%, var(--fg-color) 70%); + } + } +} + +fieldset#detail-grade-picker { + border-color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%); + display: flex; + align-items: baseline; + + label { + flex-grow: 1; + margin-left: 0.5ch; + } + + input,label { + cursor: pointer; + } + + /* input[type="radio"]:checked+label { + text-decoration-line: underline; + text-decoration-color: var(--accent-color); + } */ +} + + +/* hide items with .detail-default-hide if the corresponding .detail-show-(all|simplified|short) is not currently active */ +body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked)) .detail-default-hide.detail-show-all { + display: none; +} +body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked)) .detail-default-hide.detail-show-simplified { + display: none; +} +body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked)) .detail-default-hide.detail-show-short { + display: none; +} + +/* hide items with .detail-hide-(all|simplified|short) if the corresponding radio button is active */ +body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked) .detail-hide-all { + display: none; +} +body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked) .detail-hide-simplified { + display: none; +} +body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked) .detail-hide-short { + display: none; +} 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/rgb-ears2.html b/rgb-ears2.html new file mode 100755 index 0000000..6a45051 --- /dev/null +++ b/rgb-ears2.html @@ -0,0 +1,584 @@ + + + + + + + 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. + +
+
+ + + + + + +
+ + +