space-router 0.9.4 → 1.0.0

package/docs/assets/styles/main.scss

@@ -1,1368 +0,0 @@
-$sidebar-width: 300px;
-$gray: #e3e8ee;
-$sp0: 0;
-$sp2: 2px;
-$sp4: 4px;
-$sp8: 8px;
-$sp12: 12px;
-$sp16: 16px;
-$sp20: 20px;
-$sp24: 24px;
-$sp32: 32px;
-$sp48: 48px;
-$sp64: 64px;
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: #222;
-  font-family: 'Vollkorn', sans-serif;
-  font-weight: 700;
-}
-
-h1 {
-  margin-top: 60px;
-  margin-bottom: 20px;
-}
-
-.form-centered {
-  max-width: 400px;
-  margin: auto;
-  margin-bottom: 140px;
-}
-
-.form-subscribe {
-  text-align: center;
-  border-radius: 4px;
-  border: 3px dashed rgba(0, 0, 0, 0.1);
-  padding: 64px 40px;
-  margin-bottom: 24px;
-}
-.form-subscribe h4 {
-  margin-bottom: 0;
-}
-.form-subscribe p {
-  color: rgba(0, 0, 0, 0.5);
-  margin-bottom: 20px;
-}
-.form-subscribe form {
-  max-width: 400px;
-  margin: auto;
-}
-.form-subscribe #form-subscribe-success {
-  max-width: 500px;
-  margin: auto;
-  font-size: 18px;
-  line-height: 28px;
-}
-.form-subscribe #subscribe-email-validation-error {
-  margin-bottom: 8px;
-  font-size: 15px;
-}
-.form-subscribe .form-subscribe-twitter div {
-  margin: 24px 0;
-  font-size: 20px;
-  color: rgba(0, 0, 0, 0.3);
-}
-.form-subscribe .form-subscribe-twitter a {
-  display: inline-block;
-  padding-left: 21px;
-  background: url('/img/common/icon-twitter.png') no-repeat left 4px;
-}
-
-#toggle-form-subscribe {
-  text-align: center;
-  margin-bottom: 20px;
-  font-size: 15px;
-  margin-top: -20px;
-}
-
-#nav-toggle-box {
-  display: flex;
-  align-items: center;
-  padding: 8px 16px;
-}
-
-#nav-toggle {
-  margin-left: auto;
-  color: #000;
-  text-decoration: none;
-  padding: 2px 8px;
-}
-
-#nav-toggle-brand {
-  position: relative;
-  top: -1px;
-}
-
-#nav-toggle-brand a,
-#nav-toggle-brand span {
-  color: #000;
-  font-weight: bold;
-  text-decoration: none;
-}
-
-#hero {
-  max-width: 680px;
-  margin: 24px 60px;
-}
-#hero h1 {
-  margin-bottom: 12px;
-  font-size: 36px;
-  line-height: 1.5;
-  font-weight: 900;
-  margin-top: 0;
-}
-#hero p {
-  max-width: 740px;
-  margin: auto;
-  font-size: 21px;
-  line-height: 32px;
-  color: rgba(0, 0, 0, 0.5);
-  margin-top: 28px;
-  padding-top: 28px;
-  margin-bottom: 0;
-  position: relative;
-}
-#hero p a {
-  color: #000;
-}
-#hero p a:hover {
-  color: rgba(0, 0, 0, 0.6);
-}
-#hero .hero-lead {
-  border-top: 1px solid #dedede;
-}
-
-#intro {
-  margin-top: 56px;
-  margin-bottom: 140px;
-  text-align: center;
-  position: relative;
-}
-#intro:before {
-  position: absolute;
-  content: '';
-  width: 40px;
-  height: 3px;
-  top: -68px;
-  left: 50%;
-  margin-left: -20px;
-  background: #ff3366;
-}
-#intro h6 {
-  color: rgba(0, 0, 0, 0.5);
-  font-weight: normal;
-}
-#intro h2 {
-  font-weight: 900;
-}
-#intro h2 a {
-  color: #3794de;
-  text-decoration: none;
-}
-#intro h2 a:hover {
-  -moz-transition: all linear 0.2s;
-  transition: all linear 0.2s;
-  color: #000;
-  text-decoration: underline;
-}
-#intro p {
-  font-size: 15px;
-  margin: auto;
-  padding: 0 20px;
-}
-@media (max-width: 768px) {
-  #intro .col {
-    margin-bottom: 48px;
-  }
-}
-
-#action-buttons {
-  margin-bottom: 64px;
-  text-align: center;
-}
-#action-buttons button,
-#action-buttons .button {
-  margin: 0 4px;
-}
-#action-buttons p {
-  margin: 0;
-  margin-top: 20px;
-  font-size: 13px;
-  line-height: 20px;
-  color: rgba(0, 0, 0, 0.5);
-}
-
-#TOC {
-  padding: 32px;
-  margin-top: 24px;
-
-  @media (min-width: 768px) {
-    color: rgb(26, 26, 26);
-    color: #ccc;
-    position: fixed;
-    margin-left: 0px;
-    padding: 40px;
-    padding-top: 20px;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: $sidebar-width;
-    font-size: 14px;
-    // background: #f6f6f6;
-    // border-right: 1px solid lighten(#fe7d7d, 20%);
-    overflow: auto;
-  }
-
-  @media (min-height: 980px) {
-    padding-top: 100px;
-    // font-size: 16px;
-  }
-}
-#TOC ul {
-  margin: 0;
-  list-style: none;
-}
-#TOC ul ul {
-  margin: 0;
-  margin-top: 12px;
-}
-#TOC ul {
-  list-style: none;
-  margin: 0;
-}
-#TOC li {
-  line-height: 26px;
-}
-#TOC li:last-child {
-  border-bottom: none;
-}
-#TOC a {
-  display: block;
-  text-decoration: none;
-  position: relative;
-  padding-left: 12px;
-  color: #1e1e1e;
-}
-#TOC a:hover {
-  -moz-transition: all linear 0.2s;
-  transition: all linear 0.2s;
-  color: #000;
-  text-decoration: underline;
-}
-
-#TOC > nav > ul > li > a {
-  font-size: 20px;
-  font-weight: 500;
-  margin-top: 12px;
-}
-
-#main {
-  padding-left: $sidebar-width;
-}
-
-body.docs #main,
-body.grafs-index #main,
-body.page-redactor-index #main {
-  max-width: none;
-}
-
-body.grafs-index #footer,
-body.page-redactor-index #footer {
-  margin-top: 0;
-}
-
-body.docs #top {
-  margin-bottom: 0;
-}
-
-body.page-account #hero {
-  padding: 0;
-}
-body.page-account #hero h1 {
-  font-size: 32px;
-  line-height: 32px;
-  margin-bottom: 48px;
-}
-
-.content {
-  max-width: 880px;
-
-  @media (min-width: 768px) {
-    margin: 60px 40px;
-    padding: 40px;
-  }
-
-  background: rgba(255, 255, 255, 0.94);
-  border-radius: 12px;
-}
-
-#redactor-intro-box {
-  max-width: 920px;
-  margin: auto;
-  margin-bottom: 48px;
-}
-
-#redactor-features {
-  text-align: center;
-  margin: 136px auto;
-  max-width: 1128px;
-}
-
-#redactor-features h3 {
-  font-size: 21px;
-  margin-top: 0;
-  margin-bottom: 4px;
-}
-
-#redactor-features p {
-  color: rgba(0, 0, 0, 0.5);
-}
-
-#redactor-buying-desc {
-  max-width: 720px;
-  margin: auto;
-  margin-top: 40px;
-  font-size: 13px;
-  line-height: 20px;
-}
-
-#redactor-buying-desc p {
-  color: rgba(0, 0, 0, 0.5);
-}
-
-#redactor-buy-box {
-  text-align: center;
-  margin: 116px auto;
-  max-width: 1128px;
-}
-
-#redactor-cloud {
-  text-align: center;
-  margin: 116px auto;
-  max-width: 1128px;
-}
-#redactor-cloud h2 {
-  font-size: 48px;
-  line-height: 56px;
-  margin-bottom: 36px;
-  color: rgba(0, 0, 0, 0.15);
-}
-#redactor-cloud ul {
-  margin: 0;
-  list-style: none;
-}
-#redactor-cloud li {
-  list-style: none;
-  display: inline;
-  line-height: 44px;
-  margin: 0 12px;
-  white-space: nowrap;
-}
-#redactor-cloud li:nth-child(3n) {
-  font-size: 1.25em;
-  color: #666;
-}
-#redactor-cloud li:nth-child(4n) {
-  font-size: 1.5em;
-  color: #333;
-}
-#redactor-cloud li:nth-child(5n) {
-  font-size: 1em;
-  color: #999;
-}
-#redactor-cloud li:nth-child(7n) {
-  font-size: 2.25em;
-}
-@media (max-width: 768px) {
-  #redactor-cloud {
-    display: none;
-  }
-}
-
-#redactor-discover {
-  text-align: center;
-  background: #f8f8f8;
-  padding-bottom: 96px;
-}
-#redactor-discover #redactor-discover-box {
-  max-width: 1128px;
-  margin: auto;
-}
-#redactor-discover h3 {
-  font-size: 24px;
-  line-height: 32px;
-  text-align: center;
-  font-weight: 900;
-  padding: 40px 0;
-  margin-bottom: 60px;
-  color: rgba(0, 0, 0, 0.25);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-#redactor-discover h4 {
-  margin-top: 0;
-}
-#redactor-discover h4 a {
-  font-size: 21px;
-  color: #000;
-}
-#redactor-discover h4 a:hover {
-  -moz-transition: all linear 0.2s;
-  transition: all linear 0.2s;
-  color: rgba(0, 0, 0, 0.5);
-}
-#redactor-discover figure {
-  margin-bottom: 0;
-}
-#redactor-discover .col {
-  max-width: 340px;
-}
-#redactor-discover p {
-  font-size: 14px;
-  line-height: 20px;
-  color: rgba(0, 0, 0, 0.5);
-}
-@media (max-width: 768px) {
-  #redactor-discover .col {
-    max-width: none;
-  }
-  #redactor-discover p {
-    padding: 0 24px;
-  }
-}
-
-#grafs-matrix-box {
-  padding: 0 20px;
-  max-width: 1128px;
-  margin: auto;
-  margin-bottom: 80px;
-}
-#grafs-matrix-box .item {
-  padding-top: 72px;
-  text-align: center;
-}
-#grafs-matrix-box .item.first {
-  padding-top: 24px;
-}
-#grafs-matrix-box h5 {
-  font-size: 17px;
-  line-height: 24px;
-  margin-bottom: 8px;
-}
-#grafs-matrix-box p {
-  max-width: 340px;
-  margin: auto;
-  margin-bottom: 32px;
-  font-size: 13px;
-  line-height: 20px;
-  color: rgba(0, 0, 0, 0.7);
-}
-#grafs-matrix-box .row p {
-  max-width: 280px;
-  margin-bottom: 40px;
-}
-
-#grafs-buy-box {
-  padding: 0 20px;
-  padding-bottom: 104px;
-  max-width: 1128px;
-  margin: auto;
-  margin-top: 128px;
-  text-align: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-}
-#grafs-buy-box h2 {
-  font-size: 30px;
-  line-height: 40px;
-  font-weight: 900;
-  margin-bottom: 72px;
-}
-#grafs-buy-box .button {
-  height: 60px;
-  padding-top: 20px;
-  padding-left: 36px;
-  padding-right: 36px;
-  font-size: 19px;
-  font-weight: 500;
-}
-#grafs-buy-box p.desc {
-  font-size: 13px;
-  line-height: 20px;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-#grafs-features {
-  text-align: center;
-  max-width: 1128px;
-  margin: 88px auto 104px auto;
-  padding: 0 20px;
-}
-#grafs-features figure {
-  margin-bottom: 0;
-}
-#grafs-features h3 {
-  margin-top: 0;
-  font-size: 21px;
-  line-height: 32px;
-}
-#grafs-features p {
-  font-size: 15px;
-  color: rgba(0, 0, 0, 0.7);
-}
-
-#grafs-discover {
-  text-align: center;
-  background: #f8f8f8;
-  padding-bottom: 96px;
-}
-#grafs-discover #grafs-discover-box {
-  max-width: 800px;
-  margin: auto;
-}
-#grafs-discover h3 {
-  font-size: 24px;
-  line-height: 32px;
-  text-align: center;
-  font-weight: 900;
-  padding: 40px 0;
-  margin-bottom: 60px;
-  color: rgba(0, 0, 0, 0.25);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-#grafs-discover h4 {
-  margin-top: 0;
-}
-#grafs-discover h4 a {
-  font-size: 21px;
-  color: #000;
-}
-#grafs-discover h4 a:hover {
-  -moz-transition: all linear 0.2s;
-  transition: all linear 0.2s;
-  color: rgba(0, 0, 0, 0.5);
-}
-#grafs-discover figure {
-  margin-bottom: 0;
-}
-#grafs-discover .col {
-  max-width: 280px;
-}
-#grafs-discover p {
-  font-size: 14px;
-  line-height: 20px;
-  color: rgba(0, 0, 0, 0.5);
-}
-@media (max-width: 768px) {
-  #grafs-discover .col {
-    max-width: none;
-  }
-  #grafs-discover p {
-    padding: 0 24px;
-  }
-}
-
-.grafs-examples-row {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-bottom: 40px;
-}
-
-.grafs-examples-col {
-  border-radius: 3px;
-  background: #f8f8f8;
-  padding: 32px;
-  padding-bottom: 56px;
-  width: 300px;
-  margin: 0 16px;
-  margin-bottom: 24px;
-}
-.grafs-examples-col figure {
-  margin-bottom: 0;
-}
-.grafs-examples-col h4 {
-  font-size: 17px;
-  line-height: 28px;
-  margin-top: 0;
-}
-.grafs-examples-col ul {
-  list-style: none;
-  margin: 0;
-}
-.grafs-examples-col ul li {
-  font-size: 15px;
-  line-height: 36px;
-}
-.grafs-examples-col ul a {
-  display: block;
-  color: #3794de;
-  text-decoration: none;
-}
-.grafs-examples-col ul a:hover {
-  -moz-transition: all linear 0.2s;
-  transition: all linear 0.2s;
-  color: #000;
-  text-decoration: underline;
-}
-
-#grafs-example-header,
-#grafs-example-content {
-  max-width: 900px;
-  margin: auto;
-}
-
-#grafs-example-header {
-  margin-top: 72px;
-  margin-bottom: 44px;
-  text-align: center;
-}
-#grafs-example-header .tag {
-  font-size: 13px;
-  line-height: 24px;
-  text-transform: uppercase;
-  color: rgba(0, 0, 0, 0.5);
-  margin-bottom: 8px;
-}
-#grafs-example-header .tag a {
-  color: rgba(0, 0, 0, 0.6);
-}
-#grafs-example-header .tag a:hover {
-  -moz-transition: all linear 0.2s;
-  transition: all linear 0.2s;
-  color: #000;
-}
-#grafs-example-header h1 {
-  font-size: 48px;
-  line-height: 52px;
-  font-weight: 900;
-}
-
-#path {
-  font-size: 15px;
-  margin-bottom: 12px;
-}
-#path a {
-  color: #3794de;
-}
-#path a:hover {
-  color: #000;
-}
-#path span {
-  color: rgba(0, 0, 0, 0.2);
-  font-size: 15px;
-  display: inline-block;
-  margin: 0 6px;
-}
-#path b {
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.4);
-}
-
-#docs-main {
-  display: flex;
-}
-#docs-main #side {
-  width: 24%;
-  padding: 28px 36px;
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-}
-#docs-main #side nav li {
-  font-size: 15px;
-  line-height: 40px;
-}
-#docs-main #side nav li a {
-  display: block;
-  color: #707070;
-  text-decoration: none;
-}
-#docs-main #side nav li a:hover {
-  color: #ff3366;
-  text-decoration: underline;
-}
-#docs-main #side nav span,
-#docs-main #side nav li.active a {
-  color: #ff3366;
-  font-weight: bold;
-}
-#docs-main #side nav span:hover,
-#docs-main #side nav li.active a:hover {
-  text-decoration: none;
-}
-#docs-main #side nav h6 {
-  border-top: 1px solid #eee;
-  padding-top: 16px;
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-#docs-main #area {
-  width: 76%;
-  padding: 32px 64px 48px 64px;
-}
-#docs-main #area h1 {
-  font-size: 36px;
-  line-height: 40px;
-  font-weight: 900;
-  margin-bottom: 28px;
-}
-#docs-main #area h3 {
-  font-size: 18px;
-  line-height: 28px;
-}
-#docs-main #area .lead {
-  font-size: 18px;
-  line-height: 28px;
-  margin-bottom: 24px;
-}
-#docs-main #area .doc-head {
-  position: relative;
-  margin-top: 24px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #eee;
-}
-#docs-main #area .doc-head span {
-  position: absolute;
-  right: 0;
-  top: 0;
-  font-weight: normal;
-  font-size: 13px;
-  color: rgba(0, 0, 0, 0.4);
-}
-#docs-main #area .doc-head a {
-  text-decoration: none;
-  color: #000;
-  display: block;
-  font-size: 20px;
-}
-
-.chart-example {
-  position: relative;
-  margin-top: 44px;
-  margin-bottom: 40px;
-}
-.chart-example.inverted {
-  padding: 32px;
-  background: #191d21;
-}
-.chart-example.inverted .chart-selector a {
-  color: rgba(255, 255, 255, 0.85);
-  border-color: rgba(255, 255, 255, 0.3);
-}
-.chart-example.inverted pre {
-  color: rgba(255, 255, 255, 0.85);
-  padding: 0;
-  background: #191d21;
-}
-
-.chart-selector {
-  text-align: center;
-  font-size: 14px;
-  margin-bottom: 24px;
-}
-.chart-selector a {
-  display: inline-block;
-  background: rgba(46, 196, 182, 0.05);
-  border: 1px solid rgba(46, 196, 182, 0.25);
-  border-radius: 40px;
-  line-height: 28px;
-  padding: 0 12px;
-  color: #000;
-  text-decoration: none;
-  margin: 0 4px;
-}
-.chart-selector a:hover,
-.chart-selector a.active {
-  text-decoration: none;
-  background: #2ec4b6;
-  color: #fff;
-  border: 1px solid transparent;
-}
-.chart-selector a:hover {
-  -moz-transition: all linear 0.2s;
-  transition: all linear 0.2s;
-}
-
-.chart-section-head {
-  text-align: center;
-  font-weight: 900;
-  margin-top: 64px;
-  margin-bottom: -16px;
-  font-size: 16px;
-  line-height: 28px;
-}
-
-#posts {
-  list-style: none;
-  margin: auto;
-  margin-top: 48px;
-  margin-bottom: 128px;
-  max-width: 680px;
-  text-align: center;
-}
-
-#posts li {
-  margin-bottom: 40px;
-}
-
-#posts h2 {
-  font-size: 22px;
-  font-weight: normal;
-  margin: 0;
-  line-height: 28px;
-}
-
-#posts h2 a {
-  color: #1eabf2;
-  text-decoration: none;
-}
-
-#posts h2 a:hover {
-  -moz-transition: all linear 0.2s;
-  transition: all linear 0.2s;
-  color: #000;
-  text-decoration: underline;
-}
-
-#posts time {
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.5);
-}
-
-#post-box {
-  max-width: 740px;
-  margin: auto;
-}
-
-#post {
-  font-size: 18px;
-  line-height: 32px;
-  margin-bottom: 40px;
-}
-
-#changelog {
-  max-width: 820px;
-  margin: auto;
-  margin-bottom: 104px;
-}
-#changelog h3 {
-  margin-bottom: 4px;
-}
-#changelog time {
-  font-size: 11px;
-  font-weight: bold;
-  display: block;
-  text-transform: uppercase;
-  margin-bottom: 40px;
-  color: rgba(0, 0, 0, 0.45);
-}
-#changelog .item {
-  margin-bottom: 20px;
-  background: #f8f8f8;
-  padding: 40px;
-}
-#changelog ul {
-  margin: 0;
-  list-style: none;
-}
-#changelog li {
-  margin-bottom: 16px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #eee;
-}
-#changelog li:last-child {
-  border-bottom: none;
-}
-#changelog li .label {
-  margin-right: 4px;
-}
-
-#kube-features {
-  margin-top: 104px;
-  text-align: center;
-}
-#kube-features h3 {
-  margin-top: 0;
-}
-#kube-features .row:first-child {
-  padding-bottom: 32px;
-  margin-bottom: 64px;
-  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
-}
-#kube-features p {
-  font-size: 15px;
-  color: rgba(0, 0, 0, 0.75);
-}
-#kube-features .item {
-  padding: 0 24px;
-}
-
-#kube-faq {
-  max-width: 740px;
-  margin: auto;
-  font-size: 17px;
-  line-height: 28px;
-  margin-bottom: 104px;
-  border-top: 1px solid rgba(0, 0, 0, 0.07);
-}
-#kube-faq h2 {
-  font-size: 24px;
-  font-weight: 900;
-  text-align: center;
-  line-height: 32px;
-  margin-top: 80px;
-  margin-bottom: 40px;
-}
-
-#components {
-  text-align: center;
-}
-#components.lists {
-  text-align: left;
-}
-#components.lists .item {
-  padding: 24px;
-}
-#components.lists .item:hover {
-  background: #f8f8f8;
-}
-#components .start {
-  font-size: 24px;
-  line-height: 32px;
-}
-#components #search-box {
-  padding: 24px;
-  background: #ebf0f6;
-  margin-bottom: 24px;
-}
-#components .item {
-  background: #f8f8f8;
-  padding: 68px 24px 60px 24px;
-  margin-bottom: 20px;
-}
-#components .item:hover {
-  -moz-transition: all linear 0.2s;
-  transition: all linear 0.2s;
-  background: #fcfcfc;
-}
-#components figure {
-  margin-bottom: 0;
-}
-#components h4 {
-  font-size: 19px;
-  margin-top: 0;
-  margin-bottom: 8px;
-}
-#components h4 a {
-  color: #3794de;
-  text-decoration: none;
-}
-#components h4 a:hover {
-  -moz-transition: all linear 0.2s;
-  transition: all linear 0.2s;
-  color: #000;
-  text-decoration: underline;
-}
-#components ul {
-  margin-left: 0;
-  margin-top: 24px;
-  list-style: none;
-}
-#components li {
-  line-height: 32px;
-  margin-bottom: 4px;
-}
-#components li a {
-  display: inline-block;
-  color: #3794de;
-  line-height: 24px;
-}
-#components li a:hover {
-  -moz-transition: all linear 0.2s;
-  transition: all linear 0.2s;
-  color: #000;
-  text-decoration: underline;
-}
-#components p {
-  max-width: 220px;
-  margin: auto;
-  font-size: 13px;
-  line-height: 20px;
-  color: rgba(0, 0, 0, 0.5);
-}
-#components #docs-search-results p {
-  max-width: none;
-  margin-bottom: 16px;
-}
-
-.demo-head {
-  font-size: 24px;
-  line-height: 32px;
-  font-weight: 900;
-  margin-top: 80px;
-  margin-bottom: 20px;
-  text-align: center;
-}
-
-#price-box {
-  margin-top: 40px;
-}
-#price-box .item {
-  text-align: center;
-  padding: 36px;
-  margin-bottom: 24px;
-}
-#price-box .item-selected {
-  position: relative;
-  top: -28px;
-  background: #fafaf4;
-}
-#price-box .price-label {
-  position: absolute;
-  top: -12px;
-  left: 50%;
-  margin-left: -60px;
-  background: #ff3366;
-  color: #fff;
-  font-size: 11px;
-  text-transform: uppercase;
-  padding: 0 8px;
-}
-#price-box .price-name {
-  font-size: 12px;
-  text-transform: uppercase;
-  line-height: 24px;
-  font-weight: 900;
-}
-#price-box .price-amount {
-  margin: 20px 0 32px 0;
-  font-size: 34px;
-}
-#price-box ul {
-  margin-left: 0;
-  list-style: none;
-  line-height: 36px;
-}
-#price-box li {
-  font-size: 14px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-}
-#price-box li:last-child {
-  border-bottom-color: transparent;
-}
-#price-box footer {
-  margin-top: 32px;
-}
-#price-box button.stripe-button-el {
-  height: auto;
-  min-height: 0;
-}
-
-#price-secure-box {
-  text-align: center;
-  color: rgba(0, 0, 0, 0.6);
-}
-#price-secure-box .extra {
-  margin-top: 36px;
-  font-size: 14px;
-  line-height: 22px;
-}
-
-.not-found {
-  padding: 40px 0;
-  text-align: center;
-  font-style: italic;
-  color: rgba(0, 0, 0, 0.5);
-}
-
-.callout {
-  background: #f8f8f8;
-  padding: 40px 48px;
-}
-
-.callout-form {
-  margin-bottom: 40px;
-}
-
-.color-black {
-  color: #000;
-}
-
-tr.border-none td {
-  border: none;
-}
-
-#purchases-table td {
-  padding-top: 24px;
-  padding-bottom: 24px;
-}
-
-#purchases-table tr:first-child td {
-  padding-top: 16px;
-}
-
-#purchases-table tr:last-child td {
-  border-bottom: none;
-}
-
-.purchase-table-license {
-  margin-top: -16px;
-  margin-bottom: 8px;
-}
-
-.purchase-table-version {
-  display: block;
-  margin-top: 8px;
-  margin-bottom: 8px;
-  line-height: 16px;
-  font-size: 11px;
-}
-
-#invoice-form,
-#invoice-form-old {
-  margin-bottom: 24px;
-  padding: 40px;
-  border: 2px solid #eee;
-}
-
-@media (max-width: 768px) {
-  #hero {
-    margin-top: 32px;
-    padding-top: 0;
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-  #hero h1 {
-    font-size: 40px;
-    line-height: 48px;
-  }
-  #hero p {
-    font-size: 16px;
-    line-height: 24px;
-  }
-  #posts,
-  #post-box,
-  #main {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-  #action-buttons .button,
-  #action-buttons button {
-    margin: 8px 0;
-  }
-  #footer {
-    display: block;
-    text-align: center;
-  }
-  #footer nav ul {
-    display: block;
-    margin-bottom: 40px;
-  }
-  #footer nav ul li {
-    margin: 8px 0;
-  }
-  #grafs-features ul {
-    margin-bottom: 24px;
-  }
-  #grafs-features ul.br {
-    border: none;
-  }
-  #grafs-features ul.br li,
-  #grafs-features ul li {
-    text-align: center;
-  }
-  .grafs-call-to-action p {
-    font-size: 20px;
-    line-height: 32px;
-  }
-  #docs-main {
-    display: block;
-  }
-  #docs-main #side,
-  #docs-main #area {
-    width: 100%;
-    padding: 20px 0;
-    border: none;
-  }
-  .grafs-examples-row {
-    flex-direction: column;
-  }
-  .grafs-examples-col {
-    width: 100%;
-    margin: 0;
-    margin-bottom: 20px;
-  }
-}
-
-.highlight {
-  margin-top: 20px;
-  margin-bottom: 40px;
-  margin-left: -20px;
-  margin-right: -20px;
-}
-
-.highlight pre {
-  padding: 12px 30px;
-  overflow: auto;
-}
-
-.MethodList {
-}
-
-.MethodListGroup {
-  list-style: none;
-  margin-left: 0;
-}
-
-.MethodListItem {
-  padding-top: $sp8;
-  padding-bottom: $sp12;
-  border-bottom: 1px solid $gray;
-}
-
-.MethodListItemLabel {
-  display: flex;
-  font-size: 12px;
-  margin: 0;
-  margin-top: 0px;
-  margin-bottom: 0px;
-  align-items: baseline;
-  flex-wrap: wrap;
-  z-index: 1;
-  position: relative;
-  padding-top: 8px;
-  margin-top: -8px;
-  padding-bottom: 8px;
-  margin-bottom: -8px;
-}
-
-.HeaderAnchor {
-}
-
-.AnchorLinkIcon {
-  position: absolute;
-  opacity: 0;
-  left: -20px;
-  top: 8px;
-  padding-right: 4px;
-  padding-right: $sp4;
-  color: #067ab8;
-  color: var(--cyan500);
-  background: #fff;
-  background: var(--white);
-  border-radius: 50%;
-}
-
-.MethodListItemName {
-  font-family: 'Source Code Pro', monospace;
-  font-size: 13px;
-  font-weight: 600;
-  margin-right: 6px;
-}
-
-.MethodListItemType {
-  font-weight: 500;
-  font-size: 12px;
-  color: rgb(135, 146, 162);
-}
-
-.MethodListItemDescription {
-  color: rgb(79, 86, 107);
-  font-size: 14px;
-  margin-bottom: 0;
-}
-
-.Callout {
-  color: #856404;
-  background-color: #fff3cd;
-  border-color: #ffeeba;
-  padding: 10px;
-  border-radius: 8px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
-.Resource {
-  border-top: 1px solid $gray;
-  margin-top: 80px;
-  padding-top: 80px;
-}
-
-.ResourceContent {
-  max-width: 680px;
-  margin: 60px;
-}
-
-.Logo {
-  width: 110px;
-  margin: 14px;
-}
-
-#TOC {
-  .github {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    margin-top: 30px;
-    margin-bottom: 10px;
-  }
-
-  .github svg {
-    margin-right: 4px;
-    margin-top: -2px;
-  }
-
-  .github a {
-    display: flex;
-    flex: 1;
-    flex-direction: row;
-    align-items: center;
-    text-decoration: none;
-    color: black;
-  }
-
-  .github:hover a {
-    color: #ff4800;
-  }
-}
-
-.Image {
-  margin: 50px;
-  max-width: 360px;
-  img {
-    width: 100%;
-  }
-  @media (min-width: 768px) {
-    margin: 0;
-  }
-}
-
-#gradient-canvas {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  width: 100%;
-  height: 100%;
-  --gradient-color-1: #00aee0;
-  --gradient-color-2: #04294f;
-  --gradient-color-3: #ffb400;
-  --gradient-color-4: #ff3a00;
-  z-index: -1;
-  opacity: 0.5;
-
-  @media (min-width: 768px) {
-    display: block;
-  }
-}