');--md-typeset-table--descending: url('data:image/svg+xml;charset=utf-8, ') }html{font-size:125%;height:100%;overflow-x:hidden}@media screen and (min-width:100em){html{font-size:137.5%}}@media screen and (min-width:125em){html{font-size:150%}}body{background-color:var(--md-default-bg-color);display:flex;flex-direction:column;font-size:.5rem;min-height:100%;position:relative;width:100%}@media print{body{display:block}}.md-grid{margin-left:auto;margin-right:auto;max-width:61rem}.md-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@page{margin:25mm}:root{--md-clipboard-icon: url('data:image/svg+xml;charset=utf-8, ') }.md-footer{background-color:var(--md-footer-bg-color);color:var(--md-footer-fg-color)}@media print{.md-footer{display:none}}.md-footer__inner{overflow:auto;padding:.2rem}.md-footer__link{display:flex;outline-color:var(--md-accent-fg-color);padding-bottom:.4rem;padding-top:1.4rem;transition:opacity .25s}@media screen and (min-width:45em){.md-footer__link{width:50%}}.md-footer__link:focus,.md-footer__link:hover{opacity:.7}.md-footer__link--prev{float:left}@media screen and (max-width:44.9375em){.md-footer__link--prev{width:25%}.md-footer__link--prev .md-footer__title{display:none}}.md-footer__link--next{float:right;text-align:right}@media screen and (max-width:44.9375em){.md-footer__link--next{width:75%}}.md-footer__title{flex-grow:1;font-size:.9rem;line-height:2.4rem;max-width:calc(100% - 2.4rem);padding:0 1rem;position:relative}.md-footer__button{margin:.2rem;padding:.4rem}.md-footer__direction{font-size:.64rem;left:0;margin-top:-1rem;opacity:.7;padding:0 1rem;position:absolute;right:0}:root{--md-nav-icon--prev: url('data:image/svg+xml;charset=utf-8, ');--md-nav-icon--next: url('data:image/svg+xml;charset=utf-8, ');--md-toc-icon: url('data:image/svg+xml;charset=utf-8, ') }*{-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-touch-callout:none;box-sizing:border-box}body:not(.ready){overflow:hidden}body:not(.ready) .app-nav,body:not(.ready)>nav{display:none}.progress{background-color:var(--theme-color,#0074d9);height:2px;left:0;position:fixed;right:0;top:0;transition:width .2s,opacity .4s;width:0;z-index:999999}.search a:hover{color:var(--theme-color,#0074d9)}body,html{height:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:15px;letter-spacing:0;margin:0;overflow-x:hidden}img{max-width:100%}.app-nav{margin:25px 60px 0 0;position:absolute;right:0;text-align:right;z-index:10}.app-nav.no-badge{margin-right:25px}.app-nav p{margin:0}.app-nav>a{margin:0 1rem;padding:5px 0}.app-nav li,.app-nav ul{display:inline-block;list-style:none;margin:0}.app-nav a{color:inherit;font-size:16px;text-decoration:none;transition:color .3s}.app-nav a:hover{color:var(--theme-color,#0074d9)}.app-nav li{display:inline-block;margin:0 1rem;padding:5px 0;position:relative}.app-nav li ul{background-color:#fff;border:1px solid;border-color:#ddd #ddd #ccc;border-radius:4px;box-sizing:border-box;display:none;max-height:calc(100vh - 61px);overflow-y:auto;padding:10px 0;position:absolute;right:-15px;text-align:left;top:100%;white-space:nowrap}.app-nav li ul li{display:block;font-size:14px;line-height:1rem;margin:8px 14px;white-space:nowrap}.app-nav li ul a{display:block;font-size:inherit;margin:0;padding:0}.app-nav li:hover ul{display:block}main{display:block;position:relative;width:100vw;height:100%;z-index:0}main.hidden{display:none}.anchor{display:inline-block;text-decoration:none;transition:all .3s}.anchor span{color:#34495e}.anchor:hover{text-decoration:underline}.sidebar{border-right:1px solid rgba(0,0,0,.07);overflow-y:auto;padding:40px 0 0;position:absolute;top:0;bottom:0;left:0;transition:transform .25s ease-out;width:12rem;z-index:20}.sidebar>h1{margin:0 auto 1rem;font-size:1.5rem;font-weight:300;text-align:center}.sidebar>h1 a{color:inherit;text-decoration:none}.sidebar>h1 .app-nav{display:block;position:static}.sidebar .sidebar-nav{line-height:2em;padding-bottom:40px}.sidebar ul{margin:0 0 0 15px;padding:0}.sidebar li>p{font-weight:700;margin:0}.sidebar ul,.sidebar ul li{list-style:none}.sidebar ul li a{border-bottom:none;display:block}.sidebar ul li ul{padding-left:20px}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}.sidebar:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53.3%,.4)}.sidebar:hover::-webkit-scrollbar-track{background:hsla(0,0%,53.3%,.1)}.content{padding-top:0;position:absolute;top:0;right:0;bottom:0;left:12rem;transition:left .25s ease}.markdown-section{margin:0 auto;max-width:800px;padding:30px 15px 40px;position:relative}.markdown-section>*{box-sizing:border-box;font-size:inherit}.markdown-section>:first-child{margin-top:0!important}@media print{.app-nav,.sidebar{display:none}}@media screen and (max-width:768px){.sidebar{position:fixed}.app-nav{margin-top:16px}.app-nav li ul{top:30px}main{height:auto;overflow-x:hidden}.sidebar{left:-16rem;transition:transform .25s ease-out}.content{left:0;max-width:100vw;position:static;padding-top:20px;transition:transform .25s ease}.app-nav{transition:transform .25s ease-out}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}section.cover{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:cover;height:100vh;display:none}section.cover .cover-main{flex:1;margin:0;text-align:center;z-index:1}section.cover a{color:inherit}section.cover a,section.cover a:hover{text-decoration:none}section.cover p{line-height:1.5rem;margin:1em 0}section.cover h1{color:inherit;font-size:2.5rem;font-weight:300;margin:.625rem 0 2.5rem;position:relative;text-align:center}section.cover h1 a{display:block}section.cover ul{line-height:1.8;list-style-type:none;margin:1em auto;max-width:500px;padding:0}section.cover .cover-main>p:last-child a{border-radius:2rem;border:1px solid var(--theme-color,#0074d9);box-sizing:border-box;color:var(--theme-color,#0074d9);display:inline-block;font-size:1.05rem;letter-spacing:.1rem;margin:.5rem 1rem;padding:.75em 2rem;text-decoration:none;transition:all .15s ease}section.cover .cover-main>p:last-child a:last-child{background-color:var(--theme-color,#0074d9);color:#fff}section.cover .cover-main>p:last-child a:last-child:hover{color:inherit;opacity:.8}section.cover .cover-main>p:last-child a:hover{color:inherit}.sidebar{color:#364149;background-color:#fff}.sidebar a{color:#666;text-decoration:none}.sidebar li{list-style:none;margin:0;padding:.2em 0}.sidebar ul li ul{padding:0}.markdown-section h1,.markdown-section h2,.markdown-section strong{color:#333;font-weight:400}.markdown-section strong{color:#333;font-weight:600}.markdown-section a{color:var(--theme-color,#0074d9)}.markdown-section p,.markdown-section ul{line-height:1.6rem;margin:0 0 1em;word-spacing:.05rem}.markdown-section h1{font-size:2rem;font-weight:500;margin:0 0 1rem}.markdown-section h2{font-size:1.8rem;font-weight:400;margin:0 0 1rem;padding:1rem 0 0}.markdown-section p,.markdown-section ul{margin:1.2em 0}.markdown-section ul{padding-left:1.5rem}.markdown-section li{line-height:1.5;margin:0}.topbar{min-height:50px;border-bottom:1px solid #e0e0e0;padding:15px 40px}.toggle-sidebar-icon{margin-bottom:-1px;cursor:pointer;transform:rotate(180deg)}.icon-collapsed{transform:rotate(0)}img{max-width:100%;max-height:100%}video{max-width:100%;width:100%;max-height:100%}aside.sidebar{background:#f2f1ef;position:fixed;overflow:auto}aside.sidebar img{padding:20px;max-width:80%}.sidebar{padding-top:0}.search{margin-bottom:20px;padding:6px;border-bottom:1px solid #eee}.search .input-wrap{display:flex;align-items:center}.search input{outline:none;border:none;width:100%;padding:0 7px;line-height:36px;font-size:14px;border:1px solid transparent}.search input:focus{box-shadow:0 0 5px var(--theme-color, gray);border:1px solid var(--theme-color, gray)}.search input::-webkit-search-decoration,.search input::-webkit-search-cancel-button,.search input{-webkit-appearance:none;-moz-appearance:none;appearance:none}.search a{text-decoration:none;color:inherit}.search p{font-size:14px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.app-name-link{display:flex;justify-content:center}.search .clear-button{width:36px;text-align:right;display:none}.search .clear-button svg{transform:scale(.5)}.search h2{font-size:17px;margin:10px 0}.hidden{display:none}.cover-main{background:#FFFFFF;height:33vh;padding:3.5rem}.app-nav{display:none}.sidebar-collapsed{left:-16rem}section.content-collapsed{left:0rem}@media screen and (max-width:768px){.toggle-sidebar-icon{position:absolute;top:0px;transform:rotate(0)}.icon-collapsed{transform:rotate(180deg);left:17rem}.sidebar-collapsed{left:0rem}}.descriptionImage{max-width:100%;padding-top:40px;padding-bottom:40px;margin-top:40px;margin-bottom:40px}.carousel-section{position:relative;padding-top:40px;padding-bottom:40px;margin-top:40px;margin-bottom:40px}@media (max-width: 1360px){.carousel-container .holder,.carousel-container .swiper-pagination{margin-left:calc((100% - 20px * 2) * 2/12 - 6px)}}@media screen and (max-width: 90em){.carousel-image{left:50%;transform:translate(-50%)}}.carousel-container .holder{margin-left:65px;flex-basis:100%;padding-left:6px}.swiper-container{height:auto;margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.carousel-container .swiper-slide{width:auto;height:auto;margin-right:20px}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.article{display:block;position:relative;width:430px;height:160px;overflow:hidden;background-color:#f4f4f4;color:#fff;padding-top:320px;border-bottom:3px solid transparent;box-sizing:content-box;transition:all .3s ease}.carousel-image{display:block;width:auto;height:322.5px;max-width:none;position:absolute;top:0}.carousel-container .swiper-pagination{height:2px;width:115px;margin-left:70px}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-button-next{background-image:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Dhttp%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%20viewBox%3D0%200%2027%2044%3E%3Cpath%20d%3DM27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z%20fill%3D%23007aff%2F%3E%3C%2Fsvg%3E);position:absolute;right:10px;left:auto}.carousel-container .swiper-button-next{transform:translate(100%,-100%)}.carousel-container .swiper-button-prev{transform:translate(100%,100%)}.carousel-container [class*=swiper-button]{position:absolute;height:55px;width:55px;top:50%;left:-55px;background-image:none}.arrow-left:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 19l-7-7m0 0l7-7m-7 7h18' /%3E%3C/svg%3E")}.arrow-left,.arrow-right{cursor:pointer}.arrow-left:before,.arrow-right:before{position:absolute;content:"";width:20px;height:20px;top:30%;left:34%}.arrow-right:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 5l7 7m0 0l-7 7m7-7H3' /%3E%3C/svg%3E")}.carousel-container [class*=swiper-button]:after{border:2px solid grey;content:"";border-radius:50%;display:block;position:absolute;top:0;right:0;bottom:0;left:0;transform:rotate(0);transition:border-color .3s,transform .3s}.carousel-container .swiper-button-next:hover:after{border-color:#333;border-bottom-color:#fff;transform:rotate(45deg)}.carousel-container .swiper-button-prev:hover:after{border-color:#333;border-bottom-color:#fff;transform:rotate(-45deg)}.swiper-pagination-progressbar-fill{background-color:#333;position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.description{margin-top:4rem}.anchor span{color:#242424}.absolute{position:absolute}.relative{position:relative}.inline-block{display:inline-block}.flex{display:flex}.h-\[400px\]{height:400px}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.justify-center{justify-content:center}.object-cover{-o-object-fit:cover;object-fit:cover}.text-center{text-align:center}
Uploading custom code Custom code may be uploaded on project pages, and also article pages for HTML targets. Downloadable examples are available for each type and they both follow different rules.
Project pages For main pages, the entire page is replaced by the uploaded code. Descriptions can still be added, but your custom code will have to pull in the data for the descriptions. If this is not set up, the uploaded code will render at the Netlify url you deploy to.
Article pages Article pages will still render the shell they would without custom code, and the custom code is rendered as a React app in the main section part of the page. The custom React app will render below any descriptions, features, or content you have for the page. If you prefer for the React app to render at the top and control the content information, remove any descriptions, features, or content from the user admin.
Note: example apps are given and custom code can break. Please note the general format and think of it like a full width content section on a page.
React app inside shell example using Airtable:
link Prepare your project You will need to build your project and zip into a single .zip file to upload. Be sure you have a final version. For article pages - the .zip file should be the static folder. Omit the build folder with its contents including the index.html. Instead the app will inject onto the page generated by Motion Storyline. In addition, the React app must mount to the div with id set to "custom-app". For the upvote example you will need to update the mount id from "upvotes". For project pages- the .zip file folder will automatically be scanned for an index.html