diff --git a/blocks/starscape/editor.scss b/blocks/starscape/editor.scss new file mode 100644 index 00000000..b136d54d --- /dev/null +++ b/blocks/starscape/editor.scss @@ -0,0 +1,6 @@ +/* Editor styles */ +.wp-block-a8c-starscape-resolution-control { + .components-base-control__label { + width: 100%; + } +} diff --git a/blocks/starscape/index.php b/blocks/starscape/index.php new file mode 100644 index 00000000..ed7f610e --- /dev/null +++ b/blocks/starscape/index.php @@ -0,0 +1,9 @@ + 'wpcom-blocks', + 'style' => 'wpcom-blocks', + 'editor_style' => 'wpcom-blocks-editor', + ] ); +} ); diff --git a/blocks/starscape/src/colorGradientOptions.js b/blocks/starscape/src/colorGradientOptions.js new file mode 100644 index 00000000..986402d1 --- /dev/null +++ b/blocks/starscape/src/colorGradientOptions.js @@ -0,0 +1,63 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +export default { + gradients: [ + { + name: __( 'Midnight' ), + gradient: '#00000c', + }, + { + name: __( 'Astronomical Dawn' ), + gradient: 'linear-gradient(141deg, #020111 60%,#20202c 100%)', + }, + { + name: __( 'Nautical Dawn' ), + gradient: 'linear-gradient(141deg, #020111 10%,#3a3a52 100%)', + }, + { + name: __( 'Civil Dawn' ), + gradient: 'linear-gradient(141deg, #20202c 0%,#515175 100%)', + }, + { + name: __( 'Sunrise' ), + gradient: 'linear-gradient(141deg, #20202c 0%,#6f71aa 80%,#8a76ab 100%)', + }, + { + name: __( 'Morning' ), + gradient: 'linear-gradient(141deg, #40405c 0%,#7072ab 50%,#cd82a0 100%)', + }, + { + name: __( 'Atmosphere' ), + gradient: 'linear-gradient(180deg, #00000c 65%,#1b2741 85%,#2e4473 95%,#4463a3 100%)', + }, + { + name: __( 'Astronomical Dusk' ), + gradient: 'linear-gradient(141deg, #0b050b 60%,#27171c 100%)', + }, + { + name: __( 'Nautical Dusk' ), + gradient: 'linear-gradient(141deg, #0b050b 10%,#4c2d2f 100%)', + }, + { + name: __( 'Civil Dusk' ), + gradient: 'linear-gradient(141deg, #130f13 0%,#2f2122 50%,#6c353a 100%)', + }, + { + name: __( 'Sunset' ), + gradient: 'linear-gradient(141deg, #1e1818 0%,#2f2122 30%,#6c353a 70%,#cf804b 100%)', + }, + { + name: __( 'Evening' ), + gradient: 'linear-gradient(141deg, #2f2122 10%,#6c353a 40%,#cf804b 80%,#ffeb59 100%)', + }, + ], + colors: [ + { + name: __( 'White' ), + color: '#ffffff', + }, + ], +}; diff --git a/blocks/starscape/src/edit.js b/blocks/starscape/src/edit.js new file mode 100644 index 00000000..568e0fb5 --- /dev/null +++ b/blocks/starscape/src/edit.js @@ -0,0 +1,160 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { + AlignmentToolbar, + BlockControls, + InspectorControls, + RichText, + withColors, + __experimentalPanelColorGradientSettings as PanelColorGradientSettings, +} from '@wordpress/block-editor'; +import { + BaseControl, + PanelBody, + RangeControl, +} from '@wordpress/components'; +import { compose, withInstanceId } from '@wordpress/compose'; +import { useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { genStars, genAnimations } from './utils'; +import colorGradientOptions from './colorGradientOptions'; +import Starscape from './starscape'; + +const Edit = ( { + instanceId, + textColor, + setTextColor, + attributes, + setAttributes, + className, +} ) => { + const themeColors = useSelect( + ( select ) => select( 'core/block-editor' ).getSettings().colors + ); + return ( + <> + + setAttributes( { textAlign } ) } + /> + + + + setAttributes( { + density, + starStyles: genStars( { ...attributes, density } ), + } ) } + min={ 1 } + max={ 100 } + /> + setAttributes( { + speed, + animationStyles: genAnimations( { speed } ), + } ) } + min={ 1 } + max={ 100 } + /> + + setAttributes( { background } ), + }, + { + label: __( 'Text' ), + colorValue: textColor.color, + onColorChange: setTextColor, + }, + ] } + /> + +

{ __( 'Control the area of stars you want. Smaller values have better performance, but blocks larger than the area specified will not be completely covered.' ) }

+ + { + const maxWidth = parseInt( ev.target.value, 10 ); + setAttributes( { + maxWidth, + starStyles: genStars( { ...attributes, maxWidth } ), + } ); + } } + /> + + + { + const maxHeight = parseInt( ev.target.value, 10 ); + setAttributes( { + maxHeight, + starStyles: genStars( { ...attributes, maxHeight } ), + } ); + } } + /> + + + + + setAttributes( { heading } ) } + /> + + + ); +}; + +export default compose( [ + withInstanceId, + withColors( 'textColor' ), +] )( Edit ); diff --git a/blocks/starscape/src/generated.json b/blocks/starscape/src/generated.json new file mode 100644 index 00000000..5af9f057 --- /dev/null +++ b/blocks/starscape/src/generated.json @@ -0,0 +1,45 @@ +{ + "starStyles": [ + { + "boxShadow": "-938px 158px hsla(0, 100%, 100%, 0.8),742px 1161px hsla(0, 100%, 100%, 0.8),-760px 688px hsla(0, 100%, 100%, 0.8),-608px -130px hsla(0, 100%, 100%, 0.8),-529px 390px hsla(0, 100%, 100%, 0.8),-755px -23px hsla(0, 100%, 100%, 0.8),-957px 428px hsla(0, 100%, 100%, 0.8),-596px -1300px hsla(0, 100%, 100%, 0.8),732px -212px hsla(0, 100%, 100%, 0.8),-395px 991px hsla(0, 100%, 100%, 0.8),1199px -442px hsla(0, 100%, 100%, 0.8),1198px 695px hsla(0, 100%, 100%, 0.8),1348px 132px hsla(0, 100%, 100%, 0.8),406px 1104px hsla(0, 100%, 100%, 0.8),231px -1383px hsla(0, 100%, 100%, 0.8),998px -519px hsla(0, 100%, 100%, 0.8),-1px -299px hsla(0, 100%, 100%, 0.8),-882px -1023px hsla(0, 100%, 100%, 0.8),-157px -983px hsla(0, 100%, 100%, 0.8),745px 5px hsla(0, 100%, 100%, 0.8),-156px 1122px hsla(0, 100%, 100%, 0.8),-1274px 75px hsla(0, 100%, 100%, 0.8),1149px 51px hsla(0, 100%, 100%, 0.8),-121px 355px hsla(0, 100%, 100%, 0.8),104px 746px hsla(0, 100%, 100%, 0.8),-536px -1292px hsla(0, 100%, 100%, 0.8),-1175px -606px hsla(0, 100%, 100%, 0.8),-226px -846px hsla(0, 100%, 100%, 0.8),-569px 807px hsla(0, 100%, 100%, 0.8),-995px 1012px hsla(0, 100%, 100%, 0.8),652px 31px hsla(0, 100%, 100%, 0.8),810px 329px hsla(0, 100%, 100%, 0.8),-161px -17px hsla(0, 100%, 100%, 0.8),369px 743px hsla(0, 100%, 100%, 0.8),788px -994px hsla(0, 100%, 100%, 0.8),-968px -890px hsla(0, 100%, 100%, 0.8),313px -988px hsla(0, 100%, 100%, 0.8),-418px 455px hsla(0, 100%, 100%, 0.8),-1200px 161px hsla(0, 100%, 100%, 0.8),-81px 164px hsla(0, 100%, 100%, 0.8),-933px 856px hsla(0, 100%, 100%, 0.8),1386px 20px hsla(0, 100%, 100%, 0.8),396px 165px hsla(0, 100%, 100%, 0.8),499px -1296px hsla(0, 100%, 100%, 0.8),-209px -967px hsla(0, 100%, 100%, 0.8),679px -117px hsla(0, 100%, 100%, 0.8),-714px -52px hsla(0, 100%, 100%, 0.8),-952px 29px hsla(0, 100%, 100%, 0.8),-303px 1035px hsla(0, 100%, 100%, 0.8),901px -5px hsla(0, 100%, 100%, 0.8),143px 1317px hsla(0, 100%, 100%, 0.8),-607px 1113px hsla(0, 100%, 100%, 0.8),732px -630px hsla(0, 100%, 100%, 0.8),-886px 985px hsla(0, 100%, 100%, 0.8),-18px 657px hsla(0, 100%, 100%, 0.8),1065px -344px hsla(0, 100%, 100%, 0.8),-1018px 691px hsla(0, 100%, 100%, 0.8),941px -87px hsla(0, 100%, 100%, 0.8),-948px 311px hsla(0, 100%, 100%, 0.8),605px -394px hsla(0, 100%, 100%, 0.8),-1359px 308px hsla(0, 100%, 100%, 0.8),-694px 308px hsla(0, 100%, 100%, 0.8),103px -855px hsla(0, 100%, 100%, 0.8),572px -583px hsla(0, 100%, 100%, 0.8),-409px 420px hsla(0, 100%, 100%, 0.8),1070px 718px hsla(0, 100%, 100%, 0.8),1353px -472px hsla(0, 100%, 100%, 0.8),1247px -155px hsla(0, 100%, 100%, 0.8),677px 93px hsla(0, 100%, 100%, 0.8),-760px 380px hsla(0, 100%, 100%, 0.8),400px -934px hsla(0, 100%, 100%, 0.8),-1104px 843px hsla(0, 100%, 100%, 0.8),-621px -887px hsla(0, 100%, 100%, 0.8),-754px 969px hsla(0, 100%, 100%, 0.8),-338px 350px hsla(0, 100%, 100%, 0.8),86px 915px hsla(0, 100%, 100%, 0.8),105px -1127px hsla(0, 100%, 100%, 0.8),-890px 813px hsla(0, 100%, 100%, 0.8),-756px -379px hsla(0, 100%, 100%, 0.8),394px -183px hsla(0, 100%, 100%, 0.8),-382px -431px hsla(0, 100%, 100%, 0.8),287px 726px hsla(0, 100%, 100%, 0.8),799px -1123px hsla(0, 100%, 100%, 0.8),286px -734px hsla(0, 100%, 100%, 0.8),-1357px 284px hsla(0, 100%, 100%, 0.8),31px -40px hsla(0, 100%, 100%, 0.8),-475px -1206px hsla(0, 100%, 100%, 0.8),-288px -1348px hsla(0, 100%, 100%, 0.8),49px -672px hsla(0, 100%, 100%, 0.8),-29px -914px hsla(0, 100%, 100%, 0.8),-36px -996px hsla(0, 100%, 100%, 0.8),-469px -550px hsla(0, 100%, 100%, 0.8),-663px -25px hsla(0, 100%, 100%, 0.8),-896px 312px hsla(0, 100%, 100%, 0.8),1226px 549px hsla(0, 100%, 100%, 0.8),41px 678px hsla(0, 100%, 100%, 0.8),1024px 211px hsla(0, 100%, 100%, 0.8),-365px -152px hsla(0, 100%, 100%, 0.8),-725px -974px hsla(0, 100%, 100%, 0.8),1102px -419px hsla(0, 100%, 100%, 0.8),-1138px 478px hsla(0, 100%, 100%, 0.8),853px -722px hsla(0, 100%, 100%, 0.8),-1181px 25px hsla(0, 100%, 100%, 0.8),-182px -205px hsla(0, 100%, 100%, 0.8),1053px 819px hsla(0, 100%, 100%, 0.8),592px 834px hsla(0, 100%, 100%, 0.8),568px -852px hsla(0, 100%, 100%, 0.8),312px -547px hsla(0, 100%, 100%, 0.8),545px -572px hsla(0, 100%, 100%, 0.8),-197px -1401px hsla(0, 100%, 100%, 0.8),-1201px -314px hsla(0, 100%, 100%, 0.8),408px 1335px hsla(0, 100%, 100%, 0.8),699px 830px hsla(0, 100%, 100%, 0.8),-855px -94px hsla(0, 100%, 100%, 0.8),-967px 289px hsla(0, 100%, 100%, 0.8),-909px 1091px hsla(0, 100%, 100%, 0.8),-558px -1332px hsla(0, 100%, 100%, 0.8),-677px 261px hsla(0, 100%, 100%, 0.8),-506px 1119px hsla(0, 100%, 100%, 0.8),-854px 69px hsla(0, 100%, 100%, 0.8),-1037px 922px hsla(0, 100%, 100%, 0.8),-598px -1205px hsla(0, 100%, 100%, 0.8),1060px 903px hsla(0, 100%, 100%, 0.8),-1172px -296px hsla(0, 100%, 100%, 0.8),1015px -304px hsla(0, 100%, 100%, 0.8),70px 762px hsla(0, 100%, 100%, 0.8),330px 63px hsla(0, 100%, 100%, 0.8),350px -845px hsla(0, 100%, 100%, 0.8),133px 553px hsla(0, 100%, 100%, 0.8),1272px -147px hsla(0, 100%, 100%, 0.8),-149px 1413px hsla(0, 100%, 100%, 0.8),173px -345px hsla(0, 100%, 100%, 0.8),-704px 96px hsla(0, 100%, 100%, 0.8),790px -763px hsla(0, 100%, 100%, 0.8),-654px 715px hsla(0, 100%, 100%, 0.8),-736px 1003px hsla(0, 100%, 100%, 0.8),-884px 157px hsla(0, 100%, 100%, 0.8),-1081px -7px hsla(0, 100%, 100%, 0.8),-882px -951px hsla(0, 100%, 100%, 0.8),521px 1168px hsla(0, 100%, 100%, 0.8),-563px 551px hsla(0, 100%, 100%, 0.8),-777px -1030px hsla(0, 100%, 100%, 0.8),1217px 191px hsla(0, 100%, 100%, 0.8),-355px -52px hsla(0, 100%, 100%, 0.8),940px -747px hsla(0, 100%, 100%, 0.8),344px -959px hsla(0, 100%, 100%, 0.8),751px 146px hsla(0, 100%, 100%, 0.8),982px -274px hsla(0, 100%, 100%, 0.8),-1359px 28px hsla(0, 100%, 100%, 0.8),-1080px 751px hsla(0, 100%, 100%, 0.8),-379px -1319px hsla(0, 100%, 100%, 0.8),-462px 1173px hsla(0, 100%, 100%, 0.8),742px 1068px hsla(0, 100%, 100%, 0.8),-516px -1281px hsla(0, 100%, 100%, 0.8),1012px 838px hsla(0, 100%, 100%, 0.8),-197px -1156px hsla(0, 100%, 100%, 0.8),183px 48px hsla(0, 100%, 100%, 0.8),154px -341px hsla(0, 100%, 100%, 0.8),-356px -979px hsla(0, 100%, 100%, 0.8),-1263px -411px hsla(0, 100%, 100%, 0.8),302px -353px hsla(0, 100%, 100%, 0.8),193px 40px hsla(0, 100%, 100%, 0.8),-639px -661px hsla(0, 100%, 100%, 0.8),-118px -459px hsla(0, 100%, 100%, 0.8),-298px 606px hsla(0, 100%, 100%, 0.8),-1085px -647px hsla(0, 100%, 100%, 0.8),-1248px 80px hsla(0, 100%, 100%, 0.8),-855px 877px hsla(0, 100%, 100%, 0.8),784px -684px hsla(0, 100%, 100%, 0.8),-716px -11px hsla(0, 100%, 100%, 0.8),-407px -721px hsla(0, 100%, 100%, 0.8),-634px 101px hsla(0, 100%, 100%, 0.8),-1106px -760px hsla(0, 100%, 100%, 0.8),-1137px 876px hsla(0, 100%, 100%, 0.8),616px 373px hsla(0, 100%, 100%, 0.8),636px -521px hsla(0, 100%, 100%, 0.8),798px 27px hsla(0, 100%, 100%, 0.8),518px -1185px hsla(0, 100%, 100%, 0.8),-1097px -190px hsla(0, 100%, 100%, 0.8),234px -60px hsla(0, 100%, 100%, 0.8),-1157px 161px hsla(0, 100%, 100%, 0.8),-112px 576px hsla(0, 100%, 100%, 0.8),-688px -881px hsla(0, 100%, 100%, 0.8),-1067px -306px hsla(0, 100%, 100%, 0.8),-167px 701px hsla(0, 100%, 100%, 0.8),473px -742px hsla(0, 100%, 100%, 0.8),-770px -244px hsla(0, 100%, 100%, 0.8),-911px 34px hsla(0, 100%, 100%, 0.8),-778px 622px hsla(0, 100%, 100%, 0.8),-47px 1223px hsla(0, 100%, 100%, 0.8),-61px 733px hsla(0, 100%, 100%, 0.8),597px -513px hsla(0, 100%, 100%, 0.8),-9px 242px hsla(0, 100%, 100%, 0.8),-711px -1088px hsla(0, 100%, 100%, 0.8),422px -805px hsla(0, 100%, 100%, 0.8),837px -917px hsla(0, 100%, 100%, 0.8),-628px -582px hsla(0, 100%, 100%, 0.8),308px -490px hsla(0, 100%, 100%, 0.8),244px 528px hsla(0, 100%, 100%, 0.8),-513px -995px hsla(0, 100%, 100%, 0.8),676px -1249px hsla(0, 100%, 100%, 0.8),164px 1271px hsla(0, 100%, 100%, 0.8),-521px 3px hsla(0, 100%, 100%, 0.8),75px -949px hsla(0, 100%, 100%, 0.8),-538px 1244px hsla(0, 100%, 100%, 0.8),-336px -920px hsla(0, 100%, 100%, 0.8),-643px -793px hsla(0, 100%, 100%, 0.8),-488px 820px hsla(0, 100%, 100%, 0.8),-379px 369px hsla(0, 100%, 100%, 0.8),-809px 935px hsla(0, 100%, 100%, 0.8),-400px 530px hsla(0, 100%, 100%, 0.8),-753px 895px hsla(0, 100%, 100%, 0.8),-1104px 655px hsla(0, 100%, 100%, 0.8),810px -714px hsla(0, 100%, 100%, 0.8),-841px -5px hsla(0, 100%, 100%, 0.8),-616px -1154px hsla(0, 100%, 100%, 0.8),-425px 622px hsla(0, 100%, 100%, 0.8),335px 1165px hsla(0, 100%, 100%, 0.8),-624px 298px hsla(0, 100%, 100%, 0.8),986px -394px hsla(0, 100%, 100%, 0.8),-1209px -481px hsla(0, 100%, 100%, 0.8),756px 920px hsla(0, 100%, 100%, 0.8),1114px 509px hsla(0, 100%, 100%, 0.8),-547px 1184px hsla(0, 100%, 100%, 0.8),69px -1123px hsla(0, 100%, 100%, 0.8),-173px 344px hsla(0, 100%, 100%, 0.8),142px -797px hsla(0, 100%, 100%, 0.8),-257px 1263px hsla(0, 100%, 100%, 0.8),-860px 155px hsla(0, 100%, 100%, 0.8),1191px 405px hsla(0, 100%, 100%, 0.8),-511px 18px hsla(0, 100%, 100%, 0.8),503px 1090px hsla(0, 100%, 100%, 0.8),187px -1266px hsla(0, 100%, 100%, 0.8),976px -1021px hsla(0, 100%, 100%, 0.8),83px 47px hsla(0, 100%, 100%, 0.8),-865px 1098px hsla(0, 100%, 100%, 0.8),437px -63px hsla(0, 100%, 100%, 0.8),-1080px -279px hsla(0, 100%, 100%, 0.8),-683px -596px hsla(0, 100%, 100%, 0.8),-661px -109px hsla(0, 100%, 100%, 0.8),389px 884px hsla(0, 100%, 100%, 0.8),186px 1252px hsla(0, 100%, 100%, 0.8),130px 692px hsla(0, 100%, 100%, 0.8),300px 174px hsla(0, 100%, 100%, 0.8),944px 892px hsla(0, 100%, 100%, 0.8),569px 473px hsla(0, 100%, 100%, 0.8),472px 1304px hsla(0, 100%, 100%, 0.8),-286px 1393px hsla(0, 100%, 100%, 0.8),-313px -588px hsla(0, 100%, 100%, 0.8),738px -222px hsla(0, 100%, 100%, 0.8),447px 1111px hsla(0, 100%, 100%, 0.8),-1046px 294px hsla(0, 100%, 100%, 0.8),-167px -695px hsla(0, 100%, 100%, 0.8),1079px 366px hsla(0, 100%, 100%, 0.8),-1107px 598px hsla(0, 100%, 100%, 0.8),588px 1093px hsla(0, 100%, 100%, 0.8),-514px -1101px hsla(0, 100%, 100%, 0.8),-1269px 58px hsla(0, 100%, 100%, 0.8),333px -525px hsla(0, 100%, 100%, 0.8),1352px 488px hsla(0, 100%, 100%, 0.8),-1296px 254px hsla(0, 100%, 100%, 0.8),882px 842px hsla(0, 100%, 100%, 0.8),-459px 983px hsla(0, 100%, 100%, 0.8),-694px -650px hsla(0, 100%, 100%, 0.8),201px -56px hsla(0, 100%, 100%, 0.8),-495px 308px hsla(0, 100%, 100%, 0.8),17px 1388px hsla(0, 100%, 100%, 0.8),-670px 332px hsla(0, 100%, 100%, 0.8),-501px -388px hsla(0, 100%, 100%, 0.8),673px -852px hsla(0, 100%, 100%, 0.8),428px 1204px hsla(0, 100%, 100%, 0.8),-970px 515px hsla(0, 100%, 100%, 0.8),-321px -55px hsla(0, 100%, 100%, 0.8),511px 950px hsla(0, 100%, 100%, 0.8),-225px 527px hsla(0, 100%, 100%, 0.8),897px -1040px hsla(0, 100%, 100%, 0.8),645px 732px hsla(0, 100%, 100%, 0.8),-513px -159px hsla(0, 100%, 100%, 0.8),-709px 1057px hsla(0, 100%, 100%, 0.8),1046px -25px hsla(0, 100%, 100%, 0.8),-1186px -668px hsla(0, 100%, 100%, 0.8),1167px -376px hsla(0, 100%, 100%, 0.8),1415px -150px hsla(0, 100%, 100%, 0.8),-84px 834px hsla(0, 100%, 100%, 0.8),-322px 790px hsla(0, 100%, 100%, 0.8),-872px 697px hsla(0, 100%, 100%, 0.8),-508px -1222px hsla(0, 100%, 100%, 0.8),-817px -420px hsla(0, 100%, 100%, 0.8),356px 814px hsla(0, 100%, 100%, 0.8),-211px -492px hsla(0, 100%, 100%, 0.8),1297px -6px hsla(0, 100%, 100%, 0.8),-150px -1337px hsla(0, 100%, 100%, 0.8),9px 70px hsla(0, 100%, 100%, 0.8),640px -278px hsla(0, 100%, 100%, 0.8),-189px 210px hsla(0, 100%, 100%, 0.8),-1009px -593px hsla(0, 100%, 100%, 0.8),717px 162px hsla(0, 100%, 100%, 0.8),-95px 334px hsla(0, 100%, 100%, 0.8),450px 606px hsla(0, 100%, 100%, 0.8),-581px -963px hsla(0, 100%, 100%, 0.8),150px -903px hsla(0, 100%, 100%, 0.8),-864px -890px hsla(0, 100%, 100%, 0.8),-722px 833px hsla(0, 100%, 100%, 0.8),324px -822px hsla(0, 100%, 100%, 0.8),-1130px 263px hsla(0, 100%, 100%, 0.8),63px -1173px hsla(0, 100%, 100%, 0.8),923px 210px hsla(0, 100%, 100%, 0.8),638px 1054px hsla(0, 100%, 100%, 0.8),-559px 83px hsla(0, 100%, 100%, 0.8),142px -1033px hsla(0, 100%, 100%, 0.8),-513px -689px hsla(0, 100%, 100%, 0.8),324px 389px hsla(0, 100%, 100%, 0.8),-1285px 50px hsla(0, 100%, 100%, 0.8),-852px 29px hsla(0, 100%, 100%, 0.8),-638px 299px hsla(0, 100%, 100%, 0.8),-1026px 355px hsla(0, 100%, 100%, 0.8),-145px 209px hsla(0, 100%, 100%, 0.8),117px 80px hsla(0, 100%, 100%, 0.8),-173px -1307px hsla(0, 100%, 100%, 0.8),853px 27px hsla(0, 100%, 100%, 0.8),-864px 1032px hsla(0, 100%, 100%, 0.8),-1110px -409px hsla(0, 100%, 100%, 0.8),67px -1171px hsla(0, 100%, 100%, 0.8),737px -97px hsla(0, 100%, 100%, 0.8),-744px -87px hsla(0, 100%, 100%, 0.8),-497px 592px hsla(0, 100%, 100%, 0.8),-5px -1394px hsla(0, 100%, 100%, 0.8),999px -113px hsla(0, 100%, 100%, 0.8),-413px -1305px hsla(0, 100%, 100%, 0.8),-744px 637px hsla(0, 100%, 100%, 0.8),406px 1213px hsla(0, 100%, 100%, 0.8),-362px 221px hsla(0, 100%, 100%, 0.8),42px 52px hsla(0, 100%, 100%, 0.8),-224px -963px hsla(0, 100%, 100%, 0.8),210px -836px hsla(0, 100%, 100%, 0.8),566px 198px hsla(0, 100%, 100%, 0.8),-903px 248px hsla(0, 100%, 100%, 0.8),53px -1386px hsla(0, 100%, 100%, 0.8),731px -501px hsla(0, 100%, 100%, 0.8),613px -377px hsla(0, 100%, 100%, 0.8),119px 513px hsla(0, 100%, 100%, 0.8),1186px -14px hsla(0, 100%, 100%, 0.8),-31px -1212px hsla(0, 100%, 100%, 0.8),13px -1219px hsla(0, 100%, 100%, 0.8),-164px -627px hsla(0, 100%, 100%, 0.8),-927px 295px hsla(0, 100%, 100%, 0.8),-428px 157px hsla(0, 100%, 100%, 0.8),921px 842px hsla(0, 100%, 100%, 0.8),-593px -906px hsla(0, 100%, 100%, 0.8),583px 86px hsla(0, 100%, 100%, 0.8),55px -1077px hsla(0, 100%, 100%, 0.8),-705px 111px hsla(0, 100%, 100%, 0.8),1220px -543px hsla(0, 100%, 100%, 0.8),1109px -404px hsla(0, 100%, 100%, 0.8),-158px 940px hsla(0, 100%, 100%, 0.8),980px 120px hsla(0, 100%, 100%, 0.8),367px -1247px hsla(0, 100%, 100%, 0.8),625px 1253px hsla(0, 100%, 100%, 0.8),-459px -1210px hsla(0, 100%, 100%, 0.8),1027px 688px hsla(0, 100%, 100%, 0.8),249px -1179px hsla(0, 100%, 100%, 0.8),905px -385px hsla(0, 100%, 100%, 0.8),613px -209px hsla(0, 100%, 100%, 0.8),399px -677px hsla(0, 100%, 100%, 0.8),-315px -367px hsla(0, 100%, 100%, 0.8),-1353px -439px hsla(0, 100%, 100%, 0.8),-1239px -158px hsla(0, 100%, 100%, 0.8),-1068px -689px hsla(0, 100%, 100%, 0.8),-1258px 703px hsla(0, 100%, 100%, 0.8),454px 215px hsla(0, 100%, 100%, 0.8),-420px -292px hsla(0, 100%, 100%, 0.8),901px 839px hsla(0, 100%, 100%, 0.8),559px -1322px hsla(0, 100%, 100%, 0.8),949px -56px hsla(0, 100%, 100%, 0.8),-735px 698px hsla(0, 100%, 100%, 0.8),1196px 355px hsla(0, 100%, 100%, 0.8),-25px -133px hsla(0, 100%, 100%, 0.8),-436px 1143px hsla(0, 100%, 100%, 0.8),-1387px 172px hsla(0, 100%, 100%, 0.8),116px 1395px hsla(0, 100%, 100%, 0.8),472px -1030px hsla(0, 100%, 100%, 0.8),-1020px 382px hsla(0, 100%, 100%, 0.8),-981px -866px hsla(0, 100%, 100%, 0.8),-472px 1247px hsla(0, 100%, 100%, 0.8),-1px -110px hsla(0, 100%, 100%, 0.8),944px 277px hsla(0, 100%, 100%, 0.8),54px -791px hsla(0, 100%, 100%, 0.8),75px 226px hsla(0, 100%, 100%, 0.8),303px 637px hsla(0, 100%, 100%, 0.8),895px 1118px hsla(0, 100%, 100%, 0.8),-930px -849px hsla(0, 100%, 100%, 0.8),645px -527px hsla(0, 100%, 100%, 0.8),168px 312px hsla(0, 100%, 100%, 0.8),-1028px -43px hsla(0, 100%, 100%, 0.8),-1384px 15px hsla(0, 100%, 100%, 0.8),793px -864px hsla(0, 100%, 100%, 0.8),107px 1438px hsla(0, 100%, 100%, 0.8),-308px 1133px hsla(0, 100%, 100%, 0.8),356px -105px hsla(0, 100%, 100%, 0.8),-766px -101px hsla(0, 100%, 100%, 0.8),1176px 574px hsla(0, 100%, 100%, 0.8),634px 514px hsla(0, 100%, 100%, 0.8),57px -424px hsla(0, 100%, 100%, 0.8),-165px -799px hsla(0, 100%, 100%, 0.8),-204px 635px hsla(0, 100%, 100%, 0.8),-1240px -692px hsla(0, 100%, 100%, 0.8),434px 277px hsla(0, 100%, 100%, 0.8),-1136px -522px hsla(0, 100%, 100%, 0.8),-1150px -345px hsla(0, 100%, 100%, 0.8),-390px 258px hsla(0, 100%, 100%, 0.8),807px -1152px hsla(0, 100%, 100%, 0.8),-152px -187px hsla(0, 100%, 100%, 0.8),654px -446px hsla(0, 100%, 100%, 0.8),-307px -327px hsla(0, 100%, 100%, 0.8),925px 213px hsla(0, 100%, 100%, 0.8),-700px -957px hsla(0, 100%, 100%, 0.8),681px -1177px hsla(0, 100%, 100%, 0.8),-471px 1327px hsla(0, 100%, 100%, 0.8),974px 278px hsla(0, 100%, 100%, 0.8),-451px -815px hsla(0, 100%, 100%, 0.8),-290px -204px hsla(0, 100%, 100%, 0.8),511px -615px hsla(0, 100%, 100%, 0.8),1107px 380px hsla(0, 100%, 100%, 0.8),786px 659px hsla(0, 100%, 100%, 0.8),-163px 1146px hsla(0, 100%, 100%, 0.8),1134px -337px hsla(0, 100%, 100%, 0.8),-996px -11px hsla(0, 100%, 100%, 0.8),-42px -1381px hsla(0, 100%, 100%, 0.8),-190px -685px hsla(0, 100%, 100%, 0.8),602px -1251px hsla(0, 100%, 100%, 0.8),741px -459px hsla(0, 100%, 100%, 0.8),910px 208px hsla(0, 100%, 100%, 0.8),878px -967px hsla(0, 100%, 100%, 0.8),-207px 192px hsla(0, 100%, 100%, 0.8),-1158px -847px hsla(0, 100%, 100%, 0.8),261px -911px hsla(0, 100%, 100%, 0.8),-219px -530px hsla(0, 100%, 100%, 0.8),-390px -1195px hsla(0, 100%, 100%, 0.8),-14px 599px hsla(0, 100%, 100%, 0.8),581px 1171px hsla(0, 100%, 100%, 0.8),1060px -189px hsla(0, 100%, 100%, 0.8),-874px -126px hsla(0, 100%, 100%, 0.8),641px 264px hsla(0, 100%, 100%, 0.8),-1246px -193px hsla(0, 100%, 100%, 0.8),-830px 297px hsla(0, 100%, 100%, 0.8),-715px 638px hsla(0, 100%, 100%, 0.8),-792px 922px hsla(0, 100%, 100%, 0.8),-1352px -27px hsla(0, 100%, 100%, 0.8),642px -795px hsla(0, 100%, 100%, 0.8),-90px 13px hsla(0, 100%, 100%, 0.8),-889px -1063px hsla(0, 100%, 100%, 0.8),452px -120px hsla(0, 100%, 100%, 0.8),629px -857px hsla(0, 100%, 100%, 0.8),-106px 744px hsla(0, 100%, 100%, 0.8),144px 924px hsla(0, 100%, 100%, 0.8),-1009px -262px hsla(0, 100%, 100%, 0.8),647px -863px hsla(0, 100%, 100%, 0.8),760px 1225px hsla(0, 100%, 100%, 0.8),549px -582px hsla(0, 100%, 100%, 0.8),737px 364px hsla(0, 100%, 100%, 0.8),-883px 1097px hsla(0, 100%, 100%, 0.8),79px -566px hsla(0, 100%, 100%, 0.8),-1080px 898px hsla(0, 100%, 100%, 0.8),20px -344px hsla(0, 100%, 100%, 0.8),-191px 1306px hsla(0, 100%, 100%, 0.8),236px -1159px hsla(0, 100%, 100%, 0.8),1020px -769px hsla(0, 100%, 100%, 0.8),334px -979px hsla(0, 100%, 100%, 0.8),-831px -1155px hsla(0, 100%, 100%, 0.8),911px -38px hsla(0, 100%, 100%, 0.8),-544px -1091px hsla(0, 100%, 100%, 0.8),1211px -150px hsla(0, 100%, 100%, 0.8),278px 188px hsla(0, 100%, 100%, 0.8),-784px 991px hsla(0, 100%, 100%, 0.8),219px -1318px hsla(0, 100%, 100%, 0.8),1236px -102px hsla(0, 100%, 100%, 0.8),-305px -694px hsla(0, 100%, 100%, 0.8),-1196px 732px hsla(0, 100%, 100%, 0.8),514px -846px hsla(0, 100%, 100%, 0.8),292px -374px hsla(0, 100%, 100%, 0.8),-1247px 693px hsla(0, 100%, 100%, 0.8),920px 282px hsla(0, 100%, 100%, 0.8),1093px 699px hsla(0, 100%, 100%, 0.8),636px 234px hsla(0, 100%, 100%, 0.8),-1099px -356px hsla(0, 100%, 100%, 0.8),278px 577px hsla(0, 100%, 100%, 0.8),20px 1440px hsla(0, 100%, 100%, 0.8),-979px -519px hsla(0, 100%, 100%, 0.8),459px -12px hsla(0, 100%, 100%, 0.8),-321px 1268px hsla(0, 100%, 100%, 0.8),1226px 56px hsla(0, 100%, 100%, 0.8),991px -729px hsla(0, 100%, 100%, 0.8),738px -1123px hsla(0, 100%, 100%, 0.8),-283px 348px hsla(0, 100%, 100%, 0.8),556px 18px hsla(0, 100%, 100%, 0.8),-121px -479px hsla(0, 100%, 100%, 0.8),-563px -692px hsla(0, 100%, 100%, 0.8),-711px -918px hsla(0, 100%, 100%, 0.8),180px -670px hsla(0, 100%, 100%, 0.8),-242px 488px hsla(0, 100%, 100%, 0.8),970px 36px hsla(0, 100%, 100%, 0.8),561px -1157px hsla(0, 100%, 100%, 0.8),-682px -578px hsla(0, 100%, 100%, 0.8),-392px -651px hsla(0, 100%, 100%, 0.8),499px -176px hsla(0, 100%, 100%, 0.8),-261px -982px hsla(0, 100%, 100%, 0.8),-378px 1222px hsla(0, 100%, 100%, 0.8),-677px -986px hsla(0, 100%, 100%, 0.8),-601px -1172px hsla(0, 100%, 100%, 0.8),-71px -470px hsla(0, 100%, 100%, 0.8),-830px -1071px hsla(0, 100%, 100%, 0.8),357px -1052px hsla(0, 100%, 100%, 0.8),-310px -603px hsla(0, 100%, 100%, 0.8),-956px -366px hsla(0, 100%, 100%, 0.8),-536px 1239px hsla(0, 100%, 100%, 0.8),72px 1328px hsla(0, 100%, 100%, 0.8),-32px -1230px hsla(0, 100%, 100%, 0.8),428px -949px hsla(0, 100%, 100%, 0.8),142px 242px hsla(0, 100%, 100%, 0.8),1305px 58px hsla(0, 100%, 100%, 0.8),420px -755px hsla(0, 100%, 100%, 0.8),-407px 386px hsla(0, 100%, 100%, 0.8),407px -230px hsla(0, 100%, 100%, 0.8),1179px -216px hsla(0, 100%, 100%, 0.8),-301px -1237px hsla(0, 100%, 100%, 0.8),-933px 873px hsla(0, 100%, 100%, 0.8),1406px 14px hsla(0, 100%, 100%, 0.8),-498px -894px hsla(0, 100%, 100%, 0.8),995px 298px hsla(0, 100%, 100%, 0.8),975px -621px hsla(0, 100%, 100%, 0.8),-734px 6px hsla(0, 100%, 100%, 0.8),547px -129px hsla(0, 100%, 100%, 0.8),520px 740px hsla(0, 100%, 100%, 0.8),-784px -182px hsla(0, 100%, 100%, 0.8),-1115px -265px hsla(0, 100%, 100%, 0.8),252px 626px hsla(0, 100%, 100%, 0.8),202px -1143px hsla(0, 100%, 100%, 0.8),-1152px 499px hsla(0, 100%, 100%, 0.8),1170px 775px hsla(0, 100%, 100%, 0.8),-209px -1256px hsla(0, 100%, 100%, 0.8),-913px -110px hsla(0, 100%, 100%, 0.8),-381px -346px hsla(0, 100%, 100%, 0.8),1027px -794px hsla(0, 100%, 100%, 0.8),-566px 252px hsla(0, 100%, 100%, 0.8),-875px -271px hsla(0, 100%, 100%, 0.8),736px -386px hsla(0, 100%, 100%, 0.8),346px -1201px hsla(0, 100%, 100%, 0.8),70px 596px hsla(0, 100%, 100%, 0.8),-1062px 723px hsla(0, 100%, 100%, 0.8),-202px -882px hsla(0, 100%, 100%, 0.8),-350px -1217px hsla(0, 100%, 100%, 0.8),-882px -292px hsla(0, 100%, 100%, 0.8),147px -754px hsla(0, 100%, 100%, 0.8),58px 764px hsla(0, 100%, 100%, 0.8),-1236px -535px hsla(0, 100%, 100%, 0.8),301px 1163px hsla(0, 100%, 100%, 0.8),-1309px 356px hsla(0, 100%, 100%, 0.8),-889px 351px hsla(0, 100%, 100%, 0.8),655px 622px hsla(0, 100%, 100%, 0.8),-1204px -345px hsla(0, 100%, 100%, 0.8),761px 515px hsla(0, 100%, 100%, 0.8),361px -628px hsla(0, 100%, 100%, 0.8),-517px 758px hsla(0, 100%, 100%, 0.8),213px 927px hsla(0, 100%, 100%, 0.8),796px 41px hsla(0, 100%, 100%, 0.8),-363px -563px hsla(0, 100%, 100%, 0.8),-636px -210px hsla(0, 100%, 100%, 0.8),754px 449px hsla(0, 100%, 100%, 0.8),-267px 150px hsla(0, 100%, 100%, 0.8),-296px 364px hsla(0, 100%, 100%, 0.8),-89px -584px hsla(0, 100%, 100%, 0.8),-163px -1276px hsla(0, 100%, 100%, 0.8),-75px -1359px hsla(0, 100%, 100%, 0.8),1013px 769px hsla(0, 100%, 100%, 0.8),1272px -71px hsla(0, 100%, 100%, 0.8),-1113px 464px hsla(0, 100%, 100%, 0.8),-470px -1099px hsla(0, 100%, 100%, 0.8),548px 946px hsla(0, 100%, 100%, 0.8),339px -549px hsla(0, 100%, 100%, 0.8),118px -1113px hsla(0, 100%, 100%, 0.8),-619px 150px hsla(0, 100%, 100%, 0.8),-1117px 589px hsla(0, 100%, 100%, 0.8),182px -1421px hsla(0, 100%, 100%, 0.8),-212px -528px hsla(0, 100%, 100%, 0.8),-239px -1332px hsla(0, 100%, 100%, 0.8),-695px 720px hsla(0, 100%, 100%, 0.8),-994px 118px hsla(0, 100%, 100%, 0.8),877px -498px hsla(0, 100%, 100%, 0.8),740px -1084px hsla(0, 100%, 100%, 0.8),-309px 722px hsla(0, 100%, 100%, 0.8)", + "width": "1px", + "height": "1px", + "background": "transparent", + "position": "absolute", + "top": "100%", + "left": "50%", + "transform": "translateZ(0)" + }, + { + "boxShadow": "1129px 556px hsla(0, 100%, 100%, 0.8),-614px -169px hsla(0, 100%, 100%, 0.8),-490px 478px hsla(0, 100%, 100%, 0.8),-413px -470px hsla(0, 100%, 100%, 0.8),837px 36px hsla(0, 100%, 100%, 0.8),-259px -774px hsla(0, 100%, 100%, 0.8),-102px -854px hsla(0, 100%, 100%, 0.8),277px -1183px hsla(0, 100%, 100%, 0.8),868px 396px hsla(0, 100%, 100%, 0.8),-1186px 359px hsla(0, 100%, 100%, 0.8),450px -554px hsla(0, 100%, 100%, 0.8),-1081px 339px hsla(0, 100%, 100%, 0.8),-524px -398px hsla(0, 100%, 100%, 0.8),191px 234px hsla(0, 100%, 100%, 0.8),138px -63px hsla(0, 100%, 100%, 0.8),1014px -108px hsla(0, 100%, 100%, 0.8),-17px -1339px hsla(0, 100%, 100%, 0.8),1327px 93px hsla(0, 100%, 100%, 0.8),601px 1257px hsla(0, 100%, 100%, 0.8),-628px 1148px hsla(0, 100%, 100%, 0.8),295px 1096px hsla(0, 100%, 100%, 0.8),567px -1265px hsla(0, 100%, 100%, 0.8),807px -899px hsla(0, 100%, 100%, 0.8),-829px 716px hsla(0, 100%, 100%, 0.8),-966px 867px hsla(0, 100%, 100%, 0.8),286px -1283px hsla(0, 100%, 100%, 0.8),1320px 287px hsla(0, 100%, 100%, 0.8),-878px -1110px hsla(0, 100%, 100%, 0.8),-1213px -198px hsla(0, 100%, 100%, 0.8),-1067px -563px hsla(0, 100%, 100%, 0.8),118px -128px hsla(0, 100%, 100%, 0.8),-309px -284px hsla(0, 100%, 100%, 0.8),-1086px -103px hsla(0, 100%, 100%, 0.8),-906px 571px hsla(0, 100%, 100%, 0.8),1287px -505px hsla(0, 100%, 100%, 0.8),314px -770px hsla(0, 100%, 100%, 0.8),344px -1375px hsla(0, 100%, 100%, 0.8),-18px 1395px hsla(0, 100%, 100%, 0.8),1175px -431px hsla(0, 100%, 100%, 0.8),778px -1039px hsla(0, 100%, 100%, 0.8),234px 1014px hsla(0, 100%, 100%, 0.8),820px 239px hsla(0, 100%, 100%, 0.8),674px -1px hsla(0, 100%, 100%, 0.8),-289px 344px hsla(0, 100%, 100%, 0.8),-871px 167px hsla(0, 100%, 100%, 0.8),209px 1398px hsla(0, 100%, 100%, 0.8),7px 1198px hsla(0, 100%, 100%, 0.8),-663px 621px hsla(0, 100%, 100%, 0.8),-225px 1183px hsla(0, 100%, 100%, 0.8),-167px -1379px hsla(0, 100%, 100%, 0.8),155px 98px hsla(0, 100%, 100%, 0.8),561px 304px hsla(0, 100%, 100%, 0.8),-23px -1370px hsla(0, 100%, 100%, 0.8),-448px 39px hsla(0, 100%, 100%, 0.8),-379px -439px hsla(0, 100%, 100%, 0.8),-283px 499px hsla(0, 100%, 100%, 0.8),-976px -324px hsla(0, 100%, 100%, 0.8),1011px 275px hsla(0, 100%, 100%, 0.8),-365px 354px hsla(0, 100%, 100%, 0.8),710px 115px hsla(0, 100%, 100%, 0.8),-1055px -243px hsla(0, 100%, 100%, 0.8),-137px 671px hsla(0, 100%, 100%, 0.8),-782px 843px hsla(0, 100%, 100%, 0.8),646px 1049px hsla(0, 100%, 100%, 0.8),-6px 635px hsla(0, 100%, 100%, 0.8),859px 130px hsla(0, 100%, 100%, 0.8),-706px -949px hsla(0, 100%, 100%, 0.8),344px -714px hsla(0, 100%, 100%, 0.8),278px -1246px hsla(0, 100%, 100%, 0.8),329px 676px hsla(0, 100%, 100%, 0.8),80px -375px hsla(0, 100%, 100%, 0.8),-85px 261px hsla(0, 100%, 100%, 0.8),266px -667px hsla(0, 100%, 100%, 0.8),-221px -286px hsla(0, 100%, 100%, 0.8),-62px 1108px hsla(0, 100%, 100%, 0.8),951px -871px hsla(0, 100%, 100%, 0.8),-285px -1141px hsla(0, 100%, 100%, 0.8),-658px -1267px hsla(0, 100%, 100%, 0.8),-799px -704px hsla(0, 100%, 100%, 0.8),-338px -365px hsla(0, 100%, 100%, 0.8),577px -410px hsla(0, 100%, 100%, 0.8),455px 669px hsla(0, 100%, 100%, 0.8),-969px 988px hsla(0, 100%, 100%, 0.8),233px -115px hsla(0, 100%, 100%, 0.8),125px -526px hsla(0, 100%, 100%, 0.8),-823px 273px hsla(0, 100%, 100%, 0.8),691px 964px hsla(0, 100%, 100%, 0.8),-25px -462px hsla(0, 100%, 100%, 0.8),-712px -433px hsla(0, 100%, 100%, 0.8),141px 1105px hsla(0, 100%, 100%, 0.8),393px 813px hsla(0, 100%, 100%, 0.8),-25px -782px hsla(0, 100%, 100%, 0.8),-1152px 626px hsla(0, 100%, 100%, 0.8),-724px -558px hsla(0, 100%, 100%, 0.8),84px 1250px hsla(0, 100%, 100%, 0.8),962px -1049px hsla(0, 100%, 100%, 0.8),1334px -223px hsla(0, 100%, 100%, 0.8),-1184px -443px hsla(0, 100%, 100%, 0.8),477px -227px hsla(0, 100%, 100%, 0.8),-816px 231px hsla(0, 100%, 100%, 0.8),173px -361px hsla(0, 100%, 100%, 0.8),739px 1165px hsla(0, 100%, 100%, 0.8),281px 109px hsla(0, 100%, 100%, 0.8),-358px 325px hsla(0, 100%, 100%, 0.8),-979px 200px hsla(0, 100%, 100%, 0.8),-1325px -506px hsla(0, 100%, 100%, 0.8),-182px 674px hsla(0, 100%, 100%, 0.8),-1323px -463px hsla(0, 100%, 100%, 0.8),-816px 460px hsla(0, 100%, 100%, 0.8),-1320px 262px hsla(0, 100%, 100%, 0.8),1204px -566px hsla(0, 100%, 100%, 0.8),246px 207px hsla(0, 100%, 100%, 0.8),1004px 123px hsla(0, 100%, 100%, 0.8),157px 1277px hsla(0, 100%, 100%, 0.8),375px -931px hsla(0, 100%, 100%, 0.8),-827px -982px hsla(0, 100%, 100%, 0.8),310px -1347px hsla(0, 100%, 100%, 0.8),-414px -108px hsla(0, 100%, 100%, 0.8),804px -272px hsla(0, 100%, 100%, 0.8),1238px 634px hsla(0, 100%, 100%, 0.8),-524px -1270px hsla(0, 100%, 100%, 0.8),-872px 774px hsla(0, 100%, 100%, 0.8),439px 735px hsla(0, 100%, 100%, 0.8),-211px 38px hsla(0, 100%, 100%, 0.8),-576px -1285px hsla(0, 100%, 100%, 0.8),713px 842px hsla(0, 100%, 100%, 0.8),-73px -1219px hsla(0, 100%, 100%, 0.8),508px -497px hsla(0, 100%, 100%, 0.8),-691px 409px hsla(0, 100%, 100%, 0.8),707px -593px hsla(0, 100%, 100%, 0.8),-186px 1028px hsla(0, 100%, 100%, 0.8),-876px -760px hsla(0, 100%, 100%, 0.8),-570px -174px hsla(0, 100%, 100%, 0.8),-300px -487px hsla(0, 100%, 100%, 0.8),-186px -311px hsla(0, 100%, 100%, 0.8),-531px 729px hsla(0, 100%, 100%, 0.8),876px -384px hsla(0, 100%, 100%, 0.8),193px -405px hsla(0, 100%, 100%, 0.8),473px -369px hsla(0, 100%, 100%, 0.8),1081px -325px hsla(0, 100%, 100%, 0.8),173px -1339px hsla(0, 100%, 100%, 0.8),-1191px 325px hsla(0, 100%, 100%, 0.8),129px 237px hsla(0, 100%, 100%, 0.8),18px -307px hsla(0, 100%, 100%, 0.8),1016px 995px hsla(0, 100%, 100%, 0.8),1186px -246px hsla(0, 100%, 100%, 0.8),980px 482px hsla(0, 100%, 100%, 0.8),-555px 310px hsla(0, 100%, 100%, 0.8),638px -473px hsla(0, 100%, 100%, 0.8),-916px 942px hsla(0, 100%, 100%, 0.8),-271px -807px hsla(0, 100%, 100%, 0.8),826px -1178px hsla(0, 100%, 100%, 0.8),274px -1px hsla(0, 100%, 100%, 0.8),-996px 844px hsla(0, 100%, 100%, 0.8),1374px 392px hsla(0, 100%, 100%, 0.8),-682px 490px hsla(0, 100%, 100%, 0.8),147px 225px hsla(0, 100%, 100%, 0.8),826px 872px hsla(0, 100%, 100%, 0.8),-574px 545px hsla(0, 100%, 100%, 0.8),1321px 509px hsla(0, 100%, 100%, 0.8),537px -604px hsla(0, 100%, 100%, 0.8),274px -834px hsla(0, 100%, 100%, 0.8),969px 148px hsla(0, 100%, 100%, 0.8),-1176px -360px hsla(0, 100%, 100%, 0.8),-1288px 518px hsla(0, 100%, 100%, 0.8),-811px 485px hsla(0, 100%, 100%, 0.8),394px -128px hsla(0, 100%, 100%, 0.8),181px -1335px hsla(0, 100%, 100%, 0.8),664px -1023px hsla(0, 100%, 100%, 0.8),-223px 234px hsla(0, 100%, 100%, 0.8),693px -307px hsla(0, 100%, 100%, 0.8),-862px -1009px hsla(0, 100%, 100%, 0.8),853px 697px hsla(0, 100%, 100%, 0.8),895px -1125px hsla(0, 100%, 100%, 0.8),251px -765px hsla(0, 100%, 100%, 0.8),-117px 410px hsla(0, 100%, 100%, 0.8),-101px 1403px hsla(0, 100%, 100%, 0.8),-299px -370px hsla(0, 100%, 100%, 0.8),-1286px 490px hsla(0, 100%, 100%, 0.8),-984px -171px hsla(0, 100%, 100%, 0.8),171px 1420px hsla(0, 100%, 100%, 0.8),-222px 1217px hsla(0, 100%, 100%, 0.8),-419px -124px hsla(0, 100%, 100%, 0.8),1131px 33px hsla(0, 100%, 100%, 0.8),-1253px 269px hsla(0, 100%, 100%, 0.8),563px -698px hsla(0, 100%, 100%, 0.8),678px -392px hsla(0, 100%, 100%, 0.8),-184px -846px hsla(0, 100%, 100%, 0.8),217px 1055px hsla(0, 100%, 100%, 0.8),888px -881px hsla(0, 100%, 100%, 0.8),439px -977px hsla(0, 100%, 100%, 0.8),-983px -936px hsla(0, 100%, 100%, 0.8),1304px -90px hsla(0, 100%, 100%, 0.8),-580px 662px hsla(0, 100%, 100%, 0.8),1294px -319px hsla(0, 100%, 100%, 0.8),-289px 509px hsla(0, 100%, 100%, 0.8),1273px 378px hsla(0, 100%, 100%, 0.8),-359px 950px hsla(0, 100%, 100%, 0.8),1245px -295px hsla(0, 100%, 100%, 0.8),421px -1359px hsla(0, 100%, 100%, 0.8),609px -337px hsla(0, 100%, 100%, 0.8),-451px 57px hsla(0, 100%, 100%, 0.8),-167px -705px hsla(0, 100%, 100%, 0.8),865px 231px hsla(0, 100%, 100%, 0.8),835px -1168px hsla(0, 100%, 100%, 0.8),-798px 529px hsla(0, 100%, 100%, 0.8),345px -571px hsla(0, 100%, 100%, 0.8),-739px 118px hsla(0, 100%, 100%, 0.8),-507px 1192px hsla(0, 100%, 100%, 0.8),-287px -1341px hsla(0, 100%, 100%, 0.8),1245px 518px hsla(0, 100%, 100%, 0.8),832px -1020px hsla(0, 100%, 100%, 0.8),95px 603px hsla(0, 100%, 100%, 0.8),-1322px -416px hsla(0, 100%, 100%, 0.8),-582px 759px hsla(0, 100%, 100%, 0.8),446px -1307px hsla(0, 100%, 100%, 0.8),1362px 350px hsla(0, 100%, 100%, 0.8),165px -793px hsla(0, 100%, 100%, 0.8),1212px 486px hsla(0, 100%, 100%, 0.8),-1140px 137px hsla(0, 100%, 100%, 0.8),1193px 642px hsla(0, 100%, 100%, 0.8),-243px -411px hsla(0, 100%, 100%, 0.8),-1178px -624px hsla(0, 100%, 100%, 0.8),1185px 710px hsla(0, 100%, 100%, 0.8),-1038px 262px hsla(0, 100%, 100%, 0.8),232px 774px hsla(0, 100%, 100%, 0.8),39px 1000px hsla(0, 100%, 100%, 0.8),-511px 1229px hsla(0, 100%, 100%, 0.8),154px -177px hsla(0, 100%, 100%, 0.8),-474px -511px hsla(0, 100%, 100%, 0.8),746px 281px hsla(0, 100%, 100%, 0.8),134px -710px hsla(0, 100%, 100%, 0.8),63px -1011px hsla(0, 100%, 100%, 0.8),-115px -161px hsla(0, 100%, 100%, 0.8),1120px -93px hsla(0, 100%, 100%, 0.8),-208px -232px hsla(0, 100%, 100%, 0.8),790px 680px hsla(0, 100%, 100%, 0.8),-605px -896px hsla(0, 100%, 100%, 0.8),623px -262px hsla(0, 100%, 100%, 0.8),422px -596px hsla(0, 100%, 100%, 0.8),438px 1377px hsla(0, 100%, 100%, 0.8),-544px -46px hsla(0, 100%, 100%, 0.8),338px -580px hsla(0, 100%, 100%, 0.8),849px 210px hsla(0, 100%, 100%, 0.8),315px -294px hsla(0, 100%, 100%, 0.8),-418px 320px hsla(0, 100%, 100%, 0.8),-546px -1106px hsla(0, 100%, 100%, 0.8),328px -577px hsla(0, 100%, 100%, 0.8),-197px 923px hsla(0, 100%, 100%, 0.8),-1131px -56px hsla(0, 100%, 100%, 0.8),-530px -347px hsla(0, 100%, 100%, 0.8),1251px -573px hsla(0, 100%, 100%, 0.8),88px 35px hsla(0, 100%, 100%, 0.8),940px 732px hsla(0, 100%, 100%, 0.8),551px 132px hsla(0, 100%, 100%, 0.8),-587px 1086px hsla(0, 100%, 100%, 0.8),1364px -12px hsla(0, 100%, 100%, 0.8),54px -115px hsla(0, 100%, 100%, 0.8),-241px -1252px hsla(0, 100%, 100%, 0.8),107px -499px hsla(0, 100%, 100%, 0.8),-345px 385px hsla(0, 100%, 100%, 0.8),1260px -133px hsla(0, 100%, 100%, 0.8),-52px 70px hsla(0, 100%, 100%, 0.8),439px -145px hsla(0, 100%, 100%, 0.8),537px 1229px hsla(0, 100%, 100%, 0.8),992px 541px hsla(0, 100%, 100%, 0.8),-422px 683px hsla(0, 100%, 100%, 0.8),32px -479px hsla(0, 100%, 100%, 0.8),-472px -740px hsla(0, 100%, 100%, 0.8),958px -705px hsla(0, 100%, 100%, 0.8),786px -255px hsla(0, 100%, 100%, 0.8),-321px -1316px hsla(0, 100%, 100%, 0.8),-1050px -926px hsla(0, 100%, 100%, 0.8),-1081px -862px hsla(0, 100%, 100%, 0.8),-824px -160px hsla(0, 100%, 100%, 0.8),1036px -204px hsla(0, 100%, 100%, 0.8),369px -253px hsla(0, 100%, 100%, 0.8),-190px -198px hsla(0, 100%, 100%, 0.8),172px -1386px hsla(0, 100%, 100%, 0.8),-89px -882px hsla(0, 100%, 100%, 0.8),993px -503px hsla(0, 100%, 100%, 0.8),273px -958px hsla(0, 100%, 100%, 0.8),142px 1247px hsla(0, 100%, 100%, 0.8),784px 417px hsla(0, 100%, 100%, 0.8),1134px 637px hsla(0, 100%, 100%, 0.8),1413px 86px hsla(0, 100%, 100%, 0.8),1179px -704px hsla(0, 100%, 100%, 0.8),326px -1304px hsla(0, 100%, 100%, 0.8),-646px -370px hsla(0, 100%, 100%, 0.8),-821px -149px hsla(0, 100%, 100%, 0.8),-706px 1223px hsla(0, 100%, 100%, 0.8),68px 768px hsla(0, 100%, 100%, 0.8),82px 1406px hsla(0, 100%, 100%, 0.8),-37px 326px hsla(0, 100%, 100%, 0.8),-1134px -799px hsla(0, 100%, 100%, 0.8),-1209px 353px hsla(0, 100%, 100%, 0.8),513px 634px hsla(0, 100%, 100%, 0.8),164px -352px hsla(0, 100%, 100%, 0.8),496px 594px hsla(0, 100%, 100%, 0.8),73px -1032px hsla(0, 100%, 100%, 0.8),-577px 1307px hsla(0, 100%, 100%, 0.8),-1043px 216px hsla(0, 100%, 100%, 0.8),387px -1032px hsla(0, 100%, 100%, 0.8),763px -115px hsla(0, 100%, 100%, 0.8),341px 1132px hsla(0, 100%, 100%, 0.8),-1163px -412px hsla(0, 100%, 100%, 0.8),-559px 12px hsla(0, 100%, 100%, 0.8),-358px -310px hsla(0, 100%, 100%, 0.8),-158px 270px hsla(0, 100%, 100%, 0.8),-1213px 332px hsla(0, 100%, 100%, 0.8),-712px 368px hsla(0, 100%, 100%, 0.8),-615px -580px hsla(0, 100%, 100%, 0.8),511px -821px hsla(0, 100%, 100%, 0.8),822px -836px hsla(0, 100%, 100%, 0.8),-610px 1085px hsla(0, 100%, 100%, 0.8),-532px 110px hsla(0, 100%, 100%, 0.8),1140px -194px hsla(0, 100%, 100%, 0.8),306px 1359px hsla(0, 100%, 100%, 0.8),-1040px -359px hsla(0, 100%, 100%, 0.8),1006px -699px hsla(0, 100%, 100%, 0.8),-669px 617px hsla(0, 100%, 100%, 0.8),475px 961px hsla(0, 100%, 100%, 0.8),-383px 234px hsla(0, 100%, 100%, 0.8),-802px -1135px hsla(0, 100%, 100%, 0.8),-455px 455px hsla(0, 100%, 100%, 0.8),428px 1057px hsla(0, 100%, 100%, 0.8),-565px 1098px hsla(0, 100%, 100%, 0.8)", + "width": "2px", + "height": "2px", + "background": "transparent", + "position": "absolute", + "top": "100%", + "left": "50%", + "transform": "translateZ(0)" + }, + { + "boxShadow": "-691px -612px hsla(0, 100%, 100%, 0.8),58px -1062px hsla(0, 100%, 100%, 0.8),-111px 837px hsla(0, 100%, 100%, 0.8),539px -650px hsla(0, 100%, 100%, 0.8),-364px 1251px hsla(0, 100%, 100%, 0.8),239px 575px hsla(0, 100%, 100%, 0.8),-1162px -700px hsla(0, 100%, 100%, 0.8),-1089px -80px hsla(0, 100%, 100%, 0.8),333px -781px hsla(0, 100%, 100%, 0.8),-881px -649px hsla(0, 100%, 100%, 0.8),1278px -400px hsla(0, 100%, 100%, 0.8),-239px -1125px hsla(0, 100%, 100%, 0.8),-236px -568px hsla(0, 100%, 100%, 0.8),-478px -145px hsla(0, 100%, 100%, 0.8),-692px -914px hsla(0, 100%, 100%, 0.8),-935px 13px hsla(0, 100%, 100%, 0.8),-300px 10px hsla(0, 100%, 100%, 0.8),968px -400px hsla(0, 100%, 100%, 0.8),-1060px -133px hsla(0, 100%, 100%, 0.8),55px 1232px hsla(0, 100%, 100%, 0.8),1301px -279px hsla(0, 100%, 100%, 0.8),-1013px -883px hsla(0, 100%, 100%, 0.8),-954px 1014px hsla(0, 100%, 100%, 0.8),-784px -1214px hsla(0, 100%, 100%, 0.8),-561px 876px hsla(0, 100%, 100%, 0.8),213px -744px hsla(0, 100%, 100%, 0.8),-986px 743px hsla(0, 100%, 100%, 0.8),1054px 368px hsla(0, 100%, 100%, 0.8),-644px -33px hsla(0, 100%, 100%, 0.8),-629px -513px hsla(0, 100%, 100%, 0.8),-1282px -86px hsla(0, 100%, 100%, 0.8),-190px -1243px hsla(0, 100%, 100%, 0.8),-924px -223px hsla(0, 100%, 100%, 0.8),920px -346px hsla(0, 100%, 100%, 0.8),239px -1248px hsla(0, 100%, 100%, 0.8),773px -379px hsla(0, 100%, 100%, 0.8),-405px 552px hsla(0, 100%, 100%, 0.8),-88px 1244px hsla(0, 100%, 100%, 0.8),-910px -952px hsla(0, 100%, 100%, 0.8),-376px -472px hsla(0, 100%, 100%, 0.8),-487px -1122px hsla(0, 100%, 100%, 0.8),-331px 880px hsla(0, 100%, 100%, 0.8),263px 1172px hsla(0, 100%, 100%, 0.8),-1270px 623px hsla(0, 100%, 100%, 0.8),899px 1023px hsla(0, 100%, 100%, 0.8),579px 428px hsla(0, 100%, 100%, 0.8),842px 1059px hsla(0, 100%, 100%, 0.8),-669px -623px hsla(0, 100%, 100%, 0.8),-744px -1124px hsla(0, 100%, 100%, 0.8),1087px 186px hsla(0, 100%, 100%, 0.8),-365px 251px hsla(0, 100%, 100%, 0.8),-944px 506px hsla(0, 100%, 100%, 0.8),524px 1147px hsla(0, 100%, 100%, 0.8),-1388px 299px hsla(0, 100%, 100%, 0.8),58px 1433px hsla(0, 100%, 100%, 0.8),212px 1297px hsla(0, 100%, 100%, 0.8),763px 979px hsla(0, 100%, 100%, 0.8),1045px 812px hsla(0, 100%, 100%, 0.8),-1008px -657px hsla(0, 100%, 100%, 0.8),-48px 437px hsla(0, 100%, 100%, 0.8),-644px -252px hsla(0, 100%, 100%, 0.8),441px -1276px hsla(0, 100%, 100%, 0.8),-965px -393px hsla(0, 100%, 100%, 0.8),-843px -380px hsla(0, 100%, 100%, 0.8),378px -591px hsla(0, 100%, 100%, 0.8),764px 659px hsla(0, 100%, 100%, 0.8),-387px -959px hsla(0, 100%, 100%, 0.8),387px -973px hsla(0, 100%, 100%, 0.8),225px -144px hsla(0, 100%, 100%, 0.8),1302px 316px hsla(0, 100%, 100%, 0.8),-674px 856px hsla(0, 100%, 100%, 0.8),345px 907px hsla(0, 100%, 100%, 0.8),878px 541px hsla(0, 100%, 100%, 0.8),1299px 469px hsla(0, 100%, 100%, 0.8),-926px -540px hsla(0, 100%, 100%, 0.8),-172px 1245px hsla(0, 100%, 100%, 0.8),-493px 1117px hsla(0, 100%, 100%, 0.8),-213px -744px hsla(0, 100%, 100%, 0.8),-281px 972px hsla(0, 100%, 100%, 0.8),-946px 751px hsla(0, 100%, 100%, 0.8),-266px -1059px hsla(0, 100%, 100%, 0.8),736px -1064px hsla(0, 100%, 100%, 0.8),-1052px -913px hsla(0, 100%, 100%, 0.8),-288px 133px hsla(0, 100%, 100%, 0.8),935px -104px hsla(0, 100%, 100%, 0.8),-1268px 534px hsla(0, 100%, 100%, 0.8),224px 387px hsla(0, 100%, 100%, 0.8),210px 1086px hsla(0, 100%, 100%, 0.8),110px 495px hsla(0, 100%, 100%, 0.8),95px 38px hsla(0, 100%, 100%, 0.8),-259px -818px hsla(0, 100%, 100%, 0.8),-999px 921px hsla(0, 100%, 100%, 0.8),567px -1034px hsla(0, 100%, 100%, 0.8),786px -747px hsla(0, 100%, 100%, 0.8),-992px -612px hsla(0, 100%, 100%, 0.8),-1363px -187px hsla(0, 100%, 100%, 0.8),-806px 1012px hsla(0, 100%, 100%, 0.8),-501px 357px hsla(0, 100%, 100%, 0.8),-10px 740px hsla(0, 100%, 100%, 0.8),-460px 793px hsla(0, 100%, 100%, 0.8),-1325px 81px hsla(0, 100%, 100%, 0.8),-1063px 401px hsla(0, 100%, 100%, 0.8),-528px 1190px hsla(0, 100%, 100%, 0.8),-194px -716px hsla(0, 100%, 100%, 0.8),-854px -726px hsla(0, 100%, 100%, 0.8),-232px 488px hsla(0, 100%, 100%, 0.8),695px 1179px hsla(0, 100%, 100%, 0.8),124px -522px hsla(0, 100%, 100%, 0.8),-567px 394px hsla(0, 100%, 100%, 0.8),-569px -637px hsla(0, 100%, 100%, 0.8),140px 1181px hsla(0, 100%, 100%, 0.8),-511px -486px hsla(0, 100%, 100%, 0.8),-542px -439px hsla(0, 100%, 100%, 0.8),160px -715px hsla(0, 100%, 100%, 0.8),-984px 570px hsla(0, 100%, 100%, 0.8),115px -528px hsla(0, 100%, 100%, 0.8),47px -490px hsla(0, 100%, 100%, 0.8),94px 401px hsla(0, 100%, 100%, 0.8),474px 1292px hsla(0, 100%, 100%, 0.8),-584px -110px hsla(0, 100%, 100%, 0.8),-558px 632px hsla(0, 100%, 100%, 0.8),559px 0px hsla(0, 100%, 100%, 0.8),-40px 1058px hsla(0, 100%, 100%, 0.8),1358px 97px hsla(0, 100%, 100%, 0.8),-277px 260px hsla(0, 100%, 100%, 0.8),-913px 446px hsla(0, 100%, 100%, 0.8),346px 1334px hsla(0, 100%, 100%, 0.8),-974px -602px hsla(0, 100%, 100%, 0.8),87px -32px hsla(0, 100%, 100%, 0.8),1047px -580px hsla(0, 100%, 100%, 0.8),-572px -87px hsla(0, 100%, 100%, 0.8),433px -1126px hsla(0, 100%, 100%, 0.8),131px -1305px hsla(0, 100%, 100%, 0.8),715px -179px hsla(0, 100%, 100%, 0.8),383px -1059px hsla(0, 100%, 100%, 0.8),957px 595px hsla(0, 100%, 100%, 0.8),612px 970px hsla(0, 100%, 100%, 0.8),453px -214px hsla(0, 100%, 100%, 0.8),-684px 629px hsla(0, 100%, 100%, 0.8),-1421px 253px hsla(0, 100%, 100%, 0.8),-382px -1232px hsla(0, 100%, 100%, 0.8),-1378px -132px hsla(0, 100%, 100%, 0.8),583px 700px hsla(0, 100%, 100%, 0.8),709px -197px hsla(0, 100%, 100%, 0.8),83px -240px hsla(0, 100%, 100%, 0.8),1198px 741px hsla(0, 100%, 100%, 0.8),329px -1275px hsla(0, 100%, 100%, 0.8),-357px -45px hsla(0, 100%, 100%, 0.8),-23px -1071px hsla(0, 100%, 100%, 0.8),403px 533px hsla(0, 100%, 100%, 0.8),-458px -717px hsla(0, 100%, 100%, 0.8),-635px 904px hsla(0, 100%, 100%, 0.8),11px 1096px hsla(0, 100%, 100%, 0.8),-1107px 815px hsla(0, 100%, 100%, 0.8),-447px -1267px hsla(0, 100%, 100%, 0.8),-524px 572px hsla(0, 100%, 100%, 0.8),-826px 126px hsla(0, 100%, 100%, 0.8),-781px 126px hsla(0, 100%, 100%, 0.8),-687px -103px hsla(0, 100%, 100%, 0.8),-281px -634px hsla(0, 100%, 100%, 0.8),-67px 930px hsla(0, 100%, 100%, 0.8),-12px 139px hsla(0, 100%, 100%, 0.8),1143px -98px hsla(0, 100%, 100%, 0.8),-1394px -130px hsla(0, 100%, 100%, 0.8),790px 1080px hsla(0, 100%, 100%, 0.8),526px -665px hsla(0, 100%, 100%, 0.8),-193px -850px hsla(0, 100%, 100%, 0.8),95px 1179px hsla(0, 100%, 100%, 0.8),-706px 524px hsla(0, 100%, 100%, 0.8),-1347px 108px hsla(0, 100%, 100%, 0.8),-1347px -349px hsla(0, 100%, 100%, 0.8),-1300px 111px hsla(0, 100%, 100%, 0.8),1043px -613px hsla(0, 100%, 100%, 0.8),-639px -312px hsla(0, 100%, 100%, 0.8),325px 1008px hsla(0, 100%, 100%, 0.8),586px -1266px hsla(0, 100%, 100%, 0.8),-357px -2px hsla(0, 100%, 100%, 0.8),1105px 222px hsla(0, 100%, 100%, 0.8),405px 1270px hsla(0, 100%, 100%, 0.8),-540px 350px hsla(0, 100%, 100%, 0.8),-35px 274px hsla(0, 100%, 100%, 0.8),-159px -987px hsla(0, 100%, 100%, 0.8),660px 802px hsla(0, 100%, 100%, 0.8),329px -756px hsla(0, 100%, 100%, 0.8),-488px 507px hsla(0, 100%, 100%, 0.8),-286px -1198px hsla(0, 100%, 100%, 0.8),-769px -849px hsla(0, 100%, 100%, 0.8),-693px -822px hsla(0, 100%, 100%, 0.8),63px -456px hsla(0, 100%, 100%, 0.8),858px -386px hsla(0, 100%, 100%, 0.8),1081px -289px hsla(0, 100%, 100%, 0.8),487px 539px hsla(0, 100%, 100%, 0.8),1279px -118px hsla(0, 100%, 100%, 0.8),186px -1148px hsla(0, 100%, 100%, 0.8),-929px -831px hsla(0, 100%, 100%, 0.8),1165px -846px hsla(0, 100%, 100%, 0.8)", + "width": "3px", + "height": "3px", + "background": "transparent", + "position": "absolute", + "top": "100%", + "left": "50%", + "transform": "translateZ(0)" + } + ], + "animationStyles": [ + { + "animation": "wp-block-a8c-starscape-animation-rotate 125s linear infinite" + }, + { + "animation": "wp-block-a8c-starscape-animation-rotate 250s linear infinite" + }, + { + "animation": "wp-block-a8c-starscape-animation-rotate 500s linear infinite" + } + ] +} \ No newline at end of file diff --git a/blocks/starscape/src/icon.js b/blocks/starscape/src/icon.js new file mode 100644 index 00000000..11eb14fa --- /dev/null +++ b/blocks/starscape/src/icon.js @@ -0,0 +1,14 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +const StarsIcon = ( props ) => { + return ( + + + + ); +}; + +export default StarsIcon; diff --git a/blocks/starscape/src/index.js b/blocks/starscape/src/index.js new file mode 100644 index 00000000..75880753 --- /dev/null +++ b/blocks/starscape/src/index.js @@ -0,0 +1,89 @@ +/** + * WordPress dependencies + */ +import { registerBlockType } from '@wordpress/blocks'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import StarsIcon from './icon'; +import Edit from './edit'; +import Save from './save'; + +import generated from './generated.json'; + +// Generates the default value saved in generated.json +// +// import { genAnimations, genStars } from './utils'; +// window.generate = () => JSON.stringify( +// { +// starStyles: genStars( { density: 20, maxWidth: 1920, maxHeight: 1080 } ), +// animationStyles: genAnimations( { speed: 20 } ), +// }, +// null, +// '\t' +// ); + +export function registerBlock() { + registerBlockType( 'a8c/starscape', { + title: __( 'Starscape' ), + description: __( 'Create content with stars in motion.' ), + icon: , + category: 'widgets', + supports: { + html: false, + align: true, + }, + attributes: { + align: { + type: 'string', + default: 'full', + }, + textAlign: { + type: 'string', + default: 'center', + }, + density: { + type: 'int', + default: 20, + }, + speed: { + type: 'int', + default: 20, + }, + maxWidth: { + type: 'int', + default: 1920, + }, + maxHeight: { + type: 'int', + default: 1080, + }, + starStyles: { + type: 'array', + default: generated.starStyles, + }, + animationStyles: { + type: 'array', + default: generated.animationStyles, + }, + heading: { + type: 'string', + }, + textColor: { + type: 'string', + }, + customTextColor: { + type: 'string', + default: '#ffffff', + }, + background: { + type: 'string', + default: '#00000c', + }, + }, + edit: ( props ) => , + save: ( props ) => , + } ); +} diff --git a/blocks/starscape/src/save.js b/blocks/starscape/src/save.js new file mode 100644 index 00000000..6b7a18c8 --- /dev/null +++ b/blocks/starscape/src/save.js @@ -0,0 +1,41 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { RichText, getColorClassName } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import Starscape from './starscape'; + +const Save = ( { attributes, className } ) => { + const textColorClass = getColorClassName( 'color', attributes.textColor ); + + return ( + + + + ); +}; + +export default Save; diff --git a/blocks/starscape/src/starscape.js b/blocks/starscape/src/starscape.js new file mode 100644 index 00000000..58b6358c --- /dev/null +++ b/blocks/starscape/src/starscape.js @@ -0,0 +1,29 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +const Starscape = ( { starStyles, animationStyles, children, className, background } ) => { + return ( +
+
+
+
+ { children } +
+ ); +}; + +export default Starscape; diff --git a/blocks/starscape/src/utils.js b/blocks/starscape/src/utils.js new file mode 100644 index 00000000..ab1c256f --- /dev/null +++ b/blocks/starscape/src/utils.js @@ -0,0 +1,122 @@ +/** + * Calculates points randomly within a circle so we don't bother calculating + * for the points that will never appear on screen. + * + * @param {number} radius radius to randomly generate in + * + * @return {Object} Random { x, y } coordinates + */ +const randomPoint = ( radius ) => { + /* eslint-disable no-restricted-syntax */ + const a = Math.random() * 2 * Math.PI; + const r = radius * Math.sqrt( Math.random() ); + /* eslint-enable no-restricted-syntax */ + + return { + x: r * Math.cos( a ), + y: r * Math.sin( a ), + }; +}; + +/** + * Calculate the box shadow. Optimized for shortest string length. + * + * @param {Object} options Options + * @param {string} options.color CSS Color string + * @param {number} options.density Quantity of stars in stars per million pixels + * @param {number} options.maxWidth Max width of the area to fill in pixels + * @param {number} options.maxHeight Max height of the area to fill in pixels + */ +const starBoxShadow = ( { color, density, maxWidth, maxHeight } ) => { + // Any points outside the circle covering the rectangle, centered on the + // midpoint of the bottom edge, won't be shown, so don't bother placing + // any there. + const base = maxWidth / 2; + const height = maxHeight; + const radius = Math.sqrt( ( base * base ) + ( height * height ) ); + + // Star count calculation based on how dense the stars should be distributed + // within our minimal circle + const area = Math.PI * radius * radius; + const count = Math.floor( area * density * 1e-6 ); + + return Array.from( { length: count }, () => { + const { x, y } = randomPoint( radius ); + // Rounding to the nearest pixel saves up to 18% on string length + return `${ Math.round( x ) }px ${ Math.round( y ) }px ${ color }`; + } ).join( ',' ); +}; + +/** + * Calculates the style object in JS for the starscape stars. + * + * @param {Object} options Options + * @param {number} options.starSize Size of star in pixels + * @param {string} options.color CSS Color string + * @param {number} options.density Value between 0 and 1 + * @param {number} options.maxWidth Maximum width the container may be in pixels + * @param {number} options.maxHeight Maximum height the container may be in pixels + * + * @return {Object} CSS style object to add to a component + */ +const starBoxStyle = ( { starSize, color, density, maxWidth, maxHeight } ) => ( { + boxShadow: starBoxShadow( { color, density, maxWidth, maxHeight } ), + width: `${ starSize }px`, + height: `${ starSize }px`, +} ); + +/** + * Calculates the style object in JS for the starscape animation. + * + * @param {Object} options Options + * @param {string} options.animation Type of animation (currently just `rotate`) + * @param {number} options.duration Duration of animation in seconds + * + * @return {Object} CSS style object to add to a component + */ +const starBoxAnimation = ( { animation, duration } ) => ( { + animation: `wp-block-a8c-starscape-animation-${ animation } ${ duration }s linear infinite`, +} ); + +/** + * Calculate all three sizes of stars for saving in the attributes. + * + * @param {Object} options Options + * @param {number} options.density Range slider value between 1 and 100 + * + * @return {Object[]} CSS style objects for each layer of stars + */ +export const genStars = ( { density, maxWidth, maxHeight } ) => [ + { + starSize: 1, + density: ( 4 * density ) + 10, + }, + { + starSize: 2, + density: ( 2 * density ) + 10, + }, + { + starSize: 3, + density: ( 1 * density ) + 10, + }, +].map( ( variation ) => starBoxStyle( { + color: 'hsla(0, 100%, 100%, 0.8)', + maxWidth, + maxHeight, + ...variation, +} ) ); + +/** + * Calculate all three sizes of stars for saving in the attributes. + * + * @param {Object} options Options + * @param {number} options.speed Value between 1 and 100 + * + * @return {Object[]} CSS style objects for each layer of stars + */ +export const genAnimations = ( { speed } ) => [ 50000, 100000, 200000 ].map( + ( duration ) => starBoxAnimation( { + animation: 'rotate', + duration: duration / ( speed * speed ), + } ) +); diff --git a/blocks/starscape/style.scss b/blocks/starscape/style.scss new file mode 100644 index 00000000..ff901ea9 --- /dev/null +++ b/blocks/starscape/style.scss @@ -0,0 +1,34 @@ +/* Front end styles */ +.wp-block-a8c-starscape { + position: relative; + overflow: hidden; + display: flex; + align-items: center; + width: 100%; + height: 100%; + padding: 0 40px; + min-height: 430px; + background: #00000c; + + &__stars { + position: absolute; + top: 100%; + left: 50%; + transform: translateZ(0); + } + + &__heading { + z-index: 1; + width: 100%; + font-size: 84px; + } +} + +@keyframes wp-block-a8c-starscape-animation-rotate { + from { + transform: rotateZ(0deg); + } + to { + transform: rotateZ(360deg); + } +} \ No newline at end of file diff --git a/bundler/bundles/starscape.json b/bundler/bundles/starscape.json new file mode 100644 index 00000000..b4a1dcf6 --- /dev/null +++ b/bundler/bundles/starscape.json @@ -0,0 +1,9 @@ +{ + "blocks": [ + "starscape" + ], + "version": "1.0.0", + "name": "Starscape Block", + "description": "Stars in motion", + "resource": "a8c-starscape" +} diff --git a/bundler/resources/a8c-starscape/assets/banner-1544x500.png b/bundler/resources/a8c-starscape/assets/banner-1544x500.png new file mode 100644 index 00000000..d0219c9f Binary files /dev/null and b/bundler/resources/a8c-starscape/assets/banner-1544x500.png differ diff --git a/bundler/resources/a8c-starscape/assets/banner-772x250.png b/bundler/resources/a8c-starscape/assets/banner-772x250.png new file mode 100644 index 00000000..f484d986 Binary files /dev/null and b/bundler/resources/a8c-starscape/assets/banner-772x250.png differ diff --git a/bundler/resources/a8c-starscape/assets/icon-128x128.png b/bundler/resources/a8c-starscape/assets/icon-128x128.png new file mode 100644 index 00000000..25b09b4c Binary files /dev/null and b/bundler/resources/a8c-starscape/assets/icon-128x128.png differ diff --git a/bundler/resources/a8c-starscape/assets/icon-256x256.png b/bundler/resources/a8c-starscape/assets/icon-256x256.png new file mode 100644 index 00000000..c5e2a0ef Binary files /dev/null and b/bundler/resources/a8c-starscape/assets/icon-256x256.png differ diff --git a/bundler/resources/a8c-starscape/assets/icon.svg b/bundler/resources/a8c-starscape/assets/icon.svg new file mode 100644 index 00000000..1f56bb22 --- /dev/null +++ b/bundler/resources/a8c-starscape/assets/icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/bundler/resources/a8c-starscape/assets/screenshot-1.png b/bundler/resources/a8c-starscape/assets/screenshot-1.png new file mode 100644 index 00000000..091ef8d3 Binary files /dev/null and b/bundler/resources/a8c-starscape/assets/screenshot-1.png differ diff --git a/bundler/resources/a8c-starscape/assets/screenshot-2.png b/bundler/resources/a8c-starscape/assets/screenshot-2.png new file mode 100644 index 00000000..d2911194 Binary files /dev/null and b/bundler/resources/a8c-starscape/assets/screenshot-2.png differ diff --git a/bundler/resources/a8c-starscape/assets/screenshot-3.png b/bundler/resources/a8c-starscape/assets/screenshot-3.png new file mode 100644 index 00000000..1c245b30 Binary files /dev/null and b/bundler/resources/a8c-starscape/assets/screenshot-3.png differ diff --git a/bundler/resources/a8c-starscape/assets/screenshot-4.png b/bundler/resources/a8c-starscape/assets/screenshot-4.png new file mode 100644 index 00000000..33d05060 Binary files /dev/null and b/bundler/resources/a8c-starscape/assets/screenshot-4.png differ diff --git a/bundler/resources/a8c-starscape/block.json b/bundler/resources/a8c-starscape/block.json new file mode 100644 index 00000000..f06ff89e --- /dev/null +++ b/bundler/resources/a8c-starscape/block.json @@ -0,0 +1,6 @@ +{ + "name": "a8c/starscape", + "title": "Starscape", + "description": "Everything was made of collapsing stars, we are all made of star stuff. Now we also can create content in WordPress with stars in motion.", + "category": "widgets" +} diff --git a/bundler/resources/a8c-starscape/readme.txt b/bundler/resources/a8c-starscape/readme.txt new file mode 100644 index 00000000..59f5dcbd --- /dev/null +++ b/bundler/resources/a8c-starscape/readme.txt @@ -0,0 +1,29 @@ +=== Starscape Block === +Contributors: automattic, ajlende, pablohoneyhoney +Stable tag: 1.0.0 +Tested up to: 5.3.2 +Requires at least: 5.3 +License: GPLv2 or later +License URI: https://www.gnu.org/licenses/gpl-2.0.html + +Stars in motion + +== Description == + +Everything was made of collapsing stars, we are all made of star stuff. Now we also can create content in WordPress with stars in motion. + +## Source and Support + +You can follow development, file an issue, suggest features, and view the source at the Github repo: https://github.com/Automattic/block-experiments + +== Screenshots == + +1. Starscape Block by Automattic. +2. Create content with stars in motion. +3. Choose from a number of sky backgrounds. +4. Control the quantity of stars and speed of rotation. + +== Changelog == + += 1.0 - 23rd January 2020 = +* Initial release diff --git a/editor.scss b/editor.scss index 9c1ad09a..ed482533 100644 --- a/editor.scss +++ b/editor.scss @@ -2,3 +2,4 @@ @import './blocks/event/editor.scss'; @import './blocks/layout-grid/editor.scss'; @import './blocks/bauhaus-centenary/editor.scss'; +@import './blocks/starscape/editor.scss'; diff --git a/src/index.js b/src/index.js index b2c8e525..13db92e2 100644 --- a/src/index.js +++ b/src/index.js @@ -26,9 +26,11 @@ import * as eventBlock from '../blocks/event/src'; import * as layoutGridBlock from '../blocks/layout-grid/src'; import * as richImageTools from '../blocks/rich-image/src'; import * as bauhausCentenaryBlock from '../blocks/bauhaus-centenary/src'; +import * as starscapeBlock from '../blocks/starscape/src'; // Instantiate the blocks, adding them to our block category eventBlock.registerBlock(); layoutGridBlock.registerBlock(); richImageTools.registerBlock(); bauhausCentenaryBlock.registerBlock(); +starscapeBlock.registerBlock(); diff --git a/style.scss b/style.scss index e75773b6..b6207297 100644 --- a/style.scss +++ b/style.scss @@ -2,3 +2,4 @@ @import './blocks/event/style.scss'; @import './blocks/layout-grid/style.scss'; @import './blocks/bauhaus-centenary/style.scss'; +@import './blocks/starscape/style.scss';