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_dark.css b/docs/qmk_custom_dark.css
index a7feb159c..c7fe7b7da 100644
--- a/docs/qmk_custom_dark.css
+++ b/docs/qmk_custom_dark.css
@@ -27,3 +27,20 @@
 .markdown-section hr, .search {
     border-bottom: 1px solid #777 !important;
 }
+
+
+:root {
+    --docsifytabs-border-color: #555;
+    --docsifytabs-tab-highlight-color: var(--theme-color,#ea6f5a);
+
+    --docsifytabs-tab-background: #444;
+    --docsifytabs-tab-background-active: #3f3f3f;
+}
+
+.docsify-tabs__tab:focus {
+    outline: none !important;
+}
+
+.docsify-tabs__content .anchor {
+    transition: none;
+}