diff options
Diffstat (limited to 'static-page/colors.yaml')
| -rw-r--r-- | static-page/colors.yaml | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/static-page/colors.yaml b/static-page/colors.yaml new file mode 100644 index 00000000..1832391b --- /dev/null +++ b/static-page/colors.yaml @@ -0,0 +1,233 @@ +Name: Wiki Colors +Directory: colors +Style: |- + #color-table { + width: 100%; + border-spacing: 3px 6px; + } + + #color-table td, #color-table th { + border: 2px solid var(--primary-color); + border-top: 1px dotted var(--primary-color); + border-bottom: 1px dotted var(--primary-color); + padding: 4px 8px; + } + + #color-table td:nth-child(1), + #color-table td:nth-child(2) { + text-align: center; + transition: background 0.35s, color 0.35s; + } + + #color-table td:nth-child(1) { + width: 140px; + } + + #color-table td:nth-child(2) { + width: 80px; + } + + #color-table td:nth-child(2):not(.nolight):hover { + background: white; + color: black; + } + + #color-table td:nth-child(3) a { + display: inline-block; + } + + #color-table code { + white-space: nowrap; + } + + #color-table span[title] { + text-decoration: underline; + text-decoration-style: dotted; + text-decoration-color: var(--primary-color); + } +Script: |- + const table = document.getElementById('color-table'); + + function findReplaceTextNodes(container, regex, replace) { + function recursive(parent) { + for (const node of [...parent.childNodes]) { + if (node.nodeType === document.ELEMENT_NODE) { + recursive(node); + } else if (node.nodeType === document.TEXT_NODE) { + text(node); + } + } + } + + function text(node) { + const nodes = [], content = node.textContent; + const parent = node.parentElement; + let match = null, previous = 0; + for (const match of content.matchAll(regex)) { + nodes.push(content.slice(previous, match.index)); + nodes.push(replace(...match)); + previous = match.index + match[0].length; + } + nodes.push(content.slice(previous)); + node.replaceWith(...nodes); + } + + recursive(container); + } + + const getColor = el => el.innerText.match(/#[0-9a-f]{3,8}/i); + + for (const row of table.querySelectorAll('tbody tr')) { + const color = getColor(row.querySelector('td')); + if (color) row.style.setProperty('--primary-color', color); + + findReplaceTextNodes(row, + /#[0-9a-f]{3,8}/gi, match => { + const elem = document.createElement('code'); + elem.style.color = match; + elem.innerText = match; + return elem; + }); + + findReplaceTextNodes(row, + /\(same\)/g, match => { + const elem = document.createElement('span'); + elem.style.color = color; + elem.innerText = match; + return elem; + }); + + for (const cell of row.querySelectorAll('td:not(:first-child)')) { + const color = getColor(cell); + if (color) cell.style.setProperty('--primary-color', color); + } + } +Content: |- + Here's a list of some colors used on the wiki which are pulled specifically from Homestuck! These could come in handy if you want to copy-paste them into new data entries, or make something that matches common colors on the wiki. + + This page is only updated manually, so it could be missing updated tag colors or more recent example uses. + + Thanks to [MS Paint Adventures Wiki](https://mspaintadventures.fandom.com/) for having an awesome [Template:Color](https://mspaintadventures.fandom.com/wiki/Template:Color) reference we've used many times! + + <table id="color-table" style="--primary-color: #e0e0e0"> + <thead> + <tr> + <th>Tag + Color</th> + <th>Source Color</th> + <th>Example Uses</th> + </tr> + </thead> + <tbody> + <tr><td>[[tag:john]]<br>#5c66e8</td> + <td>#0715cd</td> + <td>-</td> + <tr><td>[[tag:rose]]<br>#b536da</td> + <td>(same)</td> + <td>[[flash-act:a4]], + [[album:homestuck-vol-7]], + [[album:cool-and-new-greatest-hits]]</td> + <tr><td>[[tag:dave]]<br>#e00707</td> + <td>(same)</td> + <td>[[flash-act:a6i2]]</td> + <tr><td>[[tag:jade]]<br>#4ac925</td> + <td>(same)</td> + <td>[[album:homestuck-vol-8]]</td> + <tr><td>[[tag:jane]]<br>#00d5f2</td> + <td><span title="Homestuck">(same)</span>, + <span title="Epilogues">#0097d7</span></td> + <td>-</td> + <tr><td>[[tag:roxy]]<br>#ff6ff2</td> + <td>(same)</td> + <td>-</td> + <tr><td>[[tag:dirk]]<br>#f2a400</td> + <td>(same)</td> + <td>[[flash-act:a6a2]], + [[album:beyond-canon]], + [[album:homestuck-vol-9]], + [[album:diverging-delicacies]]</td> + <tr><td>[[tag:jake]]<br>#1f9400</td> + <td>(same)</td> + <td>-</td> + <tr><td>[[tag:aradia]]<br>#eb0000</td> + <td>#a10000</td> + <td>[[flash-act:a6i1]], [[album:rust-apocalypse]]</td> + <tr><td>[[tag:tavros]]<br>#c36100</td> + <td>#a15000</td> + <td>-</td> + <tr><td>[[tag:sollux]]<br>#a1a100</td> + <td>(same)</td> + <td>-</td> + <tr><td>[[tag:karkat]]<br>#7c7e81</td> + <td><span title="Homestuck">#626262</span>, + <span title="Epilogues">(same)</span></td> + <td>[[flash-act:karkat-goes-to-a-convention]]</td> + <tr><td>[[tag:kankri]]<br>#ff0000</td> + <td>(same)</td> + <td>It's the color red...</td> + <tr><td>[[tag:nepeta]]<br>#588a00</td> + <td>#416600</td> + <td>-</td> + <tr><td>[[tag:kanaya]]<br>#008f48</td> + <td>#008141</td> + <td>-</td> + <tr><td>[[tag:terezi]]<br>#008b8b</td> + <td>#008282</td> + <td>-</td> + <tr><td>[[tag:vriska]]<br>#3796c6</td> + <td>#005682</td> + <td>-</td> + <tr><td>[[tag:equius]]<br>#487aef</td> + <td>#000056</td> + <td>-</td> + <tr><td>[[tag:gamzee]]<br>#a34bff</td> + <td>#2b0057</td> + <td>[[album:toxic-love]], + [[album:capricious-mistress-single]]</td> + <tr><td>[[tag:eridan]]<br>#db00db</td> + <td>#6a006a</td> + <td>-</td> + <tr><td>[[tag:feferi]]<br>#e30072</td> + <td>#77003c</td> + <td>-</td> + <tr><td>[[tag:calliope]]<br>#00e500</td> + <td><span title="Homestuck">#929292</span>, + <span title="Epilogues">#a1a3a6</span>, + <span title="Blood color">#2ed73a</span></td> + <td>[[track:reverie]], [[track:candy-epilogue]]</td> + <tr><td>[[tag:caliborn]]<br>#e50000</td> + <td><span title="Homestuck">#323232</span> + <span title="Epilogues">#009c68</span> + <span title="Blood color">#ff0000</span></td> + <td>[[track:carne-vale]], [[track:meat-epilogue]]</td> + <tr><td>[[tag:lord-english]]<br>#2ed73a</td> + <td>(same)</td> + <td>Also [[tag:lil-cal]]; + [[flash-act:a5a2]]</td> + <tr><td>[[tag:johns-dad]]<br>#e0e0e0</td> + <td>#4b4b4b</td> + <td>Also used for first guardians and assorted "colorless" characters, such as [[tag:snowman]], [[tag:mspa-reader]], [[tag:wv]], [[tag:serenity]]</td> + <tr><td>[[tag:joey]]<br>#41a455</td> + <td class="nolight">#71daff</td> + <td>-</td> + <tr><td>[[tag:jude]]<br>#06c9cc</td> + <td class="nolight">#d3ff8f</td> + <td>-</td> + <tr><td>[[tag:harry]]<br>#0671cd</td> + <td>(same)</td> + <td>-</td> + <tr><td>[[tag:tavvy]]<br>#a44bff</td> + <td>#2b0057</td> + <td>-</td> + <tr><td>[[tag:horrorterrors]]<br>#b678ce</td> + <td>#4d006d</td> + <td>-</td> + <tr><td>[[tag:prospit]]<br>#ffff01</td> + <td><span title="Prospit">#e49700</span>, + <span title="Prospit symbol">(same)</span></td> + <td>Also [[tag:mobius-trip]]</td> + <tr><td>[[tag:derse]]<br>#ff01fe</td> + <td><span title="Derse">#9700e4</span>, + <span title="Derse symbol">(same)</span></td> + <td>Also [[tag:hadron-kaleido]]</td> + </tbody> + </table> |