Merge pull request #56 from landjonathan/master

adding margin nav <-> scrollbar, control color fix

src/assets/styles/sass/style.scss

@@ -37,6 +37,18 @@ body {
   color: var(--text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  @include medium {
+    &::-webkit-scrollbar {
+      width: 10px;
+      background: var(--bg-main);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background-color: var(--bg-dark);
+    }
+  }
 }
 
 body.no-transition * {
@@ -159,7 +171,7 @@ label {
 
     &::-webkit-scrollbar-thumb {
       border-radius: 10px;
-      background-color: var(--bg-light);
+      background-color: var(--bg-dark);
     }
   }
 }
@@ -238,17 +250,15 @@ a.fonts-nav-link {
   border-radius: 6px;
 
   @include medium {
-    margin: 0;
-    border-radius: 0;
-    padding: 9px 24px;
+    padding: 9px 12px;
 
     &:after {
       content: '';
       background: {
         image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.65685 12.7929L10.7377 7.13605L7.65685 1.47919' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
         size: 100%;
       }
-      margin-right: -12px;
+      margin-right: -6px;
       width: 15px;
       height: 15px;
       display: block;
@@ -406,11 +416,7 @@ $languages: html, css, js, charmap;
       size: 12px;
       weight: 500;
     }
-    --active: var(--highlight);
-
-    html.theme-blue & {
-      --active: var(--bg-highlight);
-    }
+    --active: var(--bg-highlight);
 
     label {
       --inactive-text: white;
@@ -593,20 +599,12 @@ ul.features {
   &.v {
     width: 18px;
     height: 13px;
-    background-image: url("data:image/svg+xml,%3Csvg width='18' height='13' viewBox='0 0 18 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 1L6 12L1 7' stroke='%23848484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-
-    html.theme-blue & {
-      background-image: url("data:image/svg+xml,%3Csvg width='18' height='13' viewBox='0 0 18 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 1L6 12L1 7' stroke='%23789bab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-    }
+    background-image: url("data:image/svg+xml,%3Csvg width='18' height='13' viewBox='0 0 18 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 1L6 12L1 7' stroke='%23789bab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   }
 
   &.x {
     width: 14px;
     height: 14px;
-    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 1L1 13' stroke='%23848484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 1L13 13' stroke='%23848484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-
-    html.theme-blue & {
-      background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 1L1 13' stroke='%23789bab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 1L13 13' stroke='%23789bab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-    }
+    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 1L1 13' stroke='%23789bab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 1L13 13' stroke='%23789bab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   }
 }