mbk/cohost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

name-color promo

Browse source
This commit is contained in:
mehbark 2024-07-10 22:58:52 -04:00
parent 49db77a950
commit aac7049f7b
1 changed files with 73 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
pch/name-color-promo.toml Normal file
View file

@ -0,0 +1,73 @@
version = 1
[[modules]]
plugin = 'source.text'
data.contents = '''
drag to see the wonderful, magical, beautiful, awesome and transformative awesome wonder of the <span style="font-family: serif">name-color</span> system that is wonderful:
<div id=main>
<div id=example>
<p>did you know that <span style="color: #3eba73">@webark</span> was originally created by <span style="color: #008282">@mehbark</span>? it's true! nowadays, <span style="color: #3eba73">@webark</span> has many members, commonly referred to internally as "shards," such as <span style="color: #ff007b">@auramgold</span>, <span style="color: #008282">@mehbark</span>, and <span style="color: #134c93">@testbark</span> (okay, not that last one).</p>
<p>
due to their inevitably tumultuous nature, <span style="color: #3eba73">@webark</span> and its spinoffs, such as @webark-meta and <span style="color: #ffdddd">@diarrhea-dogblast</span>, are known to change handles often. they have even swapped in the past. not many accounts have name-colors so uh shout out to <span style="color: #39B366">@LemmaEOF</span>
</p>
</div>
<div id=slider-holder>
<div id=ungrey></div>
<div id=greyer></div>
</div>
</div>'''
data.language = 'html'
sends = [2]
title = 'html'
[[modules]]
plugin = 'source.lesscss'
data.contents = '''
#main {
display: grid;
width: min(80%, 12cm);
max-width: auto;
margin: 0 auto;
}
#main > * {
grid-area: 1/1;
}
#slider-holder {
height: 100%;
display: flex;
max-width: 100%;
overflow: hidden;
pointer-events: none;
}
#ungrey {
width: 10%;
height: 100%;
overflow: hidden;
resize: horizontal;
border-right: 2px solid rgb(var(--color-cherry));
max-width: 100%;
min-width: 0;
pointer-events: all;
}
#greyer {
backdrop-filter: grayscale(1);
height: 100%;
flex: 1;
max-width: auto;
min-width: 0;
}'''
sends = [2]
[[modules]]
plugin = 'transform.style-inliner'
data.mode = 'attr'
sends = ['output']
[[modules]]
plugin = 'source.lesscss'
data.contents = ''
graphPos = [-120, 192]