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]