IMPORTANT: Replace all rem units to px

1 files changed, 40 insertions, 40 deletions

diff --git a/docs/src/docs.less b/docs/src/docs.less
index 471b1b0..b08990a 100644
--- a/docs/src/docs.less
+++ b/docs/src/docs.less
@@ -10,7 +10,7 @@
 /* Spectre docs style */
 .section-header {
   background: fade(@bg-color, 90%);
-  padding: 1rem .5rem;
+  padding: 10px 5px;
   position: fixed;
   top: 0;
   width: 100%;
@@ -18,14 +18,14 @@
 }
 
 .section-hero {
-  padding: 1rem;
+  padding: 10px;
   position: relative;
   z-index: 300;
 }
 
 .grid-header {
   .navbar {
-    height: 4rem;
+    height: 40px;
   }
 
   .navbar-section {
@@ -38,8 +38,8 @@
 
   .btn-link {
     color: lighten(@body-font-color, 10%);
-    padding-left: .6rem;
-    padding-right: .6rem;
+    padding-left: 6px;
+    padding-right: 6px;
 
     &:focus,
     &:hover,
@@ -51,25 +51,25 @@
 }
 
 .grid-hero {
-  margin-top: 10rem;
-  margin-bottom: 4rem;
+  margin-top: 100px;
+  margin-bottom: 40px;
 
   h1 {
     color: @body-font-color;
-    font-size: 3.2rem;
+    font-size: 32px;
     font-weight: 400;
   }
 
   h2 {
     color: lighten(@body-font-color, 5%);
-    font-size: 1.8rem;
+    font-size: 18px;
     font-weight: 400;
-    line-height: 3rem;
-    margin-bottom: 3rem;
+    line-height: 30px;
+    margin-bottom: 30px;
 
     u {
-      border-bottom: .2rem solid currentColor;
-      padding-bottom: .1rem;
+      border-bottom: 2px solid currentColor;
+      padding-bottom: 1px;
       text-decoration: none;
     }
   }
@@ -78,11 +78,11 @@
     background: none;
     border: 0;
     color: lighten(@body-font-color, 10%);
-    padding: 1rem;
+    padding: 10px;
 
     .card-title {
       color: @primary-color;
-      font-size: 1.8rem;
+      font-size: 18px;
       margin-bottom: 0;
     }
   }
@@ -90,7 +90,7 @@
 
 .grid-footer {
   color: @gray-color;
-  padding: 2rem 0 1rem 0;
+  padding: 20px 0 10px 0;
 
   a {
     color: @gray-color-dark;
@@ -101,11 +101,11 @@
   padding-top: 0;
 
   .container {
-    padding: 1rem;
+    padding: 10px;
   }
 
   header {
-    padding-top: 5.5rem;
+    padding-top: 55px;
   }
 
   .anchor {
@@ -123,26 +123,26 @@
   }
 
   .notes {
-    margin: 4rem 0;
+    margin: 40px 0;
   }
 
   .docs-block {
-    border-radius: .2rem;
-    padding: 1rem .5rem;
+    border-radius: 2px;
+    padding: 10px 5px;
   }
 
   .docs-dot {
     border-radius: 50%;
     display: inline-block;
-    height: 1rem;
+    height: 10px;
     padding: 0;
-    width: 1rem;
+    width: 10px;
   }
 
   .docs-table {
     th,
     td {
-      padding: 1.5rem .5rem;
+      padding: 15px 5px;
     }
   }
 
@@ -152,8 +152,8 @@
   h4,
   h5,
   h6 {
-    margin-top: 2rem;
-    margin-bottom: 2rem;
+    margin-top: 20px;
+    margin-bottom: 20px;
 
     &:hover {
       .anchor {
@@ -165,8 +165,8 @@
 
   .docs-color {
     border-radius: @border-radius;
-    margin: .5rem 0;
-    padding: 1rem;
+    margin: 5px 0;
+    padding: 10px;
 
     .color-subtitle {
       font-size: @font-size-sm;
@@ -178,7 +178,7 @@
     height: 75vh;
 
     .tile {
-      margin: 1.5rem 0;
+      margin: 15px 0;
     }
   }
 
@@ -200,7 +200,7 @@
   }
 
   .empty .icon {
-    font-size: 4rem;
+    font-size: 40px;
   }
 
   .form-autocomplete .menu {
@@ -211,12 +211,12 @@
     align-content: space-around;
     align-items: center;
     background: @primary-color;
-    border-radius: .2rem;
+    border-radius: 2px;
     color: @light-color;
     display: flex;
-    font-size: 2.4rem;
-    height: 4rem;
-    width: 4rem;
+    font-size: 24px;
+    height: 40px;
+    width: 40px;
 
     .icon {
       margin: auto;
@@ -233,12 +233,12 @@
 @media screen and (min-width: 601px) {
   .section-header {
     .navbar-section {
-      padding: 0 .5rem;
+      padding: 0 5px;
     }
   }
 
   .docs-sidebar {
-    padding: 7rem 1rem 5rem 1rem;
+    padding: 70px 10px 50px 10px;
 
       .docs-nav {
         position: relative;
@@ -247,7 +247,7 @@
     @supports (position: sticky) {
       .docs-nav {
         position: sticky;
-        top: 8rem;
+        top: 80px;
 
         // A position: sticky; bug casues box-shadow generates width to the elements
         .nav-item a:focus {
@@ -266,7 +266,7 @@
 @media screen and (max-width: 600px) {
   .grid-hero {
     h2 {
-      font-size: 1.8rem;
+      font-size: 18px;
     }
     .card {
       padding: 0;
@@ -277,13 +277,13 @@
     background: @bg-color-light;
     height: 100%;
     overflow-y: auto;
-    padding: 6rem 3rem;
+    padding: 60px 30px;
     position: fixed;
     left: 0;
     top: 0;
     transform: translateX(-100%);
     transition: transform .2s ease;
-    width: 24rem;
+    width: 240px;
     z-index: 400;
 
     &:target {