git.iko.soy/rowtype-yoga/psfp
on master help sign in
Animate landing page
commitacfd04185a16858745a5f2ed972ffe279ea811e6 authorMark Eibes <mark.eibes@gmail.com> dateSun 6 Oct 2019, 20:33 (7 years ago) parent133b502
23 files changed+1207−97
compare with master
unifiedsplit
.storybook/preview-head.html+9−3 assets/images/landingpagelight.svg+1−1 package-lock.json+5 package.json+3−2 packages.dhall+27 server/static/fonts/PragmataProLiga-Regular.woff server/static/fonts/PragmataProLiga-Regular.woff2 spago.dhall+3 src/Button/Component.purs+45−43 src/Container/Component.purs+6−3 src/Container/Header.purs+5−14 src/Container/Landing.purs+4−7 src/Container/Sidebar.purs+1−1 src/DOM/Hook.purs+66 src/Polyfill/SmoothScrolling.js+8 src/Polyfill/SmoothScrolling.purs+6 src/SVG/Image.purs+946−9 src/Scroll/Hook.purs+34 src/Scroll/Listener.purs+20 src/Theme/Default.purs+7−4 stories/Decorator/FullScreen.purs+3−2 stories/Storybook/React.js+4−2 stories/Storybook/React.purs+4−6
.storybook/preview-head.html+9−3
@@ -1,8 +1,14 @@
11<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> html, body, #app
3− {
4−
2+<style>
3+ html, body, #app {
54 margin: 0;
65 padding: 0;
76 }
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+}
814</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 @@
1147911479 "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
1148011480 "dev": true
1148111481 },
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+ },
1148211487 "snapdragon": {
1148311488 "version": "0.8.2",
1148411489 "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
package.json+3−2
@@ -17,7 +17,7 @@
1717 "webpack:watch": "DEBUG=purs-loader* DEBUG_DEPTH=100 webpack --config webpack.dev.js --progress --display-error-details --display verbose --watch",
1818 "webpack:server": "webpack-dev-server --config webpack.dev.js --progress --inline --hot",
1919 "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"
2121 },
2222 "repository": {
2323 "type": "git",
@@ -33,7 +33,8 @@
3333 "@material-ui/styles": "^4.4.3",
3434 "purty": "^4.5.1",
3535 "react": "^16.9.0",
36− "react-dom": "^16.9.0"
36+ "react-dom": "^16.9.0",
37+ "smoothscroll-polyfill": "^0.4.4"
3738 },
3839 "devDependencies": {
3940 "@babel/core": "^7.6.0",
packages.dhall+27
@@ -157,6 +157,33 @@ let additions =
157157 , version =
158158 "b872928414a887ccefbe857038af4e57227dad16"
159159 }
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+ }
160187 }
161188
162189in 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.
99 , "css"
1010 , "debug"
1111 , "effect"
12+ , "matryoshka"
1213 , "psci-support"
14+ , "pseudo-random"
1315 , "react-basic"
1416 , "react-basic-hooks"
1517 , "react-testing-library"
1618 , "record-extra"
1719 , "spec-discovery"
20+ , "string-parsers"
1821 , "web-html"
1922 ]
2023, packages =
src/Button/Component.purs+45−43
@@ -1,7 +1,6 @@
11module Button.Component where
22
33import Prelude
4−
54import CSS (ColorSpace(..), mix, toHexString)
65import CSS.Safer (cssSafer)
76import Color (fromHexString)
@@ -30,7 +29,6 @@ mkButton ∷
3029 ∀ attrs attrs_.
3130 Union attrs attrs_ Props_button =>
3231 Lacks "children" attrs =>
33− Lacks "className" attrs =>
3432 Lacks "ref" attrs =>
3533 Lacks "key" attrs =>
3634 Effect
@@ -52,8 +50,7 @@ mkButton = do
5250 , btn:
5351 cssSafer
5452 { background:
55− if theme.isLight
56− then
53+ if theme.isLight then
5754 theme.interfaceColourLightest
5855 else
5956 linearGradient
@@ -62,13 +59,13 @@ mkButton = do
6259 ]
6360 , color: theme.textColour
6461 , boxShadow:
65− if theme.isLight
66− then "none"
62+ if theme.isLight then
63+ "none"
6764 else
6865 "1px 1px 10px rgba(0,0,0,0.66)"
6966 , border:
70− if theme.isLight
71− then "1px solid " <> theme.interfaceColourLighter
67+ if theme.isLight then
68+ "1px solid " <> theme.interfaceColourLighter
7269 else
7370 "none"
7471 , borderRadius: "20px"
@@ -82,54 +79,59 @@ mkButton = do
8279 , textTransform: "uppercase"
8380 , outline: "none"
8481 , "&:focus":
85− { background:
86− linearGradient
87− [ "-5deg"
88− , theme.interfaceColourDarker
89− , theme.highlightColourDark
90− , theme.highlightColour
91− ]
92− , color: theme.interfaceColourLighter
93− , backgroundSize: "400% 400%, 100% 100%"
94− , animation: "$gradientBG 3s ease infinite"
95− }
82+ { background:
83+ linearGradient
84+ [ "-5deg"
85+ , theme.interfaceColourDarker
86+ , theme.highlightColourDark
87+ , theme.highlightColour
88+ ]
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
96+ , backgroundSize: "400% 400%, 100% 100%"
97+ , animation: "$gradientBG 3s ease infinite"
98+ }
9699 , "&:active":
97− { background:
98− linearGradient
99− [ "180deg"
100− , theme.interfaceColourLighter
101− , theme.interfaceColourLightest
102− ]
103− , boxShadow: "inset 0 0 2px black"
104− }
100+ { background:
101+ linearGradient
102+ [ "180deg"
103+ , theme.interfaceColourLighter
104+ , theme.interfaceColourLightest
105+ ]
106+ , boxShadow: "inset 0 0 2px black"
107+ }
105108 , "&:disabled":
106− { boxShadow: "0 0 0 black"
107− , background: theme.backgroundColour
108− , border: "1px dotted " <> theme.interfaceColourLightest
109− , textDecoration: "line-through"
110− , textDecorationColor: theme.red
111− }
109+ { boxShadow: "0 0 0 black"
110+ , background: theme.backgroundColour
111+ , border: "1px dotted " <> theme.interfaceColourLightest
112+ , textDecoration: "line-through"
113+ , textDecorationColor: theme.red
114+ }
112115 }
113116 , highlightedButton:
114117 cssSafer
115118 { background:
116− if theme.isLight
117− then
119+ if theme.isLight then
118120 theme.highlightColour
119121 else
120122 linearGradient [ theme.highlightColour, theme.highlightColourDark ]
121123 , "&:active":
122− { background:
123− linearGradient [ theme.highlightColourDark, theme.highlightColour ]
124− }
125− , color: fromMaybe theme.textColour
126− do
124+ { background:
125+ linearGradient [ theme.highlightColourDark, theme.highlightColour ]
126+ }
127+ , color:
128+ fromMaybe theme.textColour do
127129 hlc <- theme.highlightColour # fromHexString
128130 hlcd <- theme.highlightColourDark # fromHexString
129− let bg = if theme.isLight then hlc else mix HSL hlc hlcd 0.5
130− tc <- theme.textColour # fromHexString
131+ let
132+ bg = if theme.isLight then hlc else mix HSL hlc hlcd 0.5
133+ tc <- theme.textColour # fromHexString
131134 pure $ increaseContrast bg tc # toHexString
132−
133135 }
134136 }
135137 component "Button" \{ children, buttonType, buttonProps } -> React.do
src/Container/Component.purs+6−3
@@ -1,11 +1,13 @@
11module Container.Component where
22
33import Prelude
4+
45import CSS.Safer (cssSafer)
56import Container.Header (mkHeader)
67import Container.Landing (mkLandingPage)
78import Container.Sidebar (mkSidebar, mkSidebarLink)
89import Effect (Effect)
10+import Polyfill.SmoothScrolling (smoothScrollPolyfill)
911import React.Basic (JSX)
1012import React.Basic.DOM as R
1113import React.Basic.Hooks ((/\), ReactComponent, component, element, useState)
@@ -30,9 +32,7 @@ mkContainer = do
3032
3133mkContainerContent ∷ Effect (ReactComponent { children ∷ Array JSX })
3234mkContainerContent = do
33− landingPage <- mkLandingPage
34− sidebar <- mkSidebar
35− header <- mkHeader
35+ smoothScrollPolyfill
3636 useStyles <-
3737 makeStyles \(theme ∷ CSSTheme) ->
3838 -- { "@global": cssSafer { "*": { outline: "1px solid red" } }
@@ -59,6 +59,9 @@ mkContainerContent = do
5959 }
6060 , icon: cssSafer { fill: "theme.textColour" }
6161 }
62+ landingPage <- mkLandingPage
63+ sidebar <- mkSidebar
64+ header <- mkHeader
6265 sidebarLink <- mkSidebarLink
6366 component "ContainerContent" \{ children } -> React.do
6467 classes <- useStyles
src/Container/Header.purs+5−14
@@ -14,16 +14,16 @@ import React.Basic.DOM as R
1414import React.Basic.Hooks (type (/\), Hook, ReactComponent, Ref, UseLayoutEffect, UseRef, UseState, coerceHook, component, element, readRefMaybe, useLayoutEffect, useRef, useState, (/\))
1515import React.Basic.Hooks as React
1616import SVG.Icon (trianglelogoIcon)
17+import Scroll.Listener as Scroll
1718import Theme.Styles (makeStyles)
1819import Theme.Types (CSSTheme)
1920import Typography.Header (HeadingLevel(..), mkH)
2021import 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)
2323import Web.HTML (HTMLElement, window)
2424import Web.HTML.HTMLElement (offsetTop)
2525import Web.HTML.HTMLElement as HTMLElement
26−import Web.HTML.Window (scrollY, toEventTarget)
26+import Web.HTML.Window (scrollY)
2727
2828mkHeader ∷ Effect (ReactComponent {})
2929mkHeader = do
@@ -70,7 +70,7 @@ mkHeader = do
7070newtype UseShouldBeSticky hooks
7171 = UseShouldBeSticky (UseLayoutEffect Unit (UseState Boolean (UseRef (Nullable Node) hooks)))
7272
73−derive instance ntUseScrollYPosition ∷ Newtype (UseShouldBeSticky hooks) _
73+derive instance ntUseShouldBeSticky ∷ Newtype (UseShouldBeSticky hooks) _
7474
7575useShouldBeSticky ∷ Hook UseShouldBeSticky (Boolean /\ Ref (Nullable Node))
7676useShouldBeSticky =
@@ -86,18 +86,9 @@ useShouldBeSticky =
8686 pure (pure unit)
8787 Just element -> do
8888 listener <- makeListener setSticky element
89− registerListener listener
89+ Scroll.registerListener listener
9090 pure (mustBeSticky /\ nodeRef)
9191
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−
10192makeListener ∷ (Boolean -> Effect Unit) -> HTMLElement -> Effect EventListener
10293makeListener setSticky element = do
10394 nodeStartPos <- offsetTop element
src/Container/Landing.purs+4−7
@@ -13,7 +13,8 @@ import React.Basic.Events (handler_)
1313import React.Basic.Hooks (ReactComponent, component, element, readRefMaybe, useRef)
1414import React.Basic.Hooks as React
1515import SVG.Icon (trianglelogoIcon)
16−import SVG.Image (landingPageDark, landingPageLight)
16+import SVG.Image (mkLandingPageBackground)
17+import Scroll.Hook (useScrollYPosition)
1718import Theme.Styles (makeStyles, useTheme)
1819import Theme.Types (CSSTheme)
1920import Typography.Header (mkH)
@@ -82,16 +83,12 @@ mkLandingPage = do
8283 }
8384 h <- mkH
8485 button <- mkButton
86+ backgroundImage <- mkLandingPageBackground
8587 component "LandingPage" \{ } -> React.do
8688 classes <- useStyles
8789 theme <- useTheme
8890 ref <- useRef null
89− let
90− backgroundImage =
91− if theme.isLight then
92− landingPageLight
93− else
94− landingPageDark
91+ scrollY <- useScrollYPosition
9592 pure
9693 $ R.div
9794 { ref
src/Container/Sidebar.purs+1−1
@@ -27,7 +27,7 @@ mkSidebar = do
2727 makeStyles \(theme ∷ CSSTheme) ->
2828 { sidebar:
2929 cssSafer
30− { background: theme.backgroundColour
30+ { background: theme.interfaceColour
3131 , fontFamily: theme.textFontFamily
3232 , color: theme.textColour
3333 , gridArea: "nav"
src/DOM/Hook.pursnew file+66
@@ -0,0 +1,66 @@
1+module DOM.Hook where
2+
3+import Prelude
4+
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'
2+
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
2+
3+import Prelude
4+import Effect (Effect)
5+
6+foreign import smoothScrollPolyfill ∷ Effect Unit
src/SVG/Image.purs+946−9
@@ -1,17 +1,954 @@
11module SVG.Image where
22
3−
4−import Prim.Row (class Union)
3+import Prelude
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
518import React.Basic.Hooks (ReactComponent)
6−import SVG.Icon (Raw, ImageProps)
7−import Unsafe.Coerce (unsafeCoerce)
19+import React.Basic.Hooks as React
20+import SVG.Icon (Raw)
21+import Scroll.Hook (useScrollYPosition)
22+import Theme.Styles (makeStyles, useTheme)
23+import Theme.Types (CSSTheme)
824
925foreign import landingPageDarkRaw ∷ ∀ r. Raw r
1026
11−landingPageLight ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
12−landingPageLight = unsafeCoerce landingPageLightRaw
13−
1427foreign import landingPageLightRaw ∷ ∀ r. Raw r
1528
16−landingPageDark ∷ ∀ attrs attrs_. Union attrs attrs_ ImageProps => ReactComponent { | attrs }
17−landingPageDark = unsafeCoerce landingPageDarkRaw
29+mkLandingPageBackground ∷ Effect (ReactComponent { className ∷ String })
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
2+
3+import Prelude
4+
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
4+
5+import Prelude
6+
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)
55
66darkTheme ∷ Theme
77darkTheme =
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
910 , 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
1112 , highlightColour: Color.rgb 183 130 218
1213 , altHighlightColour: Color.hsl 84.0 0.617 0.631
1314 -- , textFontFamily: ["-apple-system", "BlinkMacSystemFont", "Helvetica", "Arial", "sans-serif"]
1415 , textFontFamily: [ "Montserrat", "Monaco", "sans-serif" ]
1516 , headingFontFamily: [ "Montserrat", "Monaco", "sans-serif" ]
1617 , yellow: Color.rgb 255 235 149
17− , green: Color.rgb 173 219 103
18− , pink: Color.rgb 199 146 234
18+ , green: Color.hsl 84.0 0.617 0.631
19+ , pink: Color.hsl 276.0 0.677 0.745
1920 , orange: Color.rgb 255 203 139
2021 , turquoise: Color.rgb 127 219 202
2122 , red: Color.rgb 255 88 116
@@ -30,4 +31,6 @@ lightTheme =
3031 , interfaceColour = Color.hsl 210.0 0.10 0.70
3132 , highlightColour = Color.hsl 260.0 0.85 0.58
3233 , 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
3336 }
stories/Decorator/FullScreen.purs+3−2
@@ -24,12 +24,13 @@ import Web.HTML (window)
2424import Web.HTML.Window (localStorage)
2525import Web.Storage.Storage (getItem, setItem)
2626
27−fullScreenDecorator ∷ JSX -> Effect JSX
28−fullScreenDecorator child = do
27+fullScreenDecorator ∷ Effect JSX -> Effect JSX
28+fullScreenDecorator mkChild = do
2929 let
3030 dark = fromTheme darkTheme
3131
3232 light = fromTheme lightTheme
33+ child <- mkChild
3334 themeSwitcher <- mkThemeSwitcher
3435 pure
3536 $ R.div
stories/Storybook/React.js+4−2
@@ -17,7 +17,9 @@ exports.addImpl = function(sb) {
1717exports.addDecoratorImpl = function(sb) {
1818 return function(addDeco) {
1919 return function() {
20− return sb.addDecorator(addDeco);
20+ return sb.addDecorator(function(storyFn) {
21+ return addDeco(storyFn)();
22+ });
2123 }
2224 }
23−}
25+}
stories/Storybook/React.purs+4−6
@@ -1,5 +1,5 @@
11module Storybook.React
2− (storiesOf
2+ ( storiesOf
33 , Storybook
44 , add
55 , addDecorator
@@ -10,7 +10,6 @@ import Prelude hiding (add)
1010
1111import Control.Monad.Reader (ReaderT, ask, lift, local, runReaderT)
1212import Effect (Effect)
13−import Effect.Unsafe (unsafePerformEffect)
1413import React.Basic (JSX, ReactComponent, element, fragment)
1514
1615foreign import data Storybook ∷ Type
@@ -27,7 +26,7 @@ foreign import addImpl ∷
2726
2827foreign import addDecoratorImpl ∷
2928 Storybook ->
30− (Effect JSX -> JSX) ->
29+ (Effect JSX -> Effect JSX) ->
3130 Effect Storybook
3231
3332add ∷ ∀ props. String -> Effect (ReactComponent { | props }) -> Array { | props } -> ReaderT Storybook Effect Unit
@@ -40,13 +39,12 @@ add name mkComponent propsArray = do
4039 newBook <- lift $ addImpl sb component name
4140 local (const newBook) (pure unit)
4241
43−addDecorator ∷ (JSX -> Effect JSX) -> ReaderT Storybook Effect Unit
42+addDecorator ∷ (Effect JSX -> Effect JSX) -> ReaderT Storybook Effect Unit
4443addDecorator decorate = do
4544 sb <- ask
4645 newBook <-
4746 lift
48− $ addDecoratorImpl sb \render ->
49− unsafePerformEffect $ render >>= decorate
47+ $ addDecoratorImpl sb decorate
5048 local (const newBook) (pure unit)
5149
5250storiesOf ∷ ∀ a. String -> ReaderT Storybook Effect a -> Effect Storybook