1. Demo
  2. Notes
  3. .html
  4. .njk & context
  5. Full Screen ↗

Size

TODO.

<div class="flow">
<p>Size 0</p>
<div class="bg--purple-650" style="height:var(--size-0);width:var(--size-0);"></div>
<p>Size 1</p>
<div class="bg--purple-650" style="height:var(--size-1);width:var(--size-1);"></div>
<p>Size 2</p>
<div class="bg--purple-650" style="height:var(--size-2);width:var(--size-2);"></div>
<p>Size 3</p>
<div class="bg--purple-650" style="height:var(--size-3);width:var(--size-3);"></div>
<p>Size 4</p>
<div class="bg--purple-650" style="height:var(--size-4);width:var(--size-4);"></div>
<p>Size 5</p>
<div class="bg--purple-650" style="height:var(--size-5);width:var(--size-5);"></div>
<p>Size 6</p>
<div class="bg--purple-650" style="height:var(--size-6);width:var(--size-6);"></div>
<p>Size 7</p>
<div class="bg--purple-650" style="height:var(--size-7);width:var(--size-7);"></div>
<p>Size 8</p>
<div class="bg--purple-650" style="height:var(--size-8);width:var(--size-8);"></div>
<p>Size 9</p>
<div class="bg--purple-650" style="height:var(--size-9);width:var(--size-9);"></div>
<p>Size 10</p>
<div class="bg--purple-650" style="height:var(--size-10);width:var(--size-10);"></div>
<p>Size 11</p>
<div class="bg--purple-650" style="height:var(--size-11);width:var(--size-11);"></div>
<p>Size 12</p>
<div class="bg--purple-650" style="height:var(--size-12);width:var(--size-12);"></div>
<p>Size 13</p>
<div class="bg--purple-650" style="height:var(--size-13);width:var(--size-13);"></div>
<p>Size 14</p>
<div class="bg--purple-650" style="height:var(--size-14);width:var(--size-14);"></div>
<p>Size 15</p>
<div class="bg--purple-650" style="height:var(--size-15);width:var(--size-15);"></div>
<p>Size 16</p>
<div class="bg--purple-650" style="height:var(--size-16);width:var(--size-16);"></div>
<p>Size 17</p>
<div class="bg--purple-650" style="height:var(--size-17);width:var(--size-17);"></div>
<p>Size 18</p>
<div class="bg--purple-650" style="height:var(--size-18);width:var(--size-18);"></div>
<p>Size 19</p>
<div class="bg--purple-650" style="height:var(--size-19);width:var(--size-19);"></div>
<p>Size 20</p>
<div class="bg--purple-650" style="height:var(--size-20);width:var(--size-20);"></div>
<p>Size 21</p>
<div class="bg--purple-650" style="height:var(--size-21);width:var(--size-21);"></div>
<p>Size 22</p>
<div class="bg--purple-650" style="height:var(--size-22);width:var(--size-22);"></div>
<p>Size 23</p>
<div class="bg--purple-650" style="height:var(--size-23);width:var(--size-23);"></div>
<p>Size 24</p>
<div class="bg--purple-650" style="height:var(--size-24);width:var(--size-24);"></div>
<p>Size 25</p>
<div class="bg--purple-650" style="height:var(--size-25);width:var(--size-25);"></div>
<p>Size 26</p>
<div class="bg--purple-650" style="height:var(--size-26);width:var(--size-26);"></div>
<p>Size 27</p>
<div class="bg--purple-650" style="height:var(--size-27);width:var(--size-27);"></div>
<p>Size 28</p>
<div class="bg--purple-650" style="height:var(--size-28);width:var(--size-28);"></div>
<p>Size 29</p>
<div class="bg--purple-650" style="height:var(--size-29);width:var(--size-29);"></div>
<p>Size 30</p>
<div class="bg--purple-650" style="height:var(--size-30);width:var(--size-30);"></div>
<p>Size 31</p>
<div class="bg--purple-650" style="height:var(--size-31);width:var(--size-31);"></div>
<p>Size 32</p>
<div class="bg--purple-650" style="height:var(--size-32);width:var(--size-32);"></div>
<p>Size 33</p>
<div class="bg--purple-650" style="height:var(--size-33);width:var(--size-33);"></div>
<p>Size 34</p>
<div class="bg--purple-650" style="height:var(--size-34);width:var(--size-34);"></div>
<p>Size 35</p>
<div class="bg--purple-650" style="height:var(--size-35);width:var(--size-35);"></div>
<p>Size 36</p>
<div class="bg--purple-650" style="height:var(--size-36);width:var(--size-36);"></div>
</div>
{{ c("size", {}) }}