526 lines
36 KiB
TOML
526 lines
36 KiB
TOML
version = 1
|
|
title = 'Style Inlining'
|
|
|
|
[[modules]]
|
|
plugin = 'source.text'
|
|
data.contents = '''
|
|
<div id=grid>
|
|
<div id=sky></div>
|
|
<div class=same-place id=moon>🌝</div>
|
|
<div class=same-place id=sun>🌞</div>
|
|
<div id="stars" class="same-place"><div class="star same-place" style="transform: translate(calc(-11.69rem * var(--tw-border-opacity, 0)), calc(-18.50rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(16.74rem * var(--tw-border-opacity, 0)), calc(2.63rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-5.67rem * var(--tw-border-opacity, 0)), calc(-0.75rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(1.55rem * var(--tw-border-opacity, 0)), calc(12.29rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-10.63rem * var(--tw-border-opacity, 0)), calc(-8.06rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(15.61rem * var(--tw-border-opacity, 0)), calc(16.46rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(4.42rem * var(--tw-border-opacity, 0)), calc(4.54rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(8.36rem * var(--tw-border-opacity, 0)), calc(3.39rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-2.88rem * var(--tw-border-opacity, 0)), calc(0.51rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(3.10rem * var(--tw-border-opacity, 0)), calc(0.05rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-24.24rem * var(--tw-border-opacity, 0)), calc(-21.06rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(15.48rem * var(--tw-border-opacity, 0)), calc(20.98rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-9.46rem * var(--tw-border-opacity, 0)), calc(-5.21rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-14.70rem * var(--tw-border-opacity, 0)), calc(15.89rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(8.28rem * var(--tw-border-opacity, 0)), calc(-11.25rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-13.26rem * var(--tw-border-opacity, 0)), calc(-5.86rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(15.09rem * var(--tw-border-opacity, 0)), calc(24.96rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-12.67rem * var(--tw-border-opacity, 0)), calc(-8.80rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(5.47rem * var(--tw-border-opacity, 0)), calc(-19.55rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(20.10rem * var(--tw-border-opacity, 0)), calc(12.32rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(16.06rem * var(--tw-border-opacity, 0)), calc(18.49rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-24.24rem * var(--tw-border-opacity, 0)), calc(-24.24rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-10.29rem * var(--tw-border-opacity, 0)), calc(8.80rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-16.77rem * var(--tw-border-opacity, 0)), calc(12.94rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(8.02rem * var(--tw-border-opacity, 0)), calc(8.40rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(5.42rem * var(--tw-border-opacity, 0)), calc(-11.14rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(6.31rem * var(--tw-border-opacity, 0)), calc(21.19rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-2.71rem * var(--tw-border-opacity, 0)), calc(6.22rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(13.77rem * var(--tw-border-opacity, 0)), calc(6.16rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(21.28rem * var(--tw-border-opacity, 0)), calc(23.93rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-14.99rem * var(--tw-border-opacity, 0)), calc(10.99rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(3.22rem * var(--tw-border-opacity, 0)), calc(14.28rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-1.96rem * var(--tw-border-opacity, 0)), calc(5.89rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-5.84rem * var(--tw-border-opacity, 0)), calc(-17.10rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(24.40rem * var(--tw-border-opacity, 0)), calc(-2.35rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(7.06rem * var(--tw-border-opacity, 0)), calc(-17.17rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-1.68rem * var(--tw-border-opacity, 0)), calc(-4.28rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-19.39rem * var(--tw-border-opacity, 0)), calc(-19.28rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-16.84rem * var(--tw-border-opacity, 0)), calc(21.73rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(23.04rem * var(--tw-border-opacity, 0)), calc(-4.63rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(24.94rem * var(--tw-border-opacity, 0)), calc(19.08rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-18.84rem * var(--tw-border-opacity, 0)), calc(-11.23rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-19.08rem * var(--tw-border-opacity, 0)), calc(3.73rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-3.61rem * var(--tw-border-opacity, 0)), calc(-6.14rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-24.77rem * var(--tw-border-opacity, 0)), calc(-15.71rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-4.49rem * var(--tw-border-opacity, 0)), calc(-22.85rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(4.22rem * var(--tw-border-opacity, 0)), calc(15.35rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-5.06rem * var(--tw-border-opacity, 0)), calc(14.23rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-23.22rem * var(--tw-border-opacity, 0)), calc(-10.70rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(5.57rem * var(--tw-border-opacity, 0)), calc(-17.97rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-6.03rem * var(--tw-border-opacity, 0)), calc(-13.35rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(4.68rem * var(--tw-border-opacity, 0)), calc(5.44rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-11.80rem * var(--tw-border-opacity, 0)), calc(-10.39rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(23.39rem * var(--tw-border-opacity, 0)), calc(14.23rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-17.71rem * var(--tw-border-opacity, 0)), calc(-20.35rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-4.41rem * var(--tw-border-opacity, 0)), calc(-12.41rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-3.10rem * var(--tw-border-opacity, 0)), calc(14.25rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-10.18rem * var(--tw-border-opacity, 0)), calc(-22.38rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(22.87rem * var(--tw-border-opacity, 0)), calc(18.49rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(23.20rem * var(--tw-border-opacity, 0)), calc(-20.86rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(9.64rem * var(--tw-border-opacity, 0)), calc(-4.66rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(4.43rem * var(--tw-border-opacity, 0)), calc(-5.19rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-21.18rem * var(--tw-border-opacity, 0)), calc(16.91rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-1.19rem * var(--tw-border-opacity, 0)), calc(-23.12rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(18.01rem * var(--tw-border-opacity, 0)), calc(-2.80rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-4.67rem * var(--tw-border-opacity, 0)), calc(-9.31rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-20.03rem * var(--tw-border-opacity, 0)), calc(15.48rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-8.72rem * var(--tw-border-opacity, 0)), calc(11.79rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(21.38rem * var(--tw-border-opacity, 0)), calc(0.46rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(10.35rem * var(--tw-border-opacity, 0)), calc(-16.41rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(8.84rem * var(--tw-border-opacity, 0)), calc(-2.50rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(17.24rem * var(--tw-border-opacity, 0)), calc(20.01rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(3.67rem * var(--tw-border-opacity, 0)), calc(-13.85rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-14.88rem * var(--tw-border-opacity, 0)), calc(12.31rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(13.86rem * var(--tw-border-opacity, 0)), calc(13.70rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(15.24rem * var(--tw-border-opacity, 0)), calc(24.58rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-3.26rem * var(--tw-border-opacity, 0)), calc(-0.97rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(9.68rem * var(--tw-border-opacity, 0)), calc(-0.33rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(23.44rem * var(--tw-border-opacity, 0)), calc(-12.44rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(12.12rem * var(--tw-border-opacity, 0)), calc(16.33rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-15.89rem * var(--tw-border-opacity, 0)), calc(3.43rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(10.23rem * var(--tw-border-opacity, 0)), calc(11.64rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(10.94rem * var(--tw-border-opacity, 0)), calc(-20.34rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(18.71rem * var(--tw-border-opacity, 0)), calc(1.31rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(9.60rem * var(--tw-border-opacity, 0)), calc(-5.04rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(15.26rem * var(--tw-border-opacity, 0)), calc(0.68rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-12.98rem * var(--tw-border-opacity, 0)), calc(8.43rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(8.54rem * var(--tw-border-opacity, 0)), calc(14.21rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-23.34rem * var(--tw-border-opacity, 0)), calc(-4.97rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(2.00rem * var(--tw-border-opacity, 0)), calc(10.54rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-16.46rem * var(--tw-border-opacity, 0)), calc(-11.00rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-7.26rem * var(--tw-border-opacity, 0)), calc(20.83rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-10.71rem * var(--tw-border-opacity, 0)), calc(-3.12rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(18.98rem * var(--tw-border-opacity, 0)), calc(10.87rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(14.12rem * var(--tw-border-opacity, 0)), calc(3.67rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(17.85rem * var(--tw-border-opacity, 0)), calc(-16.20rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-21.69rem * var(--tw-border-opacity, 0)), calc(-5.83rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(20.60rem * var(--tw-border-opacity, 0)), calc(23.63rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-3.00rem * var(--tw-border-opacity, 0)), calc(2.93rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(15.54rem * var(--tw-border-opacity, 0)), calc(16.39rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-2.33rem * var(--tw-border-opacity, 0)), calc(0.08rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-15.53rem * var(--tw-border-opacity, 0)), calc(20.38rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(24.89rem * var(--tw-border-opacity, 0)), calc(-23.55rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-0.51rem * var(--tw-border-opacity, 0)), calc(11.02rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(21.04rem * var(--tw-border-opacity, 0)), calc(-10.23rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(16.33rem * var(--tw-border-opacity, 0)), calc(-11.94rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-1.99rem * var(--tw-border-opacity, 0)), calc(-20.25rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-24.00rem * var(--tw-border-opacity, 0)), calc(0.06rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-15.99rem * var(--tw-border-opacity, 0)), calc(-6.52rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-9.67rem * var(--tw-border-opacity, 0)), calc(-17.02rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(8.62rem * var(--tw-border-opacity, 0)), calc(-14.32rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(8.04rem * var(--tw-border-opacity, 0)), calc(0.72rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-24.60rem * var(--tw-border-opacity, 0)), calc(-24.07rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(18.33rem * var(--tw-border-opacity, 0)), calc(16.10rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-6.93rem * var(--tw-border-opacity, 0)), calc(24.63rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-11.08rem * var(--tw-border-opacity, 0)), calc(-20.57rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(22.90rem * var(--tw-border-opacity, 0)), calc(-3.70rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(3.75rem * var(--tw-border-opacity, 0)), calc(22.87rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-9.46rem * var(--tw-border-opacity, 0)), calc(-23.46rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(11.18rem * var(--tw-border-opacity, 0)), calc(20.77rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(23.53rem * var(--tw-border-opacity, 0)), calc(10.92rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(22.29rem * var(--tw-border-opacity, 0)), calc(-8.56rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-4.88rem * var(--tw-border-opacity, 0)), calc(-11.14rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-0.80rem * var(--tw-border-opacity, 0)), calc(-6.64rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(18.48rem * var(--tw-border-opacity, 0)), calc(1.01rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-19.91rem * var(--tw-border-opacity, 0)), calc(-19.32rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(7.97rem * var(--tw-border-opacity, 0)), calc(-5.32rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-18.15rem * var(--tw-border-opacity, 0)), calc(-0.67rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(13.63rem * var(--tw-border-opacity, 0)), calc(9.12rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(22.23rem * var(--tw-border-opacity, 0)), calc(14.81rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-10.76rem * var(--tw-border-opacity, 0)), calc(-7.00rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(14.27rem * var(--tw-border-opacity, 0)), calc(-15.39rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(2.33rem * var(--tw-border-opacity, 0)), calc(13.98rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(22.67rem * var(--tw-border-opacity, 0)), calc(14.20rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-0.38rem * var(--tw-border-opacity, 0)), calc(3.42rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(20.07rem * var(--tw-border-opacity, 0)), calc(22.92rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-5.23rem * var(--tw-border-opacity, 0)), calc(19.80rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(16.52rem * var(--tw-border-opacity, 0)), calc(6.61rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(5.17rem * var(--tw-border-opacity, 0)), calc(-16.74rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-21.84rem * var(--tw-border-opacity, 0)), calc(23.73rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-15.22rem * var(--tw-border-opacity, 0)), calc(-0.34rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-11.97rem * var(--tw-border-opacity, 0)), calc(15.53rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(16.69rem * var(--tw-border-opacity, 0)), calc(-17.40rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(10.89rem * var(--tw-border-opacity, 0)), calc(-14.59rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-16.35rem * var(--tw-border-opacity, 0)), calc(23.55rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-20.62rem * var(--tw-border-opacity, 0)), calc(6.29rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-14.89rem * var(--tw-border-opacity, 0)), calc(-2.67rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(15.00rem * var(--tw-border-opacity, 0)), calc(-7.29rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(6.96rem * var(--tw-border-opacity, 0)), calc(7.49rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-6.33rem * var(--tw-border-opacity, 0)), calc(23.98rem * var(--tw-border-opacity, 0)));">*</div></div>
|
|
</div>
|
|
'''
|
|
data.language = 'html'
|
|
sends = [2]
|
|
|
|
[[modules]]
|
|
plugin = 'source.text'
|
|
data.contents = '''
|
|
.same-place {
|
|
grid-area: 1/1;
|
|
}
|
|
|
|
#moon, #sun {
|
|
font-size: 5rem;
|
|
height: 100%;
|
|
transform-origin: bottom;
|
|
transition: transform 5s;
|
|
}
|
|
|
|
#stars {
|
|
color: white;
|
|
display: grid;
|
|
z-index: -100;
|
|
opacity: var(--tw-border-opacity, 0);
|
|
transition: opacity 0s 5s;
|
|
//outline: 1px solid red;
|
|
aspect-ratio: 1/2;
|
|
}
|
|
|
|
.star {
|
|
text-align: center;
|
|
transition: transform 1s 5s;
|
|
transform-origin: top;
|
|
}
|
|
|
|
#sun {
|
|
transform: rotate(calc(0.5turn * var(--tw-border-opacity, 0)));
|
|
}
|
|
|
|
#moon {
|
|
transform: rotate(calc(-0.5turn * (1 - var(--tw-border-opacity, 0))));
|
|
}
|
|
|
|
#grid {
|
|
display: grid;
|
|
width: 100%;
|
|
aspect-ratio: 2/1;
|
|
justify-content: center;
|
|
align-items: center;
|
|
//background-color: rgb(157 252 238 / calc(1 - var(--tw-border-opacity, 0)));
|
|
transition: background-color 1s;
|
|
}
|
|
|
|
#bushes {
|
|
transform: translateY(calc(30rem * var(--tw-border-opacity, 0)));
|
|
transition: transform 5s;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
display: grid;
|
|
z-index: -100;
|
|
opacity: calc(1 - var(--tw-border-opacity, 0));
|
|
}
|
|
|
|
.bush {
|
|
aspect-ratio: 1;
|
|
background-color: #32b83f;
|
|
border-radius: 4113rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#sky {
|
|
width: 100vw;
|
|
height: 1000rem;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: red;
|
|
background: linear-gradient(to bottom, rgb(107, 207, 255), rgb(75, 197, 255), rgb(51, 190, 255), rgb(0, 173, 255), rgb(133, 89, 136), rgb(107, 73, 132), rgb(72, 52, 117), rgb(43, 47, 119), rgb(20, 24, 82), rgb(7, 11, 52), black);
|
|
background-repeat: no-repeat;
|
|
background-position-y: calc(-1000rem * var(--tw-border-opacity, 0));
|
|
transition: background-position 5s;
|
|
}'''
|
|
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 = '''
|
|
@font-face { font-family: "League Mono";
|
|
src: url("../src/fonts/LeagueMono-VF.woff") format("woff");
|
|
font-weight: 100 900;
|
|
font-stretch: 50% 200%;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Papyrus";
|
|
src: local("Papyrus"), url("../src/fonts/Papyrus.woff") format("woff"),
|
|
url("../src/fonts/Papyrus.woff2") format("woff2");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@mixin display {
|
|
font-family: "League Mono", serif;
|
|
}
|
|
|
|
@mixin body {
|
|
font-family: "Atkinson Hyperlegible", sans-serif;
|
|
}
|
|
|
|
.headline {
|
|
@include display;
|
|
font-size: 2.25rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.subhed {
|
|
@include display;
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.big-body {
|
|
@include body;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.big-body-thin {
|
|
@include body;
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
}
|
|
/* source-code-pro-cyrillic-ext-400-normal */
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
font-style: normal;
|
|
font-display: swap;
|
|
font-weight: 400;
|
|
src: url(./files/source-code-pro-cyrillic-ext-400-normal.woff2) format('woff2'), url(./files/source-code-pro-cyrillic-ext-400-normal.woff) format('woff');
|
|
unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
|
|
}
|
|
|
|
/* source-code-pro-cyrillic-400-normal */
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
font-style: normal;
|
|
font-display: swap;
|
|
font-weight: 400;
|
|
src: url(./files/source-code-pro-cyrillic-400-normal.woff2) format('woff2'), url(./files/source-code-pro-cyrillic-400-normal.woff) format('woff');
|
|
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
|
|
}
|
|
|
|
/* source-code-pro-greek-ext-400-normal */
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
font-style: normal;
|
|
font-display: swap;
|
|
font-weight: 400;
|
|
src: url(./files/source-code-pro-greek-ext-400-normal.woff2) format('woff2'), url(./files/source-code-pro-greek-ext-400-normal.woff) format('woff');
|
|
unicode-range: U+1F00-1FFF;
|
|
}
|
|
|
|
/* source-code-pro-greek-400-normal */
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
font-style: normal;
|
|
font-display: swap;
|
|
font-weight: 400;
|
|
src: url(./files/source-code-pro-greek-400-normal.woff2) format('woff2'), url(./files/source-code-pro-greek-400-normal.woff) format('woff');
|
|
unicode-range: U+0370-03FF;
|
|
}
|
|
|
|
/* source-code-pro-vietnamese-400-normal */
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
font-style: normal;
|
|
font-display: swap;
|
|
font-weight: 400;
|
|
src: url(./files/source-code-pro-vietnamese-400-normal.woff2) format('woff2'), url(./files/source-code-pro-vietnamese-400-normal.woff) format('woff');
|
|
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
|
|
}
|
|
|
|
/* source-code-pro-latin-ext-400-normal */
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
font-style: normal;
|
|
font-display: swap;
|
|
font-weight: 400;
|
|
src: url(./files/source-code-pro-latin-ext-400-normal.woff2) format('woff2'), url(./files/source-code-pro-latin-ext-400-normal.woff) format('woff');
|
|
unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
|
|
}
|
|
|
|
/* source-code-pro-latin-400-normal */
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
font-style: normal;
|
|
font-display: swap;
|
|
font-weight: 400;
|
|
src: url(./files/source-code-pro-latin-400-normal.woff2) format('woff2'), url(./files/source-code-pro-latin-400-normal.woff) format('woff');
|
|
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
|
}
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
[type="text"],
|
|
[type="email"],
|
|
[type="url"],
|
|
[type="password"],
|
|
[type="number"],
|
|
[type="date"],
|
|
[type="datetime-local"],
|
|
[type="month"],
|
|
[type="search"],
|
|
[type="tel"],
|
|
[type="time"],
|
|
[type="week"],
|
|
[multiple],
|
|
textarea,
|
|
select {
|
|
@apply bg-notWhite text-notBlack placeholder-gray-700;
|
|
}
|
|
|
|
*:focus {
|
|
// outline: 3px solid rebeccapurple;
|
|
@apply outline outline-4 outline-foreground;
|
|
@apply ring-foreground #{!important};
|
|
}
|
|
|
|
/* Remove :focus styling for browsers that do support :focus-visible */
|
|
*:focus:not(:focus-visible) {
|
|
@apply outline-none;
|
|
}
|
|
|
|
/* Add focus styling back in browsers that do support :focus-visible */
|
|
*:focus-visible {
|
|
@apply outline outline-4 outline-foreground;
|
|
@apply ring-foreground #{!important};
|
|
}
|
|
|
|
* {
|
|
@apply antialiased;
|
|
}
|
|
|
|
html {
|
|
--font-sans: theme("fontFamily.sans");
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
// TODO: clean up use of h* elements everywhere so we don't have to use
|
|
// classes for heading styles
|
|
.h1 {
|
|
@apply font-league text-8xl font-semibold tracking-[-0.07em];
|
|
font-stretch: 200%;
|
|
}
|
|
|
|
.h2 {
|
|
@apply font-league text-6xl font-normal tracking-[-0.07em];
|
|
font-stretch: 150%;
|
|
}
|
|
|
|
.h3 {
|
|
@apply font-atkinson text-5xl;
|
|
}
|
|
|
|
.h4 {
|
|
@apply font-atkinson text-4xl font-bold;
|
|
}
|
|
|
|
.h5 {
|
|
@apply font-league text-2xl tracking-tighter;
|
|
}
|
|
|
|
.h6 {
|
|
@apply font-league text-xl font-semibold leading-6 tracking-tighter;
|
|
}
|
|
|
|
.subtitle-1 {
|
|
@apply font-atkinson text-base;
|
|
}
|
|
|
|
.subtitle-2 {
|
|
@apply font-atkinson text-sm font-bold tracking-wide;
|
|
}
|
|
|
|
.body-1 {
|
|
@apply font-atkinson text-base;
|
|
}
|
|
|
|
.body-2 {
|
|
@apply font-atkinson text-sm;
|
|
}
|
|
|
|
[type="radio"] {
|
|
@apply appearance-none border-2 border-foreground checked:bg-foreground
|
|
checked:focus:bg-foreground;
|
|
}
|
|
|
|
[id$="footnote-label"] {
|
|
@apply sr-only;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
@apply bg-notWhite text-cherry disabled:cursor-not-allowed disabled:text-cherry-300;
|
|
|
|
&.rounded-checkbox {
|
|
@apply h-6 w-6 rounded-lg border-2 border-foreground text-foreground focus:ring-foreground;
|
|
}
|
|
}
|
|
|
|
div[data-post-preview] hr:first-of-type {
|
|
@apply overflow-visible;
|
|
|
|
&::after {
|
|
content: "read more";
|
|
|
|
@apply relative left-4 top-[-1rem];
|
|
@apply bg-white px-2 text-sm font-bold text-gray-700;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.mask {
|
|
mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
}
|
|
|
|
.mask-squircle {
|
|
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==);
|
|
}
|
|
|
|
.mask-roundrect {
|
|
@apply rounded-[12.5%];
|
|
}
|
|
|
|
.mask-circle {
|
|
@apply rounded-full;
|
|
}
|
|
|
|
.mask-egg {
|
|
mask-image: url("../client/images/icons/egg.svg");
|
|
}
|
|
|
|
.mask-capsule-big {
|
|
mask-image: url("../client/images/icons/capsule-big.svg");
|
|
}
|
|
|
|
.mask-capsule-small {
|
|
mask-image: url("../client/images/icons/capsule-small.svg");
|
|
}
|
|
|
|
svg.cohost-shadow-light {
|
|
filter: drop-shadow(0px 4px 5px rgba(25, 25, 25, 0.14))
|
|
drop-shadow(0px 1px 10px rgba(25, 25, 25, 0.12))
|
|
drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
|
|
}
|
|
|
|
.cohost-shadow-light {
|
|
&.mask {
|
|
filter: drop-shadow(0px 4px 5px rgba(25, 25, 25, 0.14))
|
|
drop-shadow(0px 1px 10px rgba(25, 25, 25, 0.12))
|
|
drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
|
|
}
|
|
}
|
|
|
|
.cohost-shadow-dark {
|
|
&.mask {
|
|
filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14))
|
|
drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12))
|
|
drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
|
|
}
|
|
}
|
|
|
|
svg.cohost-shadow-dark {
|
|
filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14))
|
|
drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12))
|
|
drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
|
|
}
|
|
|
|
:not(svg):not(.mask).cohost-shadow-light {
|
|
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);
|
|
}
|
|
|
|
:not(svg):not(.mask).cohost-shadow-dark {
|
|
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);
|
|
}
|
|
|
|
.duotone-wrapper {
|
|
@apply relative flex h-full overflow-hidden bg-mango;
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
.duotone-wrapper div {
|
|
@apply relative h-full w-full max-w-full mix-blend-multiply contrast-100 grayscale will-change-transform;
|
|
flex: 1 0 100%;
|
|
}
|
|
|
|
.duotone-wrapper::before {
|
|
@apply absolute inset-0 z-[1] h-full w-full bg-cherry mix-blend-lighten;
|
|
content: "";
|
|
}
|
|
|
|
.styled-scrollbars-light {
|
|
scrollbar-color: rgb(var(--color-mango)) rgb(var(--color-notWhite));
|
|
}
|
|
|
|
.styled-scrollbars-dark {
|
|
scrollbar-color: rgb(var(--color-mango)) rgb(var(--color-notBlack));
|
|
}
|
|
}
|
|
|
|
@mixin base-button(
|
|
$border-width,
|
|
$border-line-style: none,
|
|
$border-color: currentcolor
|
|
) {
|
|
align-items: center;
|
|
border: $border-width $border-line-style $border-color;
|
|
border-radius: 200px;
|
|
display: flex;
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
// so the button works out the same height no matter the border width
|
|
padding: calc(0.5rem - #{$border-width}) 1rem;
|
|
|
|
svg:first-child {
|
|
// leave some extra space to the right of an icon, if one's present
|
|
margin-right: 0.5rem;
|
|
}
|
|
}
|
|
|
|
///////////////////////////////////////////////////////////////////////////////
|
|
// common styles
|
|
///////////////////////////////////////////////////////////////////////////////
|
|
.button-bar {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
* ~ .spacer {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.spacer ~ * {
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
|
|
// bring these in from the freshdesk widget so we don't have a loadbearing crime
|
|
// dependency on that
|
|
@keyframes slideupright {
|
|
0% {
|
|
transform: scale(0);
|
|
transform-origin: bottom right;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
transform-origin: bottom right;
|
|
}
|
|
}
|
|
|
|
@keyframes slideupleft {
|
|
0% {
|
|
transform: scale(0);
|
|
transform-origin: bottom left;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
transform-origin: bottom left;
|
|
}
|
|
}
|
|
'''
|
|
data.syntax = 'scss'
|
|
sends = [2]
|
|
graphPos = [-456, 120]
|
|
|
|
[[modules]]
|
|
plugin = 'source.sass'
|
|
data.contents = ''
|
|
data.syntax = 'scss'
|
|
|
|
[[modules]]
|
|
plugin = 'source.sass'
|
|
data.contents = ''
|
|
data.syntax = 'scss'
|