Merge pull request #912 from roboflow/docs/styling

Update Docs Styling & Nav

.gitignore

@@ -139,6 +139,7 @@ profile/
 *.pstats
 *.jpeg
 *.png
+!favicon.png
 !icon.png
 *.mp4
 *.roboflow.txt

docs/index.md

@@ -1,8 +1,26 @@
 ---
 hide:
+  - path
+  - navigation
   - toc
 ---
 
+<style>
+/* Hide <h1> on homepage */
+.md-typeset h1 {
+  display: none;
+}
+.md-main__inner {
+  margin-top: -1rem;
+}
+
+/* constrain to same width even w/o sidebar */
+.md-content {
+  max-width: 50rem;
+  margin: auto;
+}
+</style>
+
 ![Roboflow Inference banner](https://github.com/roboflow/inference/blob/main/banner.png?raw=true)
 
 Roboflow Inference is an open-source platform designed to simplify the deployment of computer vision models. It enables developers to perform object detection, classification, instance segmentation and [keypoint detection](/quickstart/run_keypoint_detection/), and utilize foundation models like [CLIP](/foundation/clip), [Segment Anything](/foundation/sam), and [YOLO-World](/foundation/yolo_world) through a Python-native package, a self-hosted inference server, or a fully [managed API](https://docs.roboflow.com/).

docs/styles.css

@@ -5,7 +5,8 @@
   margin-bottom: 0;
 }
 .md-tabs__link {
-  font-size: 1rem;
+  font-size: 0.9rem;
+  margin-top: 0.1rem;
 }
 
 .half-button {
@@ -16,3 +17,36 @@
   display: flex;
   justify-content: space-between;
 }
+
+.md-header {
+  background: #8315f9;
+  background: linear-gradient(90deg, #8315f9 5%, #7812c7 50%, #401e62);
+}
+
+.md-tabs {
+  background: transparent;
+  line-height: normal;
+}
+
+.md-tabs__item {
+  height: 1.8rem;
+}
+
+[dir=ltr] .md-header__title {
+  margin-left: 0;
+}
+
+@media screen and (min-width: 76.25em) {
+  [dir=ltr] .md-header__source {
+      margin-left: 0.25rem;
+  }
+}
+
+@media screen and (min-width: 60em) {
+  .md-search__input {
+      font-size: .7rem;
+  }
+
+.md-main__inner {
+  margin-top: 0.25rem;
+}

mkdocs.yml

@@ -28,15 +28,11 @@ extra_css:
   - styles/cookbooks.css
 
 nav:
-  - Roboflow Inference:
-      - What is Inference?: index.md
-      - Enterprise Features: enterprise/enterprise.md
-      - Inference Basics:
-          - Roboflow Ecosystem: quickstart/roboflow_ecosystem.md
-          - 'Models: Popular': quickstart/aliases.md
-          - 'Models: Fine-tuned': quickstart/explore_models.md
-          - 'Models: Universe': quickstart/load_from_universe.md
-          - 'Models: Local Weights': models/from_local_weights.md
+  - Models:
+      - 'Models: Popular': quickstart/aliases.md
+      - 'Models: Fine-tuned': quickstart/explore_models.md
+      - 'Models: Universe': quickstart/load_from_universe.md
+      - 'Models: Local Weights': models/from_local_weights.md
       - Supported Fine-Tuned Models:
           - YOLOv10: fine-tuned/yolov10.md
           - YOLOv9: fine-tuned/yolov9.md
@@ -96,6 +92,7 @@ nav:
         - Schema API: workflows/schema_api.md
         - Changelog: workflows/execution_engine_changelog.md
   - Reference:
+      - Roboflow Ecosystem: quickstart/roboflow_ecosystem.md
       - Inference Pipeline: using_inference/inference_pipeline.md
       - Active Learning:
           - Use Active Learning: enterprise/active-learning/active_learning.md
@@ -132,12 +129,12 @@ nav:
 
 theme:
   name: 'material'
-  logo: inference-icon.png
-  favicon: inference-icon.png
+  logo: roboflow-logomark-white.svg
+  favicon: favicon.png
   custom_dir: docs/theme
   font:
-    text: Roboto
-    code: Roboto Mono
+    text: Inter
+    code: ui-monospace
   features:
     - navigation.top
     - navigation.tabs
@@ -152,15 +149,6 @@ theme:
   palette:
     - scheme: default
       primary: 'custom'
-      toggle:
-        icon: material/brightness-7
-        name: Switch to dark mode
-
-    - scheme: slate
-      primary: 'custom'
-      toggle:
-        icon: material/brightness-4
-        name: Switch to light mode
 
 plugins:
   - mkdocstrings: