-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmain.css
More file actions
27 lines (10 loc) · 13.3 KB
/
Copy pathmain.css
File metadata and controls
27 lines (10 loc) · 13.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@font-face{font-family:"Play Bold";src:url(fonts/Play-Bold.ttf)}@font-face{font-family:"Play Regular";src:url(fonts/Play-Regular.ttf)}*{font-family:"Play Regular";font-size:24px}h4,h5,h6{margin:1.67em 0}h1{font-size:64px}h2{font-size:36px}h3{font-size:24px}.block{width:90%;margin:0 auto}@media screen and (max-width: 968px){*{font-size:18px}h1{font-size:48px}h2{font-size:32px}h3{font-size:20px}}@media screen and (max-width: 768px){*{font-size:16px}h1{font-size:36px}h2{font-size:24px}h3{font-size:18px}}@media screen and (max-width: 740px){*{font-size:14px}h1{font-size:32px}h2{font-size:20px}h3{font-size:16px}}@media screen and (max-width: 600px){*{font-size:16px}h1{font-size:28px}h2{font-size:20px}h3{font-size:18px}}body{margin:0;padding:0}ul{padding-left:10px}ul li{list-style-type:none}table{margin:20px 0;border-spacing:0px;border-collapse:collapse}table *{text-align:left}table th,table td{padding:20px 30px 20px 10px;border:1px solid #cdcdcd}@media (max-width: 600px){table th,table td{padding:20px 5px 20px 5px;font-size:14px !important}}.list{margin:0;padding:0}.list_item{margin-bottom:20px}code{background:#f7f7f7;border-radius:10px;padding:20px 40px;display:block;font-family:monospace;word-wrap:break-word}.inline-code{padding:4px 8px;display:inline-block}pre{white-space:break-spaces}#page{display:flex;flex-direction:column;max-width:1920px;margin:0 auto;height:100%}#page #content{height:100%}a{color:#000000}a:hover{color:#0077ff}content-component{flex-grow:2}
#header{display:flex;align-items:center;height:79px}#header .divider{height:30px;width:1px;background-color:#000;margin-right:20px}#header .hidden-button{display:none}@media (max-width: 768px){#header .left-auto{margin-left:auto}}#header .header-block{display:flex;align-items:center}@media (min-width: 769px){#header .header-block-mobile{display:none}}#header .header-block-mobile{background-color:#fff;position:fixed;bottom:0;top:0;height:100vh;width:100vw;transition:left 0.25s ease;left:-100%}#header .active-link{color:#0077ff}@media (min-width: 601px){#header .header-block{padding:0 20px}#header .block{width:100%}}#header .menu-link{text-decoration:none}@media (max-width: 768px){#header .menu-link{font-size:24px}}#header .menu-item{display:flex;align-items:center}#header .social-media{margin-top:2px}#header .social-media path{transition:all 0.2s ease-in-out}#header .social-media:hover path{fill:gray}#header .github-link{margin-right:20px}#header .twitter-link{margin-right:0}#header .logo{width:225px;height:75px}#header .logo-image{width:100%;height:100%}#header .header-button{width:20px;height:20px;opacity:0;cursor:pointer;transition:opacity 0.25s ease;pointer-events:none;margin-left:auto}@media (min-width: 769px){#header .header-button{display:none}}#header .menu{display:flex;gap:30px;margin:0 0 0 auto;padding:0}@media (max-width: 768px){#header .menu{display:none}}#header .menu-mobile{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;margin:auto 0;gap:36px}#header .active-header{left:0 !important}#header .close{cursor:pointer;position:absolute;width:24px;height:24px;top:20px;right:20px}#header .close:before,#header .close:after{content:"";position:absolute;top:10px;width:24px;height:3px;background-color:#000;border-radius:2px}#header .close:before{transform:rotate(45deg)}#header .close:after{transform:rotate(-45deg)}#header .active-button{opacity:1 !important;pointer-events:all !important}@media screen and (max-width: 968px){#header .logo{width:180px;height:60px}}@media screen and (max-width: 600px){#header{height:55px}#header .logo{width:150px;height:50px}}
.footer{text-align:center;padding:7.5em 0;background-color:#dfdcdc}.footer .info{display:flex;flex-direction:column;gap:20px}@media (max-width: 768px){.footer{padding:5em 0}}
.main_content{height:100%;display:flex;flex-direction:column}.main_content .block{width:80%;max-width:80%}.main_content .subtitle{font-size:28px}@media (max-width: 768px){.main_content .subtitle{font-size:24px}}@media (max-width: 600px){.main_content .subtitle{font-size:20px}}.main_content .npm-code{background-color:#000;border-radius:10px;display:flex;align-items:center;color:#00f103;width:360px;margin:0 auto}@media (max-width: 768px){.main_content .npm-code{width:75%}}.main_content .introduction{padding:5rem 0 7.5rem}.main_content .introduction .main-title{margin:auto}@media (max-width: 768px){.main_content .introduction .main-title{margin-bottom:10px}}.main_content .introduction .second-block{display:flex;align-items:center;margin:auto}.main_content .introduction .subtitle{margin-top:40px}@media (max-width: 1280px){.main_content .introduction-content .main-title{max-width:800px}}@media (max-width: 768px){.main_content .introduction-content .introduction-img{height:200px}.main_content .introduction-content .subtitle{margin-top:20px}}@media (max-width: 768px){.main_content .introduction{padding:2rem 0 3.5rem}}.main_content .features{display:flex;gap:120px;align-items:center;justify-content:center}@media (max-width: 1280px){.main_content .features{flex-wrap:wrap;align-items:inherit;text-align:center;gap:60px}}.main_content .npm-subtitle{max-width:600px;margin-left:auto;margin-right:auto}.main_content .advantage-text{margin-top:30px;text-align:center}.main_content .feature{border-radius:20px}.main_content .feature-wrapper-img{height:150px;margin-bottom:40px}.main_content .feature-img{height:100%}.main_content .feature-title{font-size:36px}.main_content .feature-text{font-size:30px}.main_content .feature-text *{font-size:30px}@media (max-width: 1280px){.main_content .feature{max-width:800px}}@media (max-width: 768px){.main_content .feature-wrapper-img{height:125px;margin-bottom:20px}.main_content .feature-title{font-size:26px}.main_content .feature-text{font-size:20px}.main_content .feature-text *{font-size:20px}}@media (max-width: 600px){.main_content .feature-wrapper-img{margin-bottom:0px}.main_content .feature-title{font-size:24px}}@media (max-width: 414px){.main_content .feature-title{font-size:22px}}.main_content .content-block{margin-bottom:5rem}@media (max-width: 768px){.main_content .content-block{margin-bottom:3rem}}.main_content .typescript .block{background-color:#dfdcdc;border-radius:20px}.main_content .typescript-content{padding:40px 16px 40px;text-align:center}.main_content .typescript-image{margin:0 auto}@media (max-width: 600px){.main_content .typescript-content{padding:20px 8px 20px}.main_content .typescript-image{width:200px}}.main_content .center{text-align:center}.main_content .title{font-size:50px;margin:0 auto 80px auto;text-align:center}@media (max-width: 768px){.main_content .title{font-size:32px;margin-bottom:30px}}@media (max-width: 740px){.main_content .title{font-size:32px}}@media (max-width: 600px){.main_content .title{font-size:26px}}@media (max-width: 414px){.main_content .title{font-size:24px}}.main_content .display-block{display:grid;grid-template-columns:repeat(2, 1fr)}@media (max-width: 1280px){.main_content .display-block{display:flex;flex-direction:column-reverse;text-align:center}.main_content .display-block .second-block{margin-bottom:40px}}.main_content .documentation-button{display:flex}@media (max-width: 1280px){.main_content .documentation-button{justify-content:center}}.main_content .documentation-img{width:100%}.main_content .documentation-title{margin-right:80px}@media (max-width: 768px){.main_content .documentation-title{font-size:32px;margin-right:0px}}@media (max-width: 740px){.main_content .documentation-title{font-size:32px}}@media (max-width: 600px){.main_content .documentation-title{font-size:26px}}@media (max-width: 1280px){.main_content .documentation .second-block{margin-bottom:10px}}.main_content .buttons{display:flex;margin-top:45px;gap:20px}@media (max-width: 1280px){.main_content .buttons{justify-content:center}}@media (max-width: 768px){.main_content .buttons{margin-top:0px}}.main_content .code-text{font-size:40px}@media (max-width: 768px){.main_content .code-text{font-size:32px}}@media (max-width: 600px){.main_content .code-text{font-size:24px}}.main_content .npm-title{margin-bottom:40px}@media (max-width: 768px){.main_content .npm-title{margin-bottom:10px}}.main_content .terminal{margin-right:10px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.main_content .diagram{display:flex;justify-content:center}.main_content .diagram *{font-weight:normal}.main_content .diagram-desktop *{font-size:24px}@media (max-width: 1830px){.main_content .diagram-desktop{display:none}}.main_content .diagram-tablet1{display:none}.main_content .diagram-tablet1 *{font-size:20px}@media (max-width: 1830px){.main_content .diagram-tablet1{display:flex}}@media (max-width: 1465px){.main_content .diagram-tablet1{display:none}}.main_content .diagram-tablet2{display:none}.main_content .diagram-tablet2 *{font-size:18px}@media (max-width: 1465px){.main_content .diagram-tablet2{display:flex}}@media (max-width: 1220px){.main_content .diagram-tablet2{display:none}}.main_content .diagram-tablet3{display:none}.main_content .diagram-tablet3 *{font-size:13px}@media (max-width: 1220px){.main_content .diagram-tablet3{display:flex}}@media (max-width: 768px){.main_content .diagram-tablet3{display:none}}.main_content .diagram-tablet4{display:none}.main_content .diagram-tablet4 *{font-size:10px}@media (max-width: 768px){.main_content .diagram-tablet4{display:flex}}@media (max-width: 600px){.main_content .diagram-tablet4{display:none}}.main_content .diagram-mobile1{display:none}.main_content .diagram-mobile1 *{font-size:7px}@media (max-width: 600px){.main_content .diagram-mobile1{display:flex}}@media (max-width: 500px){.main_content .diagram-mobile1{display:none}}.main_content .diagram-mobile2{display:none}.main_content .diagram-mobile2 *{font-size:5.5px}@media (max-width: 500px){.main_content .diagram-mobile2{display:flex}}@media (max-width: 360px){.main_content .diagram-mobile2{display:none}}.main_content .diagram-mobile3{display:none}.main_content .diagram-mobile3 *{font-size:4.5px}@media (max-width: 360px){.main_content .diagram-mobile3{display:flex}}
#documentation{display:flex;flex-direction:column;height:100%}#documentation #content{flex-grow:2}#documentation #footer{display:none}.section_line{border:none;background-color:#cdcdcd;height:1px}#documentation_main{height:100%;margin:0 auto 30 auto;display:grid;grid-template-columns:2fr 10fr;text-align:initial}#documentation_main h1{margin-top:30px;margin-bottom:25px}@media screen and (max-width: 768px){.image_block{width:100%}.image_logo{width:100%;height:100%}}@media screen and (min-width: 769px){#documentation_main{height:calc(100vh - 81px);margin:0 auto}.documentation_page{overflow-y:scroll;padding:0 20px 40px}}@media screen and (max-width: 768px){#documentation_main{display:flex;width:inherit;margin:auto;flex-direction:column;padding:0;width:90vw}#documentation_main h1{margin-top:30px}#documentation #footer{display:block}}
#examples_main{display:flex;flex-direction:column}#examples_main #sidebar_button{margin-bottom:20px}@media screen and (min-width: 601px){#examples_main{display:grid;grid-template-columns:2fr 10fr;padding-bottom:40px;margin:0 auto}#examples_main .example_page{overflow-y:scroll}#examples_main .example_page .codepen,#examples_main .example_page .cp_embed_wrapper{margin-right:18px !important}}#examples_main .title{display:none}@media screen and (max-width: 768px){#examples_main .title{display:block;text-align:center}}#examples_main .example_page{width:100%;flex-grow:2}@media screen and (max-width: 600px){#examples_main{width:90vw;margin:0 auto 20px}}
@media (min-width: 769px){.sidebar-component{max-height:100vh;overflow-y:scroll;border-right:solid 1px 0.80808}}.sidebar{padding:40px 30px 30px 27.5px}.sidebar *{text-decoration:none}@media (max-width: 768px){.sidebar{display:none}}.sidebar-mobile{background-color:#fff;position:fixed;bottom:0;top:0;display:flex;align-items:center;flex-direction:column;justify-content:center;height:100vh;width:100vw;transition:left 0.25s ease;left:-100%}.sidebar-mobile *{color:0;text-decoration:none}@media (min-width: 769px){.sidebar-mobile{display:none}}.sidebar-mobile .close{cursor:pointer;position:absolute;width:24px;height:24px;top:20px;right:20px}.sidebar-mobile .close:before,.sidebar-mobile .close:after{content:"";position:absolute;top:10px;width:24px;height:3px;background-color:#000;border-radius:2px}.sidebar-mobile .close:before{transform:rotate(45deg)}.sidebar-mobile .close:after{transform:rotate(-45deg)}.active-link{color:#0077ff}.active-sidebar{left:0 !important}.sidebar-button{width:20px;height:20px;opacity:0;cursor:pointer;transition:opacity 0.25s ease;pointer-events:none}@media (min-width: 769px){.sidebar-button{display:none}}.active-button{opacity:1 !important;pointer-events:all !important}.sidebar-section{margin-bottom:20px}.sidebar-link{font-size:30px}@media (max-width: 1280px){.sidebar-link{font-size:22px}}@media (max-width: 768px){.sidebar-link{font-size:24px}}.sidebar-menu-item{margin-bottom:20px}
.button{padding:12.5px 30px;color:#fff;text-decoration:none;display:block;text-align:center;border-radius:50px;background:#0183ff}.button:hover{background:#1a87ee;color:#fff}@media (max-width: 768px){.button{padding:8px 20px}}
.note{height:40px;display:flex;align-items:center;justify-content:center;background:#0183ff;color:#fff}.note_link{color:#fff}.note_link:hover{text-decoration:none;color:#fff}@media (max-width: 600px){.note{height:30px}.note_span{font-size:12px}.note_link{font-size:12px}}
.benchmark{max-width:100%}.reactivity-image{max-width:100%}