version = 1
title = 'Style Inlining'

[[modules]]
plugin = 'source.text'
data.contents = '''
<div id=main>
  <div class=post>
    <img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
    <div class=content>
      <h1>"the setup was at the beginning"</h1>
      <p>has got to be one of my favorite quotes from anything ever. it's so rad</p>
    </div>
  </div>
  <div class=post>
    <img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
    <div class=content>
      <h1>hey guys welcome to my tumblr dash</h1>
      <p>please enjoy! and do not mention cartoons or i will  have no choice but to work with the <a href="https://fbi.gov">FBI</a></p>
      <div class=tags><a href="https://cohost.org/rc/tagged/I'm%20Not%20Going%20To%20Do%20Many%20Tags%20Because%20It%20Is%20A%20Pain%20Because%20I'm%20Writing%20This%20All%20By%20Hand%20For%20Some%20Reason">#I'm Not Going To Do Many Tags Because It Is A Pain Because I'm Writing This All By Hand For Some Reason</a> <a href="https://cohost.org/rc/tagged/not%20sure%20why%20i%20was%20kanaya%20there">#not sure why i was kanaya there</a></div>
    </div>
  </div>
  <div class=post>
    <img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
    <div class=content>
      <h1>apparently tumblr lost all of their sans clothes</h1>
      <p>hence everything being bare-bones right now</p>
      <div class=tags><a href="https://cohost.org/rc/tagged/badumtiss">#badumtiss</a></div>
    </div>
  </div>
    <div class=post>
    <img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
    <div class=content>
      <h1>it is becoming quickly apparent that i cannot tumblr post</h1>
      <p>i have no idea what i'm doing, so i'll do what i always do in this situation: do a bunch and hope that makes things funny</p>
      <div class=tags><a href="https://cohost.org/rc/tagged/badumtiss">#badumtiss</a></div>
    </div>
  </div>
  <div class="ch post">
    <img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
    <div class=content>
      <div style="margin:0"><!--ps=2--><div style="margin:0;display:flex;align-items:center;border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:rgb(var(--color-notWhite));padding:0.75rem;box-shadow:0px -4px 5px rgba(25,25,25,0.14),0px -1px 10px rgba(25,25,25,0.12),0px -2px 4px rgba(0,0,0,0.2)"><div style="margin:0;display:flex;flex:1 1 0%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5rem;line-height:1"><a href="https://cohost.org/mehbark" style="margin:0;text-decoration:none;color:#686664">@mehbark</a><a href="https://cohost.org/mehbark/post/4550377-hey-guys/dbb81e7b5db74ffd942bf76ea5eb72a6" style="margin:0;text-decoration:none;font-size:0.75rem;color:#827f7c">10.2 hr. ago</a></div><img src="https://static.pyrope.net/cohost-post-options.png" alt="the cohost icon for post options" style="margin:0"></div><div style="margin:0;background-color:rgb(var(--color-notWhite))"><hr style="border-color:#bfbab5;margin:0 0.75rem"></div><div style="margin:0;box-shadow:0px 4px 5px rgba(0,0,0,0.14),0px 1px 10px rgba(0,0,0,0.12),0px 2px 4px rgba(0,0,0,0.2);background-color:white"><div style="margin:0;padding:0.75rem"><a href="https://cohost.org/mehbark/post/4550377-hey-guys/dbb81e7b5db74ffd942bf76ea5eb72a6" style="margin:0;text-decoration:none;font-size:1.25rem;line-height:1.75rem"><h1 style="margin:0;color:black;font-size:inherit">hey guys</h1></a></div><div style="display:flex;margin:0"><div style="margin:0;padding-left:0.75rem;padding-right:0.75rem;margin-top:1rem;margin-bottom:1rem;color:rgb(var(--color-notBlack))">oh wait oops wrong website</div></div></div><div style="margin:0;background-color:rgb(var(--color-notWhite))"><hr style="border-color:#bfbab5;margin:0 0.75rem"></div><div style="margin:0;background:rgb(var(--color-notWhite));font-size:0.875rem;color:gray;padding:0.75rem;border-bottom-right-radius:0.5rem;border-bottom-left-radius:0.5rem;box-shadow:0px 4px 5px rgba(25,25,25,0.14),0px 1px 10px rgba(25,25,25,0.12),0px 2px 4px rgba(0,0,0,0.2)"><div style="margin:0;display:flex;justify-content:space-between"><a href="https://413.gay" style="margin:0;text-decoration:none">413 comments</a><div style="margin:0;display:flex;align-items:center;gap:0.75rem"><img src="https://static.pyrope.net/cohost-reblog.png" alt="the cohost reblog icon" style="margin:0"><img src="https://static.pyrope.net/cohost-like.png" alt="the cohost like icon" style="margin:0"></div></div></div></div>
    </div>
  </div>
  <div class=post>
    <img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
    <div class=content>
      <h1>wait</h1>
    </div>
  </div>
  <div class=post>
    <img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
    <div class=content>
      <h1>is there anyone else here?</h1>
      <p>and why is it chron instead of reverse chron???</p>
    </div>
  </div>
  <div class=post>
    <img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
    <div class=content>
      <h1>this is honestly scary :(((</h1>
    </div>
  </div>
  <div class=post>
    <img src="https://static.wikia.nocookie.net/mspaintadventures/images/8/81/Vriska_Serket.png" alt="vriska serket from homestuck">
    <div class=content>
      <h1 style="color: #005682">Hi!!!!!!!!</h1>
      <div class=tags>
        <a href="https://cohost.org/rc/tagged/8">#8</a>
        <a href="https://cohost.org/rc/tagged/vriska">#vriska</a>
        <a href="https://cohost.org/rc/tagged/dice">#dice</a>
        <a href="https://cohost.org/rc/tagged/vision%20eightfold">#vision eightfold</a>
        <a href="https://cohost.org/rc/tagged/etc">#etc</a>
      </div>
    </div>
  </div>
  <div class=post>
    <img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
    <div class=content>
      <h1>your tagging is utterly absurd BUT</h1>
      <p>hi vriska!! whatttttt this is so crazy! mehtumblr is so awesome this is a good post and not a waste of time</p>
    </div>
  </div>
    <div class=post>
    <img src="https://static.wikia.nocookie.net/mspaintadventures/images/9/96/Terezi_Pyrope.png" alt="terezi pyrope from homestuck">
    <div class=content>
      <h1 style="color: #008282">H1-</h1>
    </div>
  </div>
  <div class=post>
    <img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
    <div class=content>
      <div style="overflow: visible; width: 0">
      <h1 style="color: red; font-size: 10cm; white-space: nowrap; margin: 0; transform: rotate(355deg); animation: spin 0.05s infinite alternate-reverse linear both;">HOLY CRAP TEREZI WHAT</h1>
      </div>
    </div>
  </div>
  <div class=post>
    <img src="https://static.wikia.nocookie.net/mspaintadventures/images/9/96/Terezi_Pyrope.png" alt="terezi pyrope from homestuck">
    <div class=content>
      <h1 style="color: #008282">PUNCHL1N3</h1>
    </div>
  </div>
  <div class=post>
    <img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
    <div class=content>
      <h1>oh terezi, you're so funny</h1>
      <p>there being a punchline would imply that there was a setup!</p>
      <p>
        oh, right,
      </p>
    </div>
  </div>
</div>'''
data.language = 'html'
sends = [2]

[[modules]]
plugin = 'source.text'
data.contents = '''

#main {
  font-family: helvetica, sans-serif;
  background-color: #36465D;
  width: 100%;
  margin: 0;
  background-clip: border-box;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: scroll;
  color: black;
  //height: 50vh;
}

.post {
  display: flex;
  gap: 1rem;
}

.content > h1 {
  font-size: 1.5rem;
}

.post > img {
  border-radius: 5%;
  object-fit: cover;
  aspect-ratio: 1;
  margin-top: 0;
  margin-bottom: auto;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.content {
  background-color: white;
  flex: 9 0 20%;
  border-radius: 7px;
  padding: 1rem;
}

.ch.post > .content {
  padding: 0;
  font-family: Atkinson Hyperlegible, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.tags {
  font-size: 0.8rem;
  color: grey;
}

.tags > a {
  text-decoration: none;
}'''
data.language = 'css'
sends = [2]

[[modules]]
plugin = 'transform.style-inliner'
data.mode = 'attr'
sends = [3]

[[modules]]
plugin = 'transform.svg-to-background'
data.useSvgo = true
sends = ['output']

[[modules]]
plugin = 'source.sass'
data.contents = ''
data.syntax = 'scss'
sends = [2]
graphPos = [-480, 168]

[[modules]]
plugin = 'source.sass'
data.contents = ''
data.syntax = 'scss'

[[modules]]
plugin = 'source.sass'
data.contents = ''
data.syntax = 'scss'