fix: added visibility hidden sidebar when mobile to avoid focusing on links while hidden

Author: ktquez

Diff for: layouts/Layout.vue

@@ -76,7 +76,7 @@ export default {
 </script>
 
 <style lang="stylus" src="../styles/content.styl"></style>
-<style lang="stylus" src="../styles/override-components.styl"></style>
+<style lang="stylus" src="../styles/override/index.styl"></style>
 <style lang="stylus">
 .btn-color-mode
   margin-top: 2.75rem

Diff for: styles/override-components.styl

@@ -0,0 +1,21 @@
+div.custom-block
+  .custom-block-title
+    color: inherit !important
+
+  &.warning
+    color: var(--color)
+    background-color: var(--bg-tip-warning)
+  
+  &.danger
+    background-color: var(--bg-tip-danger)
+
+  &.danger, &.danger > .custom-block-title
+    color: var(--color)
+  
+  &.tip
+    background-color: var(--bg-secondary)
+
+details.custom-block
+  &.details
+    color: var(--color)
+    background-color: var(--bg-secondary)

Diff for: styles/override/custom-block.styl

@@ -0,0 +1,19 @@
+.home
+  .hero
+    .description
+      color: var(--color-light)
+
+    .action-button
+      background-color: var(--accent-color)
+      color: var(--text-accent-color-button)
+
+      &:hover
+        background-color: var(--accent-color-darken)
+    
+  .features
+    h2, p
+      color: inherit
+
+  .features, .footer
+    color: var(--color)
+    border-top-color var(--border-color)

Diff for: styles/override/home.styl

@@ -0,0 +1,17 @@
+@require './home.styl'
+@require './custom-block.styl'
+@require './search.styl'
+@require './sidebar.styl'
+
+.page-edit .edit-link > a
+  color var(--text-color-link)
+  
+.navbar, .sidebar, .sidebar .nav-links
+  border-color: var(--border-color) !important
+
+.page-nav
+  > .inner
+    padding-bottom: 2px
+
+.theme-default-content:not(.custom), .page-edit, .page-nav 
+  max-width: var(--content-max-width)

Diff for: styles/override/index.styl

@@ -0,0 +1,13 @@
+.navbar .site-name
+  color: var(--color)
+
+.navbar .links
+  background var(--bg)
+
+.nav-links .repo-link:hover
+  color var(--text-color-link)
+
+a.nav-link
+  &:hover, &.router-link-active
+    color var(--text-color-link)
+    border-color: var(--text-color-link) !important

Diff for: styles/override/navbar.styl

@@ -0,0 +1,26 @@
+.search-box 
+  input 
+    background-position: .6rem .4rem
+    background-color: var(--bg-search)
+    color: var(--color)
+    border: 2px solid var(--border-color)
+    font-weight: bold
+
+    &:focus
+      border-color: var(--accent-color)
+
+  .suggestions
+    background-color: var(--bg-secondary)
+    border-color: var(--border-color)
+    border-radius: 0 0 2px 2px
+    border-top: 0
+
+    .suggestion
+      a
+        color: var(--color)
+
+      &:hover, &.focused
+        background-color: var(--bg)
+
+        a
+          color: var(--text-color-link)

Diff for: styles/override/search.styl

@@ -0,0 +1,27 @@
+.sidebar-links
+  > li
+    margin: 6px 0
+
+    .sidebar-sub-headers
+      margin-top: 5px
+
+      .sidebar-sub-header
+        margin-bottom: 5px
+        width: 95%
+
+a.sidebar-link
+  color var(--color)
+
+  &:hover, &.active
+    color var(--text-color-link)
+
+  &.active
+    border-left-color var(--accent-color)
+
+@media (max-width: $MQMobile)
+  .theme-container.sidebar-open .sidebar
+    visibility: visible
+
+  .sidebar
+      visibility: hidden
+      transition: transform .2s ease, visibility .2s