refactoring

docs/src/layouts/App/base.scss

@@ -35,6 +35,10 @@
   background-color: rgba($colorBlack, 0.1);
 }
 
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba($colorBlack, 0.15);
+}
+
 ::-webkit-scrollbar-button {
   display: none;
   width: 0;
@@ -45,6 +49,10 @@
   background-color: transparent;
 }
 
+::selection {
+  background: rgba($colorBlue, 0.5);
+}
+
 body {
   font-family: 'Inter', sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -56,8 +64,8 @@ body {
 }
 
 *[id] {
-  scroll-margin-top: 6rem;
+  scroll-margin-top: 2rem;
-  scroll-snap-margin-top: 6rem;
+  scroll-snap-margin-top: 2rem;
 }
 
 button {

docs/src/layouts/App/index.vue

@@ -144,7 +144,11 @@ export default {
 
   computed: {
     menuPortal() {
-      if (this.windowWidth && this.windowWidth < 800) {
+      if (!this.windowWidth) {
+        return
+      }
+
+      if (this.windowWidth < 800) {
         return 'mobile-menu'
       }
 
@@ -152,7 +156,11 @@ export default {
     },
 
     sidebarPortal() {
-      if (this.windowWidth && this.windowWidth < 800) {
+      if (!this.windowWidth) {
+        return
+      }
+
+      if (this.windowWidth < 800) {
         return 'mobile-sidebar'
       }
 
@@ -213,7 +221,7 @@ export default {
     setTimeout(() => {
       this.handleResize()
       this.initSearch()
-    }, 0)
+    }, 10)
 
     window.addEventListener('resize', this.handleResize)
   },

docs/src/layouts/App/style.scss

@@ -158,10 +158,12 @@ $menuBreakPoint: 800px;
   &__close-icon {
     display: flex;
     flex: 0 0 auto;
+    padding: 0.5rem;
     background: transparent;
     border: 0;
     color: $colorText;
     margin-left: 1.5rem;
+    margin-right: -0.5rem;
     transition: color 0.2s $ease;
 
     &:hover {
@@ -296,7 +298,7 @@ $menuBreakPoint: 800px;
       font-weight: bold;
       color: rgba($colorBlack, 0.2);
       position: absolute;
-      margin-left: -1.5em;
+      margin-left: -1rem;
     }
   }