styles: Custom outline

Author: ktquez

Diff for: styles/index.styl

@@ -17,6 +17,7 @@
   --text-accent-color-button: $textColorAccentButton
   --text-color-code: $textColorCode
   --border-color: $borderColor
+  --outline-color: $outlineColor
 
 html.dark-mode
   --bg: $darkBg
@@ -34,6 +35,7 @@ html.dark-mode
   --text-accent-color-button: $darkTextColorAccentButton
   --text-color-code: $darkTextColorCode
   --border-color: $darkBorderColor
+  --outline-color: $darkOutlineColor
 
 html.sepia-mode
   --bg: $sepiaBg
@@ -52,11 +54,16 @@ html.sepia-mode
   --text-accent-color-button: $sepiaTextColorAccentButton
   --text-color-code: $sepiaTextColorCode
   --border-color: $sepiaBorderColor
+  --outline-color: $sepiaOutlineColor
 
 html, body, .navbar, .sidebar, .links, .sidebar-link, .nav-link 
   background-color: var(--bg)
   color: var(--color)
 
+:focus
+  outline: 2px solid var(--outline-color)
+  outline-offset: 3px
+
 a, .edit-link > a 
   color: var(--text-color-link)
 

Diff for: styles/override-components.styl

@@ -40,7 +40,7 @@ a.nav-link
     font-weight: bold
 
     &:focus
-      border-color: var(--accent-color)
+      border: 2px solid var(--accent-color)
 
   .suggestions
     background-color: var(--bg-secondary)
@@ -58,6 +58,17 @@ a.nav-link
         a
           color: var(--text-color-link)
 
+.sidebar-links
+  > li
+    margin: 6px 0
+
+    .sidebar-sub-headers
+      margin-top: 5px
+
+      .sidebar-sub-header
+        margin-bottom: 5px
+        width: 96%
+
 a.sidebar-link
   color var(--color)
 
@@ -93,4 +104,8 @@ details.custom-block
   color var(--text-color-link)
 
 .navbar, .sidebar, .sidebar .nav-links
-  border-color: var(--border-color)
+  border-color: var(--border-color)
+
+.page-nav
+  > .inner
+    padding-bottom: 2px

Diff for: styles/palette.styl

@@ -48,4 +48,8 @@ $sepiaTextColorLink ?= #9F4519
 
 $borderColor ?= #eaecef
 $darkBorderColor ?= #565656
-$sepiaBorderColor ?= #e0c894
+$sepiaBorderColor ?= #e0c894
+
+$outlineColor ?= $textColor
+$darkOutlineColor ?= $darkTextColor
+$sepiaOutlineColor ?= $sepiaTextColor