From 55f6fbef5f2ab0feeccc447d0564fbf8c6134c27 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Mon, 27 Nov 2023 21:46:33 -0400 Subject: sneak in /colors static page (stealth implications) --- static-page/colors.yaml | 266 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 266 insertions(+) create mode 100644 static-page/colors.yaml (limited to 'static-page') diff --git a/static-page/colors.yaml b/static-page/colors.yaml new file mode 100644 index 00000000..6455fbe5 --- /dev/null +++ b/static-page/colors.yaml @@ -0,0 +1,266 @@ +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! + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tag + ColorSource ColorExample Uses
[[tag:john]]
#5c66e8		#0715cd-
[[tag:rose]]
#b536da		(same)[[flash-act:a4]], + [[album:homestuck-vol-7]], + [[album:cool-and-new-greatest-hits]]
[[tag:dave]]
#e00707		(same)[[flash-act:a6i2]]
[[tag:jade]]
#4ac925		(same)[[album:homestuck-vol-8]]
[[tag:jane]]
#00d5f2		(same), + #0097d7-
[[tag:roxy]]
#ff6ff2		(same)-
[[tag:dirk]]
#f2a400		(same)[[flash-act:a6a2]], + [[album:beyond-canon]], + [[album:homestuck-vol-9]], + [[album:diverging-delicacies]]
[[tag:jake]]
#1f9400		(same)-
[[tag:aradia]]
#eb0000		#a10000[[flash-act:a6i1]], [[album:rust-apocalypse]]
[[tag:tavros]]
#c36100		#a15000-
[[tag:sollux]]
#a1a100		(same)-
[[tag:karkat]]
#7c7e81		#626262, + (same)[[flash-act:karkat-goes-to-a-convention]]
[[tag:kankri]]
#ff0000		(same)It's the color red...
[[tag:nepeta]]
#588a00		#416600-
[[tag:kanaya]]
#008f48		#008141-
[[tag:terezi]]
#008b8b		#008282-
[[tag:vriska]]
#3796c6		#005682-
[[tag:equius]]
#487aef		#000056-
[[tag:gamzee]]
#a34bff		#2b0057[[album:toxic-love]], + [[album:capricious-mistress-single]]
[[tag:eridan]]
#db00db		#6a006a-
[[tag:feferi]]
#e30072		#77003c-
[[tag:calliope]]
#00e500		#929292, + #a1a3a6, + #2ed73a[[track:reverie]], [[track:candy-epilogue]]
[[tag:caliborn]]
#e50000		#323232 + #009c68 + #ff0000[[track:carne-vale]], [[track:meat-epilogue]]
[[tag:lord-english]]
#2ed73a		(same)Also [[tag:lil-cal]]; + [[flash-act:a5a2]]
[[tag:johns-dad]]
#e0e0e0		#4b4b4bAlso used for first guardians and assorted "colorless" characters, such as [[tag:snowman]], [[tag:mspa-reader]], [[tag:wv]], [[tag:serenity]]
[[tag:joey]]
#41a455		#71daff-
[[tag:jude]]
#06c9cc		#d3ff8f-
[[tag:harry]]
#0671cd		(same)-
[[tag:tavvy]]
#a44bff		#2b0057-
[[tag:horrorterrors]]
#b678ce		#4d006d-
[[tag:prospit]]
#ffff01		#e49700, + (same)Also [[tag:mobius-trip]]
[[tag:derse]]
#ff01fe		#9700e4, + (same)Also [[tag:hadron-kaleido]]
-- cgit 1.3.0-6-gf8a5