IMPORTANT: Change back to rem unit, and default html font size is 20px.

1 files changed, 87 insertions, 88 deletions

diff --git a/docs/css/docs.css b/docs/css/docs.css
index 4060e72..02a6090 100644
--- a/docs/css/docs.css
+++ b/docs/css/docs.css
@@ -15,22 +15,22 @@
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding: 30px 0 30px 30px;
-  width: 240px;
+  padding: 1.5rem 0 1.5rem 1.5rem;
+  width: 12rem;
 }
 .s-sidebar .s-nav {
-  bottom: 30px;
+  bottom: 1.5rem;
   overflow-y: auto;
   position: fixed;
-  top: 100px;
-  width: 210px;
+  top: 5rem;
+  width: 10.5rem;
 }
 .s-sidebar .accordion .accordion-item {
-  margin-bottom: 15px;
+  margin-bottom: .75rem;
 }
 .s-sidebar .accordion input ~ .accordion-header {
   color: #5b657a;
-  font-size: 12px;
+  font-size: .6rem;
   font-weight: 600;
   text-transform: uppercase;
 }
@@ -38,7 +38,7 @@
   color: #5b657a;
 }
 .s-sidebar .accordion .menu .menu-item {
-  padding-left: 20px;
+  padding-left: 1rem;
 }
 .s-sidebar .accordion .menu .menu-item > a {
   background: transparent;
@@ -50,11 +50,11 @@
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   max-width: 920px;
-  padding: 0 60px;
-  width: calc(100vw - 240px);
+  padding: 0 3rem;
+  width: calc(100vw - 12rem);
 }
 .s-content > .container {
-  padding-bottom: 30px;
+  padding-bottom: 1.5rem;
 }
 .s-content .anchor {
   color: #626fca;
@@ -76,10 +76,10 @@
 }
 .s-content .s-title,
 .s-content .s-subtitle {
-  line-height: 32px;
+  line-height: 1.6rem;
   margin-bottom: 0;
-  padding-bottom: 30px;
-  padding-top: 30px;
+  padding-bottom: 1.5rem;
+  padding-top: 1.5rem;
   position: static;
 }
 @supports ((position: -webkit-sticky) or (position: sticky)) {
@@ -99,7 +99,7 @@
     left: -10px;
     position: absolute;
     right: -10px;
-    top: -10px;
+    top: -5px;
     z-index: -1;
   }
 }
@@ -110,52 +110,55 @@
 }
 .s-content .s-title + .docs-note,
 .s-content .s-subtitle + .docs-note {
-  margin-top: 8px;
+  margin-top: .4rem;
 }
 .s-content .docs-note {
-  margin: 30px 0;
+  margin: 1.5rem 0;
 }
 .s-content .column {
-  padding: 10px;
+  padding: .4rem;
 }
 .s-content .docs-block {
-  border-radius: 2px;
-  padding: 10px;
+  border-radius: .1rem;
+  padding: .5rem;
 }
 .s-content .docs-block.bg-gray {
   background: #f0f1f4;
 }
 .s-content .docs-shape {
-  height: 96px;
-  line-height: 24px;
-  padding: 36px 0;
-  width: 96px;
+  height: 4.8rem;
+  line-height: 1.2rem;
+  padding: 1.8rem 0;
+  width: 4.8rem;
 }
 .s-content .docs-dot {
   border-radius: 50%;
   display: inline-block;
-  height: 10px;
+  height: .5rem;
   padding: 0;
-  width: 10px;
+  width: .5rem;
 }
 .s-content .docs-table th,
 .s-content .docs-table td {
-  padding: 15px 5px;
+  padding: .75rem .25rem;
 }
 .s-content .docs-color {
-  border-radius: 2px;
-  margin: 5px 0;
-  padding: 10px;
+  border-radius: .1rem;
+  margin: .25rem 0;
+  padding: .5rem;
 }
 .s-content .docs-color .color-subtitle {
-  font-size: 12px;
+  font-size: .6rem;
   opacity: .75;
 }
 .s-content .panel {
   height: 75vh;
 }
 .s-content .panel .tile {
-  margin: 15px 0;
+  margin: .75rem 0;
+}
+.s-content .parallax {
+  margin: 2rem auto;
 }
 .s-content .code {
   color: #5b657a;
@@ -173,7 +176,7 @@
   color: #e06870;
 }
 .s-content .empty .icon {
-  font-size: 40px;
+  font-size: 2rem;
 }
 .s-content .form-autocomplete .menu {
   position: static;
@@ -184,16 +187,16 @@
   -webkit-align-items: center;
   align-items: center;
   background: #5764c6;
-  border-radius: 2px;
+  border-radius: .1rem;
   color: #fff;
   display: flex;
   display: -ms-flexbox;
   display: -webkit-flex;
   -ms-flex-align: center;
   -ms-flex-line-pack: distribute;
-  font-size: 24px;
-  height: 40px;
-  width: 40px;
+  font-size: 1.2rem;
+  height: 2rem;
+  width: 2rem;
 }
 .s-content .example-tile-icon .icon {
   margin: auto;
@@ -208,20 +211,20 @@
 }
 .s-brand {
   color: #5764c6;
-  padding: 0 30px;
+  padding: 0 1.5rem;
   position: fixed;
-  top: 26px;
+  top: 1.3rem;
 }
 .s-brand .s-logo {
   -webkit-align-items: center;
   align-items: center;
-  border-radius: 2px;
+  border-radius: .1rem;
   display: inline-flex;
   display: -ms-inline-flexbox;
   display: -webkit-inline-flex;
   -ms-flex-align: center;
-  height: 40px;
-  padding: 4px;
+  height: 2rem;
+  padding: .2rem;
   width: auto;
 }
 .s-brand .s-logo:focus,
@@ -231,33 +234,33 @@
 .s-brand .s-logo img {
   display: inline;
   height: auto;
-  width: 32px;
+  width: 1.6rem;
 }
 .s-brand .s-logo h2 {
   display: inline;
-  font-size: 16px;
+  font-size: .8rem;
   margin-bottom: 0;
-  margin-left: 10px;
-  margin-right: 10px;
+  margin-left: .5rem;
+  margin-right: .5rem;
 }
 .s-brand .float-btn {
   position: fixed;
-  right: 90px;
-  top: 30px;
+  right: 4.5rem;
+  top: 1.5rem;
 }
 .s-footer {
   color: #acb3c2;
-  padding: 10px 10px 30px 10px;
+  padding: .5rem .5rem 1.5rem .5rem;
 }
 .s-footer a {
   color: #727e96;
 }
-/* Spectre docs style */
+/* Spectre Homepage style */
 .section-header {
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(.5rem);
+  backdrop-filter: blur(.5rem);
   background: rgba(248, 249, 250, .9);
-  padding: 20px 10px;
+  padding: 1rem .5rem;
   position: fixed;
   top: 0;
   width: 100%;
@@ -268,33 +271,29 @@
   position: static;
 }
 .section-hero {
-  padding: 30px 10px;
+  padding: 1.5rem .5rem;
   position: relative;
 }
 .section-hero .column {
-  padding: 10px;
+  padding: .4rem;
 }
 .section-updates {
-  padding: 90px 10px 70px 10px;
-}
-.section-updates .update-branding {
-  height: auto;
-  width: 96px;
+  padding: 4.5rem .5rem 3.5rem .5rem;
 }
 .section-updates .card {
   border: 0;
   color: #667189;
-  margin-bottom: 20px;
+  margin-bottom: 1rem;
 }
 .section-features {
-  padding: 90px 10px;
+  padding: 4.5rem .5rem;
 }
 .section-features .column {
-  padding: 10px;
+  padding: .4rem;
 }
 .section-footer {
   color: #acb3c2;
-  padding: 36px 15px 20px 15px;
+  padding: 1.8rem .75rem 1rem .75rem;
   position: relative;
   z-index: 200;
 }
@@ -302,35 +301,35 @@
   color: #727e96;
 }
 .grid-hero {
-  margin-bottom: 40px;
-  margin-top: 100px;
+  margin-bottom: 2rem;
+  margin-top: 5rem;
 }
 .grid-hero h1 {
   color: #454d5d;
-  font-size: 32px;
-  margin-bottom: 30px;
+  font-size: 1.6rem;
+  margin-bottom: 1.5rem;
 }
 .grid-hero h2 {
   color: #50596c;
-  font-size: 18px;
+  font-size: .9rem;
   font-weight: 400;
-  line-height: 30px;
-  margin-bottom: 30px;
+  line-height: 1.5rem;
+  margin-bottom: 1.5rem;
 }
 .grid-hero h2 u {
-  border-bottom: 2px solid currentColor;
-  padding-bottom: 1px;
+  border-bottom: .1rem solid currentColor;
+  padding-bottom: .05rem;
   text-decoration: none;
 }
 .grid-hero .card {
   background: none;
   border: 0;
   color: #667189;
-  padding: 10px;
+  padding: .5rem;
 }
 .grid-hero .card .card-title {
   color: #5764c6;
-  font-size: 18px;
+  font-size: .9rem;
   margin-bottom: 0;
 }
 .menu-btn,
@@ -343,7 +342,7 @@
     height: 100%;
     left: 0;
     overflow-y: auto;
-    padding: 60px 30px;
+    padding: 3rem 1.5rem;
     position: fixed;
     top: 0;
     -webkit-transform: translateX(-100%);
@@ -366,15 +365,15 @@
     display: block;
   }
   .s-sidebar .s-nav {
-    top: 30px;
+    top: 1.5rem;
   }
   .s-brand {
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
     background: rgba(248, 249, 250, .8);
-    height: 70px;
+    height: 3.5rem;
     left: 0;
-    padding: 15px 10px;
+    padding: .75rem .5rem;
     right: 0;
     text-align: center;
     top: 0;
@@ -385,16 +384,16 @@
   }
   .s-brand .menu-btn {
     display: block;
-    left: 20px;
+    left: 1rem;
     position: fixed;
-    top: 19px;
+    top: .95rem;
   }
   .s-brand .menu-btn .btn {
-    font-size: 20px;
+    font-size: 1rem;
   }
   .s-brand .float-btn {
-    right: 20px;
-    top: 19px;
+    right: 1rem;
+    top: .95rem;
   }
   .docs-nav-clear {
     background: rgba(0, 0, 0, .15);
@@ -409,7 +408,7 @@
   }
   .s-content {
     min-width: auto;
-    padding: 70px 50px 0 50px;
+    padding: 3.5rem 2.5rem 0 2.5rem;
     width: 100%;
   }
   .s-content .s-title,
@@ -423,16 +422,16 @@
 }
 @media screen and (max-width: 600px) {
   .grid-hero h2 {
-    font-size: 18px;
+    font-size: .9rem;
   }
   .grid-hero .card {
     padding: 0;
   }
   .s-content {
-    padding: 70px 10px 0 10px;
+    padding: 3.5rem .5rem 0 .5rem;
   }
   .s-content .docs-block {
-    padding: 10px 2px;
+    padding: .5rem .1rem;
   }
   .s-content .anchor {
     display: none;