Simplify the visual flow of the getting started page (#11316)

* Add tabs to getting started page

* Review comments

Co-authored-by: Ryan <fauxpark@gmail.com>

* Align with current theme

* Update docs/newbs_getting_started.md

Co-authored-by: Ryan <fauxpark@gmail.com>

* Apply suggestions from code review

Co-authored-by: Ryan <fauxpark@gmail.com>

Co-authored-by: Ryan <fauxpark@gmail.com>

1 files changed, 17 insertions, 0 deletions

diff --git a/docs/qmk_custom_light.css b/docs/qmk_custom_light.css
index 07b26ecec..c5d36cf6f 100644
--- a/docs/qmk_custom_light.css
+++ b/docs/qmk_custom_light.css
@@ -28,3 +28,20 @@
 .markdown-section pre {
   padding: 0;
 }
+
+
+:root {
+  --docsifytabs-border-color: #ddd;
+  --docsifytabs-tab-highlight-color: var(--theme-color, #0074d9);
+
+  --docsifytabs-tab-background: #f8f8f8;
+  --docsifytabs-tab-background-active: transparent;
+}
+
+.docsify-tabs__tab:focus {
+  outline: none !important;
+}
+
+.docsify-tabs__content .anchor {
+  transition: none;
+}