acfd041 · rowtype-yoga/psfp

git.iko.soy/rowtype-yoga/psfp

Animate landing page

acfd041Mark Eibes7 years ago

.storybook/preview-head.html+9−3

@@ -1,8 +1,14 @@

1<link href="https://fonts.googleapis.com/css?family=Overpass|Playfair+Display|Montserrat:300,400,500,600,700,800,900&display=swap" rel="stylesheet">

2+<style>

2−<style> html, body, #app

3+ html, body, #app {

3− {

4−

5 margin: 0;

4 margin: 0;

6 padding: 0;

5 padding: 0;

7 }

6 }

7+ @font-face {

8+ font-family: "PragmataPro";

9+ src: url('./fonts/PragmataProLiga-Regular.woff2') format('woff2'),

10+ url('./fonts/PragmataProLiga-Regular.woff') format('woff');

11+ font-weight: normal;

12+ font-style: normal;

13+}

8</style>

14</style>

assets/images/landingpagelight.svg+1−1

@@ -1 +1 @@

1−<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 800 447" preserveAspectRatio="xMidYMax slice" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="0" y="0" width="800" height="446.374" style="fill:none;"/><clipPath id="_clip1"><rect x="0" y="0" width="800" height="446.374"/></clipPath><g clip-path="url(#_clip1)"><g id="Background"><path d="M800.828,448.051l0,-451.564l-803.856,0l0,451.564l803.856,0Z" style="fill:url(#_Linear2);"/><ellipse cx="720.558" cy="355.142" rx="647.316" ry="309.935" style="fill:url(#_Radial3);"/></g><g id="Stars" opacity="0.15"><circle cx="362.644" cy="4.733" r="1.461" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="334.392" cy="11.38" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="369.845" cy="6.949" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="49.291" cy="25.229" r="1.461" style="fill:#fee;fill-opacity:0.69;"/><circle cx="403.867" cy="17.97" r="1.461" style="fill:#fee;fill-opacity:0.69;"/><ellipse cx="125.013" cy="9.633" rx="0.737" ry="0.821" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="87.333" cy="15.439" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M709.089,15.919c-0.575,0.333 -1.312,0.135 -1.644,-0.44c-0.333,-0.576 -0.135,-1.313 0.44,-1.645c0.576,-0.332 1.313,-0.135 1.645,0.441c0.332,0.575 0.135,1.312 -0.441,1.644Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M716.544,3.358c-0.342,0.197 -0.779,0.08 -0.977,-0.262c-0.197,-0.341 -0.08,-0.779 0.262,-0.977c0.342,-0.197 0.779,-0.08 0.977,0.262c0.197,0.342 0.08,0.78 -0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M701.851,87.271c-0.342,0.198 -0.78,0.081 -0.977,-0.261c-0.197,-0.342 -0.08,-0.78 0.262,-0.977c0.341,-0.197 0.779,-0.08 0.976,0.262c0.198,0.341 0.081,0.779 -0.261,0.976Z" style="fill:#fffeee;fill-opacity:0.69;"/><path d="M669.995,7.519c-0.342,0.197 -0.78,0.08 -0.977,-0.262c-0.198,-0.341 -0.08,-0.779 0.261,-0.976c0.342,-0.198 0.78,-0.081 0.977,0.261c0.198,0.342 0.08,0.78 -0.261,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M465.032,24.138c-0.342,0.197 -0.779,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.78 0.262,-0.977c0.342,-0.197 0.779,-0.08 0.977,0.262c0.197,0.342 0.08,0.779 -0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M614.599,24.138c-0.341,0.197 -0.779,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.78 0.262,-0.977c0.342,-0.197 0.78,-0.08 0.977,0.262c0.197,0.342 0.08,0.779 -0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M691.664,7.383c-0.698,0.403 -1.592,0.163 -1.995,-0.535c-0.403,-0.698 -0.164,-1.592 0.534,-1.995c0.698,-0.403 1.592,-0.163 1.996,0.535c0.403,0.698 0.163,1.592 -0.535,1.995Z" style="fill:#fee;fill-opacity:0.69;"/><circle cx="198.7" cy="7.738" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="244.102" cy="79.308" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M104.17,29.677c0.342,0.198 0.78,0.08 0.977,-0.262c0.198,-0.341 0.08,-0.779 -0.261,-0.976c-0.342,-0.198 -0.78,-0.08 -0.977,0.261c-0.198,0.342 -0.08,0.78 0.261,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="203.07" cy="73.278" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="193.264" cy="22.459" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="157.667" cy="14.848" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="261.444" cy="28.257" r="0.805" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="223.281" cy="52.803" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M583.698,25.392c-0.342,-0.197 -0.78,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.78 0.262,0.977c0.342,0.197 0.779,0.08 0.977,-0.262c0.197,-0.341 0.08,-0.779 -0.262,-0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="330.57" cy="98.448" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="330.376" cy="79.267" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="365.972" cy="26.878" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="112.16" cy="59.167" r="0.44" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="800.966" cy="4.978" r="0.826" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="794.399" cy="127.828" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="771.687" cy="32.202" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="794.953" cy="26.108" r="1.461" style="fill:#fee;fill-opacity:0.69;"/><path d="M44.17,26.599c0.342,-0.198 0.78,-0.08 0.977,0.262c0.198,0.341 0.08,0.779 -0.261,0.976c-0.342,0.198 -0.78,0.08 -0.977,-0.261c-0.198,-0.342 -0.08,-0.78 0.261,-0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="133.264" cy="33.817" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="97.667" cy="41.428" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="201.444" cy="28.019" r="0.805" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="163.281" cy="23.473" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M523.698,30.884c-0.342,0.197 -0.78,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.78 0.262,-0.977c0.342,-0.197 0.779,-0.08 0.977,0.262c0.197,0.341 0.08,0.779 -0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="305.972" cy="29.398" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="769.852" cy="44.016" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="711.687" cy="24.074" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="734.953" cy="30.168" r="1.461" style="fill:#fee;fill-opacity:0.69;"/><circle cx="717.719" cy="10.364" r="0.673" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="756.911" cy="16.319" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M454.676,37.115c0.698,0.403 1.592,0.163 1.995,-0.535c0.403,-0.698 0.164,-1.592 -0.534,-1.995c-0.698,-0.403 -1.592,-0.164 -1.995,0.534c-0.404,0.698 -0.164,1.592 0.534,1.996Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M465.701,47.253c0.342,0.197 0.78,0.08 0.977,-0.262c0.197,-0.342 0.08,-0.779 -0.262,-0.977c-0.342,-0.197 -0.779,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.78 0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M32.393,28.151c0.342,0.197 0.78,0.08 0.977,-0.262c0.197,-0.342 0.08,-0.78 -0.262,-0.977c-0.341,-0.197 -0.779,-0.08 -0.976,0.262c-0.198,0.342 -0.08,0.779 0.261,0.977Z" style="fill:#fffeee;fill-opacity:0.69;"/><path d="M494.249,8.398c0.342,0.198 0.78,0.08 0.977,-0.261c0.198,-0.342 0.08,-0.78 -0.261,-0.977c-0.342,-0.198 -0.78,-0.08 -0.977,0.261c-0.198,0.342 -0.08,0.78 0.261,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M699.212,25.017c0.342,0.197 0.78,0.08 0.977,-0.262c0.197,-0.342 0.08,-0.779 -0.262,-0.977c-0.342,-0.197 -0.779,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.78 0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M549.645,25.017c0.342,0.197 0.779,0.08 0.977,-0.262c0.197,-0.342 0.08,-0.779 -0.262,-0.977c-0.342,-0.197 -0.78,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.78 0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M472.652,7.069c0.442,0.255 1.009,0.103 1.265,-0.339c0.255,-0.443 0.103,-1.01 -0.339,-1.265c-0.443,-0.256 -1.01,-0.104 -1.265,0.339c-0.256,0.442 -0.104,1.009 0.339,1.265Z" style="fill:#fee;fill-opacity:0.69;"/><path d="M416.68,31.856c0.488,0.282 1.112,0.114 1.394,-0.373c0.281,-0.488 0.114,-1.112 -0.374,-1.393c-0.487,-0.282 -1.112,-0.115 -1.393,0.373c-0.281,0.487 -0.114,1.112 0.373,1.393Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M529.444,13.243c0.565,0.326 1.289,0.132 1.615,-0.433c0.326,-0.565 0.132,-1.289 -0.433,-1.615c-0.565,-0.326 -1.289,-0.133 -1.615,0.433c-0.326,0.565 -0.132,1.288 0.433,1.615Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M498.917,29.864c0.52,0.3 1.186,0.122 1.486,-0.398c0.301,-0.52 0.122,-1.186 -0.398,-1.486c-0.52,-0.3 -1.186,-0.122 -1.486,0.398c-0.3,0.52 -0.122,1.186 0.398,1.486Z" style="fill:#fff8e8;fill-opacity:0.69;"/><circle cx="573.265" cy="5.3" r="0.967" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="648.544" cy="38.618" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="638.738" cy="17.799" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="274.158" cy="3.264" r="1.069" style="fill:#fee;fill-opacity:0.69;"/><circle cx="213.142" cy="10.187" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M173.074,50.556c-0.342,0.198 -0.78,0.08 -0.977,-0.261c-0.198,-0.342 -0.08,-0.78 0.262,-0.977c0.341,-0.198 0.779,-0.08 0.976,0.262c0.198,0.341 0.08,0.779 -0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M323.074,50.556c-0.342,0.198 -0.78,0.08 -0.977,-0.261c-0.198,-0.342 -0.08,-0.78 0.262,-0.977c0.341,-0.198 0.779,-0.08 0.976,0.262c0.198,0.341 0.08,0.779 -0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M353.074,50.556c-0.342,0.198 -0.78,0.08 -0.977,-0.261c-0.198,-0.342 -0.08,-0.78 0.262,-0.977c0.341,-0.198 0.779,-0.08 0.976,0.262c0.198,0.341 0.08,0.779 -0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M383.074,50.556c-0.342,0.198 -0.78,0.08 -0.977,-0.261c-0.198,-0.342 -0.08,-0.78 0.262,-0.977c0.341,-0.198 0.779,-0.08 0.976,0.262c0.198,0.341 0.08,0.779 -0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="254.174" cy="44.157" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="263.98" cy="23.339" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="299.577" cy="15.727" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="195.559" cy="38.849" r="1.461" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="233.963" cy="33.683" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M37.775,12.928c0.342,-0.197 0.78,-0.08 0.977,0.262c0.197,0.342 0.08,0.779 -0.262,0.977c-0.342,0.197 -0.779,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.78 0.262,-0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="146.674" cy="49.327" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="126.868" cy="20.146" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="481.272" cy="27.758" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="735.084" cy="60.046" r="0.44" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M623.013,27.532c-0.698,0.403 -1.592,0.163 -1.995,-0.535c-0.403,-0.698 -0.164,-1.592 0.535,-1.995c0.698,-0.403 1.592,-0.164 1.995,0.535c0.403,0.698 0.163,1.592 -0.535,1.995Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M520.261,21.259c-0.698,0.403 -1.592,0.163 -1.995,-0.535c-0.403,-0.698 -0.164,-1.592 0.534,-1.995c0.698,-0.403 1.592,-0.164 1.995,0.535c0.404,0.698 0.164,1.592 -0.534,1.995Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M554.976,21.878c-0.52,0.3 -1.186,0.122 -1.486,-0.398c-0.3,-0.52 -0.122,-1.186 0.398,-1.486c0.52,-0.3 1.186,-0.122 1.486,0.398c0.301,0.52 0.122,1.186 -0.398,1.486Z" style="fill:#fff8e8;fill-opacity:0.69;"/><circle cx="591.184" cy="24.216" r="0.762" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="208.506" cy="36.92" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="183.086" cy="22.385" r="1.069" style="fill:#fee;fill-opacity:0.69;"/><circle cx="153.07" cy="32.998" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="280.376" cy="27.009" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="62.16" cy="47.109" r="0.44" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="260.57" cy="57.828" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="740.966" cy="51.298" r="0.826" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="801.399" cy="55.949" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="778.687" cy="80.323" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="801.953" cy="74.229" r="1.461" style="fill:#fee;fill-opacity:0.69;"/><ellipse cx="726.231" cy="58.633" rx="0.737" ry="0.821" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="763.911" cy="64.439" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M462.155,64.919c0.575,0.333 1.312,0.135 1.644,-0.44c0.333,-0.576 0.135,-1.313 -0.44,-1.645c-0.576,-0.332 -1.313,-0.135 -1.645,0.441c-0.332,0.575 -0.135,1.312 0.441,1.644Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M454.7,52.358c0.342,0.197 0.779,0.08 0.977,-0.262c0.197,-0.341 0.08,-0.779 -0.262,-0.977c-0.342,-0.197 -0.779,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.78 0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M469.393,136.271c0.342,0.198 0.78,0.081 0.977,-0.261c0.197,-0.342 0.08,-0.78 -0.262,-0.977c-0.341,-0.197 -0.779,-0.08 -0.976,0.262c-0.198,0.341 -0.08,0.779 0.261,0.976Z" style="fill:#fffeee;fill-opacity:0.69;"/><path d="M501.249,56.519c0.342,0.197 0.78,0.08 0.977,-0.262c0.198,-0.341 0.08,-0.779 -0.261,-0.976c-0.342,-0.198 -0.78,-0.081 -0.977,0.261c-0.198,0.342 -0.08,0.78 0.261,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M706.212,73.138c0.342,0.197 0.78,0.08 0.977,-0.262c0.197,-0.342 0.08,-0.78 -0.262,-0.977c-0.342,-0.197 -0.779,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.779 0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M556.645,73.138c0.342,0.197 0.779,0.08 0.977,-0.262c0.197,-0.342 0.08,-0.78 -0.262,-0.977c-0.342,-0.197 -0.78,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.779 0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M729.58,36.383c0.698,0.403 1.592,0.163 1.995,-0.535c0.403,-0.698 0.164,-1.592 -0.534,-1.995c-0.698,-0.403 -1.592,-0.163 -1.995,0.535c-0.403,0.698 -0.164,1.592 0.534,1.995Z" style="fill:#fee;fill-opacity:0.69;"/><path d="M548.231,56.532c0.698,0.403 1.592,0.163 1.995,-0.535c0.403,-0.698 0.164,-1.592 -0.535,-1.995c-0.698,-0.403 -1.592,-0.164 -1.995,0.535c-0.403,0.698 -0.163,1.592 0.535,1.995Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M650.983,50.259c0.698,0.403 1.592,0.163 1.995,-0.535c0.403,-0.698 0.164,-1.592 -0.534,-1.995c-0.698,-0.403 -1.592,-0.164 -1.995,0.535c-0.403,0.698 -0.164,1.592 0.534,1.995Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M616.268,50.878c0.52,0.3 1.186,0.122 1.486,-0.398c0.3,-0.52 0.122,-1.186 -0.398,-1.486c-0.52,-0.3 -1.186,-0.122 -1.486,0.398c-0.301,0.52 -0.122,1.186 0.398,1.486Z" style="fill:#fff8e8;fill-opacity:0.69;"/><circle cx="580.06" cy="53.216" r="0.762" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="655.544" cy="86.738" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="645.738" cy="65.92" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="681.158" cy="31.385" r="1.069" style="fill:#fee;fill-opacity:0.69;"/><circle cx="610.142" cy="158.308" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M750.074,78.677c-0.342,0.198 -0.78,0.08 -0.977,-0.262c-0.198,-0.341 -0.08,-0.779 0.262,-0.976c0.341,-0.198 0.779,-0.08 0.976,0.261c0.198,0.342 0.08,0.78 -0.261,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="651.174" cy="122.278" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="660.98" cy="71.459" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="696.577" cy="63.848" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="592.8" cy="77.257" r="0.805" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="630.963" cy="81.803" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M270.546,74.392c0.342,-0.197 0.78,-0.08 0.977,0.262c0.197,0.342 0.08,0.78 -0.262,0.977c-0.342,0.197 -0.779,0.08 -0.977,-0.262c-0.197,-0.341 -0.08,-0.779 0.262,-0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="533.674" cy="47.448" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="523.868" cy="128.267" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="488.272" cy="75.878" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="742.084" cy="108.167" r="0.44" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="53.278" cy="53.978" r="0.826" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="24.392" cy="61.26" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="59.845" cy="176.828" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="82.557" cy="81.202" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="59.291" cy="75.108" r="1.461" style="fill:#fee;fill-opacity:0.69;"/><circle cx="13.635" cy="87.617" r="1.228" style="fill:#fee;fill-opacity:0.69;"/><circle cx="136.525" cy="59.364" r="0.673" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="97.333" cy="65.319" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M399.568,66.115c-0.698,0.403 -1.592,0.163 -1.995,-0.535c-0.403,-0.698 -0.164,-1.592 0.534,-1.995c0.699,-0.403 1.593,-0.164 1.996,0.534c0.403,0.698 0.163,1.592 -0.535,1.996Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M398.543,46.253c-0.342,0.197 -0.78,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.779 0.262,-0.977c0.342,-0.197 0.779,-0.08 0.977,0.262c0.197,0.342 0.08,0.78 -0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M391.851,117.151c-0.342,0.197 -0.78,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.78 0.262,-0.977c0.341,-0.197 0.779,-0.08 0.976,0.262c0.198,0.342 0.081,0.779 -0.261,0.977Z" style="fill:#fffeee;fill-opacity:0.69;"/><path d="M359.995,57.398c-0.342,0.198 -0.78,0.08 -0.977,-0.261c-0.198,-0.342 -0.08,-0.78 0.261,-0.977c0.342,-0.198 0.78,-0.08 0.977,0.261c0.198,0.342 0.08,0.78 -0.261,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M155.032,74.017c-0.342,0.197 -0.779,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.779 0.262,-0.977c0.342,-0.197 0.779,-0.08 0.977,0.262c0.197,0.342 0.08,0.78 -0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M304.599,74.017c-0.341,0.197 -0.779,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.779 0.262,-0.977c0.342,-0.197 0.78,-0.08 0.977,0.262c0.197,0.342 0.08,0.78 -0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M381.592,56.069c-0.442,0.255 -1.009,0.103 -1.265,-0.339c-0.255,-0.443 -0.103,-1.01 0.339,-1.265c0.443,-0.256 1.01,-0.104 1.265,0.339c0.256,0.442 0.104,1.009 -0.339,1.265Z" style="fill:#fee;fill-opacity:0.69;"/><path d="M437.564,80.856c-0.488,0.282 -1.112,0.114 -1.393,-0.373c-0.282,-0.488 -0.115,-1.112 0.373,-1.393c0.487,-0.282 1.112,-0.115 1.393,0.373c0.282,0.487 0.114,1.112 -0.373,1.393Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M314.8,32.243c-0.565,0.326 -1.288,0.132 -1.615,-0.433c-0.326,-0.565 -0.132,-1.289 0.433,-1.615c0.565,-0.326 1.289,-0.133 1.615,0.433c0.326,0.565 0.132,1.288 -0.433,1.615Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M355.327,78.864c-0.52,0.3 -1.186,0.122 -1.486,-0.398c-0.3,-0.52 -0.122,-1.186 0.398,-1.486c0.52,-0.3 1.186,-0.122 1.486,0.398c0.3,0.52 0.122,1.186 -0.398,1.486Z" style="fill:#fff8e8;fill-opacity:0.69;"/><circle cx="280.979" cy="54.3" r="0.967" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="205.7" cy="87.618" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="215.506" cy="176.799" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="190.086" cy="52.264" r="1.069" style="fill:#fee;fill-opacity:0.69;"/><circle cx="251.102" cy="59.187" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M301.17,49.556c0.342,0.198 0.78,0.08 0.977,-0.261c0.198,-0.342 0.08,-0.78 -0.261,-0.977c-0.342,-0.198 -0.78,-0.08 -0.977,0.262c-0.198,0.341 -0.08,0.779 0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M151.17,49.556c0.342,0.198 0.78,0.08 0.977,-0.261c0.198,-0.342 0.08,-0.78 -0.261,-0.977c-0.342,-0.198 -0.78,-0.08 -0.977,0.262c-0.198,0.341 -0.08,0.779 0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M121.17,49.556c0.342,0.198 0.78,0.08 0.977,-0.261c0.198,-0.342 0.08,-0.78 -0.261,-0.977c-0.342,-0.198 -0.78,-0.08 -0.977,0.262c-0.198,0.341 -0.08,0.779 0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M91.17,49.556c0.342,0.198 0.78,0.08 0.977,-0.261c0.198,-0.342 0.08,-0.78 -0.261,-0.977c-0.342,-0.198 -0.78,-0.08 -0.977,0.262c-0.198,0.341 -0.08,0.779 0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="210.07" cy="93.157" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="200.264" cy="72.339" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="164.667" cy="64.727" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="268.685" cy="127.849" r="1.461" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="230.281" cy="82.683" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M426.469,61.928c-0.342,-0.197 -0.78,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.779 0.262,0.977c0.342,0.197 0.779,0.08 0.977,-0.262c0.197,-0.342 0.08,-0.78 -0.262,-0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="327.57" cy="48.327" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="337.376" cy="69.146" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="372.972" cy="76.758" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="119.16" cy="109.046" r="0.44" style="fill:#eeefff;fill-opacity:0.69;"/></g><g id="Clouds"><path id="_-Curve-" serif:id="(Curve)" d="M610.291,177.316c-35.879,-0.428 -84.67,-0.691 -138.392,-0.689c-38.684,0.002 -74.811,0.141 -105.402,0.38c-49.14,-2.745 -80.877,-9.954 -80.877,-14.718c0,-1.333 2.655,0.335 7.294,-0.896c96.772,-0.175 171.302,-1.213 171.302,-2.464c0,-1.107 -59.462,-3.372 -140.106,-3.687c38.487,-2.059 102.543,-4.972 173.823,-4.972c11.996,0 23.761,0.07 35.216,0.206c20.76,-4.638 60.945,-2.784 107.07,-2.784c36.08,0 68.525,-0.075 90.882,2.983c32.491,0.899 72.142,-1.186 114.922,-0.379c38.68,0.729 74.805,1.273 105.395,1.613c49.101,3.673 80.599,8.516 80.54,13.279c-0.016,1.334 -2.504,2.58 -7.158,3.723c-96.763,-1.654 -171.297,-2.024 -171.312,-0.774c-0.013,1.108 58.473,3.15 139.105,4.989c-38.514,3.085 -101.653,4.38 -172.925,3.033c-11.995,-0.227 -23.757,-0.52 -35.209,-0.872c-20.815,4.245 -61.034,6.631 -107.154,5.759c-24.754,-0.468 -47.786,-1.809 -67.014,-3.73Z" style="fill:#ddf0fb;"/><path id="_-Curve-1" serif:id="(Curve)" d="M609.299,171.607c-35.88,-0.338 -84.67,-0.545 -138.392,-0.543c-38.684,0.001 -74.812,0.111 -105.402,0.299c-49.141,-2.166 -80.694,-5.519 -80.694,-9.279c0,-1.052 2.472,-2.073 7.111,-3.045c96.772,-0.137 171.302,-0.957 171.302,-1.944c-0.001,-0.874 -58.506,-1.614 -139.15,-1.862c38.471,-3.009 101.587,-4.973 172.867,-4.973c11.996,0 23.761,0.055 35.216,0.162c20.76,-3.66 60.945,-6.143 107.07,-6.143c36.08,0 68.525,1.519 90.882,3.933c32.491,0.709 72.142,1.432 114.922,2.069c38.68,0.575 74.805,1.005 105.395,1.272c49.101,2.9 80.598,6.722 80.54,10.482c-0.017,1.052 -2.505,2.036 -7.158,2.938c-96.763,-1.305 -171.297,-1.597 -171.312,-0.611c-0.014,0.875 58.473,2.486 139.104,3.938c-38.514,2.435 -101.653,3.457 -172.924,2.394c-11.995,-0.179 -23.758,-0.41 -35.21,-0.688c-20.814,3.35 -61.033,5.234 -107.153,4.545c-24.754,-0.369 -47.786,-1.428 -67.014,-2.944Z" style="fill:#d8effd;"/><path d="M684.234,222.269c-12.108,-1.642 -29.721,-2.832 -29.76,-5.218c-0.063,-3.861 34.226,-4.225 76.6,-3.504c42.375,0.721 75.9,-2.707 76.956,1.008c2.476,8.704 -12.549,8.552 -32.56,10.141c-12.403,-0.58 -28.24,0.216 -44.434,0.479c-16.193,0.263 -35.197,-1.331 -46.802,-2.906Z" style="fill:#d8effd;"/><path d="M130.064,213.821c42.381,0 76.789,0.237 76.789,4.224c0,3.986 -14.408,4.223 -56.789,4.223c-42.38,0 -96.788,0.208 -96.788,-4.223c0,-4.431 34.408,-4.224 76.788,-4.224Z" style="fill:#d8effd;"/></g><g id="Mountains"><path d="M476.098,218.299l81.644,216.765l-205.408,0l123.764,-216.765Z" style="fill:#4560a0;"/><path d="M476.098,218.299l21.823,203.477l81.177,-8.706l-103,-194.771Z" style="fill:#5e84ba;"/><path d="M369.627,308.648l88.326,125.788l-205.407,0l117.081,-125.788Z" style="fill:#4560a0;"/><path d="M326.11,338.332l68.193,96.732l-205.407,0l137.214,-96.732Z" style="fill:#4560a0;"/><path d="M508.168,243.792l163.526,204.747l-256.643,0l93.117,-204.747Z" style="fill:#4560a0;"/><path d="M508.168,245.355l63.395,75.115l-54.953,46.379l-8.442,-121.494Z" style="fill:#5e84ba;"/><path d="M369.612,308.648l54.182,77.687l-58.981,41.135l4.799,-118.822Z" style="fill:#5e84ba;"/><path d="M326.184,338.326l16.813,23.99l-16.887,11.835l0.074,-35.825Z" style="fill:#5e84ba;"/><path d="M633.647,230.42l175.693,204.644l-351.387,0l175.694,-204.644Z" style="fill:#4560a0;"/><path d="M633.647,230.42l101.573,245.129l86.041,-35.653l-187.614,-209.476Z" style="fill:#5e84ba;"/><path d="M643.625,254.384c-0.571,0.219 -0.745,0.283 -1.863,0.82c-2.864,1.395 -6.079,3.209 -9.184,2.64c-6.187,-1.134 -10.854,-6.283 -16.725,-6.738l17.786,-20.729l9.986,24.007Z" style="fill:#d9d9d9;"/><path d="M654.229,253.4c-0.494,-0.028 -0.875,-0.013 -0.875,-0.013c-3.255,-0.486 -6.617,-0.192 -9.677,0.982l-0.052,0.02l-9.978,-23.97l20.582,22.981Z" style="fill:#fff;"/></g><g id="Buildings"><path d="M195.171,451.298l0,-292.145l-102.462,0l0,292.145l102.462,0Z" style="fill:url(#_Linear4);"/><path d="M289.755,451.298l0,-218.487l-57.232,0l0,218.487l57.232,0Z" style="fill:url(#_Linear5);"/><path d="M323.451,451.298l0,-123.585l-71.555,0l0,123.585l71.555,0Z" style="fill:#b4dbfb;"/><path d="M207.557,451.298l0,-218.487l25.314,0l0,218.487l-25.314,0Z" style="fill:#b4dbfb;"/><path d="M92.709,451.298l0,-292.145l25.314,0l0,292.145l-25.314,0Z" style="fill:#b4dbfb;"/><path d="M323.451,451.298l0,-123.585l-16.692,0l0,123.585l16.692,0Z" style="fill:url(#_Linear6);"/><path d="M272.498,451.298l0,-95.771l-136.555,0l0,95.771l136.555,0Z" style="fill:url(#_Linear7);"/><path d="M85.122,451.298l0,-178.856l-97.675,0l0,178.856l97.675,0Z" style="fill:url(#_Linear8);"/><path d="M173.526,451.298l0,-95.771l-37.583,0l0,95.771l37.583,0Z" style="fill:#b4dbfb;"/><path d="M66.649,456.944l0,-184.502l-69.677,0l0,184.502l69.677,0Z" style="fill:#b4dbfb;"/></g><rect x="-3.028" y="431.298" width="826.844" height="20.006" style="fill:#fafafa;"/><g id="Laptop"><path d="M606.064,273.603c0,-6.261 -5.076,-11.337 -11.337,-11.337c-37.536,0 -157.517,0 -195.054,0c-6.261,0 -11.337,5.076 -11.337,11.337c0,33.077 0,128.577 0,151.521c0,1.326 0.527,2.598 1.465,3.536c0.938,0.937 2.209,1.464 3.535,1.464c29.3,0 178.429,0 207.728,0c1.326,0 2.598,-0.527 3.536,-1.464c0.937,-0.938 1.464,-2.21 1.464,-3.536c0,-22.944 0,-118.444 0,-151.521Z" style="fill:#657390;"/><path d="M606.064,273.603c0,-6.261 -5.076,-11.337 -11.337,-11.337c-37.536,0 -157.517,0 -195.054,0c-6.261,0 -11.337,5.076 -11.337,11.337c0,33.077 0,128.577 0,151.521c0,1.326 0.527,2.598 1.465,3.536c0.938,0.937 2.209,1.464 3.535,1.464c29.3,0 178.429,0 207.728,0c1.326,0 2.598,-0.527 3.536,-1.464c0.937,-0.938 1.464,-2.21 1.464,-3.536c0,-22.944 0,-118.444 0,-151.521Z" style="fill:#657390;"/><path d="M599.193,275.905c0,-3.05 -2.476,-5.526 -5.526,-5.526l-193.063,0c-3.05,0 -5.526,2.476 -5.526,5.526l0,141.039c0,3.05 2.476,5.526 5.526,5.526l193.063,0c3.05,0 5.526,-2.476 5.526,-5.526l0,-141.039Z" style="fill:#130c2b;"/><path d="M655.04,427.228c0,-0.252 -0.205,-0.457 -0.457,-0.457c-13.334,0 -313.753,0 -313.753,0l0,4.975c0,2.761 2.239,5 5,5c36.953,0 267.257,0 304.21,0c2.761,0 5,-2.239 5,-5c0,-1.845 0,-3.687 0,-4.518Z" style="fill:url(#_Linear9);"/><circle id="Camera" cx="497.178" cy="267.001" r="1.238" style="fill-opacity:0.45;"/><circle id="Mic" cx="500.009" cy="267.001" r="0.527" style="fill-opacity:0.45;"/><circle id="Ambient-Light-" serif:id="Ambient Light?" cx="494.263" cy="267.001" r="0.527" style="fill:#102708;fill-opacity:0.45;"/><g id="Icon"><path d="M543.109,335.27l-18.005,-18.014l-4.857,4.857l15.576,15.585l-15.576,15.582l4.857,4.856l18.005,-18.007c0.649,-0.652 1.008,-1.516 1.008,-2.434c-0.004,-0.918 -0.359,-1.778 -1.008,-2.425" style="fill:#ccffd6;fill-rule:nonzero;"/><path d="M497.136,326.699c7.364,-7.356 19.316,-7.354 26.677,0.007c7.361,7.362 7.364,19.313 0.007,26.677l0.007,0.007l-26.684,26.684l-26.684,-26.684c-7.364,-7.363 -7.364,-19.32 0,-26.684c7.361,-7.361 19.313,-7.363 26.677,-0.007Z" style="fill:#c47dff;"/><path d="M473.797,339.323l-4.859,-4.857l-18.012,18.01c-0.647,0.646 -1.004,1.511 -1.001,2.428c0,0.918 0.354,1.781 1.001,2.428l18.012,18.012l4.859,-4.856l-15.583,-15.584l15.583,-15.581Z" style="fill:#ccffd6;fill-rule:nonzero;"/></g></g></g><defs><linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-8.64246e-14,451.564,-803.856,-1.43038e-13,398.9,-3.51255)"><stop offset="0" style="stop-color:#68adfc;stop-opacity:1"/><stop offset="0.34" style="stop-color:#cbe0f8;stop-opacity:1"/><stop offset="1" style="stop-color:#d2cbf8;stop-opacity:1"/></linearGradient><radialGradient id="_Radial3" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(647.316,0,0,309.935,720.558,355.142)"><stop offset="0" style="stop-color:#cfcfcf;stop-opacity:0.65"/><stop offset="1" style="stop-color:#fff552;stop-opacity:0"/></radialGradient><linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(31.4265,292.145,-292.145,31.4265,112.513,159.153)"><stop offset="0" style="stop-color:#bde8f7;stop-opacity:1"/><stop offset="1" style="stop-color:#86b6fe;stop-opacity:1"/></linearGradient><linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(19.1616,218.487,-218.487,19.1616,241.977,232.811)"><stop offset="0" style="stop-color:#bde8f7;stop-opacity:1"/><stop offset="1" style="stop-color:#86b6fe;stop-opacity:1"/></linearGradient><linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0,123.585,-123.585,0,315.105,327.713)"><stop offset="0" style="stop-color:#bde8f7;stop-opacity:1"/><stop offset="1" style="stop-color:#86b6fe;stop-opacity:1"/></linearGradient><linearGradient id="_Linear7" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.6759,123.555,-123.555,47.6759,204.22,342.055)"><stop offset="0" style="stop-color:#bde8f7;stop-opacity:1"/><stop offset="1" style="stop-color:#86b6fe;stop-opacity:1"/></linearGradient><linearGradient id="_Linear8" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.16924e-14,190.951,-190.951,1.16924e-14,77.8467,255.423)"><stop offset="0" style="stop-color:#bde8f7;stop-opacity:1"/><stop offset="1" style="stop-color:#86b6fe;stop-opacity:1"/></linearGradient><linearGradient id="_Linear9" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(314.21,0,0,9.97478,340.83,431.758)"><stop offset="0" style="stop-color:#a9abc1;stop-opacity:1"/><stop offset="0.11" style="stop-color:#65687d;stop-opacity:1"/><stop offset="0.5" style="stop-color:#c3c5d2;stop-opacity:1"/><stop offset="0.89" style="stop-color:#64677c;stop-opacity:1"/><stop offset="1" style="stop-color:#a4a7c2;stop-opacity:1"/></linearGradient></defs></svg>

1+<svg width="100%" height="100%" viewBox="0 0 800 447" preserveAspectRatio="xMidYMax slice" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="0" y="0" width="800" height="446.374" style="fill:none;"/><clipPath id="_clip1"><rect x="0" y="0" width="800" height="446.374"/></clipPath><g clip-path="url(#_clip1)"><g id="Background"><path d="M800.828,448.051l0,-451.564l-803.856,0l0,451.564l803.856,0Z" style="fill:url(#_Linear2);"/><ellipse cx="720.558" cy="355.142" rx="647.316" ry="309.935" style="fill:url(#_Radial3);"/></g><g id="Stars" opacity="0.15"><circle cx="362.644" cy="4.733" r="1.461" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="334.392" cy="11.38" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="369.845" cy="6.949" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="49.291" cy="25.229" r="1.461" style="fill:#fee;fill-opacity:0.69;"/><circle cx="403.867" cy="17.97" r="1.461" style="fill:#fee;fill-opacity:0.69;"/><ellipse cx="125.013" cy="9.633" rx="0.737" ry="0.821" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="87.333" cy="15.439" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M709.089,15.919c-0.575,0.333 -1.312,0.135 -1.644,-0.44c-0.333,-0.576 -0.135,-1.313 0.44,-1.645c0.576,-0.332 1.313,-0.135 1.645,0.441c0.332,0.575 0.135,1.312 -0.441,1.644Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M716.544,3.358c-0.342,0.197 -0.779,0.08 -0.977,-0.262c-0.197,-0.341 -0.08,-0.779 0.262,-0.977c0.342,-0.197 0.779,-0.08 0.977,0.262c0.197,0.342 0.08,0.78 -0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M701.851,87.271c-0.342,0.198 -0.78,0.081 -0.977,-0.261c-0.197,-0.342 -0.08,-0.78 0.262,-0.977c0.341,-0.197 0.779,-0.08 0.976,0.262c0.198,0.341 0.081,0.779 -0.261,0.976Z" style="fill:#fffeee;fill-opacity:0.69;"/><path d="M669.995,7.519c-0.342,0.197 -0.78,0.08 -0.977,-0.262c-0.198,-0.341 -0.08,-0.779 0.261,-0.976c0.342,-0.198 0.78,-0.081 0.977,0.261c0.198,0.342 0.08,0.78 -0.261,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M465.032,24.138c-0.342,0.197 -0.779,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.78 0.262,-0.977c0.342,-0.197 0.779,-0.08 0.977,0.262c0.197,0.342 0.08,0.779 -0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M614.599,24.138c-0.341,0.197 -0.779,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.78 0.262,-0.977c0.342,-0.197 0.78,-0.08 0.977,0.262c0.197,0.342 0.08,0.779 -0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M691.664,7.383c-0.698,0.403 -1.592,0.163 -1.995,-0.535c-0.403,-0.698 -0.164,-1.592 0.534,-1.995c0.698,-0.403 1.592,-0.163 1.996,0.535c0.403,0.698 0.163,1.592 -0.535,1.995Z" style="fill:#fee;fill-opacity:0.69;"/><circle cx="198.7" cy="7.738" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="244.102" cy="79.308" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M104.17,29.677c0.342,0.198 0.78,0.08 0.977,-0.262c0.198,-0.341 0.08,-0.779 -0.261,-0.976c-0.342,-0.198 -0.78,-0.08 -0.977,0.261c-0.198,0.342 -0.08,0.78 0.261,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="203.07" cy="73.278" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="193.264" cy="22.459" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="157.667" cy="14.848" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="261.444" cy="28.257" r="0.805" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="223.281" cy="52.803" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M583.698,25.392c-0.342,-0.197 -0.78,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.78 0.262,0.977c0.342,0.197 0.779,0.08 0.977,-0.262c0.197,-0.341 0.08,-0.779 -0.262,-0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="330.57" cy="98.448" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="330.376" cy="79.267" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="365.972" cy="26.878" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="112.16" cy="59.167" r="0.44" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="800.966" cy="4.978" r="0.826" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="794.399" cy="127.828" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="771.687" cy="32.202" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="794.953" cy="26.108" r="1.461" style="fill:#fee;fill-opacity:0.69;"/><path d="M44.17,26.599c0.342,-0.198 0.78,-0.08 0.977,0.262c0.198,0.341 0.08,0.779 -0.261,0.976c-0.342,0.198 -0.78,0.08 -0.977,-0.261c-0.198,-0.342 -0.08,-0.78 0.261,-0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="133.264" cy="33.817" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="97.667" cy="41.428" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="201.444" cy="28.019" r="0.805" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="163.281" cy="23.473" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M523.698,30.884c-0.342,0.197 -0.78,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.78 0.262,-0.977c0.342,-0.197 0.779,-0.08 0.977,0.262c0.197,0.341 0.08,0.779 -0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="305.972" cy="29.398" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="769.852" cy="44.016" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="711.687" cy="24.074" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="734.953" cy="30.168" r="1.461" style="fill:#fee;fill-opacity:0.69;"/><circle cx="717.719" cy="10.364" r="0.673" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="756.911" cy="16.319" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M454.676,37.115c0.698,0.403 1.592,0.163 1.995,-0.535c0.403,-0.698 0.164,-1.592 -0.534,-1.995c-0.698,-0.403 -1.592,-0.164 -1.995,0.534c-0.404,0.698 -0.164,1.592 0.534,1.996Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M465.701,47.253c0.342,0.197 0.78,0.08 0.977,-0.262c0.197,-0.342 0.08,-0.779 -0.262,-0.977c-0.342,-0.197 -0.779,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.78 0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M32.393,28.151c0.342,0.197 0.78,0.08 0.977,-0.262c0.197,-0.342 0.08,-0.78 -0.262,-0.977c-0.341,-0.197 -0.779,-0.08 -0.976,0.262c-0.198,0.342 -0.08,0.779 0.261,0.977Z" style="fill:#fffeee;fill-opacity:0.69;"/><path d="M494.249,8.398c0.342,0.198 0.78,0.08 0.977,-0.261c0.198,-0.342 0.08,-0.78 -0.261,-0.977c-0.342,-0.198 -0.78,-0.08 -0.977,0.261c-0.198,0.342 -0.08,0.78 0.261,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M699.212,25.017c0.342,0.197 0.78,0.08 0.977,-0.262c0.197,-0.342 0.08,-0.779 -0.262,-0.977c-0.342,-0.197 -0.779,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.78 0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M549.645,25.017c0.342,0.197 0.779,0.08 0.977,-0.262c0.197,-0.342 0.08,-0.779 -0.262,-0.977c-0.342,-0.197 -0.78,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.78 0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M472.652,7.069c0.442,0.255 1.009,0.103 1.265,-0.339c0.255,-0.443 0.103,-1.01 -0.339,-1.265c-0.443,-0.256 -1.01,-0.104 -1.265,0.339c-0.256,0.442 -0.104,1.009 0.339,1.265Z" style="fill:#fee;fill-opacity:0.69;"/><path d="M416.68,31.856c0.488,0.282 1.112,0.114 1.394,-0.373c0.281,-0.488 0.114,-1.112 -0.374,-1.393c-0.487,-0.282 -1.112,-0.115 -1.393,0.373c-0.281,0.487 -0.114,1.112 0.373,1.393Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M529.444,13.243c0.565,0.326 1.289,0.132 1.615,-0.433c0.326,-0.565 0.132,-1.289 -0.433,-1.615c-0.565,-0.326 -1.289,-0.133 -1.615,0.433c-0.326,0.565 -0.132,1.288 0.433,1.615Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M498.917,29.864c0.52,0.3 1.186,0.122 1.486,-0.398c0.301,-0.52 0.122,-1.186 -0.398,-1.486c-0.52,-0.3 -1.186,-0.122 -1.486,0.398c-0.3,0.52 -0.122,1.186 0.398,1.486Z" style="fill:#fff8e8;fill-opacity:0.69;"/><circle cx="573.265" cy="5.3" r="0.967" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="648.544" cy="38.618" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="638.738" cy="17.799" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="274.158" cy="3.264" r="1.069" style="fill:#fee;fill-opacity:0.69;"/><circle cx="213.142" cy="10.187" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M173.074,50.556c-0.342,0.198 -0.78,0.08 -0.977,-0.261c-0.198,-0.342 -0.08,-0.78 0.262,-0.977c0.341,-0.198 0.779,-0.08 0.976,0.262c0.198,0.341 0.08,0.779 -0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M323.074,50.556c-0.342,0.198 -0.78,0.08 -0.977,-0.261c-0.198,-0.342 -0.08,-0.78 0.262,-0.977c0.341,-0.198 0.779,-0.08 0.976,0.262c0.198,0.341 0.08,0.779 -0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M353.074,50.556c-0.342,0.198 -0.78,0.08 -0.977,-0.261c-0.198,-0.342 -0.08,-0.78 0.262,-0.977c0.341,-0.198 0.779,-0.08 0.976,0.262c0.198,0.341 0.08,0.779 -0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M383.074,50.556c-0.342,0.198 -0.78,0.08 -0.977,-0.261c-0.198,-0.342 -0.08,-0.78 0.262,-0.977c0.341,-0.198 0.779,-0.08 0.976,0.262c0.198,0.341 0.08,0.779 -0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="254.174" cy="44.157" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="263.98" cy="23.339" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="299.577" cy="15.727" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="195.559" cy="38.849" r="1.461" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="233.963" cy="33.683" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M37.775,12.928c0.342,-0.197 0.78,-0.08 0.977,0.262c0.197,0.342 0.08,0.779 -0.262,0.977c-0.342,0.197 -0.779,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.78 0.262,-0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="146.674" cy="49.327" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="126.868" cy="20.146" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="481.272" cy="27.758" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="735.084" cy="60.046" r="0.44" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M623.013,27.532c-0.698,0.403 -1.592,0.163 -1.995,-0.535c-0.403,-0.698 -0.164,-1.592 0.535,-1.995c0.698,-0.403 1.592,-0.164 1.995,0.535c0.403,0.698 0.163,1.592 -0.535,1.995Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M520.261,21.259c-0.698,0.403 -1.592,0.163 -1.995,-0.535c-0.403,-0.698 -0.164,-1.592 0.534,-1.995c0.698,-0.403 1.592,-0.164 1.995,0.535c0.404,0.698 0.164,1.592 -0.534,1.995Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M554.976,21.878c-0.52,0.3 -1.186,0.122 -1.486,-0.398c-0.3,-0.52 -0.122,-1.186 0.398,-1.486c0.52,-0.3 1.186,-0.122 1.486,0.398c0.301,0.52 0.122,1.186 -0.398,1.486Z" style="fill:#fff8e8;fill-opacity:0.69;"/><circle cx="591.184" cy="24.216" r="0.762" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="208.506" cy="36.92" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="183.086" cy="22.385" r="1.069" style="fill:#fee;fill-opacity:0.69;"/><circle cx="153.07" cy="32.998" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="280.376" cy="27.009" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="62.16" cy="47.109" r="0.44" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="260.57" cy="57.828" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="740.966" cy="51.298" r="0.826" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="801.399" cy="55.949" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="778.687" cy="80.323" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="801.953" cy="74.229" r="1.461" style="fill:#fee;fill-opacity:0.69;"/><ellipse cx="726.231" cy="58.633" rx="0.737" ry="0.821" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="763.911" cy="64.439" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M462.155,64.919c0.575,0.333 1.312,0.135 1.644,-0.44c0.333,-0.576 0.135,-1.313 -0.44,-1.645c-0.576,-0.332 -1.313,-0.135 -1.645,0.441c-0.332,0.575 -0.135,1.312 0.441,1.644Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M454.7,52.358c0.342,0.197 0.779,0.08 0.977,-0.262c0.197,-0.341 0.08,-0.779 -0.262,-0.977c-0.342,-0.197 -0.779,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.78 0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M469.393,136.271c0.342,0.198 0.78,0.081 0.977,-0.261c0.197,-0.342 0.08,-0.78 -0.262,-0.977c-0.341,-0.197 -0.779,-0.08 -0.976,0.262c-0.198,0.341 -0.08,0.779 0.261,0.976Z" style="fill:#fffeee;fill-opacity:0.69;"/><path d="M501.249,56.519c0.342,0.197 0.78,0.08 0.977,-0.262c0.198,-0.341 0.08,-0.779 -0.261,-0.976c-0.342,-0.198 -0.78,-0.081 -0.977,0.261c-0.198,0.342 -0.08,0.78 0.261,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M706.212,73.138c0.342,0.197 0.78,0.08 0.977,-0.262c0.197,-0.342 0.08,-0.78 -0.262,-0.977c-0.342,-0.197 -0.779,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.779 0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M556.645,73.138c0.342,0.197 0.779,0.08 0.977,-0.262c0.197,-0.342 0.08,-0.78 -0.262,-0.977c-0.342,-0.197 -0.78,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.779 0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M729.58,36.383c0.698,0.403 1.592,0.163 1.995,-0.535c0.403,-0.698 0.164,-1.592 -0.534,-1.995c-0.698,-0.403 -1.592,-0.163 -1.995,0.535c-0.403,0.698 -0.164,1.592 0.534,1.995Z" style="fill:#fee;fill-opacity:0.69;"/><path d="M548.231,56.532c0.698,0.403 1.592,0.163 1.995,-0.535c0.403,-0.698 0.164,-1.592 -0.535,-1.995c-0.698,-0.403 -1.592,-0.164 -1.995,0.535c-0.403,0.698 -0.163,1.592 0.535,1.995Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M650.983,50.259c0.698,0.403 1.592,0.163 1.995,-0.535c0.403,-0.698 0.164,-1.592 -0.534,-1.995c-0.698,-0.403 -1.592,-0.164 -1.995,0.535c-0.403,0.698 -0.164,1.592 0.534,1.995Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M616.268,50.878c0.52,0.3 1.186,0.122 1.486,-0.398c0.3,-0.52 0.122,-1.186 -0.398,-1.486c-0.52,-0.3 -1.186,-0.122 -1.486,0.398c-0.301,0.52 -0.122,1.186 0.398,1.486Z" style="fill:#fff8e8;fill-opacity:0.69;"/><circle cx="580.06" cy="53.216" r="0.762" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="655.544" cy="86.738" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="645.738" cy="65.92" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="681.158" cy="31.385" r="1.069" style="fill:#fee;fill-opacity:0.69;"/><circle cx="610.142" cy="158.308" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M750.074,78.677c-0.342,0.198 -0.78,0.08 -0.977,-0.262c-0.198,-0.341 -0.08,-0.779 0.262,-0.976c0.341,-0.198 0.779,-0.08 0.976,0.261c0.198,0.342 0.08,0.78 -0.261,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="651.174" cy="122.278" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="660.98" cy="71.459" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="696.577" cy="63.848" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="592.8" cy="77.257" r="0.805" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="630.963" cy="81.803" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M270.546,74.392c0.342,-0.197 0.78,-0.08 0.977,0.262c0.197,0.342 0.08,0.78 -0.262,0.977c-0.342,0.197 -0.779,0.08 -0.977,-0.262c-0.197,-0.341 -0.08,-0.779 0.262,-0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="533.674" cy="47.448" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="523.868" cy="128.267" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="488.272" cy="75.878" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="742.084" cy="108.167" r="0.44" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="53.278" cy="53.978" r="0.826" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="24.392" cy="61.26" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="59.845" cy="176.828" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="82.557" cy="81.202" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="59.291" cy="75.108" r="1.461" style="fill:#fee;fill-opacity:0.69;"/><circle cx="13.635" cy="87.617" r="1.228" style="fill:#fee;fill-opacity:0.69;"/><circle cx="136.525" cy="59.364" r="0.673" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="97.333" cy="65.319" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M399.568,66.115c-0.698,0.403 -1.592,0.163 -1.995,-0.535c-0.403,-0.698 -0.164,-1.592 0.534,-1.995c0.699,-0.403 1.593,-0.164 1.996,0.534c0.403,0.698 0.163,1.592 -0.535,1.996Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M398.543,46.253c-0.342,0.197 -0.78,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.779 0.262,-0.977c0.342,-0.197 0.779,-0.08 0.977,0.262c0.197,0.342 0.08,0.78 -0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M391.851,117.151c-0.342,0.197 -0.78,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.78 0.262,-0.977c0.341,-0.197 0.779,-0.08 0.976,0.262c0.198,0.342 0.081,0.779 -0.261,0.977Z" style="fill:#fffeee;fill-opacity:0.69;"/><path d="M359.995,57.398c-0.342,0.198 -0.78,0.08 -0.977,-0.261c-0.198,-0.342 -0.08,-0.78 0.261,-0.977c0.342,-0.198 0.78,-0.08 0.977,0.261c0.198,0.342 0.08,0.78 -0.261,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M155.032,74.017c-0.342,0.197 -0.779,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.779 0.262,-0.977c0.342,-0.197 0.779,-0.08 0.977,0.262c0.197,0.342 0.08,0.78 -0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M304.599,74.017c-0.341,0.197 -0.779,0.08 -0.977,-0.262c-0.197,-0.342 -0.08,-0.779 0.262,-0.977c0.342,-0.197 0.78,-0.08 0.977,0.262c0.197,0.342 0.08,0.78 -0.262,0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M381.592,56.069c-0.442,0.255 -1.009,0.103 -1.265,-0.339c-0.255,-0.443 -0.103,-1.01 0.339,-1.265c0.443,-0.256 1.01,-0.104 1.265,0.339c0.256,0.442 0.104,1.009 -0.339,1.265Z" style="fill:#fee;fill-opacity:0.69;"/><path d="M437.564,80.856c-0.488,0.282 -1.112,0.114 -1.393,-0.373c-0.282,-0.488 -0.115,-1.112 0.373,-1.393c0.487,-0.282 1.112,-0.115 1.393,0.373c0.282,0.487 0.114,1.112 -0.373,1.393Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M314.8,32.243c-0.565,0.326 -1.288,0.132 -1.615,-0.433c-0.326,-0.565 -0.132,-1.289 0.433,-1.615c0.565,-0.326 1.289,-0.133 1.615,0.433c0.326,0.565 0.132,1.288 -0.433,1.615Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M355.327,78.864c-0.52,0.3 -1.186,0.122 -1.486,-0.398c-0.3,-0.52 -0.122,-1.186 0.398,-1.486c0.52,-0.3 1.186,-0.122 1.486,0.398c0.3,0.52 0.122,1.186 -0.398,1.486Z" style="fill:#fff8e8;fill-opacity:0.69;"/><circle cx="280.979" cy="54.3" r="0.967" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="205.7" cy="87.618" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="215.506" cy="176.799" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="190.086" cy="52.264" r="1.069" style="fill:#fee;fill-opacity:0.69;"/><circle cx="251.102" cy="59.187" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M301.17,49.556c0.342,0.198 0.78,0.08 0.977,-0.261c0.198,-0.342 0.08,-0.78 -0.261,-0.977c-0.342,-0.198 -0.78,-0.08 -0.977,0.262c-0.198,0.341 -0.08,0.779 0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M151.17,49.556c0.342,0.198 0.78,0.08 0.977,-0.261c0.198,-0.342 0.08,-0.78 -0.261,-0.977c-0.342,-0.198 -0.78,-0.08 -0.977,0.262c-0.198,0.341 -0.08,0.779 0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M121.17,49.556c0.342,0.198 0.78,0.08 0.977,-0.261c0.198,-0.342 0.08,-0.78 -0.261,-0.977c-0.342,-0.198 -0.78,-0.08 -0.977,0.262c-0.198,0.341 -0.08,0.779 0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><path d="M91.17,49.556c0.342,0.198 0.78,0.08 0.977,-0.261c0.198,-0.342 0.08,-0.78 -0.261,-0.977c-0.342,-0.198 -0.78,-0.08 -0.977,0.262c-0.198,0.341 -0.08,0.779 0.261,0.976Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="210.07" cy="93.157" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="200.264" cy="72.339" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="164.667" cy="64.727" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="268.685" cy="127.849" r="1.461" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="230.281" cy="82.683" r="1.088" style="fill:#fff8e8;fill-opacity:0.69;"/><path d="M426.469,61.928c-0.342,-0.197 -0.78,-0.08 -0.977,0.262c-0.197,0.342 -0.08,0.779 0.262,0.977c0.342,0.197 0.779,0.08 0.977,-0.262c0.197,-0.342 0.08,-0.78 -0.262,-0.977Z" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="327.57" cy="48.327" r="0.715" style="fill:#fffeee;fill-opacity:0.69;"/><circle cx="337.376" cy="69.146" r="0.715" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="372.972" cy="76.758" r="0.496" style="fill:#eeefff;fill-opacity:0.69;"/><circle cx="119.16" cy="109.046" r="0.44" style="fill:#eeefff;fill-opacity:0.69;"/></g><g id="Clouds"><path id="_-Curve-" serif:id="(Curve)" d="M610.291,177.316c-35.879,-0.428 -84.67,-0.691 -138.392,-0.689c-38.684,0.002 -74.811,0.141 -105.402,0.38c-49.14,-2.745 -80.877,-9.954 -80.877,-14.718c0,-1.333 2.655,0.335 7.294,-0.896c96.772,-0.175 171.302,-1.213 171.302,-2.464c0,-1.107 -59.462,-3.372 -140.106,-3.687c38.487,-2.059 102.543,-4.972 173.823,-4.972c11.996,0 23.761,0.07 35.216,0.206c20.76,-4.638 60.945,-2.784 107.07,-2.784c36.08,0 68.525,-0.075 90.882,2.983c32.491,0.899 72.142,-1.186 114.922,-0.379c38.68,0.729 74.805,1.273 105.395,1.613c49.101,3.673 80.599,8.516 80.54,13.279c-0.016,1.334 -2.504,2.58 -7.158,3.723c-96.763,-1.654 -171.297,-2.024 -171.312,-0.774c-0.013,1.108 58.473,3.15 139.105,4.989c-38.514,3.085 -101.653,4.38 -172.925,3.033c-11.995,-0.227 -23.757,-0.52 -35.209,-0.872c-20.815,4.245 -61.034,6.631 -107.154,5.759c-24.754,-0.468 -47.786,-1.809 -67.014,-3.73Z" style="fill:#ddf0fb;"/><path id="_-Curve-1" serif:id="(Curve)" d="M609.299,171.607c-35.88,-0.338 -84.67,-0.545 -138.392,-0.543c-38.684,0.001 -74.812,0.111 -105.402,0.299c-49.141,-2.166 -80.694,-5.519 -80.694,-9.279c0,-1.052 2.472,-2.073 7.111,-3.045c96.772,-0.137 171.302,-0.957 171.302,-1.944c-0.001,-0.874 -58.506,-1.614 -139.15,-1.862c38.471,-3.009 101.587,-4.973 172.867,-4.973c11.996,0 23.761,0.055 35.216,0.162c20.76,-3.66 60.945,-6.143 107.07,-6.143c36.08,0 68.525,1.519 90.882,3.933c32.491,0.709 72.142,1.432 114.922,2.069c38.68,0.575 74.805,1.005 105.395,1.272c49.101,2.9 80.598,6.722 80.54,10.482c-0.017,1.052 -2.505,2.036 -7.158,2.938c-96.763,-1.305 -171.297,-1.597 -171.312,-0.611c-0.014,0.875 58.473,2.486 139.104,3.938c-38.514,2.435 -101.653,3.457 -172.924,2.394c-11.995,-0.179 -23.758,-0.41 -35.21,-0.688c-20.814,3.35 -61.033,5.234 -107.153,4.545c-24.754,-0.369 -47.786,-1.428 -67.014,-2.944Z" style="fill:#d8effd;"/><path d="M684.234,222.269c-12.108,-1.642 -29.721,-2.832 -29.76,-5.218c-0.063,-3.861 34.226,-4.225 76.6,-3.504c42.375,0.721 75.9,-2.707 76.956,1.008c2.476,8.704 -12.549,8.552 -32.56,10.141c-12.403,-0.58 -28.24,0.216 -44.434,0.479c-16.193,0.263 -35.197,-1.331 -46.802,-2.906Z" style="fill:#d8effd;"/><path d="M130.064,213.821c42.381,0 76.789,0.237 76.789,4.224c0,3.986 -14.408,4.223 -56.789,4.223c-42.38,0 -96.788,0.208 -96.788,-4.223c0,-4.431 34.408,-4.224 76.788,-4.224Z" style="fill:#d8effd;"/></g><g id="Mountains"><path d="M476.098,218.299l81.644,216.765l-205.408,0l123.764,-216.765Z" style="fill:#4560a0;"/><path d="M476.098,218.299l21.823,203.477l81.177,-8.706l-103,-194.771Z" style="fill:#5e84ba;"/><path d="M369.627,308.648l88.326,125.788l-205.407,0l117.081,-125.788Z" style="fill:#4560a0;"/><path d="M326.11,338.332l68.193,96.732l-205.407,0l137.214,-96.732Z" style="fill:#4560a0;"/><path d="M508.168,243.792l163.526,204.747l-256.643,0l93.117,-204.747Z" style="fill:#4560a0;"/><path d="M508.168,245.355l63.395,75.115l-54.953,46.379l-8.442,-121.494Z" style="fill:#5e84ba;"/><path d="M369.612,308.648l54.182,77.687l-58.981,41.135l4.799,-118.822Z" style="fill:#5e84ba;"/><path d="M326.184,338.326l16.813,23.99l-16.887,11.835l0.074,-35.825Z" style="fill:#5e84ba;"/><path d="M633.647,230.42l175.693,204.644l-351.387,0l175.694,-204.644Z" style="fill:#4560a0;"/><path d="M633.647,230.42l101.573,245.129l86.041,-35.653l-187.614,-209.476Z" style="fill:#5e84ba;"/><path d="M643.625,254.384c-0.571,0.219 -0.745,0.283 -1.863,0.82c-2.864,1.395 -6.079,3.209 -9.184,2.64c-6.187,-1.134 -10.854,-6.283 -16.725,-6.738l17.786,-20.729l9.986,24.007Z" style="fill:#d9d9d9;"/><path d="M654.229,253.4c-0.494,-0.028 -0.875,-0.013 -0.875,-0.013c-3.255,-0.486 -6.617,-0.192 -9.677,0.982l-0.052,0.02l-9.978,-23.97l20.582,22.981Z" style="fill:#fff;"/></g><g id="Buildings"><path d="M195.171,451.298l0,-292.145l-102.462,0l0,292.145l102.462,0Z" style="fill:url(#_Linear4);"/><path d="M289.755,451.298l0,-218.487l-57.232,0l0,218.487l57.232,0Z" style="fill:url(#_Linear5);"/><path d="M323.451,451.298l0,-123.585l-71.555,0l0,123.585l71.555,0Z" style="fill:#b4dbfb;"/><path d="M207.557,451.298l0,-218.487l25.314,0l0,218.487l-25.314,0Z" style="fill:#b4dbfb;"/><path d="M92.709,451.298l0,-292.145l25.314,0l0,292.145l-25.314,0Z" style="fill:#b4dbfb;"/><path d="M323.451,451.298l0,-123.585l-16.692,0l0,123.585l16.692,0Z" style="fill:url(#_Linear6);"/><path d="M272.498,451.298l0,-95.771l-136.555,0l0,95.771l136.555,0Z" style="fill:url(#_Linear7);"/><path d="M85.122,451.298l0,-178.856l-97.675,0l0,178.856l97.675,0Z" style="fill:url(#_Linear8);"/><path d="M173.526,451.298l0,-95.771l-37.583,0l0,95.771l37.583,0Z" style="fill:#b4dbfb;"/><path d="M66.649,456.944l0,-184.502l-69.677,0l0,184.502l69.677,0Z" style="fill:#b4dbfb;"/></g><rect x="-3.028" y="431.298" width="826.844" height="20.006" style="fill:#fafafa;"/><g id="Laptop"><path d="M606.064,273.603c0,-6.261 -5.076,-11.337 -11.337,-11.337c-37.536,0 -157.517,0 -195.054,0c-6.261,0 -11.337,5.076 -11.337,11.337c0,33.077 0,128.577 0,151.521c0,1.326 0.527,2.598 1.465,3.536c0.938,0.937 2.209,1.464 3.535,1.464c29.3,0 178.429,0 207.728,0c1.326,0 2.598,-0.527 3.536,-1.464c0.937,-0.938 1.464,-2.21 1.464,-3.536c0,-22.944 0,-118.444 0,-151.521Z" style="fill:#657390;"/><path d="M606.064,273.603c0,-6.261 -5.076,-11.337 -11.337,-11.337c-37.536,0 -157.517,0 -195.054,0c-6.261,0 -11.337,5.076 -11.337,11.337c0,33.077 0,128.577 0,151.521c0,1.326 0.527,2.598 1.465,3.536c0.938,0.937 2.209,1.464 3.535,1.464c29.3,0 178.429,0 207.728,0c1.326,0 2.598,-0.527 3.536,-1.464c0.937,-0.938 1.464,-2.21 1.464,-3.536c0,-22.944 0,-118.444 0,-151.521Z" style="fill:#657390;"/><path d="M599.193,275.905c0,-3.05 -2.476,-5.526 -5.526,-5.526l-193.063,0c-3.05,0 -5.526,2.476 -5.526,5.526l0,141.039c0,3.05 2.476,5.526 5.526,5.526l193.063,0c3.05,0 5.526,-2.476 5.526,-5.526l0,-141.039Z" style="fill:#130c2b;"/><path d="M655.04,427.228c0,-0.252 -0.205,-0.457 -0.457,-0.457c-13.334,0 -313.753,0 -313.753,0l0,4.975c0,2.761 2.239,5 5,5c36.953,0 267.257,0 304.21,0c2.761,0 5,-2.239 5,-5c0,-1.845 0,-3.687 0,-4.518Z" style="fill:url(#_Linear9);"/><circle id="Camera" cx="497.178" cy="267.001" r="1.238" style="fill-opacity:0.45;"/><circle id="Mic" cx="500.009" cy="267.001" r="0.527" style="fill-opacity:0.45;"/><circle id="Ambient-Light-" serif:id="Ambient Light?" cx="494.263" cy="267.001" r="0.527" style="fill:#102708;fill-opacity:0.45;"/><g id="Icon"><path d="M543.109,335.27l-18.005,-18.014l-4.857,4.857l15.576,15.585l-15.576,15.582l4.857,4.856l18.005,-18.007c0.649,-0.652 1.008,-1.516 1.008,-2.434c-0.004,-0.918 -0.359,-1.778 -1.008,-2.425" style="fill:#ccffd6;fill-rule:nonzero;"/><path d="M497.136,326.699c7.364,-7.356 19.316,-7.354 26.677,0.007c7.361,7.362 7.364,19.313 0.007,26.677l0.007,0.007l-26.684,26.684l-26.684,-26.684c-7.364,-7.363 -7.364,-19.32 0,-26.684c7.361,-7.361 19.313,-7.363 26.677,-0.007Z" style="fill:#c47dff;"/><path d="M473.797,339.323l-4.859,-4.857l-18.012,18.01c-0.647,0.646 -1.004,1.511 -1.001,2.428c0,0.918 0.354,1.781 1.001,2.428l18.012,18.012l4.859,-4.856l-15.583,-15.584l15.583,-15.581Z" style="fill:#ccffd6;fill-rule:nonzero;"/></g></g></g><defs><linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-8.64246e-14,451.564,-803.856,-1.43038e-13,398.9,-3.51255)"><stop offset="0" style="stop-color:#68adfc;stop-opacity:1"/><stop offset="0.34" style="stop-color:#cbe0f8;stop-opacity:1"/><stop offset="1" style="stop-color:#d2cbf8;stop-opacity:1"/></linearGradient><radialGradient id="_Radial3" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(647.316,0,0,309.935,720.558,355.142)"><stop offset="0" style="stop-color:#cfcfcf;stop-opacity:0.65"/><stop offset="1" style="stop-color:#fff552;stop-opacity:0"/></radialGradient><linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(31.4265,292.145,-292.145,31.4265,112.513,159.153)"><stop offset="0" style="stop-color:#bde8f7;stop-opacity:1"/><stop offset="1" style="stop-color:#86b6fe;stop-opacity:1"/></linearGradient><linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(19.1616,218.487,-218.487,19.1616,241.977,232.811)"><stop offset="0" style="stop-color:#bde8f7;stop-opacity:1"/><stop offset="1" style="stop-color:#86b6fe;stop-opacity:1"/></linearGradient><linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0,123.585,-123.585,0,315.105,327.713)"><stop offset="0" style="stop-color:#bde8f7;stop-opacity:1"/><stop offset="1" style="stop-color:#86b6fe;stop-opacity:1"/></linearGradient><linearGradient id="_Linear7" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.6759,123.555,-123.555,47.6759,204.22,342.055)"><stop offset="0" style="stop-color:#bde8f7;stop-opacity:1"/><stop offset="1" style="stop-color:#86b6fe;stop-opacity:1"/></linearGradient><linearGradient id="_Linear8" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.16924e-14,190.951,-190.951,1.16924e-14,77.8467,255.423)"><stop offset="0" style="stop-color:#bde8f7;stop-opacity:1"/><stop offset="1" style="stop-color:#86b6fe;stop-opacity:1"/></linearGradient><linearGradient id="_Linear9" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(314.21,0,0,9.97478,340.83,431.758)"><stop offset="0" style="stop-color:#a9abc1;stop-opacity:1"/><stop offset="0.11" style="stop-color:#65687d;stop-opacity:1"/><stop offset="0.5" style="stop-color:#c3c5d2;stop-opacity:1"/><stop offset="0.89" style="stop-color:#64677c;stop-opacity:1"/><stop offset="1" style="stop-color:#a4a7c2;stop-opacity:1"/></linearGradient></defs></svg>

package-lock.json+5

@@ -11479,6 +11479,11 @@

11479 "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",

11480 "dev": true

11481 },

11482+ "smoothscroll-polyfill": {

11483+ "version": "0.4.4",

11484+ "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz",

11485+ "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg=="

11486+ },

11482 "snapdragon": {

11487 "snapdragon": {

11483 "version": "0.8.2",

11488 "version": "0.8.2",

11484 "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",

11489 "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",

package.json+3−2

@@ -17,7 +17,7 @@

17 "webpack:watch": "DEBUG=purs-loader* DEBUG_DEPTH=100 webpack --config webpack.dev.js --progress --display-error-details --display verbose --watch",

18 "webpack:server": "webpack-dev-server --config webpack.dev.js --progress --inline --hot",

19 "webpack:server:debug": "DEBUG=purs-loader* DEBUG_DEPTH=100 webpack-dev-server --config webpack.dev.js --mode development --progress --inline --hot",

20− "storybook": "start-storybook"

20+ "storybook": "start-storybook -s ./server/static -p 9001"

21 },

22 "repository": {

23 "type": "git",

@@ -33,7 +33,8 @@

33 "@material-ui/styles": "^4.4.3",

34 "purty": "^4.5.1",

35 "react": "^16.9.0",

36− "react-dom": "^16.9.0"

36+ "react-dom": "^16.9.0",

37+ "smoothscroll-polyfill": "^0.4.4"

37 },

38 },

38 "devDependencies": {

39 "devDependencies": {

39 "@babel/core": "^7.6.0",

40 "@babel/core": "^7.6.0",

packages.dhall+27

@@ -157,6 +157,33 @@ let additions =

157 , version =

158 "b872928414a887ccefbe857038af4e57227dad16"

159 }

160+ , pseudo-random =

161+ { dependencies =

162+ [ "prelude"

163+ , "console"

164+ , "effect"

165+ , "lcg"

166+ , "arrays"

167+ , "st"

168+ ]

169+ , repo =

170+ "https://github.com/opyapeus/purescript-pseudo-random.git"

171+ , version =

172+ "7715e8a2c096c480a093a5e0a6df1ece4df5ed2a"

173+ }

174+ , matryoshka =

175+ { dependencies =

176+ [ "prelude"

177+ , "fixed-points"

178+ , "free"

179+ , "transformers"

180+ , "profunctor"

181+ ]

182+ , repo =

183+ "https://github.com/slamdata/purescript-matryoshka.git"

184+ , version =

185+ "caaca2d836d52159ba7963333996286a00428394"

186+ }

160 }

187 }

161

188

162in upstream // overrides // additions

189in upstream // overrides // additions

server/static/fonts/PragmataProLiga-Regular.woffnew file

Binary file not shown.

server/static/fonts/PragmataProLiga-Regular.woff2new file

Binary file not shown.

spago.dhall+3

@@ -9,12 +9,15 @@ You can edit this file as you like.

9 , "css"

10 , "debug"

11 , "effect"

12+ , "matryoshka"

12 , "psci-support"

13 , "psci-support"

14+ , "pseudo-random"

13 , "react-basic"

15 , "react-basic"

14 , "react-basic-hooks"

16 , "react-basic-hooks"

15 , "react-testing-library"

17 , "react-testing-library"

16 , "record-extra"

18 , "record-extra"

17 , "spec-discovery"

19 , "spec-discovery"

20+ , "string-parsers"

18 , "web-html"

21 , "web-html"

19 ]

22 ]

20, packages =

23, packages =

src/Button/Component.purs+45−43

@@ -1,7 +1,6 @@

1module Button.Component where

3import Prelude

4−

5import CSS (ColorSpace(..), mix, toHexString)

4import CSS (ColorSpace(..), mix, toHexString)

6import CSS.Safer (cssSafer)

5import CSS.Safer (cssSafer)

7import Color (fromHexString)

6import Color (fromHexString)

@@ -30,7 +29,6 @@ mkButton ∷

30 ∀ attrs attrs_.

29 ∀ attrs attrs_.

31 Union attrs attrs_ Props_button =>

30 Union attrs attrs_ Props_button =>

32 Lacks "children" attrs =>

31 Lacks "children" attrs =>

33− Lacks "className" attrs =>

34 Lacks "ref" attrs =>

32 Lacks "ref" attrs =>

35 Lacks "key" attrs =>

33 Lacks "key" attrs =>

36 Effect

34 Effect

@@ -52,8 +50,7 @@ mkButton = do

52 , btn:

50 , btn:

53 cssSafer

51 cssSafer

54 { background:

52 { background:

55− if theme.isLight

53+ if theme.isLight then

56− then

57 theme.interfaceColourLightest

54 theme.interfaceColourLightest

58 else

55 else

59 linearGradient

56 linearGradient

@@ -62,13 +59,13 @@ mkButton = do

62 ]

59 ]

63 , color: theme.textColour

60 , color: theme.textColour

64 , boxShadow:

61 , boxShadow:

65− if theme.isLight

62+ if theme.isLight then

66− then "none"

63+ "none"

67 else

64 else

68 "1px 1px 10px rgba(0,0,0,0.66)"

65 "1px 1px 10px rgba(0,0,0,0.66)"

69 , border:

66 , border:

70− if theme.isLight

67+ if theme.isLight then

71− then "1px solid " <> theme.interfaceColourLighter

68+ "1px solid " <> theme.interfaceColourLighter

72 else

69 else

73 "none"

70 "none"

74 , borderRadius: "20px"

71 , borderRadius: "20px"

@@ -82,54 +79,59 @@ mkButton = do

82 , textTransform: "uppercase"

79 , textTransform: "uppercase"

83 , outline: "none"

80 , outline: "none"

84 , "&:focus":

81 , "&:focus":

85− { background:

82+ { background:

86− linearGradient

83+ linearGradient

87− [ "-5deg"

84+ [ "-5deg"

88− , theme.interfaceColourDarker

85+ , theme.interfaceColourDarker

89− , theme.highlightColourDark

86+ , theme.highlightColourDark

90− , theme.highlightColour

87+ , theme.highlightColour

91− ]

88+ ]

92− , color: theme.interfaceColourLighter

89+ , color:

90+ fromMaybe theme.textColour do

91+ hlc <- theme.highlightColour # fromHexString

92+ hlcd <- theme.highlightColourDark # fromHexString

93+ let bg = if theme.isLight then hlc else mix HSL hlc hlcd 0.5

94+ tc <- theme.textColour # fromHexString

95+ pure $ increaseContrast bg tc # toHexString

93− , backgroundSize: "400% 400%, 100% 100%"

96+ , backgroundSize: "400% 400%, 100% 100%"

94− , animation: "$gradientBG 3s ease infinite"

97+ , animation: "$gradientBG 3s ease infinite"

95− }

98+ }

96 , "&:active":

99 , "&:active":

97− { background:

100+ { background:

98− linearGradient

101+ linearGradient

99− [ "180deg"

102+ [ "180deg"

100− , theme.interfaceColourLighter

103+ , theme.interfaceColourLighter

101− , theme.interfaceColourLightest

104+ , theme.interfaceColourLightest

102− ]

105+ ]

103− , boxShadow: "inset 0 0 2px black"

106+ , boxShadow: "inset 0 0 2px black"

104− }

107+ }

105 , "&:disabled":

108 , "&:disabled":

106− { boxShadow: "0 0 0 black"

109+ { boxShadow: "0 0 0 black"

107− , background: theme.backgroundColour

110+ , background: theme.backgroundColour

108− , border: "1px dotted " <> theme.interfaceColourLightest

111+ , border: "1px dotted " <> theme.interfaceColourLightest

109− , textDecoration: "line-through"

112+ , textDecoration: "line-through"

110− , textDecorationColor: theme.red

113+ , textDecorationColor: theme.red

111− }

114+ }

112 }

115 }

113 , highlightedButton:

116 , highlightedButton:

114 cssSafer

117 cssSafer

115 { background:

118 { background:

116− if theme.isLight

119+ if theme.isLight then

117− then

118 theme.highlightColour

120 theme.highlightColour

119 else

121 else

120 linearGradient [ theme.highlightColour, theme.highlightColourDark ]

122 linearGradient [ theme.highlightColour, theme.highlightColourDark ]

121 , "&:active":

123 , "&:active":

122− { background:

124+ { background:

123− linearGradient [ theme.highlightColourDark, theme.highlightColour ]

125+ linearGradient [ theme.highlightColourDark, theme.highlightColour ]

124− }

126+ }

127+ , color:

125− , color: fromMaybe theme.textColour

128+ fromMaybe theme.textColour do

126− do

127 hlc <- theme.highlightColour # fromHexString

129 hlc <- theme.highlightColour # fromHexString

128 hlcd <- theme.highlightColourDark # fromHexString

130 hlcd <- theme.highlightColourDark # fromHexString

131+ let

129− let bg = if theme.isLight then hlc else mix HSL hlc hlcd 0.5

132+ bg = if theme.isLight then hlc else mix HSL hlc hlcd 0.5

130− tc <- theme.textColour # fromHexString

133+ tc <- theme.textColour # fromHexString

131 pure $ increaseContrast bg tc # toHexString

134 pure $ increaseContrast bg tc # toHexString

132−

133 }

135 }

134 }

136 }

135 component "Button" \{ children, buttonType, buttonProps } -> React.do

137 component "Button" \{ children, buttonType, buttonProps } -> React.do

src/Container/Component.purs+6−3

@@ -1,11 +1,13 @@

1module Container.Component where

3import Prelude

4import CSS.Safer (cssSafer)

5import CSS.Safer (cssSafer)

5import Container.Header (mkHeader)

6import Container.Header (mkHeader)

6import Container.Landing (mkLandingPage)

7import Container.Landing (mkLandingPage)

7import Container.Sidebar (mkSidebar, mkSidebarLink)

8import Container.Sidebar (mkSidebar, mkSidebarLink)

8import Effect (Effect)

9import Effect (Effect)

10+import Polyfill.SmoothScrolling (smoothScrollPolyfill)

9import React.Basic (JSX)

11import React.Basic (JSX)

10import React.Basic.DOM as R

12import React.Basic.DOM as R

11import React.Basic.Hooks ((/\), ReactComponent, component, element, useState)

13import React.Basic.Hooks ((/\), ReactComponent, component, element, useState)

@@ -30,9 +32,7 @@ mkContainer = do

31mkContainerContent ∷ Effect (ReactComponent { children ∷ Array JSX })

33mkContainerContent ∷ Effect (ReactComponent { children ∷ Array JSX })

32mkContainerContent = do

34mkContainerContent = do

33− landingPage <- mkLandingPage

35+ smoothScrollPolyfill

34− sidebar <- mkSidebar

35− header <- mkHeader

36 useStyles <-

37 makeStyles \(theme ∷ CSSTheme) ->

38 -- { "@global": cssSafer { "*": { outline: "1px solid red" } }

@@ -59,6 +59,9 @@ mkContainerContent = do

59 }

60 , icon: cssSafer { fill: "theme.textColour" }

61 }

62+ landingPage <- mkLandingPage

63+ sidebar <- mkSidebar

64+ header <- mkHeader

62 sidebarLink <- mkSidebarLink

65 sidebarLink <- mkSidebarLink

63 component "ContainerContent" \{ children } -> React.do

66 component "ContainerContent" \{ children } -> React.do

64 classes <- useStyles

67 classes <- useStyles

src/Container/Header.purs+5−14

@@ -14,16 +14,16 @@ import React.Basic.DOM as R

14import React.Basic.Hooks (type (/\), Hook, ReactComponent, Ref, UseLayoutEffect, UseRef, UseState, coerceHook, component, element, readRefMaybe, useLayoutEffect, useRef, useState, (/\))

15import React.Basic.Hooks as React

16import SVG.Icon (trianglelogoIcon)

17+import Scroll.Listener as Scroll

17import Theme.Styles (makeStyles)

18import Theme.Styles (makeStyles)

18import Theme.Types (CSSTheme)

19import Theme.Types (CSSTheme)

19import Typography.Header (HeadingLevel(..), mkH)

20import Typography.Header (HeadingLevel(..), mkH)

20import Web.DOM (Node)

21import Web.DOM (Node)

21−import Web.Event.Event (EventType(..))

22−import Web.Event.EventTarget (EventListener, addEventListener, eventListener, removeEventListener)

22+import Web.Event.EventTarget (EventListener, eventListener)

23import Web.HTML (HTMLElement, window)

24import Web.HTML.HTMLElement (offsetTop)

25import Web.HTML.HTMLElement as HTMLElement

26−import Web.HTML.Window (scrollY, toEventTarget)

26+import Web.HTML.Window (scrollY)

28mkHeader ∷ Effect (ReactComponent {})

29mkHeader = do

@@ -70,7 +70,7 @@ mkHeader = do

70newtype UseShouldBeSticky hooks

71 = UseShouldBeSticky (UseLayoutEffect Unit (UseState Boolean (UseRef (Nullable Node) hooks)))

73−derive instance ntUseScrollYPosition ∷ Newtype (UseShouldBeSticky hooks) _

73+derive instance ntUseShouldBeSticky ∷ Newtype (UseShouldBeSticky hooks) _

75useShouldBeSticky ∷ Hook UseShouldBeSticky (Boolean /\ Ref (Nullable Node))

76useShouldBeSticky =

@@ -86,18 +86,9 @@ useShouldBeSticky =

86 pure (pure unit)

87 Just element -> do

88 listener <- makeListener setSticky element

89− registerListener listener

89+ Scroll.registerListener listener

90 pure (mustBeSticky /\ nodeRef)

92−scrollEventType ∷ EventType

93−scrollEventType = EventType "scroll"

94−

95−registerListener ∷ EventListener -> Effect (Effect Unit)

96−registerListener listener = do

97− target <- window <#> toEventTarget

98− addEventListener scrollEventType listener false target

99− pure $ removeEventListener scrollEventType listener false target

100−

101makeListener ∷ (Boolean -> Effect Unit) -> HTMLElement -> Effect EventListener

92makeListener ∷ (Boolean -> Effect Unit) -> HTMLElement -> Effect EventListener

102makeListener setSticky element = do

93makeListener setSticky element = do

103 nodeStartPos <- offsetTop element

94 nodeStartPos <- offsetTop element

src/Container/Landing.purs+4−7

@@ -13,7 +13,8 @@ import React.Basic.Events (handler_)

13import React.Basic.Hooks (ReactComponent, component, element, readRefMaybe, useRef)

14import React.Basic.Hooks as React

15import SVG.Icon (trianglelogoIcon)

16−import SVG.Image (landingPageDark, landingPageLight)

16+import SVG.Image (mkLandingPageBackground)

17+import Scroll.Hook (useScrollYPosition)

17import Theme.Styles (makeStyles, useTheme)

18import Theme.Styles (makeStyles, useTheme)

18import Theme.Types (CSSTheme)

19import Theme.Types (CSSTheme)

19import Typography.Header (mkH)

20import Typography.Header (mkH)

@@ -82,16 +83,12 @@ mkLandingPage = do

82 }

83 }

83 h <- mkH

84 h <- mkH

84 button <- mkButton

85 button <- mkButton

86+ backgroundImage <- mkLandingPageBackground

85 component "LandingPage" \{ } -> React.do

87 component "LandingPage" \{ } -> React.do

86 classes <- useStyles

88 classes <- useStyles

87 theme <- useTheme

89 theme <- useTheme

88 ref <- useRef null

90 ref <- useRef null

89− let

91+ scrollY <- useScrollYPosition

90− backgroundImage =

91− if theme.isLight then

92− landingPageLight

93− else

94− landingPageDark

95 pure

92 pure

96 $ R.div

93 $ R.div

97 { ref

94 { ref

src/Container/Sidebar.purs+1−1

@@ -27,7 +27,7 @@ mkSidebar = do

27 makeStyles \(theme ∷ CSSTheme) ->

28 { sidebar:

29 cssSafer

30− { background: theme.backgroundColour

30+ { background: theme.interfaceColour

31 , fontFamily: theme.textFontFamily

32 , color: theme.textColour

33 , gridArea: "nav"

src/DOM/Hook.pursnew file+66

@@ -0,0 +1,66 @@

1+module DOM.Hook where

3+import Prelude

5+import Data.Maybe (Maybe(..))

6+import Data.Newtype (class Newtype)

7+import Data.Nullable (Nullable)

8+import Data.Nullable as Nullable

9+import Data.Traversable (for_)

10+import Data.Tuple.Nested (type (/\))

11+import React.Basic (Ref)

12+import React.Basic.Hooks (Hook, UseLayoutEffect, UseRef, UseState, coerceHook, readRefMaybe, useLayoutEffect, useRef, useState, (/\))

13+import React.Basic.Hooks as React

14+import Unsafe.Coerce (unsafeCoerce)

15+import Web.DOM (Node)

16+import Web.DOM.Element (clientHeight)

17+import Web.HTML (window)

18+import Web.HTML.HTMLDocument as Document

19+import Web.HTML.HTMLElement (DOMRect, getBoundingClientRect)

20+import Web.HTML.HTMLElement as HTMLElement

21+import Web.HTML.Window (document)

22+

23+newtype UseBoundingBox hooks

24+ = UseBoundingBox

25+ ( UseLayoutEffect Unit

26+ ( UseState (Maybe DOMRect)

27+ (UseRef (Nullable Node) hooks)

28+ )

29+ )

30+

31+derive instance ntUseBoundingBox ∷ Newtype (UseBoundingBox hooks) _

32+

33+useBoundingBox ∷ Hook UseBoundingBox (Maybe DOMRect /\ Ref (Nullable Node))

34+useBoundingBox =

35+ coerceHook React.do

36+ (nullableRef ∷ (Ref (Nullable Node))) <- useRef Nullable.null

37+ bb /\ modifyBb <- useState Nothing

38+ useLayoutEffect unit do

39+ maybeRef <- readRefMaybe nullableRef

40+ let toHTMLOrSVGElement = unsafeCoerce -- [TODO] Make a bit safer?

41+ for_ (maybeRef <#> toHTMLOrSVGElement) \elem -> do

42+ rect <- getBoundingClientRect elem

43+ modifyBb (const $ Just rect)

44+ pure (pure unit)

45+ pure (bb /\ nullableRef)

46+

47+

48+newtype UseViewportHeight hooks

49+ = UseViewportHeight (UseLayoutEffect Unit (UseState (Maybe Number) hooks))

50+

51+derive instance ntUseViewportHeight ∷ Newtype (UseViewportHeight hooks) _

52+

53+useViewportHeight ∷ Hook UseViewportHeight (Maybe Number)

54+useViewportHeight =

55+ coerceHook React.do

56+ viewportHeight /\ modifyViewportHeight <- useState Nothing

57+ useLayoutEffect unit do

58+ doc <- window >>= document

59+ let maybeElem = Document.toNode doc # HTMLElement.fromNode

60+ case maybeElem of

61+ Nothing -> pure unit

62+ Just elem -> do

63+ ch <- clientHeight (HTMLElement.toElement elem)

64+ modifyViewportHeight (const $ Just ch)

65+ pure (pure unit)

66+ pure viewportHeight

src/Polyfill/SmoothScrolling.jsnew file+8

@@ -0,0 +1,8 @@

1+'use strict'

3+var smoothScroll = require("smoothscroll-polyfill")

4+var smoothScrollingActivated = false;

5+exports.smoothScrollPolyfill = function() {

6+ if(smoothScrollingActivated) { return; }

7+ smoothScroll.polyfill();

8+}

src/Polyfill/SmoothScrolling.pursnew file+6

@@ -0,0 +1,6 @@

1+module Polyfill.SmoothScrolling where

3+import Prelude

4+import Effect (Effect)

6+foreign import smoothScrollPolyfill ∷ Effect Unit

src/SVG/Image.purs+946−9

@@ -1,17 +1,954 @@

1module SVG.Image where

3−

3+import Prelude

4−import Prim.Row (class Union)

4+import CSS.Safer (cssSafer)

5+import DOM.Hook (useBoundingBox)

6+import Data.Array (elem, foldl, head, intercalate, snoc, uncons, zip, (:))

7+import Data.Int (round, toNumber)

8+import Data.Maybe (Maybe(..), maybe)

9+import Data.String (codePointFromChar)

10+import Data.String as String

11+import Data.Tuple.Nested ((/\))

12+import Effect (Effect)

13+import Random.PseudoRandom (mkSeed, randomRs)

14+import React.Basic (JSX, element)

15+import React.Basic.DOM (unsafeCreateDOMComponent)

16+import React.Basic.DOM as HTML

17+import React.Basic.DOM.SVG as SVG

5import React.Basic.Hooks (ReactComponent)

18import React.Basic.Hooks (ReactComponent)

19+import React.Basic.Hooks as React

6−import SVG.Icon (Raw, ImageProps)

20+import SVG.Icon (Raw)

7−import Unsafe.Coerce (unsafeCoerce)

21+import Scroll.Hook (useScrollYPosition)

22+import Theme.Styles (makeStyles, useTheme)

23+import Theme.Types (CSSTheme)

9foreign import landingPageDarkRaw ∷ ∀ r. Raw r

25foreign import landingPageDarkRaw ∷ ∀ r. Raw r

11−landingPageLight ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }

12−landingPageLight = unsafeCoerce landingPageLightRaw

13−

14foreign import landingPageLightRaw ∷ ∀ r. Raw r

27foreign import landingPageLightRaw ∷ ∀ r. Raw r

16−landingPageDark ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }

29+mkLandingPageBackground ∷ Effect (ReactComponent { className ∷ String })

17−landingPageDark = unsafeCoerce landingPageDarkRaw

30+mkLandingPageBackground = do

31+ useStyles <-

32+ makeStyles \(theme ∷ CSSTheme) ->

33+ { laptopBackground:

34+ cssSafer

35+ { fill: theme.backgroundColour

36+ }

37+ , lightEllipsis:

38+ cssSafer

39+ { cx: if theme.isLight then "721" else "175"

40+ , cy: if theme.isLight then "355" else "310"

41+ , rx: if theme.isLight then "647" else "330"

42+ , ry: if theme.isLight then "310" else "252"

43+ }

44+ , laptopBody:

45+ cssSafer

46+ { fill: if theme.isLight then "url(#_Linear9)" else "url(#_Linear12)"

47+ }

48+ , screenText:

49+ cssSafer

50+ { fontFamily: "PragmataPro"

51+ , fontSize: "0.85em"

52+ , fill: theme.textColour

53+ }

54+ , keyword: cssSafer { fill: theme.green }

55+ , typeName: cssSafer { fill: theme.pink }

56+ , "@keyframes animatedCursor":

57+ cssSafer

58+ { "0%": { opacity: "0.0" }

59+ , "50%": { opacity: "1.0" }

60+ }

61+ , cursor:

62+ cssSafer

63+ { animation: "$animatedCursor 0.5s linear infinite"

64+ , animationDirection: "alternate"

65+ }

66+ , "@keyframes movingCloud1":

67+ cssSafer

68+ { "0%": { transform: "translate3d(-140%, 4%, 0)" }

69+ , "100%": { transform: "translate3d(70%, -4%, 0)" }

70+ }

71+ , movingCloud1:

72+ cssSafer

73+ { animation: "$movingCloud1 200s linear infinite"

74+ , animationDelay: "-150s"

75+ }

76+ , "@keyframes movingCloud2":

77+ cssSafer

78+ { "0%": { transform: "translate3d(-10%, 0%, 0)" }

79+ , "100%": { transform: "translate3d(10%, 0%, 0)" }

80+ }

81+ , movingCloud2:

82+ cssSafer

83+ { animation: "$movingCloud2 120s linear infinite"

84+ , animationDirection: "alternate"

85+ }

86+ , movingCloud3:

87+ cssSafer

88+ { animation: "$movingCloud2 120s linear infinite"

89+ , animationDelay: "-120s"

90+ , animationDirection: "alternate"

91+ }

92+ , "@keyframes twinkle":

93+ cssSafer

94+ { "0%": { fill: "rgba(250, 250, 250, 0.2)" }

95+ , "50%": { fill: "rgba(250, 250, 250, 0.7)" }

96+ , "70%": { fill: "rgba(250, 250, 250, 0.4)" }

97+ , "100%": { fill: "rgba(250, 250, 250, 1.0)" }

98+ }

99+ , "@keyframes twinkleFast":

100+ cssSafer

101+ { "0%": { fill: "rgba(250, 250, 250, 0.7)" }

102+ , "100%": { fill: "rgba(250, 250, 250, 0.78)" }

103+ }

104+ , twinklingStar1:

105+ cssSafer

106+ { animation: "$twinkleFast 0.2s ease-in-out infinite"

107+ , animationDirection: "alternate"

108+ }

109+ , twinklingStar2:

110+ cssSafer

111+ { animation: "$twinkle 8s ease-in-out infinite"

112+ , animationDelay: "4s"

113+ , animationDirection: "alternate"

114+ }

115+ , twinklingStar3:

116+ cssSafer

117+ { animation: "$twinkle 4s ease-in-out infinite"

118+ , animationDelay: "3s"

119+ , animationDirection: "alternate"

120+ }

121+ , "@keyframes rotateStars":

122+ cssSafer

123+ { "0%": { transform: "rotate(0deg) scale(1,1)" }

124+ , "100%": { transform: "rotate(1deg) scale(1.01, 1.01)" }

125+ }

126+ , stars:

127+ cssSafer

128+ { animation: "$rotateStars 30s linear infinite"

129+ , transformOrigin: "top center"

130+ , animationDirection: "alternate"

131+ }

132+ }

133+ React.component "LandingPageBackground" \{ className } -> React.do

134+ theme <- useTheme

135+ classes <- useStyles

136+ scrollY <- useScrollYPosition

137+ bb /\ ref <- useBoundingBox

138+ let

139+ scrolled = case bb of

140+ Nothing -> 0.0

141+ Just vh -> scrollY / vh.height

142+ pure

143+ $ element (unsafeCreateDOMComponent "svg") -- [TODO] make PR for react-basic to allow for `ref` on svg

144+ { ref

145+ , viewBox: "0 0 800 447"

146+ , preserveAspectRatio: "xMidYMax slice"

147+ , xmlns: "http://www.w3.org/2000/svg"

148+ , fillRule: "evenodd"

149+ , clipRule: "evenodd"

150+ , strokeLinejoin: "round"

151+ , strokeMiterlimit: "2"

152+ , className

153+ , children:

154+ [ SVG.path

155+ { fill: "none"

156+ , d: "M0 0h800v447H0z"

157+ }

158+ , SVG.clipPath

159+ { id: "a"

160+ , children:

161+ [ SVG.path

162+ { d: "M0 0h800v447H0z"

163+ }

164+ ]

165+ }

166+ , SVG.g

167+ { clipPath: "url(#a)"

168+ , children:

169+ [ SVG.path

170+ { d: "M800.828 448.051V-3.513H-3.028v451.564h803.856z"

171+ , fill: "url(#_Linear2)"

172+ }

173+ , SVG.ellipse

174+ { className: classes.lightEllipsis

175+ , fill: "url(#_Radial3)"

176+ }

177+ , stars classes.stars classes

178+ -- bgcloud

179+ , SVG.path

180+ { d: "M610.291 177.316c-35.879-.428-84.67-.691-138.392-.689-38.684.002-74.811.141-105.402.38-49.14-2.745-80.877-9.954-80.877-14.718 0-1.333 2.655.335 7.294-.896 96.772-.175 171.302-1.213 171.302-2.464 0-1.107-59.462-3.372-140.106-3.687 38.487-2.059 102.543-4.972 173.823-4.972 11.996 0 23.761.07 35.216.206 20.76-4.638 60.945-2.784 107.07-2.784 36.08 0 68.525-.075 90.882 2.983 32.491.899 72.142-1.186 114.922-.379 38.68.729 74.805 1.273 105.395 1.613 49.101 3.673 80.599 8.516 80.54 13.279-.016 1.334-2.504 2.58-7.158 3.723-96.763-1.654-171.297-2.024-171.312-.774-.013 1.108 58.473 3.15 139.105 4.989-38.514 3.085-101.653 4.38-172.925 3.033-11.995-.227-23.757-.52-35.209-.872-20.815 4.245-61.034 6.631-107.154 5.759-24.754-.468-47.786-1.809-67.014-3.73z"

181+ , fill: if theme.isLight then "#ddf0fb" else "#240c3c"

182+ , className: classes.movingCloud1

183+ }

184+ -- bgcloud

185+ , SVG.path

186+ { d: "M609.299 171.607c-35.88-.338-84.67-.545-138.392-.543-38.684.001-74.812.111-105.402.299-49.141-2.166-80.694-5.519-80.694-9.279 0-1.052 2.472-2.073 7.111-3.045 96.772-.137 171.302-.957 171.302-1.944-.001-.874-58.506-1.614-139.15-1.862 38.471-3.009 101.587-4.973 172.867-4.973 11.996 0 23.761.055 35.216.162 20.76-3.66 60.945-6.143 107.07-6.143 36.08 0 68.525 1.519 90.882 3.933 32.491.709 72.142 1.432 114.922 2.069 38.68.575 74.805 1.005 105.395 1.272 49.101 2.9 80.598 6.722 80.54 10.482-.017 1.052-2.505 2.036-7.158 2.938-96.763-1.305-171.297-1.597-171.312-.611-.014.875 58.473 2.486 139.104 3.938-38.514 2.435-101.653 3.457-172.924 2.394a3771.84 3771.84 0 01-35.21-.688c-20.814 3.35-61.033 5.234-107.153 4.545-24.754-.369-47.786-1.428-67.014-2.944z"

187+ , fill: if theme.isLight then "#d8effd" else "#120b38"

188+ , className: classes.movingCloud1

189+ }

190+ -- rightcloud

191+ , SVG.path

192+ { d: "M684.234 222.269c-12.108-1.642-29.721-2.832-29.76-5.218-.063-3.861 34.226-4.225 76.6-3.504 42.375.721 75.9-2.707 76.956 1.008 2.476 8.704-12.549 8.552-32.56 10.141-12.403-.58-28.24.216-44.434.479-16.193.263-35.197-1.331-46.802-2.906z"

193+ , fill: if theme.isLight then "#d8effd" else "url(#_Linear4)"

194+ , className: classes.movingCloud2

195+ }

196+ -- leftcloud

197+ , SVG.path

198+ { d: "M130.064 213.821c42.381 0 76.789.237 76.789 4.224 0 3.986-14.408 4.223-56.789 4.223-42.38 0-96.788.208-96.788-4.223s34.408-4.224 76.788-4.224z"

199+ , fill: if theme.isLight then "#d8effd" else "#a7847d"

200+ , className: classes.movingCloud3

201+ }

202+ , mountains theme.isLight scrolled

203+ --buildings

204+ , buildings theme.isLight scrolled

205+ -- bar

206+ , SVG.path

207+ { fill: theme.backgroundColour

208+ , d: "M-3.028 431.298h826.844v20.006H-3.028z"

209+ }

210+ -- laptop

211+ , laptop classes scrolled

212+ ]

213+ }

214+ , defs theme.isLight

215+ ]

216+ }

217+

218+laptop ∷

219+ ∀ r.

220+ { cursor ∷ String

221+ , keyword ∷ String

222+ , laptopBackground ∷ String

223+ , laptopBody ∷ String

224+ , screenText ∷ String

225+ , typeName ∷ String

226+ | r

227+ } ->

228+ Number -> JSX

229+laptop classes scrolled =

230+ SVG.g

231+ { children:

232+ [ SVG.path

233+ { d: "M606.064 273.603c0-6.261-5.076-11.337-11.337-11.337H399.673c-6.261 0-11.337 5.076-11.337 11.337v151.521a5.001 5.001 0 005 5h207.728a5.004 5.004 0 003.536-1.464 5.004 5.004 0 001.464-3.536V273.603z"

234+ , fill: "#657390"

235+ }

236+ , SVG.path

237+ { d: "M606.064 273.603c0-6.261-5.076-11.337-11.337-11.337H399.673c-6.261 0-11.337 5.076-11.337 11.337v151.521a5.001 5.001 0 005 5h207.728a5.004 5.004 0 003.536-1.464 5.004 5.004 0 001.464-3.536V273.603z"

238+ , fill: "#657390"

239+ }

240+ , SVG.path

241+ { d: "M599.193 275.905a5.528 5.528 0 00-5.526-5.526H400.604a5.528 5.528 0 00-5.526 5.526v141.039a5.528 5.528 0 005.526 5.526h193.063a5.528 5.528 0 005.526-5.526V275.905z"

242+ , fill: "#130c2b"

243+ , className: classes.laptopBackground

244+ }

245+ , SVG.path

246+ { d: "M655.04 427.228a.458.458 0 00-.457-.457H340.83v4.975a5 5 0 005 5h304.21a5 5 0 005-5v-4.518z"

247+ , className: classes.laptopBody

248+ }

249+ , SVG.circle

250+ { cx: "497.178"

251+ , cy: "267.001"

252+ , r: "1.238"

253+ , fillOpacity: ".45"

254+ }

255+ , SVG.circle

256+ { cx: "500.009"

257+ , cy: "267.001"

258+ , r: ".527"

259+ , fillOpacity: ".45"

260+ }

261+ , SVG.circle

262+ { cx: "494.263"

263+ , cy: "267.001"

264+ , r: ".527"

265+ , fill: "#102708"

266+ , fillOpacity: ".45"

267+ }

268+ , SVG.text

269+ { x: "407"

270+ , y: "290"

271+ , className: classes.screenText

272+ , children:

273+ textToTspans classes scrolled 407.0

274+ $ intercalate "\n"

275+ [ "hoistJoker "

276+ , "\t∷ ∀ f g a b"

277+ , "\t. (f ~> g)"

278+ , "\t-> Joker f a b"

279+ , "\t-> Joker g a b"

280+ , "hoistJoker f (Joker a) ="

281+ , "\t Joker (f a)"

282+ ]

283+ }

284+ ]

285+ }

286+

287+buildings ∷ Boolean -> Number -> JSX

288+buildings isLight scrolled =

289+ SVG.g

290+ { transform: "translate(0 " <> show (scrolled * 30.0) <> ")"

291+ , children:

292+ [ SVG.path -- 2 main

293+ { d: "M195.171 451.298V159.153H92.709v292.145h102.462z"

294+ , fill: if isLight then "url(#_Linear4)" else "url(#_Linear5)"

295+ }

296+ , SVG.path -- 4 main

297+ { d: "M289.755 451.298V232.811h-57.232v218.487h57.232z"

298+ , fill: if isLight then "url(#_Linear5)" else "url(#_Linear6)"

299+ }

300+ , SVG.path -- 4 shade

301+ { d: "M207.557 451.298V232.811h25.314v218.487h-25.314zM92.709 451.298V159.153h25.314v292.145H92.709z"

302+ , fill: if isLight then "#b4dbfb" else "#130425"

303+ }

304+ , SVG.path -- 5 shade

305+ { d: "M323.451 451.298V327.713h-71.555v123.585h71.555z"

306+ , fill: if isLight then "url(#_Linear6)" else "url(#_Linear7)"

307+ , transform: "translate(0 " <> show (scrolled * 60.0) <> ")"

308+ }

309+ , SVG.path -- 5 main

310+ { d: "M323.451 451.298V327.713h-16.692v123.585h16.692z"

311+ , fill: if isLight then "url(#_Linear7)" else "url(#_Linear8)"

312+ , transform: "translate(0 " <> show (scrolled * 60.0) <> ")"

313+ }

314+ , SVG.path -- 3 main

315+ { d: "M272.498 451.298v-95.771H135.943v95.771h136.555z"

316+ , fill: if isLight then "url(#_Linear8)" else "url(#_Linear9)"

317+ , transform: "translate(0 " <> show (scrolled * 100.0) <> ")"

318+ }

319+ , SVG.path -- 3 shade

320+ { d: "M173.526 451.298v-95.771h-37.583v95.771h37.583z"

321+ , fill: if isLight then "#b4dbfb" else "#2e1232"

322+ , transform: "translate(0 " <> show (scrolled * 100.0) <> ")"

323+ }

324+ , SVG.path -- 1 main

325+ { d: "M85.122 451.298V272.442h-97.675v178.856h97.675z"

326+ , fill: if isLight then "#b4dbfb" else "url(#_Linear10)"

327+ , transform: "translate(0 " <> show (scrolled * 100.0) <> ")"

328+ }

329+ , SVG.path -- 1 shade

330+ { d: "M66.649 456.944V272.442H-3.028v184.502h69.677z"

331+ , fill: if isLight then "#b4dbfb" else "url(#_Linear11)"

332+ , transform: "translate(0 " <> show (scrolled * 100.0) <> ")"

333+ }

334+ ]

335+ }

336+

337+mountains ∷ Boolean -> Number -> JSX

338+mountains isLight scrolled =

339+ SVG.g

340+ { transform: "translate(0 " <> show (scrolled * 70.0) <> ")"

341+ , children:

342+ [ SVG.path

343+ { d: "M476.098 218.299l81.644 216.765H352.334l123.764-216.765z"

344+ , fill: if isLight then "#4560a0" else "#04102d"

345+ }

346+ , SVG.path

347+ { d: "M476.098 218.299l21.823 203.477 81.177-8.706-103-194.771z"

348+ , fill: if isLight then "#5e84ba" else "#250849"

349+ }

350+ -- 2 dark (left)

351+ , SVG.path

352+ { d: "M369.627 308.648l88.326 125.788H252.546l117.081-125.788z"

353+ , fill: if isLight then "#4560a0" else "#04102d"

354+ }

355+ -- 1 dark (left)

356+ , SVG.path

357+ { d: "M326.11 338.332l68.193 96.732H188.896l137.214-96.732zM508.168 243.792l163.526 204.747H415.051l93.117-204.747z"

358+ , fill: if isLight then "#4560a0" else "#04102d"

359+ }

360+ , SVG.path -- 1 and 2 light (right)

361+ { d: "M508.168 245.355l63.395 75.115-54.953 46.379-8.442-121.494zM369.612 308.648l54.182 77.687-58.981 41.135 4.799-118.822zM326.184 338.326l16.813 23.99-16.887 11.835.074-35.825z"

362+ , fill: if isLight then "#5e84ba" else "#250849"

363+ }

364+ -- right mountain

365+ , SVG.path -- rightmost dark (left)

366+ { d: "M633.647 230.42L809.34 435.064H457.953L633.647 230.42z"

367+ , fill: if isLight then "#4560a0" else "#04102d"

368+ }

369+ , SVG.path -- rightmost light (right)

370+ { d: "M633.647 230.42L735.22 475.549l86.041-35.653L633.647 230.42z"

371+ , fill: if isLight then "#5e84ba" else "#250849"

372+ }

373+ , SVG.path -- peak left

374+ { d: "M643.625 254.384c-.571.219-.745.283-1.863.82-2.864 1.395-6.079 3.209-9.184 2.64-6.187-1.134-10.854-6.283-16.725-6.738l17.786-20.729 9.986 24.007z"

375+ , fill: if isLight then "#d9d9d9" else "#655578"

376+ }

377+ , SVG.path -- peak right

378+ { d: "M654.229 253.4c-.494-.028-.875-.013-.875-.013-3.255-.486-6.617-.192-9.677.982l-.052.02-9.978-23.97 20.582 22.981z"

379+ , fill: if isLight then "#fff" else "#9d779e"

380+ }

381+ ]

382+ }

383+

384+textToTspans ∷

385+ ∀ r.

386+ { cursor ∷ String

387+ , keyword ∷ String

388+ , typeName ∷ String

389+ | r

390+ } ->

391+ Number -> Number -> String -> Array JSX

392+textToTspans classes scrolled x str = (foldl toTspan { distance: 0.0, acc: [] } lines).acc <> [ cursor ]

393+ where

394+ toTspan { distance, acc } line = case uncons (words line) of

395+ Nothing -> { distance: distance + 1.2, acc }

396+ Just { head: "", tail: [] } -> { distance: distance + 1.2, acc }

397+ Just { head, tail } -> do

398+ let

399+ newElems ∷ Array JSX

400+ newElems = _.spans $ foldl mkNewElems { prefix: " ", spans: [] } tail

401+

402+ mkNewElems { prefix, spans } = case _ of

403+ "" -> { prefix: prefix <> " ", spans }

404+ word ->

405+ { prefix: " "

406+ , spans:

407+ spans

408+ `snoc`

409+ SVG.tspan

410+ { children: [ HTML.text $ prefix <> word ]

411+ , className: classNameForWord word

412+ }

413+ }

414+

415+ first =

416+ SVG.tspan

417+ { x: show x

418+ , dy: show distance <> "em"

419+ , children: [ HTML.text head ]

420+ }

421+

422+ pimped ∷ Array JSX

423+ pimped = first : newElems

424+ { distance: 1.2, acc: acc <> pimped }

425+

426+ classNameForWord = case _ of

427+ keyword

428+ | elem keyword keywords -> classes.keyword

429+ typeName

430+ | isTypeName typeName -> classes.typeName

431+ other -> ""

432+

433+ isTypeName s =

434+ let

435+ firstLetter = String.take 1 s

436+

437+ inRange c1 c2 = between (codePointFromChar c1) (codePointFromChar c2)

438+

439+ isLetter =

440+ String.toCodePointArray

441+ >>> head

442+ >>> maybe false (inRange 'a' 'z' || inRange 'A' 'Z')

443+ in

444+ String.toUpper firstLetter == firstLetter && isLetter firstLetter

445+

446+ keywords =

447+ [ "module"

448+ , "∷"

449+ , "::"

450+ , "forall"

451+ , "∀"

452+ , "do"

453+ , "where"

454+ , "let"

455+ , "in"

456+ , "instance"

457+ , "class"

458+ , "data"

459+ , "="

460+ , "|"

461+ , "type"

462+ , "newtype"

463+ , "derive"

464+ , "if"

465+ , "then"

466+ , "else"

467+ , "import"

468+ ]

469+

470+ words line = split

471+ where

472+ split = String.split (String.Pattern " ") line

473+

474+ lines = String.split (String.Pattern "\n") scrolledString

475+

476+ scrolledString = String.take charactersToTake str

477+ where

478+ doneAfterXPercent = 0.5 -- [WARN] Don't set to 0

479+

480+ charactersToTake = round $ scrolled * (1.0 / doneAfterXPercent) * len

481+

482+ len = toNumber $ String.length str

483+

484+ cursor =

485+ SVG.tspan

486+ { dx: "0"

487+ , dy: "0"

488+ , children: [ HTML.text "█" ]

489+ , className: classes.cursor

490+ , id: "landing-page-cursor"

491+ }

492+

493+defs ∷ Boolean -> JSX

494+defs = if _ then lightDefs else darkDefs

495+

496+lightDefs ∷ JSX

497+lightDefs =

498+ SVG.defs

499+ { children:

500+ [ SVG.linearGradient

501+ { id: "_Linear2"

502+ , x1: "0"

503+ , y1: "0"

504+ , x2: "1"

505+ , y2: "0"

506+ , gradientUnits: "userSpaceOnUse"

507+ , gradientTransform: "matrix(0 451.564 -803.856 0 398.9 -3.513)"

508+ , children:

509+ [ SVG.stop

510+ { offset: "0"

511+ , stopColor: "#68adfc"

512+ }

513+ , SVG.stop

514+ { offset: ".34"

515+ , stopColor: "#cbe0f8"

516+ }

517+ , SVG.stop

518+ { offset: "1"

519+ , stopColor: "#d2cbf8"

520+ }

521+ ]

522+ }

523+ , SVG.linearGradient

524+ { id: "_Linear4"

525+ , x1: "0"

526+ , y1: "0"

527+ , x2: "1"

528+ , y2: "0"

529+ , gradientUnits: "userSpaceOnUse"

530+ , gradientTransform: "scale(293.8304) rotate(83.86 -.11 .484)"

531+ , children:

532+ [ SVG.stop

533+ { offset: "0"

534+ , stopColor: "#bde8f7"

535+ }

536+ , SVG.stop

537+ { offset: "1"

538+ , stopColor: "#86b6fe"

539+ }

540+ ]

541+ }

542+ , SVG.linearGradient

543+ { id: "_Linear5"

544+ , x1: "0"

545+ , y1: "0"

546+ , x2: "1"

547+ , y2: "0"

548+ , gradientUnits: "userSpaceOnUse"

549+ , gradientTransform: "scale(219.3256) rotate(84.988 -.028 1.133)"

550+ , children:

551+ [ SVG.stop

552+ { offset: "0"

553+ , stopColor: "#bde8f7"

554+ }

555+ , SVG.stop

556+ { offset: "1"

557+ , stopColor: "#86b6fe"

558+ }

559+ ]

560+ }

561+ , SVG.linearGradient

562+ { id: "_Linear6"

563+ , x1: "0"

564+ , y1: "0"

565+ , x2: "1"

566+ , y2: "0"

567+ , gradientUnits: "userSpaceOnUse"

568+ , gradientTransform: "rotate(90 -6.304 321.409) scale(123.585)"

569+ , children:

570+ [ SVG.stop

571+ { offset: "0"

572+ , stopColor: "#bde8f7"

573+ }

574+ , SVG.stop

575+ { offset: "1"

576+ , stopColor: "#86b6fe"

577+ }

578+ ]

579+ }

580+ , SVG.linearGradient

581+ { id: "_Linear7"

582+ , x1: "0"

583+ , y1: "0"

584+ , x2: "1"

585+ , y2: "0"

586+ , gradientUnits: "userSpaceOnUse"

587+ , gradientTransform: "scale(132.4342) rotate(68.9 -1.112 2.415)"

588+ , children:

589+ [ SVG.stop

590+ { offset: "0"

591+ , stopColor: "#bde8f7"

592+ }

593+ , SVG.stop

594+ { offset: "1"

595+ , stopColor: "#86b6fe"

596+ }

597+ ]

598+ }

599+ , SVG.linearGradient

600+ { id: "_Linear8"

601+ , x1: "0"

602+ , y1: "0"

603+ , x2: "1"

604+ , y2: "0"

605+ , gradientUnits: "userSpaceOnUse"

606+ , gradientTransform: "rotate(90 -88.788 166.635) scale(190.951)"

607+ , children:

608+ [ SVG.stop

609+ { offset: "0"

610+ , stopColor: "#bde8f7"

611+ }

612+ , SVG.stop

613+ { offset: "1"

614+ , stopColor: "#86b6fe"

615+ }

616+ ]

617+ }

618+ , SVG.linearGradient

619+ { id: "_Linear9"

620+ , x1: "0"

621+ , y1: "0"

622+ , x2: "1"

623+ , y2: "0"

624+ , gradientUnits: "userSpaceOnUse"

625+ , gradientTransform: "matrix(314.21 0 0 9.97478 340.83 431.758)"

626+ , children:

627+ [ SVG.stop

628+ { offset: "0"

629+ , stopColor: "#a9abc1"

630+ }

631+ , SVG.stop

632+ { offset: ".11"

633+ , stopColor: "#65687d"

634+ }

635+ , SVG.stop

636+ { offset: ".5"

637+ , stopColor: "#c3c5d2"

638+ }

639+ , SVG.stop

640+ { offset: ".89"

641+ , stopColor: "#64677c"

642+ }

643+ , SVG.stop

644+ { offset: "1"

645+ , stopColor: "#a4a7c2"

646+ }

647+ ]

648+ }

649+ , SVG.radialGradient

650+ { id: "_Radial3"

651+ , cx: "0"

652+ , cy: "0"

653+ , r: "1"

654+ , gradientUnits: "userSpaceOnUse"

655+ , gradientTransform: "matrix(647.316 0 0 309.935 720.558 355.142)"

656+ , children:

657+ [ SVG.stop

658+ { offset: "0"

659+ , stopColor: "#cfcfcf"

660+ , stopOpacity: ".65"

661+ }

662+ , SVG.stop

663+ { offset: "1"

664+ , stopColor: "#fff552"

665+ , stopOpacity: "0"

666+ }

667+ ]

668+ }

669+ ]

670+ }

671+

672+darkDefs ∷ JSX

673+darkDefs =

674+ SVG.defs

675+ { children:

676+ [ SVG.linearGradient

677+ { id: "_Linear2"

678+ , x1: "0"

679+ , y1: "0"

680+ , x2: "1"

681+ , y2: "0"

682+ , gradientUnits: "userSpaceOnUse"

683+ , gradientTransform: "matrix(0 451.564 -803.856 0 398.9 -3.513)"

684+ , children:

685+ [ SVG.stop

686+ { offset: "0"

687+ , stopColor: "#000434"

688+ }

689+ , SVG.stop

690+ { offset: ".28"

691+ , stopColor: "#171043"

692+ }

693+ , SVG.stop

694+ { offset: ".68"

695+ , stopColor: "#573774"

696+ }

697+ , SVG.stop

698+ { offset: "1"

699+ , stopColor: "#b8734e"

700+ }

701+ ]

702+ }

703+ , SVG.linearGradient

704+ { id: "_Linear4"

705+ , x1: "0"

706+ , y1: "0"

707+ , x2: "1"

708+ , y2: "0"

709+ , gradientUnits: "userSpaceOnUse"

710+ , gradientTransform: "matrix(-.53832 -17.3125 1.44013 -.04478 749.812 228.864)"

711+ , children:

712+ [ SVG.stop

713+ { offset: "0"

714+ , stopColor: "#e59f77"

715+ }

716+ , SVG.stop

717+ { offset: ".47"

718+ , stopColor: "#a46075"

719+ }

720+ , SVG.stop

721+ { offset: "1"

722+ , stopColor: "#914d74"

723+ }

724+ ]

725+ }

726+ , SVG.linearGradient

727+ { id: "_Linear5"

728+ , x1: "0"

729+ , y1: "0"

730+ , x2: "1"

731+ , y2: "0"

732+ , gradientUnits: "userSpaceOnUse"

733+ , gradientTransform: "scale(293.8304) rotate(83.86 -.11 .484)"

734+ , children:

735+ [ SVG.stop

736+ { offset: "0"

737+ , stopColor: "#08001b"

738+ }

739+ , SVG.stop

740+ { offset: "1"

741+ , stopColor: "#571547"

742+ }

743+ ]

744+ }

745+ , SVG.linearGradient

746+ { id: "_Linear6"

747+ , x1: "0"

748+ , y1: "0"

749+ , x2: "1"

750+ , y2: "0"

751+ , gradientUnits: "userSpaceOnUse"

752+ , gradientTransform: "scale(219.3256) rotate(84.988 -.028 1.133)"

753+ , children:

754+ [ SVG.stop

755+ { offset: "0"

756+ , stopColor: "#000418"

757+ }

758+ , SVG.stop

759+ { offset: "1"

760+ , stopColor: "#571548"

761+ }

762+ ]

763+ }

764+ , SVG.linearGradient

765+ { id: "_Linear7"

766+ , x1: "0"

767+ , y1: "0"

768+ , x2: "1"

769+ , y2: "0"

770+ , gradientUnits: "userSpaceOnUse"

771+ , gradientTransform: "matrix(46.7869 123.585 -71.5547 27.0893 259.972 327.713)"

772+ , children:

773+ [ SVG.stop

774+ { offset: "0"

775+ , stopColor: "#000418"

776+ }

777+ , SVG.stop

778+ { offset: "1"

779+ , stopColor: "#571548"

780+ }

781+ ]

782+ }

783+ , SVG.linearGradient

784+ { id: "_Linear8"

785+ , x1: "0"

786+ , y1: "0"

787+ , x2: "1"

788+ , y2: "0"

789+ , gradientUnits: "userSpaceOnUse"

790+ , gradientTransform: "rotate(90 -6.304 321.409) scale(123.585)"

791+ , children:

792+ [ SVG.stop

793+ { offset: "0"

794+ , stopColor: "#3a0843"

795+ }

796+ , SVG.stop

797+ { offset: "1"

798+ , stopColor: "#9f5c6a"

799+ }

800+ ]

801+ }

802+ , SVG.linearGradient

803+ { id: "_Linear9"

804+ , x1: "0"

805+ , y1: "0"

806+ , x2: "1"

807+ , y2: "0"

808+ , gradientUnits: "userSpaceOnUse"

809+ , gradientTransform: "scale(101.643) rotate(28.107 -6.187 4.945)"

810+ , children:

811+ [ SVG.stop

812+ { offset: "0"

813+ , stopColor: "#2c1d2f"

814+ }

815+ , SVG.stop

816+ { offset: "1"

817+ , stopColor: "#480445"

818+ }

819+ ]

820+ }

821+ , SVG.linearGradient

822+ { id: "_Linear10"

823+ , x1: "0"

824+ , y1: "0"

825+ , x2: "1"

826+ , y2: "0"

827+ , gradientUnits: "userSpaceOnUse"

828+ , gradientTransform: "scale(-106.68957) rotate(-86.136 -1.645 -.807)"

829+ , children:

830+ [ SVG.stop

831+ { offset: "0"

832+ , stopColor: "#2c1d2f"

833+ }

834+ , SVG.stop

835+ { offset: "1"

836+ , stopColor: "#480445"

837+ }

838+ ]

839+ }

840+ , SVG.linearGradient

841+ { id: "_Linear11"

842+ , x1: "0"

843+ , y1: "0"

844+ , x2: "1"

845+ , y2: "0"

846+ , gradientUnits: "userSpaceOnUse"

847+ , gradientTransform: "matrix(20.5602 0 -184.503 0 11.25 272.442)"

848+ , children:

849+ [ SVG.stop

850+ { offset: "0"

851+ , stopColor: "#000624"

852+ }

853+ , SVG.stop

854+ { offset: "1"

855+ , stopColor: "#4f1557"

856+ }

857+ ]

858+ }

859+ , SVG.linearGradient

860+ { id: "_Linear12"

861+ , x1: "0"

862+ , y1: "0"

863+ , x2: "1"

864+ , y2: "0"

865+ , gradientUnits: "userSpaceOnUse"

866+ , gradientTransform: "matrix(314.21 0 0 9.97478 340.83 431.758)"

867+ , children:

868+ [ SVG.stop

869+ { offset: "0"

870+ , stopColor: "#a9abc1"

871+ }

872+ , SVG.stop

873+ { offset: ".11"

874+ , stopColor: "#65687d"

875+ }

876+ , SVG.stop

877+ { offset: ".5"

878+ , stopColor: "#c3c5d2"

879+ }

880+ , SVG.stop

881+ { offset: ".89"

882+ , stopColor: "#64677c"

883+ }

884+ , SVG.stop

885+ { offset: "1"

886+ , stopColor: "#a4a7c2"

887+ }

888+ ]

889+ }

890+ , SVG.radialGradient

891+ { id: "_Radial3"

892+ , cx: "0"

893+ , cy: "0"

894+ , r: "1"

895+ , gradientUnits: "userSpaceOnUse"

896+ , gradientTransform: "matrix(330.479 0 0 252.189 174.599 310.24)"

897+ , children:

898+ [ SVG.stop

899+ { offset: "0"

900+ , stopColor: "#f60"

901+ , stopOpacity: ".3"

902+ }

903+ , SVG.stop

904+ { offset: "1"

905+ , stopColor: "#fff552"

906+ , stopOpacity: "0"

907+ }

908+ ]

909+ }

910+ ]

911+ }

912+

913+infixr 8 zip as <%>

914+

915+stars ∷ ∀ css. String -> { twinklingStar1 ∷ String, twinklingStar2 ∷ String, twinklingStar3 ∷ String | css } -> JSX

916+stars className classes =

917+ let

918+ n = 400

919+

920+ xs = randomRs 0.0 800.0 n $ mkSeed 84

921+

922+ ys = randomRs (-20.0) 200.0 n $ mkSeed 4398

923+

924+ radiuses = randomRs 0.1 1.3 n (mkSeed 15)

925+

926+ opacities = randomRs 0.5 0.9 n (mkSeed 92)

927+

928+ classNames =

929+ randomRs 1 50 n (mkSeed 3)

930+ <#> case _ of

931+ 1 -> classes.twinklingStar1

932+ 2 -> classes.twinklingStar2

933+ 3 -> classes.twinklingStar2

934+ _ -> ""

935+

936+ zipped = xs <%> ys <%> radiuses <%> classNames <%> opacities

937+

938+ children = do

939+ cx /\ cy /\ r /\ className' /\ opacity <- zipped

940+ pure

941+ $ SVG.circle

942+ { cx: show cx

943+ , cy: show cy

944+ , r: show r

945+ , fill: "#eeefff"

946+ , className: className'

947+ , opacity: show (opacity - cy / 200.0)

948+ }

949+ in

950+ SVG.g

951+ { fillOpacity: ".67"

952+ , children

953+ , className

954+ }

src/Scroll/Hook.pursnew file+34

@@ -0,0 +1,34 @@

1+module Scroll.Hook where

3+import Prelude

5+import Data.Newtype (class Newtype)

6+import Effect (Effect)

7+import React.Basic.Hooks (Hook, UseLayoutEffect, UseState, coerceHook, useLayoutEffect, useState, (/\))

8+import React.Basic.Hooks as React

9+import Scroll.Listener as Scroll

10+import Unsafe.Coerce (unsafeCoerce)

11+import Web.Event.EventTarget (EventListener, eventListener)

12+import Web.HTML (window)

13+

14+newtype UseScrollYPosition hooks

15+ = UseScrollYPosition (UseLayoutEffect Unit (UseState Number hooks))

16+

17+derive instance ntUseScrollYPosition ∷ Newtype (UseScrollYPosition hooks) _

18+

19+useScrollYPosition ∷ Hook UseScrollYPosition Number

20+useScrollYPosition =

21+ coerceHook React.do

22+ scrollY /\ modifyScrollY <- useState 0.0

23+ let setScrollY = modifyScrollY <<< const

24+ useLayoutEffect unit do

25+ listener <- makeListener setScrollY

26+ Scroll.registerListener listener

27+ pure scrollY

28+

29+makeListener ∷ (Number -> Effect Unit) -> Effect EventListener

30+makeListener setPosition = do

31+ eventListener $ const do

32+ win <- window

33+ let yPos = (unsafeCoerce win).scrollY

34+ setPosition yPos

src/Scroll/Listener.pursnew file+20

@@ -0,0 +1,20 @@

1+module Scroll.Listener

2+ ( registerListener )

3+ where

5+import Prelude

7+import Effect (Effect)

8+import Web.Event.Event (EventType(..))

9+import Web.Event.EventTarget (EventListener, addEventListener, removeEventListener)

10+import Web.HTML (window)

11+import Web.HTML.Window (toEventTarget)

12+

13+eventType ∷ EventType

14+eventType = EventType "scroll"

15+

16+registerListener ∷ EventListener -> Effect (Effect Unit)

17+registerListener listener = do

18+ target <- window <#> toEventTarget

19+ addEventListener eventType listener false target

20+ pure $ removeEventListener eventType listener false target

src/Theme/Default.purs+7−4

@@ -5,17 +5,18 @@ import Theme.Types (Theme)

6darkTheme ∷ Theme

7darkTheme =

8− { backgroundColour: Color.hsl 215.0 0.28 0.20

8+ -- { backgroundColour: Color.hsl 215.0 0.28 0.20

9+ { backgroundColour: Color.hsl 255.0 0.24 0.13

9 , textColour: Color.hsl 225.0 0.28 0.90

10 , textColour: Color.hsl 225.0 0.28 0.90

10− , interfaceColour: Color.hsl 215.0 0.28 0.20

11+ , interfaceColour: Color.hsl 245.0 0.28 0.20

11 , highlightColour: Color.rgb 183 130 218

12 , highlightColour: Color.rgb 183 130 218

12 , altHighlightColour: Color.hsl 84.0 0.617 0.631

13 , altHighlightColour: Color.hsl 84.0 0.617 0.631

13 -- , textFontFamily: ["-apple-system", "BlinkMacSystemFont", "Helvetica", "Arial", "sans-serif"]

14 -- , textFontFamily: ["-apple-system", "BlinkMacSystemFont", "Helvetica", "Arial", "sans-serif"]

14 , textFontFamily: [ "Montserrat", "Monaco", "sans-serif" ]

15 , textFontFamily: [ "Montserrat", "Monaco", "sans-serif" ]

15 , headingFontFamily: [ "Montserrat", "Monaco", "sans-serif" ]

16 , headingFontFamily: [ "Montserrat", "Monaco", "sans-serif" ]

16 , yellow: Color.rgb 255 235 149

17 , yellow: Color.rgb 255 235 149

17− , green: Color.rgb 173 219 103

18+ , green: Color.hsl 84.0 0.617 0.631

18− , pink: Color.rgb 199 146 234

19+ , pink: Color.hsl 276.0 0.677 0.745

19 , orange: Color.rgb 255 203 139

20 , orange: Color.rgb 255 203 139

20 , turquoise: Color.rgb 127 219 202

21 , turquoise: Color.rgb 127 219 202

21 , red: Color.rgb 255 88 116

22 , red: Color.rgb 255 88 116

@@ -30,4 +31,6 @@ lightTheme =

30 , interfaceColour = Color.hsl 210.0 0.10 0.70

31 , interfaceColour = Color.hsl 210.0 0.10 0.70

31 , highlightColour = Color.hsl 260.0 0.85 0.58

32 , highlightColour = Color.hsl 260.0 0.85 0.58

32 , altHighlightColour = Color.hsl 84.0 0.617 0.631

33 , altHighlightColour = Color.hsl 84.0 0.617 0.631

34+ , green = Color.hsl 84.0 0.617 0.431

35+ , pink = Color.hsl 276.0 0.677 0.545

33 }

36 }

stories/Decorator/FullScreen.purs+3−2

@@ -24,12 +24,13 @@ import Web.HTML (window)

24import Web.HTML.Window (localStorage)

25import Web.Storage.Storage (getItem, setItem)

27−fullScreenDecorator ∷ JSX -> Effect JSX

27+fullScreenDecorator ∷ Effect JSX -> Effect JSX

28−fullScreenDecorator child = do

28+fullScreenDecorator mkChild = do

29 let

30 dark = fromTheme darkTheme

32 light = fromTheme lightTheme

33+ child <- mkChild

33 themeSwitcher <- mkThemeSwitcher

34 themeSwitcher <- mkThemeSwitcher

34 pure

35 pure

35 $ R.div

36 $ R.div

stories/Storybook/React.js+4−2

@@ -17,7 +17,9 @@ exports.addImpl = function(sb) {

17exports.addDecoratorImpl = function(sb) {

18 return function(addDeco) {

19 return function() {

20− return sb.addDecorator(addDeco);

20+ return sb.addDecorator(function(storyFn) {

21+ return addDeco(storyFn)();

22+ });

21 }

23 }

22 }

24 }

23−}

25+}

stories/Storybook/React.purs+4−6

@@ -1,5 +1,5 @@

1module Storybook.React

2− (storiesOf

2+ ( storiesOf

3 , Storybook

4 , add

5 , addDecorator

@@ -10,7 +10,6 @@ import Prelude hiding (add)

11import Control.Monad.Reader (ReaderT, ask, lift, local, runReaderT)

12import Effect (Effect)

13−import Effect.Unsafe (unsafePerformEffect)

14import React.Basic (JSX, ReactComponent, element, fragment)

13import React.Basic (JSX, ReactComponent, element, fragment)

16foreign import data Storybook ∷ Type

15foreign import data Storybook ∷ Type

@@ -27,7 +26,7 @@ foreign import addImpl ∷

28foreign import addDecoratorImpl ∷

27foreign import addDecoratorImpl ∷

29 Storybook ->

28 Storybook ->

30− (Effect JSX -> JSX) ->

29+ (Effect JSX -> Effect JSX) ->

31 Effect Storybook

30 Effect Storybook

33add ∷ ∀ props. String -> Effect (ReactComponent { | props }) -> Array { | props } -> ReaderT Storybook Effect Unit

32add ∷ ∀ props. String -> Effect (ReactComponent { | props }) -> Array { | props } -> ReaderT Storybook Effect Unit

@@ -40,13 +39,12 @@ add name mkComponent propsArray = do

40 newBook <- lift $ addImpl sb component name

39 newBook <- lift $ addImpl sb component name

41 local (const newBook) (pure unit)

40 local (const newBook) (pure unit)

43−addDecorator ∷ (JSX -> Effect JSX) -> ReaderT Storybook Effect Unit

42+addDecorator ∷ (Effect JSX -> Effect JSX) -> ReaderT Storybook Effect Unit

44addDecorator decorate = do

43addDecorator decorate = do

45 sb <- ask

44 sb <- ask

46 newBook <-

45 newBook <-

47 lift

46 lift

48− $ addDecoratorImpl sb \render ->

47+ $ addDecoratorImpl sb decorate

49− unsafePerformEffect $ render >>= decorate

50 local (const newBook) (pure unit)

48 local (const newBook) (pure unit)

52storiesOf ∷ ∀ a. String -> ReaderT Storybook Effect a -> Effect Storybook

50storiesOf ∷ ∀ a. String -> ReaderT Storybook Effect a -> Effect Storybook