74 lines
2 KiB
TOML
74 lines
2 KiB
TOML
|
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]
|