commit 39b25182ede2a3f4d2dac18ec2d4f503b8f94ca1 Author: mertJF Date: Thu May 14 21:27:01 2020 +0300 first commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..239ecff --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +yarn.lock diff --git a/README.md b/README.md new file mode 100644 index 0000000..89b278a --- /dev/null +++ b/README.md @@ -0,0 +1,68 @@ +This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `yarn start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `yarn test` + +Launches the test runner in the interactive watch mode.
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. + +### `yarn build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. + +### `yarn eject` + +**Note: this is a one-way operation. Once you `eject`, you can’t go back!** + +If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + +You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. + +## Learn More + +You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). + +To learn React, check out the [React documentation](https://reactjs.org/). + +### Code Splitting + +This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting + +### Analyzing the Bundle Size + +This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size + +### Making a Progressive Web App + +This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app + +### Advanced Configuration + +This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration + +### Deployment + +This section has moved here: https://facebook.github.io/create-react-app/docs/deployment + +### `yarn build` fails to minify + +This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify diff --git a/build/asset-manifest.json b/build/asset-manifest.json new file mode 100644 index 0000000..bef44fc --- /dev/null +++ b/build/asset-manifest.json @@ -0,0 +1,22 @@ +{ + "files": { + "main.css": "/tailblocks/static/css/main.0c1f9826.chunk.css", + "main.js": "/tailblocks/static/js/main.ff8c9288.chunk.js", + "main.js.map": "/tailblocks/static/js/main.ff8c9288.chunk.js.map", + "runtime-main.js": "/tailblocks/static/js/runtime-main.ad462f65.js", + "runtime-main.js.map": "/tailblocks/static/js/runtime-main.ad462f65.js.map", + "static/js/2.4f9f66ff.chunk.js": "/tailblocks/static/js/2.4f9f66ff.chunk.js", + "static/js/2.4f9f66ff.chunk.js.map": "/tailblocks/static/js/2.4f9f66ff.chunk.js.map", + "index.html": "/tailblocks/index.html", + "precache-manifest.696ca016b359e1fa53d546c5a58df1d7.js": "/tailblocks/precache-manifest.696ca016b359e1fa53d546c5a58df1d7.js", + "service-worker.js": "/tailblocks/service-worker.js", + "static/css/main.0c1f9826.chunk.css.map": "/tailblocks/static/css/main.0c1f9826.chunk.css.map", + "static/js/2.4f9f66ff.chunk.js.LICENSE": "/tailblocks/static/js/2.4f9f66ff.chunk.js.LICENSE" + }, + "entrypoints": [ + "static/js/runtime-main.ad462f65.js", + "static/js/2.4f9f66ff.chunk.js", + "static/css/main.0c1f9826.chunk.css", + "static/js/main.ff8c9288.chunk.js" + ] +} \ No newline at end of file diff --git a/build/favicon.ico b/build/favicon.ico new file mode 100644 index 0000000..a11777c Binary files /dev/null and b/build/favicon.ico differ diff --git a/build/index.html b/build/index.html new file mode 100644 index 0000000..ff0ca13 --- /dev/null +++ b/build/index.html @@ -0,0 +1 @@ +Tailwind Blocks
\ No newline at end of file diff --git a/build/logo192.png b/build/logo192.png new file mode 100644 index 0000000..fc44b0a Binary files /dev/null and b/build/logo192.png differ diff --git a/build/logo512.png b/build/logo512.png new file mode 100644 index 0000000..a4e47a6 Binary files /dev/null and b/build/logo512.png differ diff --git a/build/manifest.json b/build/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/build/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/build/precache-manifest.696ca016b359e1fa53d546c5a58df1d7.js b/build/precache-manifest.696ca016b359e1fa53d546c5a58df1d7.js new file mode 100644 index 0000000..93a49a4 --- /dev/null +++ b/build/precache-manifest.696ca016b359e1fa53d546c5a58df1d7.js @@ -0,0 +1,26 @@ +self.__precacheManifest = (self.__precacheManifest || []).concat([ + { + "revision": "c4a2d5b6b2dd799c8449e572c0f83cde", + "url": "/tailblocks/index.html" + }, + { + "revision": "5056465375e021be9444", + "url": "/tailblocks/static/css/main.0c1f9826.chunk.css" + }, + { + "revision": "f120907f0e695961d63b", + "url": "/tailblocks/static/js/2.4f9f66ff.chunk.js" + }, + { + "revision": "85b12af60ddf57ea6860c3b16407fd52", + "url": "/tailblocks/static/js/2.4f9f66ff.chunk.js.LICENSE" + }, + { + "revision": "5056465375e021be9444", + "url": "/tailblocks/static/js/main.ff8c9288.chunk.js" + }, + { + "revision": "6b42aa5fb4b4d5910b21", + "url": "/tailblocks/static/js/runtime-main.ad462f65.js" + } +]); \ No newline at end of file diff --git a/build/robots.txt b/build/robots.txt new file mode 100644 index 0000000..01b0f9a --- /dev/null +++ b/build/robots.txt @@ -0,0 +1,2 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * diff --git a/build/service-worker.js b/build/service-worker.js new file mode 100644 index 0000000..b728037 --- /dev/null +++ b/build/service-worker.js @@ -0,0 +1,39 @@ +/** + * Welcome to your Workbox-powered service worker! + * + * You'll need to register this file in your web app and you should + * disable HTTP caching for this file too. + * See https://goo.gl/nhQhGp + * + * The rest of the code is auto-generated. Please don't update this file + * directly; instead, make changes to your Workbox build configuration + * and re-run your build process. + * See https://goo.gl/2aRDsh + */ + +importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); + +importScripts( + "/tailblocks/precache-manifest.696ca016b359e1fa53d546c5a58df1d7.js" +); + +self.addEventListener('message', (event) => { + if (event.data && event.data.type === 'SKIP_WAITING') { + self.skipWaiting(); + } +}); + +workbox.core.clientsClaim(); + +/** + * The workboxSW.precacheAndRoute() method efficiently caches and responds to + * requests for URLs in the manifest. + * See https://goo.gl/S9QRab + */ +self.__precacheManifest = [].concat(self.__precacheManifest || []); +workbox.precaching.precacheAndRoute(self.__precacheManifest, {}); + +workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/tailblocks/index.html"), { + + blacklist: [/^\/_/,/\/[^\/?]+\.[^\/]+$/], +}); diff --git a/build/static/css/main.0c1f9826.chunk.css b/build/static/css/main.0c1f9826.chunk.css new file mode 100644 index 0000000..47e8014 --- /dev/null +++ b/build/static/css/main.0c1f9826.chunk.css @@ -0,0 +1,2 @@ +@import url(https://fonts.googleapis.com/css?family=Space+Mono&display=swap);:root{--base-500:#a0aec0;--base-200:#e2e8f0;--base-300:#e2e8f0;--base-400:#cbd5e0;--main-400:#7f9cf5;--main-200:#c3dafe;--main-100:#ebf4ff;--solid:#fff;--solid-900:#4a5568;--sidebar-bg:#edf2f7;--sidebar-color:#4a5568;--shadow:0 10px 15px -3px rgba(36,69,101,0.19),0 4px 6px -2px #d0dce8;--shadow-active:0 0 0 2px currentColor,0 10px 15px -3px rgba(36,69,101,0.19),0 4px 6px -2px #d0dce8;--opener:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");--opener-active:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5m7 7l-7-7 7-7'/%3E%3C/svg%3E")}.dark-mode,:root{--main-500:#667eea}.dark-mode{--base-500:#718096;--base-200:#2d3748;--base-300:#4a5568;--base-400:#4a5568;--main-200:#4a5568;--main-100:#2d3648;--solid:#1a202c;--solid-900:#d1dcec;--sidebar-bg:#2d3648;--sidebar-color:#fff;--shadow:0 10px 15px -3px #1a202d,0 4px 6px -2px #303a54;--shadow-active:0 0 0 2px currentColor,0 10px 15px -3px rgba(0,0,0,0.35),0 4px 6px -2px #4c525a}.red:not(.dark-mode){--main-200:#fed7d7;--main-100:#fed7d7}.red{--main-500:#f56565;--main-400:#fc8181}.orange{--main-500:#ed8936;--main-400:#f6ad55}.orange:not(.dark-mode){--main-200:#feebc8;--main-100:#fffaf0}.green{--main-500:#48bb78;--main-400:#68d391}.green:not(.dark-mode){--main-200:#c6f6d5;--main-100:#c6f6d5}.teal{--main-500:#38b2ac;--main-400:#4fd1c5}.teal:not(.dark-mode){--main-200:#b2f5ea;--main-100:#e6fffa}.blue{--main-500:#4299e1;--main-400:#63b3ed}.blue:not(.dark-mode){--main-200:#bee3f8;--main-100:#ebf8ff}.purple{--main-500:#9f7aea;--main-400:#b794f4}.purple:not(.dark-mode){--main-200:#e9d8fd;--main-100:#faf5ff}.pink{--main-500:#ed64a6;--main-400:#f687b3}.pink:not(.dark-mode){--main-200:#fed7e2;--main-100:#fff5f7}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button,button:focus{outline:0}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}iframe{width:100%;height:100%;border:0;background-color:#fff;background-color:var(--solid)}.app{height:100vh}.app.dark-mode{background-color:#1a202c}.main{height:calc(100vh - 64px);overflow:auto;transition:.3s}::-webkit-scrollbar,::-webkit-scrollbar-thumb,::-webkit-scrollbar-track{display:none}.sidebar{height:100vh;width:160px;z-index:1;position:fixed;overflow:auto;left:0;transform:translateX(-100%);padding:20px;top:0;background-color:#edf2f7;background-color:var(--sidebar-bg);display:flex;flex-direction:column;align-items:center;transition:transform .3s}.block-category{color:#4a5568;color:var(--sidebar-color);font-size:13px;text-transform:uppercase;font-weight:600;margin-bottom:10px}.block-item{padding:0;border:0;border-radius:4px;box-shadow:0 10px 15px -3px rgba(36,69,101,.19),0 4px 6px -2px #d0dce8;box-shadow:var(--shadow);overflow:hidden;color:#667eea;color:var(--main-500)}.block-item.is-active{background-color:#667eea;background-color:var(--main-500);box-shadow:0 0 0 2px currentColor,0 10px 15px -3px rgba(36,69,101,.19),0 4px 6px -2px #d0dce8;box-shadow:var(--shadow-active)}.block-item.is-active>svg{opacity:.8}.block-item+.block-item{margin-top:20px}.blocks+.blocks{margin-top:30px}svg{width:100%}.app.has-sidebar .toolbar{padding:16px 16px 16px 176px}.toolbar{background-color:#667eea;background-color:var(--main-500);transition:padding .3s;padding:0 16px;height:64px;display:flex;align-items:center}.app.has-sidebar .sidebar{transform:translateX(0)}.switcher{display:flex;padding:0 10px;height:32px;border-radius:20px;background-color:#fff;align-items:center;margin-right:16px}.theme-button{width:20px;height:20px;border-radius:50%}.theme-button.is-active{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-size:10px;content:"";background-repeat:no-repeat;background-size:14px;background-position:50%}.theme-button+.theme-button{margin-left:5px}.opener{color:#fff;display:flex;align-items:center;font-weight:600;position:relative}.opener:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");background-image:var(--opener);display:inline-block;width:18px;height:18px;content:"";background-size:cover;background-repeat:no-repeat;margin-right:4px}.app.has-sidebar .opener:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5m7 7l-7-7 7-7'/%3E%3C/svg%3E");background-image:var(--opener-active)}.mode{background-color:hsla(0,0%,100%,.192);border-radius:30px;width:58px;position:relative;height:32px;margin-left:16px}.mode:before{width:32px;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2.4' fill='%23fff' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E");background-size:cover;left:0;top:0;background-repeat:no-repeat;background-size:50%;transition:.3s;background-position:50%}.mode:after,.mode:before{content:"";position:absolute}.mode:after{width:20px;height:20px;right:6px;top:6px;background-color:#667eea;background-color:var(--main-500);border-radius:50%;transition:transform .3s}.app.dark-mode .mode{background-color:rgba(0,0,0,.171)}.app.dark-mode .mode:after{transform:translateX(-24px)}.app.dark-mode .mode:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2' fill='%23fff' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E");transform:translateX(26px)}.device{color:#fff;opacity:.3;transition:.3s}.device.is-active{opacity:1}.device+.device{margin-left:8px}.view{position:relative}.app.desktop .view{height:100%}.device>svg{width:24px}.app.phone .view iframe{height:736px;width:414px;margin:60px auto 0;border:2px solid #e2e8f0;border:2px solid var(--base-300)}.app.phone .view{width:450px;height:880px;background-color:#edf2f7;background-color:var(--sidebar-bg);border-radius:30px;border:2px solid #e2e8f0;border:2px solid var(--base-300);margin:60px auto}.app.phone:not(.dark-mode) .view:after,.app.phone:not(.dark-mode) .view:before{opacity:.6}.app.phone .view:before{bottom:20px;border:2px solid #cbd5e0;border:2px solid var(--base-400);width:40px;border-radius:50%;height:40px}.app.phone .view:after,.app.phone .view:before{position:absolute;left:50%;transform:translateX(-50%);content:""}.app.phone .view:after{top:23px;width:100px;height:16px;border-radius:40px;border:2px solid #cbd5e0;border:2px solid var(--base-400)}.app.tablet .view{margin:60px auto;width:868px;height:1164px;background-color:#edf2f7;background-color:var(--sidebar-bg);border-radius:30px}.app.tablet .view,.app.tablet .view iframe{border:2px solid #e2e8f0;border:2px solid var(--base-300)}.app.tablet .view iframe{height:1024px;width:768px;margin:50px auto 0}.app.tablet .view:before{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);border:2px solid #cbd5e0;border:2px solid var(--base-400);content:"";width:50px;border-radius:50%;height:50px}.markup{display:none}.copy-the-block{border:1px solid hsla(0,0%,100%,.4);margin-left:auto;padding:0 12px;border-radius:20px;margin-right:14px;display:flex;font-weight:600;align-items:center;color:#fff;height:32px;overflow:hidden;position:relative;justify-content:center;width:130px;text-align:center;font-size:13px;transition:.3s}.copy-the-block:hover{background-color:hsla(0,0%,100%,.12)}.copy-the-block.is-copied{background-color:#fff;color:#333;-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-duration:.16s;animation-duration:.16s;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes pulse{to{box-shadow:0 0 0 10px hsla(0,0%,100%,.1)}}@keyframes pulse{to{box-shadow:0 0 0 10px hsla(0,0%,100%,.1)}}.copy-the-block>svg{width:16px;flex-shrink:0;margin-right:6px}.knyttneve{position:fixed;bottom:20px;right:20px;color:#fff;border-radius:20px;height:32px;width:210px;font-size:13px;text-align:center;overflow:hidden;font-weight:500}.knyttneve span{position:absolute;top:0;left:0;height:100%;width:100%;text-align:center;display:flex;align-items:center;justify-content:center;transition:.3s}.id{transform:translateY(-100%)}.knyttneve:hover .id{transform:none}.follow svg{width:14px;margin-right:8px;height:14px}.knyttneve:hover .follow{transform:translateY(100%)}.copy-textarea{position:absolute;right:-9999990px;top:-999999999px;opacity:0}.codes{float:right;display:none;width:100%;transition:.3s}.app.has-sidebar .codes{width:calc(100% - 160px)}.dark-mode .codes pre,.dark-mode .view.show-code{background-color:#1a202c!important}.codes pre,.view.show-code{background-color:#fff!important}.codes pre{padding:20px!important;font-size:13.6px;line-height:1.8}.react-syntax-highlighter-line-number{opacity:.2;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:12px}code,pre{font-family:Space Mono,monospace;font-feature-settings:"calt" off;font-variant-ligatures:no-contextual}.view.show-code iframe{display:none}.view.show-code .codes{display:block} +/*# sourceMappingURL=main.0c1f9826.chunk.css.map */ \ No newline at end of file diff --git a/build/static/css/main.0c1f9826.chunk.css.map b/build/static/css/main.0c1f9826.chunk.css.map new file mode 100644 index 0000000..0cd5915 --- /dev/null +++ b/build/static/css/main.0c1f9826.chunk.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["main.0c1f9826.chunk.css","index.css"],"names":[],"mappings":"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yBACE,GACE,wCACF,CACF,CAJA,iBACE,GACE,wCACF,CACF,CAEA,oBACE,UAAW,CACX,aAAc,CACd,gBACF,CAEA,WACE,cAAe,CACf,WAAY,CACZ,UAAW,CACX,UAAW,CACX,kBAAmB,CACnB,WAAY,CACZ,WAAY,CACZ,cAAe,CACf,iBAAkB,CAClB,eAAgB,CAChB,eACF,CAEA,gBACE,iBAAkB,CAClB,KAAM,CACN,MAAO,CACP,WAAY,CACZ,UAAW,CACX,iBAAkB,CAClB,YAAa,CACb,kBAAmB,CACnB,sBAAuB,CACvB,cACF,CAEA,IACE,2BACF,CAEA,qBACE,cACF,CAEA,YACE,UAAW,CACX,gBAAiB,CACjB,WACF,CAEA,yBACE,0BACF,CAEA,eACE,iBAAkB,CAClB,gBAAiB,CACjB,gBAAiB,CACjB,SACF,CAEA,OACE,WAAY,CACZ,YAAa,CACb,UAAW,CACX,cAEF,CAEA,wBACE,wBACF,CAEA,iDACE,kCACF,CAEA,2BACE,+BACF,CAEA,WACE,sBAAwB,CACxB,gBAAiB,CACjB,eACF,CAEA,sCACE,UAAY,CACZ,mBAAoB,CACpB,wBAAiB,CAAjB,qBAAiB,CAAjB,oBAAiB,CAAjB,gBAAiB,CACjB,cACF,CAEA,SACE,gCAAmC,CACnC,gCAAqC,CAArC,oCACF,CAEA,uBACE,YACF,CAEA,uBACE,aACF","file":"main.0c1f9826.chunk.css","sourcesContent":["@import url(https://fonts.googleapis.com/css?family=Space+Mono&display=swap);\n:root {\n --base-500: #A0AEC0;\n --base-200: #E2E8F0;\n --base-300: #E2E8F0;\n --base-400: #CBD5E0;\n --main-500: #667EEA;\n --main-400: #7F9CF5;\n --main-200: #c3dafe;\n --main-100: #EBF4FF;\n --solid: #FFF;\n --solid-900: #4a5568;\n --sidebar-bg: #edf2f7;\n --sidebar-color: #4a5568;\n --shadow: 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n --shadow-active: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n --opener: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E\");\n --opener-active: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E\");\n}\n\n.dark-mode {\n --base-500: #718096;\n --base-200: #2d3748;\n --base-300: #4a5568;\n --base-400: #4a5568;\n --main-500: #667eea;\n --main-200: #4a5568;\n --main-100: #2d3648;\n --solid: #1a202c;\n --solid-900: #d1dcec;\n --sidebar-bg: #2d3648;\n --sidebar-color: #fff;\n --shadow: 0 10px 15px -3px rgb(26, 32, 45), 0 4px 6px -2px rgb(48, 58, 84);\n --shadow-active: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -2px rgb(76, 82, 90);\n}\n\n.red:not(.dark-mode) {\n --main-200: #fed7d7;\n --main-100: #fed7d7;\n}\n\n.red {\n --main-500: #f56565;\n --main-400: #fc8181;\n}\n\n.orange {\n --main-500: #ed8936;\n --main-400: #f6ad55;\n}\n\n.orange:not(.dark-mode) {\n --main-200: #feebc8;\n --main-100: #fffaf0;\n}\n\n.green {\n --main-500: #48bb78;\n --main-400: #68d391;\n}\n\n.green:not(.dark-mode) {\n --main-200: #c6f6d5;\n --main-100: #c6f6d5;\n}\n\n.teal {\n --main-500: #38b2ac;\n --main-400: #4fd1c5;\n}\n\n.teal:not(.dark-mode) {\n --main-200: #b2f5ea;\n --main-100: #e6fffa;\n}\n\n.blue {\n --main-500: #4299e1;\n --main-400: #63b3ed;\n}\n\n.blue:not(.dark-mode) {\n --main-200: #bee3f8;\n --main-100: #ebf8ff;\n}\n\n.purple {\n --main-500: #9f7aea;\n --main-400: #b794f4;\n}\n\n.purple:not(.dark-mode) {\n --main-200: #e9d8fd;\n --main-100: #faf5ff;\n}\n\n.pink {\n --main-500: #ed64a6;\n --main-400: #f687b3;\n}\n\n.pink:not(.dark-mode) {\n --main-200: #fed7e2;\n --main-100: #fff5f7;\n}\n\nbutton {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\nbutton, button:focus {\n outline: 0;\n}\n\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow: hidden;\n}\n\niframe {\n width: 100%;\n height: 100%;\n border: 0;\n background-color: #FFF;\n background-color: var(--solid);\n}\n\n.app {\n height: 100vh;\n}\n\n.app.dark-mode {\n background-color: #1a202c;\n}\n\n.main {\n height: calc(100vh - 64px);\n overflow: auto;\n transition: .3s;\n}\n::-webkit-scrollbar-thumb,\n::-webkit-scrollbar-track,\n::-webkit-scrollbar {\n display: none;\n}\n\n.sidebar {\n height: 100vh;\n width: 160px;\n z-index: 1;\n position: fixed;\n overflow: auto;\n left: 0;\n transform: translateX(-100%);\n padding: 20px;\n top: 0;\n background-color: #edf2f7;\n background-color: var(--sidebar-bg);\n display: flex;\n flex-direction: column;\n align-items: center;\n transition: transform .3s; \n}\n \n.block-category {\n margin-bottom: 10px;\n color: #4a5568;\n color: var(--sidebar-color);\n font-size: 13px;\n text-transform: uppercase;\n font-weight: 600;\n margin-bottom: 10px;\n}\n\n.block-item {\n padding: 0;\n border: 0;\n border-radius: 4px;\n box-shadow: 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n box-shadow: var(--shadow);\n overflow: hidden;\n\n color: #667EEA;\n\n color: var(--main-500);\n}\n\n.block-item.is-active {\n background-color: #667EEA;\n background-color: var(--main-500);\n box-shadow: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n box-shadow: var(--shadow-active);\n}\n\n.block-item.is-active > svg {\n opacity: .8;\n}\n\n.block-item + .block-item { margin-top: 20px; }\n.blocks + .blocks { margin-top: 30px; }\nsvg { width: 100%; }\n\n.app.has-sidebar .toolbar {\n padding: 16px 16px 16px 176px;\n}\n\n.toolbar {\n background-color: #667EEA;\n background-color: var(--main-500);\n transition: padding .3s;\n padding: 0 16px;\n height: 64px;\n display: flex;\n align-items: center;\n}\n\n.app.has-sidebar .sidebar {\n transform: translateX(0);\n}\n\n.switcher {\n display: flex;\n padding: 0 10px;\n height: 32px;\n border-radius: 20px;\n background-color: #fff;\n align-items: center;\n margin-right: 16px;\n}\n\n.theme-button {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n}\n\n.theme-button.is-active {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E\"); background-size: 10px;\n content: \"\";\n background-repeat: no-repeat;\n background-size: 14px;\n background-position: center;\n}\n\n.theme-button + .theme-button {\n margin-left: 5px;\n}\n\n.opener {\n color: #fff;\n display: flex;\n align-items: center;\n font-weight: 600;\n position: relative;\n}\n\n.opener::before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E\");\n background-image: var(--opener);\n display: inline-block;\n width: 18px;\n height: 18px;\n content: \"\";\n background-size: cover;\n background-repeat: no-repeat;\n margin-right: 4px;\n}\n\n.app.has-sidebar .opener::before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E\");\n background-image: var(--opener-active);\n}\n\n.mode {\n background-color: rgba(255, 255, 255, 0.192);\n border-radius: 30px;\n width: 58px;\n position: relative;\n height: 32px;\n margin-left: 16px;\n}\n\n.mode::before {\n width: 32px;\n height: 100%;\n content: \"\";\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2.4' fill='white' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E\"); background-size: cover;\n left: 0;\n position: absolute;\n top: 0;\n background-repeat: no-repeat;\n background-size: 50%;\n transition: .3s;\n background-position: center;\n}\n\n.mode::after {\n width: 20px;\n height: 20px;\n position: absolute;\n right: 6px;\n top: 6px;\n background-color: #667EEA;\n background-color: var(--main-500);\n content: \"\";\n border-radius: 50%;\n transition: transform .3s;\n}\n\n.app.dark-mode .mode { background-color: rgba(0, 0, 0, 0.171); }\n.app.dark-mode .mode::after { transform: translateX(-24px); }\n.app.dark-mode .mode::before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='white' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E\");\n transform: translateX(26px);\n}\n\n.device {\n color: #fff;\n opacity: 0.3;\n transition: .3s;\n}\n\n.device.is-active {\n opacity: 1;\n}\n\n.device + .device {\n margin-left: 8px;\n}\n\n.view {\n position: relative;\n}\n\n.app.desktop .view {\n height: 100%;\n}\n\n.device > svg {\n width: 24px;\n}\n\n.app.phone .view iframe {\n height: 736px;\n width: 414px;\n margin: 60px auto 0;\n border: 2px solid #E2E8F0;\n border: 2px solid var(--base-300);\n}\n\n.app.phone .view {\n width: 450px;\n height: 880px;\n background-color: #edf2f7;\n background-color: var(--sidebar-bg);\n border-radius: 30px;\n border: 2px solid #E2E8F0;\n border: 2px solid var(--base-300);\n margin: 60px auto;\n}\n\n.app.phone:not(.dark-mode) .view::before,\n.app.phone:not(.dark-mode) .view::after {\n opacity: .6;\n}\n\n.app.phone .view::before {\n position: absolute;\n left: 50%;\n bottom: 20px;\n transform: translateX(-50%);\n border: 2px solid #CBD5E0;\n border: 2px solid var(--base-400);\n content: \"\";\n width: 40px;\n border-radius: 50%;\n height: 40px;\n}\n\n.app.phone .view::after {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 23px;\n width: 100px;\n height: 16px;\n border-radius: 40px;;\n border: 2px solid #CBD5E0;;\n border: 2px solid var(--base-400);\n}\n\n.app.tablet .view {\n margin: 60px auto;\n width: 868px;\n height: 1164px;\n background-color: #edf2f7;\n background-color: var(--sidebar-bg);\n border-radius: 30px;\n border: 2px solid #E2E8F0;\n border: 2px solid var(--base-300);\n}\n\n.app.tablet .view iframe {\n height: 1024px;\n width: 768px;\n margin: 50px auto 0;\n border: 2px solid #E2E8F0;\n border: 2px solid var(--base-300);\n}\n\n.app.tablet .view::before {\n position: absolute;\n left: 50%;\n bottom: 20px;\n transform: translateX(-50%);\n border: 2px solid #CBD5E0;\n border: 2px solid var(--base-400);\n content: \"\";\n width: 50px;\n border-radius: 50%;\n height: 50px;\n}\n\n.markup {\n display: none;\n}\n\n.copy-the-block {\n border: 1px solid rgba(255, 255, 255, 0.4);\n margin-left: auto;\n padding: 0 12px;\n border-radius: 20px;\n margin-right: 14px;\n display: flex;\n font-weight: 600;\n align-items: center;\n color: #fff;\n height: 32px;\n overflow: hidden;\n position: relative;\n justify-content: center;\n width: 130px;\n text-align: center;\n font-size: 13px;\n transition: .3s;\n}\n\n.copy-the-block:hover {\n background-color: rgba(255, 255, 255, .12);\n}\n\n.copy-the-block.is-copied {\n background-color: #fff;\n color: #333;\n -webkit-animation-name: pulse;\n animation-name: pulse;\n -webkit-animation-duration: .16s;\n animation-duration: .16s;\n -webkit-animation-direction: alternate;\n animation-direction: alternate;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n}\n\n@-webkit-keyframes pulse{\n 100% {\n box-shadow: 0 0 0 10px rgba(255, 255, 255, .1);\n }\n}\n\n@keyframes pulse{\n 100% {\n box-shadow: 0 0 0 10px rgba(255, 255, 255, .1);\n }\n}\n\n.copy-the-block > svg {\n width: 16px;\n flex-shrink: 0;\n margin-right: 6px;\n}\n\n.knyttneve {\n position: fixed;\n bottom: 20px;\n right: 20px;\n color: #fff;\n border-radius: 20px;\n height: 32px;\n width: 210px;\n font-size: 13px;\n text-align: center;\n overflow: hidden;\n font-weight: 500;\n}\n\n.knyttneve span {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: .3s;\n}\n\n.id {\n transform: translateY(-100%);\n}\n\n.knyttneve:hover .id {\n transform: none;\n}\n\n.follow svg {\n width: 14px;\n margin-right: 8px;\n height: 14px;\n}\n\n.knyttneve:hover .follow {\n transform: translateY(100%);\n}\n\n.copy-textarea {\n position: absolute;\n right: -9999990px;\n top: -999999999px;\n opacity: 0;\n}\n\n.codes {\n float: right;\n display: none;\n width: 100%;\n transition: .3s;\n\n}\n\n.app.has-sidebar .codes {\n width: calc(100% - 160px);\n}\n\n.dark-mode .view.show-code, .dark-mode .codes pre {\n background-color: #1a202c !important;\n}\n\n.view.show-code, .codes pre {\n background-color: #fff !important;\n}\n\n.codes pre {\n padding: 20px !important;\n font-size: 13.6px;\n line-height: 1.8;\n}\n\n.react-syntax-highlighter-line-number {\n opacity: 0.2;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n font-size: 12px;\n}\n\npre, code {\n font-family:'Space Mono', monospace;\n font-feature-settings: \"calt\" off;\n font-variant-ligatures: no-contextual;\n}\n\n.view.show-code iframe {\n display: none;\n}\n\n.view.show-code .codes {\n display: block;\n}\n\n","@import url('https://fonts.googleapis.com/css?family=Space+Mono&display=swap');\n\n:root {\n --base-500: #A0AEC0;\n --base-200: #E2E8F0;\n --base-300: #E2E8F0;\n --base-400: #CBD5E0;\n --main-500: #667EEA;\n --main-400: #7F9CF5;\n --main-200: #c3dafe;\n --main-100: #EBF4FF;\n --solid: #FFF;\n --solid-900: #4a5568;\n --sidebar-bg: #edf2f7;\n --sidebar-color: #4a5568;\n --shadow: 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n --shadow-active: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n --opener: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E\");\n --opener-active: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E\");\n}\n\n.dark-mode {\n --base-500: #718096;\n --base-200: #2d3748;\n --base-300: #4a5568;\n --base-400: #4a5568;\n --main-500: #667eea;\n --main-200: #4a5568;\n --main-100: #2d3648;\n --solid: #1a202c;\n --solid-900: #d1dcec;\n --sidebar-bg: #2d3648;\n --sidebar-color: #fff;\n --shadow: 0 10px 15px -3px rgb(26, 32, 45), 0 4px 6px -2px rgb(48, 58, 84);\n --shadow-active: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -2px rgb(76, 82, 90);\n}\n\n.red:not(.dark-mode) {\n --main-200: #fed7d7;\n --main-100: #fed7d7;\n}\n\n.red {\n --main-500: #f56565;\n --main-400: #fc8181;\n}\n\n.orange {\n --main-500: #ed8936;\n --main-400: #f6ad55;\n}\n\n.orange:not(.dark-mode) {\n --main-200: #feebc8;\n --main-100: #fffaf0;\n}\n\n.green {\n --main-500: #48bb78;\n --main-400: #68d391;\n}\n\n.green:not(.dark-mode) {\n --main-200: #c6f6d5;\n --main-100: #c6f6d5;\n}\n\n.teal {\n --main-500: #38b2ac;\n --main-400: #4fd1c5;\n}\n\n.teal:not(.dark-mode) {\n --main-200: #b2f5ea;\n --main-100: #e6fffa;\n}\n\n.blue {\n --main-500: #4299e1;\n --main-400: #63b3ed;\n}\n\n.blue:not(.dark-mode) {\n --main-200: #bee3f8;\n --main-100: #ebf8ff;\n}\n\n.purple {\n --main-500: #9f7aea;\n --main-400: #b794f4;\n}\n\n.purple:not(.dark-mode) {\n --main-200: #e9d8fd;\n --main-100: #faf5ff;\n}\n\n.pink {\n --main-500: #ed64a6;\n --main-400: #f687b3;\n}\n\n.pink:not(.dark-mode) {\n --main-200: #fed7e2;\n --main-100: #fff5f7;\n}\n\nbutton {\n user-select: none;\n}\n\nbutton, button:focus {\n outline: 0;\n}\n\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow: hidden;\n}\n\niframe {\n width: 100%;\n height: 100%;\n border: 0;\n background-color: var(--solid);\n}\n\n.app {\n height: 100vh;\n}\n\n.app.dark-mode {\n background-color: #1a202c;\n}\n\n.main {\n height: calc(100vh - 64px);\n overflow: auto;\n transition: .3s;\n}\n::-webkit-scrollbar-thumb,\n::-webkit-scrollbar-track,\n::-webkit-scrollbar {\n display: none;\n}\n\n.sidebar {\n height: 100vh;\n width: 160px;\n z-index: 1;\n position: fixed;\n overflow: auto;\n left: 0;\n transform: translateX(-100%);\n padding: 20px;\n top: 0;\n background-color: var(--sidebar-bg);\n display: flex;\n flex-direction: column;\n align-items: center;\n transition: transform .3s; \n}\n \n.block-category {\n margin-bottom: 10px;\n color: var(--sidebar-color);\n font-size: 13px;\n text-transform: uppercase;\n font-weight: 600;\n margin-bottom: 10px;\n}\n\n.block-item {\n padding: 0;\n border: 0;\n border-radius: 4px;\n box-shadow: var(--shadow);\n overflow: hidden;\n\n color: var(--main-500);\n}\n\n.block-item.is-active {\n background-color: var(--main-500);\n box-shadow: var(--shadow-active);\n}\n\n.block-item.is-active > svg {\n opacity: .8;\n}\n\n.block-item + .block-item { margin-top: 20px; }\n.blocks + .blocks { margin-top: 30px; }\nsvg { width: 100%; }\n\n.app.has-sidebar .toolbar {\n padding: 16px 16px 16px 176px;\n}\n\n.toolbar {\n background-color: var(--main-500);\n transition: padding .3s;\n padding: 0 16px;\n height: 64px;\n display: flex;\n align-items: center;\n}\n\n.app.has-sidebar .sidebar {\n transform: translateX(0);\n}\n\n.switcher {\n display: flex;\n padding: 0 10px;\n height: 32px;\n border-radius: 20px;\n background-color: #fff;\n align-items: center;\n margin-right: 16px;\n}\n\n.theme-button {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n}\n\n.theme-button.is-active {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E\"); background-size: 10px;\n content: \"\";\n background-repeat: no-repeat;\n background-size: 14px;\n background-position: center;\n}\n\n.theme-button + .theme-button {\n margin-left: 5px;\n}\n\n.opener {\n color: #fff;\n display: flex;\n align-items: center;\n font-weight: 600;\n position: relative;\n}\n\n.opener::before {\n background-image: var(--opener);\n display: inline-block;\n width: 18px;\n height: 18px;\n content: \"\";\n background-size: cover;\n background-repeat: no-repeat;\n margin-right: 4px;\n}\n\n.app.has-sidebar .opener::before {\n background-image: var(--opener-active);\n}\n\n.mode {\n background-color: rgba(255, 255, 255, 0.192);\n border-radius: 30px;\n width: 58px;\n position: relative;\n height: 32px;\n margin-left: 16px;\n}\n\n.mode::before {\n width: 32px;\n height: 100%;\n content: \"\";\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2.4' fill='white' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E\"); background-size: cover;\n left: 0;\n position: absolute;\n top: 0;\n background-repeat: no-repeat;\n background-size: 50%;\n transition: .3s;\n background-position: center;\n}\n\n.mode::after {\n width: 20px;\n height: 20px;\n position: absolute;\n right: 6px;\n top: 6px;\n background-color: var(--main-500);\n content: \"\";\n border-radius: 50%;\n transition: transform .3s;\n}\n\n.app.dark-mode .mode { background-color: rgba(0, 0, 0, 0.171); }\n.app.dark-mode .mode::after { transform: translateX(-24px); }\n.app.dark-mode .mode::before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='white' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E\");\n transform: translateX(26px);\n}\n\n.device {\n color: #fff;\n opacity: 0.3;\n transition: .3s;\n}\n\n.device.is-active {\n opacity: 1;\n}\n\n.device + .device {\n margin-left: 8px;\n}\n\n.view {\n position: relative;\n}\n\n.app.desktop .view {\n height: 100%;\n}\n\n.device > svg {\n width: 24px;\n}\n\n.app.phone .view iframe {\n height: 736px;\n width: 414px;\n margin: 60px auto 0;\n border: 2px solid var(--base-300);\n}\n\n.app.phone .view {\n width: 450px;\n height: 880px;\n background-color: var(--sidebar-bg);\n border-radius: 30px;\n border: 2px solid var(--base-300);\n margin: 60px auto;\n}\n\n.app.phone:not(.dark-mode) .view::before,\n.app.phone:not(.dark-mode) .view::after {\n opacity: .6;\n}\n\n.app.phone .view::before {\n position: absolute;\n left: 50%;\n bottom: 20px;\n transform: translateX(-50%);\n border: 2px solid var(--base-400);\n content: \"\";\n width: 40px;\n border-radius: 50%;\n height: 40px;\n}\n\n.app.phone .view::after {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 23px;\n width: 100px;\n height: 16px;\n border-radius: 40px;;\n border: 2px solid var(--base-400);\n}\n\n.app.tablet .view {\n margin: 60px auto;\n width: 868px;\n height: 1164px;\n background-color: var(--sidebar-bg);\n border-radius: 30px;\n border: 2px solid var(--base-300);\n}\n\n.app.tablet .view iframe {\n height: 1024px;\n width: 768px;\n margin: 50px auto 0;\n border: 2px solid var(--base-300);\n}\n\n.app.tablet .view::before {\n position: absolute;\n left: 50%;\n bottom: 20px;\n transform: translateX(-50%);\n border: 2px solid var(--base-400);\n content: \"\";\n width: 50px;\n border-radius: 50%;\n height: 50px;\n}\n\n.markup {\n display: none;\n}\n\n.copy-the-block {\n border: 1px solid rgba(255, 255, 255, 0.4);\n margin-left: auto;\n padding: 0 12px;\n border-radius: 20px;\n margin-right: 14px;\n display: flex;\n font-weight: 600;\n align-items: center;\n color: #fff;\n height: 32px;\n overflow: hidden;\n position: relative;\n justify-content: center;\n width: 130px;\n text-align: center;\n font-size: 13px;\n transition: .3s;\n}\n\n.copy-the-block:hover {\n background-color: rgba(255, 255, 255, .12);\n}\n\n.copy-the-block.is-copied {\n background-color: #fff;\n color: #333;\n animation-name: pulse;\n animation-duration: .16s;\n animation-direction: alternate;\n animation-iteration-count: infinite;\n}\n\n@keyframes pulse{\n 100% {\n box-shadow: 0 0 0 10px rgba(255, 255, 255, .1);\n }\n}\n\n.copy-the-block > svg {\n width: 16px;\n flex-shrink: 0;\n margin-right: 6px;\n}\n\n.knyttneve {\n position: fixed;\n bottom: 20px;\n right: 20px;\n color: #fff;\n border-radius: 20px;\n height: 32px;\n width: 210px;\n font-size: 13px;\n text-align: center;\n overflow: hidden;\n font-weight: 500;\n}\n\n.knyttneve span {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: .3s;\n}\n\n.id {\n transform: translateY(-100%);\n}\n\n.knyttneve:hover .id {\n transform: none;\n}\n\n.follow svg {\n width: 14px;\n margin-right: 8px;\n height: 14px;\n}\n\n.knyttneve:hover .follow {\n transform: translateY(100%);\n}\n\n.copy-textarea {\n position: absolute;\n right: -9999990px;\n top: -999999999px;\n opacity: 0;\n}\n\n.codes {\n float: right;\n display: none;\n width: 100%;\n transition: .3s;\n\n}\n\n.app.has-sidebar .codes {\n width: calc(100% - 160px);\n}\n\n.dark-mode .view.show-code, .dark-mode .codes pre {\n background-color: #1a202c !important;\n}\n\n.view.show-code, .codes pre {\n background-color: #fff !important;\n}\n\n.codes pre {\n padding: 20px !important;\n font-size: 13.6px;\n line-height: 1.8;\n}\n\n.react-syntax-highlighter-line-number {\n opacity: 0.2;\n pointer-events: none;\n user-select: none;\n font-size: 12px;\n}\n\npre, code {\n font-family:'Space Mono', monospace;\n font-variant-ligatures: no-contextual;\n}\n\n.view.show-code iframe {\n display: none;\n}\n\n.view.show-code .codes {\n display: block;\n}\n"]} \ No newline at end of file diff --git a/build/static/js/2.4f9f66ff.chunk.js b/build/static/js/2.4f9f66ff.chunk.js new file mode 100644 index 0000000..170ad04 --- /dev/null +++ b/build/static/js/2.4f9f66ff.chunk.js @@ -0,0 +1,3 @@ +/*! For license information please see 2.4f9f66ff.chunk.js.LICENSE */ +(this.webpackJsonptailblocks=this.webpackJsonptailblocks||[]).push([[2],[function(e,t,n){"use strict";e.exports=n(17)},function(e,t,n){"use strict";function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}n.d(t,"a",(function(){return a}))},function(e,t){function n(){return e.exports=n=Object.assign||function(e){for(var t=1;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}},function(e,t,n){"use strict";function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);nD.length&&D.push(e)}function w(e,t,n){return null==e?0:function e(t,n,a,r){var s=typeof t;"undefined"!==s&&"boolean"!==s||(t=null);var l=!1;if(null===t)l=!0;else switch(s){case"string":case"number":l=!0;break;case"object":switch(t.$$typeof){case i:case o:l=!0}}if(l)return a(r,t,""===n?"."+L(t,0):n),1;if(l=0,n=""===n?".":n+":",Array.isArray(t))for(var c=0;c