161 lines
3 KiB
TOML
161 lines
3 KiB
TOML
version = 1
|
|
|
|
[[modules]]
|
|
plugin = 'source.text'
|
|
data.contents = '''
|
|
<div id=main>
|
|
<div id=circle>
|
|
<div id=text>
|
|
your brain<br>
|
|
tricks you into<br>
|
|
thinking that this is<br>
|
|
readable:<br>
|
|
jdfklieyhglmn
|
|
</div>
|
|
<div id=unwiggle>
|
|
<div id=wiggle>
|
|
<div id="alt-text-no-not-like-that">
|
|
<span class=old-text>
|
|
your brain<br>
|
|
tricks you into<br>
|
|
thinking that this is<br>
|
|
readable:<br>
|
|
</span>
|
|
<span class=new-text>
|
|
homestuck lol
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id=spooky>
|
|
<span class=old-text>
|
|
your brain<br>
|
|
tricks you into<br>
|
|
thinking that this is<br>
|
|
readable:<br>
|
|
</span>
|
|
<span>
|
|
<span class="word w1">BUT </span><span class="word w2">YOU </span><span class="word w3">KNOW </span><span class="word w4">THAT'S </span><br><span class="word w5">NOT </span><span class="word w6">TRUE </span><span class="word w7">RIGHT</span><span class="word w8">?</span>
|
|
</span>
|
|
</div>
|
|
</div>'''
|
|
data.language = 'html'
|
|
sends = [2]
|
|
title = 'html'
|
|
|
|
[[modules]]
|
|
plugin = 'source.lesscss'
|
|
data.contents = '''
|
|
#main {
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
}
|
|
|
|
#circle {
|
|
width: 50%;
|
|
height: 50%;
|
|
margin: auto;
|
|
border: 0.4rem solid rgb(calc(var(--tw-border-opacity,0)*255), calc(var(--tw-border-opacity,0)*255), calc(var(--tw-border-opacity,0)*255));
|
|
transition: color 1s ease;
|
|
border-radius: 413rem;
|
|
text-align: center;
|
|
display: grid;
|
|
}
|
|
|
|
#circle > div {
|
|
grid-area: 1/1;
|
|
}
|
|
|
|
.old-text {
|
|
color: transparent;
|
|
}
|
|
|
|
.new-text {
|
|
background-color: rgb(
|
|
calc((1 - var(--tw-border-opacity, 0)) * 255),
|
|
calc((1 - var(--tw-border-opacity, 0)) * 255),
|
|
calc((1 - var(--tw-border-opacity, 0)) * 255)
|
|
);
|
|
transition: background-color 1s ease;
|
|
}
|
|
|
|
#alt-text-no-not-like-that {
|
|
transform: translateX(40rem);
|
|
animation: spin 5s 10s both linear;
|
|
}
|
|
|
|
#wiggle {
|
|
transform: translateY(2rem);
|
|
animation: spin 0.25s 10s 20 alternate both ease;
|
|
}
|
|
|
|
#unwiggle {
|
|
transform: translateY(-2rem);
|
|
}
|
|
|
|
#spooky {
|
|
transform: scale(1.02);
|
|
animation: spin 0.5s both infinite alternate ease-out;
|
|
}
|
|
|
|
.word {
|
|
transform: translateY(40rem);
|
|
display: inline-block;
|
|
background-color: rgb(
|
|
calc((1 - var(--tw-border-opacity, 0)) * 255),
|
|
calc((1 - var(--tw-border-opacity, 0)) * 255),
|
|
calc((1 - var(--tw-border-opacity, 0)) * 255)
|
|
);
|
|
animation: spin 10s both linear;
|
|
color: maroon;
|
|
transition: background-color 1s ease;
|
|
}
|
|
|
|
.w1 {
|
|
animation-delay: 20s;
|
|
}
|
|
|
|
.w2 {
|
|
animation-delay: 22s;
|
|
}
|
|
|
|
.w3 {
|
|
animation-delay: 24s;
|
|
}
|
|
|
|
.w4 {
|
|
animation-delay: 26s;
|
|
}
|
|
|
|
.w5 {
|
|
animation-delay: 28s;
|
|
}
|
|
|
|
.w6 {
|
|
animation-delay: 30s;
|
|
}
|
|
|
|
.w7 {
|
|
animation-delay: 35s;
|
|
}
|
|
|
|
.w8 {
|
|
animation-delay: 40s;
|
|
}
|
|
|
|
.w5, .w6, .w7, .w8 {
|
|
background-color: none !important;
|
|
}'''
|
|
sends = [2]
|
|
|
|
[[modules]]
|
|
plugin = 'transform.style-inliner'
|
|
data.mode = 'attr'
|
|
sends = ['output']
|
|
|
|
[[modules]]
|
|
plugin = 'source.lesscss'
|
|
data.contents = ''
|
|
graphPos = [-120, 192]
|