new rgb guide & small homepage restructure #9
65
3d-printables.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="assets/css/style.css" />
|
||||
<link rel="me" href="https://chaos.social/@c3cat" />
|
||||
<title>c3cat</title>
|
||||
|
||||
<style>
|
||||
@layer per-site {
|
||||
.resources-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 1rem;
|
||||
|
||||
&>li {
|
||||
display: block;
|
||||
&>a {
|
||||
display: inline flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 4px;
|
||||
&>img {
|
||||
aspect-ratio: 1/1;
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="container">
|
||||
<main>
|
||||
<h1 class="title">3D Printables</h1>
|
||||
<a href="./">
|
||||
<picture>
|
||||
<source srcset="assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp" media="(prefers-color-scheme: dark)"/>
|
||||
<img src="assets/img/c3cat-c3sign-cccamp23-transparent.webp" alt="C3CAT with a cat ear headband around the 'A'" class="hero-img"/>
|
||||
</picture>
|
||||
</a>
|
||||
|
||||
<ul class="resources-container">
|
||||
<li>
|
||||
<a href="https://www.printables.com/de/model/35076-cat-ears" rel="external">
|
||||
<img alt="A picture of a catear 3D model" src="assets/img/3d-printables/catears-printables.webp">
|
||||
<span>The original catear model from <i>printables.com</i></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
Don't feel pressured to wear cat ears – you're perfectly fine without them.<br>
|
||||
And remember: Trans rights are human rights.
|
||||
</p>
|
||||
<p>
|
||||
Find us in the fediverse at <a href="https://chaos.social/@c3cat">c3cat@chaos.social</a>.
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
@layer base, per-site;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Use a shade of the c3cat logos pink, which works nicely as a link color. */
|
||||
--accent-color-light: #DC049B;
|
||||
|
|
@ -10,17 +13,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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,14 +46,24 @@ img {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
a:link, a:visited {
|
||||
color: var(--accent-color-light);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--accent-color-dark);
|
||||
color: var(--accent-color);
|
||||
padding-inline: 0.1ch;
|
||||
&:hover:not(:has(img)) {
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
u {
|
||||
text-decoration-color: var(--accent-color);
|
||||
}
|
||||
|
||||
ul li::marker {
|
||||
color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
|
|
@ -60,3 +78,34 @@ 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;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
BIN
assets/img/3d-printables/catears-printables.webp
Normal file
|
After Width: | Height: | Size: 43 KiB |
BIN
assets/img/rgb-ears-39c3/10_1280.webp
Normal file
|
After Width: | Height: | Size: 205 KiB |
BIN
assets/img/rgb-ears-39c3/10_1920.webp
Normal file
|
After Width: | Height: | Size: 546 KiB |
BIN
assets/img/rgb-ears-39c3/10_4960.webp
Normal file
|
After Width: | Height: | Size: 4.6 MiB |
BIN
assets/img/rgb-ears-39c3/11_1280.webp
Normal file
|
After Width: | Height: | Size: 131 KiB |
BIN
assets/img/rgb-ears-39c3/11_1920.webp
Normal file
|
After Width: | Height: | Size: 284 KiB |
BIN
assets/img/rgb-ears-39c3/11_5984.webp
Normal file
|
After Width: | Height: | Size: 5 MiB |
BIN
assets/img/rgb-ears-39c3/12_1280.webp
Normal file
|
After Width: | Height: | Size: 114 KiB |
BIN
assets/img/rgb-ears-39c3/12_1920.webp
Normal file
|
After Width: | Height: | Size: 237 KiB |
BIN
assets/img/rgb-ears-39c3/12_6133.webp
Normal file
|
After Width: | Height: | Size: 4.8 MiB |
BIN
assets/img/rgb-ears-39c3/13_1280.webp
Normal file
|
After Width: | Height: | Size: 117 KiB |
BIN
assets/img/rgb-ears-39c3/13_1920.webp
Normal file
|
After Width: | Height: | Size: 251 KiB |
BIN
assets/img/rgb-ears-39c3/13_5888.webp
Normal file
|
After Width: | Height: | Size: 4.2 MiB |
BIN
assets/img/rgb-ears-39c3/14_1280.webp
Normal file
|
After Width: | Height: | Size: 324 KiB |
BIN
assets/img/rgb-ears-39c3/14_1920.webp
Normal file
|
After Width: | Height: | Size: 796 KiB |
BIN
assets/img/rgb-ears-39c3/14_2641.webp
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
assets/img/rgb-ears-39c3/15_1280.webp
Normal file
|
After Width: | Height: | Size: 251 KiB |
BIN
assets/img/rgb-ears-39c3/15_1920.webp
Normal file
|
After Width: | Height: | Size: 604 KiB |
BIN
assets/img/rgb-ears-39c3/15_2757.webp
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
BIN
assets/img/rgb-ears-39c3/16_1280.webp
Normal file
|
After Width: | Height: | Size: 196 KiB |
BIN
assets/img/rgb-ears-39c3/16_1920.webp
Normal file
|
After Width: | Height: | Size: 413 KiB |
BIN
assets/img/rgb-ears-39c3/16_3064.webp
Normal file
|
After Width: | Height: | Size: 1 MiB |
BIN
assets/img/rgb-ears-39c3/17_1280.webp
Normal file
|
After Width: | Height: | Size: 190 KiB |
BIN
assets/img/rgb-ears-39c3/17_1920.webp
Normal file
|
After Width: | Height: | Size: 453 KiB |
BIN
assets/img/rgb-ears-39c3/17_6477.webp
Normal file
|
After Width: | Height: | Size: 9 MiB |
BIN
assets/img/rgb-ears-39c3/18_1280.webp
Normal file
|
After Width: | Height: | Size: 221 KiB |
BIN
assets/img/rgb-ears-39c3/18_1920.webp
Normal file
|
After Width: | Height: | Size: 556 KiB |
BIN
assets/img/rgb-ears-39c3/18_7560.webp
Normal file
|
After Width: | Height: | Size: 13 MiB |
BIN
assets/img/rgb-ears-39c3/19_1280.webp
Normal file
|
After Width: | Height: | Size: 128 KiB |
BIN
assets/img/rgb-ears-39c3/19_1920.webp
Normal file
|
After Width: | Height: | Size: 268 KiB |
BIN
assets/img/rgb-ears-39c3/19_7352.webp
Normal file
|
After Width: | Height: | Size: 5.4 MiB |
BIN
assets/img/rgb-ears-39c3/1_1280.webp
Normal file
|
After Width: | Height: | Size: 156 KiB |
BIN
assets/img/rgb-ears-39c3/1_1919.webp
Normal file
|
After Width: | Height: | Size: 294 KiB |
BIN
assets/img/rgb-ears-39c3/1_6928.webp
Normal file
|
After Width: | Height: | Size: 5.4 MiB |
BIN
assets/img/rgb-ears-39c3/20_1280.webp
Normal file
|
After Width: | Height: | Size: 138 KiB |
BIN
assets/img/rgb-ears-39c3/20_1919.webp
Normal file
|
After Width: | Height: | Size: 259 KiB |
BIN
assets/img/rgb-ears-39c3/20_5944.webp
Normal file
|
After Width: | Height: | Size: 3.5 MiB |
BIN
assets/img/rgb-ears-39c3/21_1280.webp
Normal file
|
After Width: | Height: | Size: 139 KiB |
BIN
assets/img/rgb-ears-39c3/21_1920.webp
Normal file
|
After Width: | Height: | Size: 263 KiB |
BIN
assets/img/rgb-ears-39c3/21_7960.webp
Normal file
|
After Width: | Height: | Size: 7.6 MiB |
BIN
assets/img/rgb-ears-39c3/22_1280.webp
Normal file
|
After Width: | Height: | Size: 147 KiB |
BIN
assets/img/rgb-ears-39c3/22_1920.webp
Normal file
|
After Width: | Height: | Size: 306 KiB |
BIN
assets/img/rgb-ears-39c3/22_6845.webp
Normal file
|
After Width: | Height: | Size: 5 MiB |
BIN
assets/img/rgb-ears-39c3/2_1280.webp
Normal file
|
After Width: | Height: | Size: 173 KiB |
BIN
assets/img/rgb-ears-39c3/2_1920.webp
Normal file
|
After Width: | Height: | Size: 370 KiB |
BIN
assets/img/rgb-ears-39c3/2_3032.webp
Normal file
|
After Width: | Height: | Size: 914 KiB |
BIN
assets/img/rgb-ears-39c3/3_1280.webp
Normal file
|
After Width: | Height: | Size: 153 KiB |
BIN
assets/img/rgb-ears-39c3/3_1920.webp
Normal file
|
After Width: | Height: | Size: 306 KiB |
BIN
assets/img/rgb-ears-39c3/3_3273.webp
Normal file
|
After Width: | Height: | Size: 864 KiB |
BIN
assets/img/rgb-ears-39c3/4_1280.webp
Normal file
|
After Width: | Height: | Size: 316 KiB |
BIN
assets/img/rgb-ears-39c3/4_1920.webp
Normal file
|
After Width: | Height: | Size: 794 KiB |
BIN
assets/img/rgb-ears-39c3/4_3336.webp
Normal file
|
After Width: | Height: | Size: 2.5 MiB |
BIN
assets/img/rgb-ears-39c3/5_1280.webp
Normal file
|
After Width: | Height: | Size: 233 KiB |
BIN
assets/img/rgb-ears-39c3/5_1920.webp
Normal file
|
After Width: | Height: | Size: 536 KiB |
BIN
assets/img/rgb-ears-39c3/5_3200.webp
Normal file
|
After Width: | Height: | Size: 1.6 MiB |
BIN
assets/img/rgb-ears-39c3/6_1280.webp
Normal file
|
After Width: | Height: | Size: 173 KiB |
BIN
assets/img/rgb-ears-39c3/6_1920.webp
Normal file
|
After Width: | Height: | Size: 437 KiB |
BIN
assets/img/rgb-ears-39c3/6_6480.webp
Normal file
|
After Width: | Height: | Size: 7.9 MiB |
BIN
assets/img/rgb-ears-39c3/7_1280.webp
Normal file
|
After Width: | Height: | Size: 187 KiB |
BIN
assets/img/rgb-ears-39c3/7_1920.webp
Normal file
|
After Width: | Height: | Size: 478 KiB |
BIN
assets/img/rgb-ears-39c3/7_5976.webp
Normal file
|
After Width: | Height: | Size: 6.8 MiB |
BIN
assets/img/rgb-ears-39c3/8_1280.webp
Normal file
|
After Width: | Height: | Size: 195 KiB |
BIN
assets/img/rgb-ears-39c3/8_1920.webp
Normal file
|
After Width: | Height: | Size: 503 KiB |
BIN
assets/img/rgb-ears-39c3/8_5904.webp
Normal file
|
After Width: | Height: | Size: 6.7 MiB |
BIN
assets/img/rgb-ears-39c3/9_1280.webp
Normal file
|
After Width: | Height: | Size: 189 KiB |
BIN
assets/img/rgb-ears-39c3/9_1920.webp
Normal file
|
After Width: | Height: | Size: 479 KiB |
BIN
assets/img/rgb-ears-39c3/9_5824.webp
Normal file
|
After Width: | Height: | Size: 6 MiB |
BIN
assets/img/rgb-guide-esp-labeled.jpeg
Normal file
|
After Width: | Height: | Size: 3.7 MiB |
BIN
assets/img/rgb-guide-soldered-isolated-strip.jpeg
Normal file
|
After Width: | Height: | Size: 1.5 MiB |
BIN
assets/img/rgb-guide-strip.webp
Normal file
|
After Width: | Height: | Size: 571 KiB |
0
catear-bom.html
Normal file
BIN
favicon.ico
Normal file
|
After Width: | Height: | Size: 17 KiB |
55
index.html
|
|
@ -6,6 +6,44 @@
|
|||
<link rel="stylesheet" href="assets/css/style.css" />
|
||||
<link rel="me" href="https://chaos.social/@c3cat" />
|
||||
<title>c3cat</title>
|
||||
|
||||
<style>
|
||||
/* site-specific styles */
|
||||
|
||||
@layer per-site {
|
||||
.resources-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 1ch;
|
||||
row-gap: 1rem;
|
||||
justify-content: space-around;
|
||||
align-items: stretch;
|
||||
padding-left: 0;
|
||||
|
||||
&>a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-basis: 45%;
|
||||
flex-grow: 1;
|
||||
max-width: 85vw;
|
||||
border: 1px solid var(--accent-color);
|
||||
padding: 8px;
|
||||
text-decoration: unset;
|
||||
color: var(--fg-color);
|
||||
background-color: color-mix(in hsl, var(--bg-color) 90%, var(--fg-color) 10%);
|
||||
min-height: 2rem;
|
||||
text-align: center;
|
||||
font-size: larger;
|
||||
|
||||
&:hover {
|
||||
background-color: color-mix(in hsl, var(--bg-color) 80%, var(--fg-color) 20%);
|
||||
box-shadow: 4px 4px 6px var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="container">
|
||||
<main>
|
||||
|
|
@ -16,9 +54,20 @@
|
|||
</picture>
|
||||
|
||||
<h2>Resources</h2>
|
||||
<p class="bigger">The "original" cat ear model we used was borrowed from <a href="https://www.printables.com/de/model/35076-cat-ears">Printables</a>.
|
||||
Since then, some people started to develop an <a href="https://git.hamburg.ccc.de/c3cat/scad">improved and parametrized version</a> with OpenSCAD.</p>
|
||||
<p class="bigger">See the <a href="https://wiki.hamburg.ccc.de/club:c3cat:start">CCCHH wiki</a> for the latest information on signs, 3D models, etc.</p>
|
||||
<ul class="resources-container">
|
||||
<a href="./rgb-ears-39c3.html">39C3 RGB Catear Build Instructions</a>
|
||||
<!-- <a href="./catear-bom.html">LED Catear BOM</a> -->
|
||||
<a href="./3d-printables.html">3D Printing Files</a>
|
||||
</ul>
|
||||
|
||||
<h3>Archive</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href="./rgb-ears.html">EH22 Catear Guide</a></li>
|
||||
<li><a href="https://wiki.hamburg.ccc.de/club:c3cat:start">CCCHH Wiki page</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>History</h2>
|
||||
<p>A few people from Hamburg started to 3D-print and wear cat ear headbands at <a href="https://eh20.easterhegg.eu">EH20</a> which lead to some "can I get one, too" reactions.
|
||||
|
|
|
|||
684
rgb-ears-39c3.html
Executable file
|
|
@ -0,0 +1,684 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="assets/css/style.css" />
|
||||
<title>c3cat</title>
|
||||
|
||||
<style>
|
||||
@layer per-site {
|
||||
h1>a, h2>a, h3>a, h4>a, h5>a, h6>a {
|
||||
text-decoration: unset;
|
||||
padding: 0 0.2ch;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
ol.step-by-step-instructions {
|
||||
margin-top: 1.5rem;
|
||||
|
||||
li {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
&::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;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="container">
|
||||
<main>
|
||||
<h1 class="title">39C3 RGB Catear Build Instructions</h1>
|
||||
|
||||
<a href="./">
|
||||
<picture>
|
||||
<source srcset="assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp" media="(prefers-color-scheme: dark)"/>
|
||||
<img src="assets/img/c3cat-c3sign-cccamp23-transparent.webp" alt="C3CAT with a cat ear headband around the 'A'" class="hero-img"/>
|
||||
</picture>
|
||||
</a>
|
||||
|
||||
<section id="introduction">
|
||||
<fieldset id="detail-grade-picker">
|
||||
<legend>How much details do you need?</legend>
|
||||
<input type="radio" id="detail-picker-all" name="detail-grade-picker" value="all" checked>
|
||||
<label for="detail-picker-all">Hold my hand please >~<</label>
|
||||
|
||||
<input type="radio" id="detail-picker-simplified" name="detail-grade-picker" value="simplified">
|
||||
<label for="detail-picker-simplified">I soldered before :3</label>
|
||||
|
||||
<input type="radio" id="detail-picker-short" name="detail-grade-picker" value="short">
|
||||
<label for="detail-picker-short">Short</label>
|
||||
</fieldset>
|
||||
|
||||
<p>
|
||||
This guide aims to explain in simple terms how to assemble the c3cat catear build kit.
|
||||
To follow it, you need <u>soldering equipment</u>, a <u>heatgun</u>, a pair of <u>striping pliers</u>, <u>catears</u> as well as <u>one of our build kits</u>.<br>
|
||||
If you did not get a hold of one of those kits, take a look at <a href="./catear-bom.html">our BOM</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The general project assembly looks like this where each of the components must be connected via soldering points.
|
||||
</p>
|
||||
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
||||
<img
|
||||
class="hero-img detail-hide-short"
|
||||
style="aspect-ratio: 16/10;"
|
||||
alt="A picture of an assembled set of LED catears"
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/22_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/22_1920.webp 1920w,
|
||||
assets/img/rgb-ears-39c3/22_6845.webp 6845w"
|
||||
/>
|
||||
<pre role="presentation" aria-description="ASCII drawing of the project assembly containing the parts included in the kit.">
|
||||
┌─────┐ ╭───╮
|
||||
│ ESP ├┄┄╼ ╾┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄│ │
|
||||
└─────┘
|
||||
╱ ╲ ╱ ╲ ╱ ╲
|
||||
pluggable long catear
|
||||
connector cable & leds
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="detail-hide-short">
|
||||
<p>
|
||||
Inside this guide, you will find the following content
|
||||
</p>
|
||||
<nav>
|
||||
<ol class="toc">
|
||||
<li><a href="#kit-content">Kit Content</a></li>
|
||||
<li><a href="#step-1">Flash the microcontroller</a></li>
|
||||
<li><a href="#step-2">Solder cables to LED strip</a></li>
|
||||
<li><a href="#step-3">Solder cables to pluggable connector</a></li>
|
||||
<li><a href="#step-4">Solder cables to Microcontroller</a></li>
|
||||
<li><a href="#step-5">Finalize the Assembly</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="kit-content" class="detail-hide-short">
|
||||
<h2>Kit Content <a href="#kit-content">§</a></h2>
|
||||
<p>
|
||||
Out kits contain the following content:
|
||||
</p>
|
||||
<img
|
||||
class="hero-img"
|
||||
style="aspect-ratio: 16/10;"
|
||||
alt="A picture of the kit content layed out on a rat mat. It contains the items listed below"
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/1_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/1_1919.webp 1919w,
|
||||
assets/img/rgb-ears-39c3/1_6928.webp 6982w"
|
||||
/>
|
||||
<ul>
|
||||
<li>A 3D printed case for the microcontroller, here shown in bright green</li>
|
||||
<li>An ESP microcontroller</li>
|
||||
<li>An RGB LED strip, shown at the very bottom of the picture</li>
|
||||
<li>One pluggable connector with three separate wires connected to each end separated into two pieces and shown at the top of the pictures</li>
|
||||
<li>One 10cm long, clear piece of heatshrink</li>
|
||||
<li>One 10cm long, small, black piece of heatshrink</li>
|
||||
<li>One 10cm long, large, black piece of heatshrink</li>
|
||||
<li>One long cable</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="step-1">
|
||||
<h2>Flash the microcontroller <a href="#step-1">§</a></h2>
|
||||
<p>
|
||||
We recommend to use <a href="https://kno.wled.ge/" rel="external">WLED</a> 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.
|
||||
</p>
|
||||
<ol class="step-by-step-instructions">
|
||||
<li class="detail-hide-short">
|
||||
<div>
|
||||
<label for="connect-esp">
|
||||
Take the microcontroller out of its packaging and connect it to your computer.
|
||||
|
||||
<span class="detail-hide-simplified"><br>
|
||||
Depending on your choice of linux distribution, you may need to ensure that you have appropriate permissions to interact with the serial device.
|
||||
Check your distros documentation if you are unsure or things are not working as expected.
|
||||
</span>
|
||||
</label>
|
||||
<input type="checkbox" id="connect-esp">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="detail-hide-short">
|
||||
<div>
|
||||
<label for="go-to-wled-install">
|
||||
Go to <a href="https://install.wled.me/" rel="external">WLED-Install</a> and follow the instructions there.
|
||||
|
||||
<span class="detail-hide-simplified"><br>
|
||||
If your browser supports the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API" rel="external">Web Serial API</a> (i.e. is Chromium based), you can flash the microcontroller directly from it by pressing the <q>Install</q> button.
|
||||
</span>
|
||||
</label>
|
||||
<input type="checkbox" id="go-to-wled-install">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="detail-hide-short">
|
||||
<div>
|
||||
<label for="connect-to-wled">
|
||||
After flashing, you will be prompted to choose a WiFi connection.
|
||||
You can skip this step in which case the controller will open its own hotspot to connect to later.
|
||||
</label>
|
||||
<input type="checkbox" id="connect-to-wled">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="detail-default-hide detail-show-short">
|
||||
<div>
|
||||
<label for="flash-wled">
|
||||
Flash WLED using the <a href="http://wled-install.github.io" rel="external">web installer</a>.
|
||||
</label>
|
||||
<input type="checkbox" id="flash-wled">
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="step-2">
|
||||
<h2>Solder cables to LED strip <a href="#step-2">§</a></h2>
|
||||
<p>
|
||||
One of the most important steps is to electircally connect the microcontroller to the LED strip.
|
||||
We will start with the LED side.
|
||||
</p>
|
||||
<p class="detail-hide-short detail-hide-simplified">
|
||||
Basically, the LED strip has three connections. One for data, one for ground and one for voltage.
|
||||
Each of these three functions requires a separately soldered connection.
|
||||
</p>
|
||||
<p class="detail-hide-short">
|
||||
Make sure to <u>solder to the <b>input</b> side of the LED strip</u>.
|
||||
</p>
|
||||
|
||||
<figure class="detail-hide-short detail-hide-simplified">
|
||||
<img
|
||||
class="hero-img"
|
||||
style="aspect-ratio: 16/10;"
|
||||
width=500
|
||||
alt="A picture of the backside of an LED strip exposed. The ou label is visible on the part of it not connected to another strip segment."
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/2_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/2_1920.webp 1920w,
|
||||
assets/img/rgb-ears-39c3/2_3032.webp 3032w"
|
||||
/>
|
||||
<figcaption>The <u>wrong</u> side of the LED strip demontrated by the <q>ou</q> (out) label being on the outside.</figcaption>
|
||||
</figure>
|
||||
<figure class="detail-hide-short detail-hide-simplified">
|
||||
<img
|
||||
class="hero-img"
|
||||
style="aspect-ratio: 16/10;"
|
||||
width=500
|
||||
alt="A picture of the backside of an LED strip exposed. The in label is visible on the part of it not connected to another strip segment."
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/3_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/3_1920.webp 1920w,
|
||||
assets/img/rgb-ears-39c3/3_3273.webp 3273w"
|
||||
/>
|
||||
<figcaption>The <u>correct</u> side of the LED strip demontrated by the <q>in</q> label being on the outside.</figcaption>
|
||||
</figure>
|
||||
|
||||
<ol class="step-by-step-instructions">
|
||||
|
||||
<li class="detail-hide-short">
|
||||
<div>
|
||||
<label for="prepare-led-cable">
|
||||
Prepare the long cable for soldering by removing its insulation.
|
||||
|
||||
<p class="detail-hide-simplified">
|
||||
Strip about 1cm of insulation from one end of the long cable using your striping pliers.<br>
|
||||
The three cores inside should be stripped with something softer and finer. Your fingernails are excellent for this purpose.
|
||||
</p>
|
||||
<img
|
||||
class="hero-img detail-hide-simplified"
|
||||
style="aspect-ratio: 16/10;"
|
||||
width=500
|
||||
alt="A picture of one end of the long wire but the insulation has been stripped off"
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/4_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/4_1920.webp 1920w,
|
||||
assets/img/rgb-ears-39c3/4_3336.webp 3336w"
|
||||
/>
|
||||
</label>
|
||||
<input type="checkbox" id="prepare-led-cable">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="detail-hide-short">
|
||||
<div>
|
||||
<label for="expose-led-contacts">
|
||||
<span>Expose the contacts of the LED strip.</span>
|
||||
|
||||
<p class="detail-hide-simplified">
|
||||
Peel back the protective paper from the <q>in</q> end of the LED strip.
|
||||
Also peel back the glue covering the protectors but only from the contacts, not from the whole strip segments.
|
||||
</p>
|
||||
</label>
|
||||
<input type="checkbox" id="expose-led-contacts">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div>
|
||||
<label for="solder-to-led-strip">
|
||||
Solder the three cable cores to their corresponding connectors on the LED strip.
|
||||
We use these combinations:
|
||||
<dl class="key-value" style="margin-block: 1rem;">
|
||||
<dt>Red</dt><dd>+5V</dd>
|
||||
<dt>Yellow</dt><dd>Data</dd>
|
||||
<dt>Black</dt><dd>Ground</dd>
|
||||
</dl>
|
||||
<img
|
||||
class="hero-img detail-hide-simplified detail-hide-short"
|
||||
style="aspect-ratio: 16/10;"
|
||||
width=500
|
||||
alt="A picture of the long wire soldered to the LED strip"
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/5_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/5_1920.webp 1920w,
|
||||
assets/img/rgb-ears-39c3/5_3200.webp 3200w"
|
||||
/>
|
||||
</label>
|
||||
<input type="checkbox" id="solder-to-led-strip">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="detail-hide-short">
|
||||
<div>
|
||||
<label for="solder-heatshrink-to-led-strip">
|
||||
Put a <u>2cm</u> piece of the <u>large black heatshrink</u> over the soldered connection.
|
||||
|
||||
<p class="detail-hide-simplified">
|
||||
You need to cut the 2cm piece off the included heatshrink yourself.
|
||||
To apply it, place it over the soldering point so that all bits of connective material are covered but so that you hide as few LEDs as you can manage.
|
||||
In that position, use your heat gun to fix everything into place.
|
||||
</p>
|
||||
|
||||
<img
|
||||
class="hero-img detail-hide-simplified"
|
||||
style="aspect-ratio: 16/10;"
|
||||
width=500
|
||||
alt="A picture of the led-to-cable-connection but with a heatshrink over the soldering points"
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/12_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/12_1920.webp 1920w,
|
||||
assets/img/rgb-ears-39c3/12_6133.webp 6133w"
|
||||
/>
|
||||
</label>
|
||||
<input type="checkbox" id="solder-heatshrink-to-led-strip">
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="step-3">
|
||||
<h2>Solder Cable to pluggable connector <a href="#step-3">§</a></h2>
|
||||
<p>
|
||||
The other side of the long cable now needs to be connected to the pluggable connector.
|
||||
</p>
|
||||
<ol class="step-by-step-instructions">
|
||||
|
||||
<li class="detail-hide-short">
|
||||
<div>
|
||||
<label for="prepare-led-cable2">
|
||||
Remove the insulation from the unsoldered end of the long cable and grab the <u>male end of the plugs</u><span class="detail-hide-simplified"> (the one with the pins)</span>.
|
||||
</label>
|
||||
<input type="checkbox" id="prepare-led-cable2">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div>
|
||||
<label for="prepare-heatshrinks-on-connector">
|
||||
<span>
|
||||
Put the remainder of the large black heatshrink on the long cable.
|
||||
Also put one equally long piece of the small black heatshrink on each of the pluggable connectors cables.
|
||||
Do this <u>without applying heat</u>.
|
||||
</span>
|
||||
|
||||
<p class="detail-hide-simplified detail-hide-short">
|
||||
The small heatshrinks need to be put in place now because they cannot be applied after soldering.
|
||||
</p>
|
||||
|
||||
<img
|
||||
class="hero-img detail-hide-simplified detail-hide-short"
|
||||
style="aspect-ratio: 16/10;"
|
||||
width=500
|
||||
alt="A picture of the heatshrinks prepared as described"
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/9_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/9_1920.webp 1920w,
|
||||
assets/img/rgb-ears-39c3/9_5824.webp 5842w"
|
||||
/>
|
||||
</label>
|
||||
<input type="checkbox" id="prepare-heatshrinks-on-connector">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div>
|
||||
<label for="solder-to-connector">
|
||||
Solder all the cable cores together in pairs
|
||||
<span class="detail-hide-default detail-show-short"> and apply the prepared heatshrink afterwards.</span>.
|
||||
We use these combinations:
|
||||
<dl class="key-value" style="margin-top: 1ch;">
|
||||
<dt>Red</dt><dd>Red</dd>
|
||||
<dt>Black</dt><dd>Black</dd>
|
||||
<dt>Yellow</dt><dd>White</dd>
|
||||
</dl>
|
||||
|
||||
<img
|
||||
class="hero-img detail-hide-simplified detail-hide-short"
|
||||
style="aspect-ratio: 16/10; margin-top: 1rem;"
|
||||
width=500
|
||||
alt="A picture of the pluggable connector cables soldered to the cores of the long cable"
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/10_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/10_1920.webp 1920w,
|
||||
assets/img/rgb-ears-39c3/10_4960.webp 4960w"
|
||||
/>
|
||||
</label>
|
||||
<input type="checkbox" id="solder-to-connector">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="detail-hide-short">
|
||||
<div>
|
||||
<label for="heatshrink-to-connector-long-cable-side">
|
||||
<span>Apply the prepared heatshrinks.</span>
|
||||
<span class="detail-hide-short detail-hide-simplified">
|
||||
Make sure that you wrap each cable core in heatshrink individually <b>and then</b> put an additional heatshrink over the whole connection as a whole.
|
||||
</span>
|
||||
|
||||
<img
|
||||
class="hero-img detail-hide-simplified detail-hide-short"
|
||||
style="aspect-ratio: 16/10; margin-top: 1rem;"
|
||||
width=500
|
||||
alt="A picture of the connection between long cable and plug where each core is protected by an individual heatshrink"
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/11_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/11_1920.webp 1920w,
|
||||
assets/img/rgb-ears-39c3/11_5984.webp 5984w"
|
||||
/>
|
||||
<img
|
||||
class="hero-img detail-hide-simplified detail-hide-short"
|
||||
style="aspect-ratio: 16/10; margin-top: 1rem;"
|
||||
width=500
|
||||
alt="A picture of the connection between long cable and plug where the connection is protected as a whole by one heatshrink"
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/13_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/13_1920.webp 1920w,
|
||||
assets/img/rgb-ears-39c3/13_5888.webp 5888w"
|
||||
/>
|
||||
</label>
|
||||
<input type="checkbox" id="heatshrink-to-connector-long-cable-side">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="step-4">
|
||||
<h2>Solder Pluggable Connector to Microcontroller <a href="#step-4">§</a></h2>
|
||||
<p>
|
||||
Now you need to solder the other (female) part of the pluggable connector to your microcontroller.
|
||||
</p>
|
||||
<div style="display: flex; flex-grow: 1; flex-wrap: wrap;">
|
||||
<img
|
||||
class="detail-hide-short detail-hide-short detail-hide-simplified"
|
||||
style="aspect-ratio: 1/1; flex-basis: 300px;"
|
||||
width=300
|
||||
alt="The front side of the included microcontroller"
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/14_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/14_1920.webp 1920w,
|
||||
assets/img/rgb-ears-39c3/14_2641.webp 2641w"
|
||||
/>
|
||||
<img
|
||||
class="detail-hide-short detail-hide-simplified"
|
||||
style="aspect-ratio: 1/1; max-width: 300px;"
|
||||
width=300
|
||||
alt="The backside of the included microcontroller"
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/15_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/15_1920.webp 1920w,
|
||||
assets/img/rgb-ears-39c3/15_2757.webp 2757w"
|
||||
/>
|
||||
</div>
|
||||
<ol class="step-by-step-instructions">
|
||||
|
||||
<li>
|
||||
<div>
|
||||
<label for="solder-plug-to-esp">
|
||||
Solder the female side of the pluggable connector to the microcontroller.
|
||||
|
||||
<dl class="key-value" style="margin-block: 1rem;">
|
||||
<dt>Red</dt><dd>5V</dd>
|
||||
<dt>Black</dt><dd>Ground</dd>
|
||||
<dt>White</dt><dd>GPIO 2</dd>
|
||||
</dl>
|
||||
|
||||
<img
|
||||
class="detail-hide-simplified detail-hide-short"
|
||||
style="aspect-ratio: 16/10;"
|
||||
width=500
|
||||
alt="Picture of the cables of the pluggable connector soldered to the microcontroller"
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/16_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/16_1920.webp 1920w,
|
||||
assets/img/rgb-ears-39c3/16_3064.webp 3064w"
|
||||
/>
|
||||
</label>
|
||||
<input type="checkbox" id="solder-plug-to-esp">
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="step-5">
|
||||
<h2>Finalize the Assembly <a href="#step-6">§</a></h2>
|
||||
<ol class="step-by-step-instructions">
|
||||
|
||||
<li>
|
||||
<div>
|
||||
<label for="place-esp-in-case">
|
||||
<span>Place the microcontroller in the included case.</span>
|
||||
|
||||
<img
|
||||
class="hero-img detail-hide-short"
|
||||
style="aspect-ratio: 16/10; margin-top: 1rem;"
|
||||
width=500
|
||||
alt="Picture of the microcontroller nested into the open case"
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/17_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/17_1920.webp w,
|
||||
assets/img/rgb-ears-39c3/17_6477.webp 6477w"
|
||||
/>
|
||||
</label>
|
||||
<input type="checkbox" id="place-esp-in-case">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div>
|
||||
<label for="prepare-heatshrinks-on-led-strip">
|
||||
<span>Cut off <u>two 1cm long pieces of the clear heatshrink</u> and put them on long cable of the LED strip <b>without heating</b>.</span>
|
||||
<img
|
||||
class="hero-img detail-hide-short detail-hide-simplified"
|
||||
style="aspect-ratio: 16/10; margin-top: 1rem;"
|
||||
width=500
|
||||
alt="Picture of the microcontroller nested into the open case"
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/19_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/19_1920.webp 1920w,
|
||||
assets/img/rgb-ears-39c3/19_7352.webp 7352w"
|
||||
/>
|
||||
</label>
|
||||
<input type="checkbox" id="prepare-heatshrinks-on-led-strip">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div>
|
||||
<label for="glue-leds-to-catears">
|
||||
<span>Attach the LED strip onto your favourite pair of catears.</span>
|
||||
<span class="detail-hide-short">
|
||||
The end of the LED strip should align with the outer corner of one of the ears.
|
||||
After you have aligned the first part, glue the remaining strip firmly onto the ears.
|
||||
</span>
|
||||
|
||||
<p class="detail-hide-simplified detail-hide-short">
|
||||
The strip contains its own glue strip on the bottom.
|
||||
To use it, peel off the protective cover (without also removing the glue coating) and start attaching it to your catears.
|
||||
</p>
|
||||
|
||||
<img
|
||||
class="hero-img detail-hide-short"
|
||||
style="aspect-ratio: 16/10;"
|
||||
width=500
|
||||
alt="Picture of one cat ear with the LED strip partially applied. The image is focused on the alignment of the LED strip with the catear."
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/20_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/20_1919.webp 1919w,
|
||||
assets/img/rgb-ears-39c3/20_5944.webp 5944w"
|
||||
/>
|
||||
|
||||
</label>
|
||||
<input type="checkbox" id="glue-leds-to-catears">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div>
|
||||
<label for="heatshrink-fasten-led-strip"
|
||||
<span>
|
||||
To secure the LED strip, pull the two 1cm pieces of clear heatshrink over the ends and apply them there.
|
||||
Additionally, use the larger part of the clear heatshrink to secure the long cable to one of the ear holders.
|
||||
</span>
|
||||
<p class="detail-hide-short">
|
||||
Be careful to not apply too much heat. Otherwise, the plastic of the catears themselves might start to melt.
|
||||
</p>
|
||||
<img
|
||||
class="hero-img detail-hide-short"
|
||||
style="aspect-ratio: 16/10; margin-top: 1rem;"
|
||||
width=500
|
||||
alt="Picture of one cat ear with the LED strip partially applied. The image is focused on the alignment of the LED strip with the catear."
|
||||
loading="lazy"
|
||||
srcset="assets/img/rgb-ears-39c3/21_1280.webp 1280w,
|
||||
assets/img/rgb-ears-39c3/21_1920.webp 1920w,
|
||||
assets/img/rgb-ears-39c3/21_7960.webp 7960w"
|
||||
/>
|
||||
</label>
|
||||
<input type="checkbox" id="heatshrink-fasten-led-strip">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
<p>
|
||||
Congratulations! You now have a freely customizable pair of RGB catears :3
|
||||
</p>
|
||||
<p>
|
||||
Don't feel pressured to wear cat ears – you're perfectly fine without them.<br>
|
||||
And remember: Trans rights are human rights.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
Find us in the fediverse at <a href="https://chaos.social/@c3cat">c3cat@chaos.social</a>.
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -10,10 +10,12 @@
|
|||
<main>
|
||||
<h1>Addressable LED Catears</h1>
|
||||
|
||||
<a href="../">
|
||||
<picture>
|
||||
<source srcset="assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp" media="(prefers-color-scheme: dark)"/>
|
||||
<img src="assets/img/c3cat-c3sign-cccamp23-transparent.webp" alt="C3CAT with a cat ear headband around the 'A'" class="hero-img"/>
|
||||
</picture>
|
||||
</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 <a href="https://wiki.hamburg.ccc.de/club:c3cat:start">over here</a>.
|
||||
|
|
|
|||