fix the mobile style on the doc home page

SylphAI-Inc · Aug 17, 2024 · 4a05320 · 4a05320
1 parent 8fe404a
commit 4a05320
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -137,7 +137,7 @@ Just define it as a ``Parameter`` and pass it to our ``Generator``.
 
 ### **AdalComponent & Trainer**
 
-``AdalComponent`` acts as the `interpreter`  between task pipeline and the trainer,defining training and validation steps, optimizers, evaluators, loss functions, backward engine for textual gradients or tracing the demonstrations, the teacher generator.
+``AdalComponent`` acts as the `interpreter`  between task pipeline and the trainer, defining training and validation steps, optimizers, evaluators, loss functions, backward engine for textual gradients or tracing the demonstrations, the teacher generator.
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/SylphAI-Inc/LightRAG/main/docs/source/_static/images/trainer.png" alt="AdalFlow AdalComponent & Trainer">

diff --git a/docs/source/index.rst b/docs/source/index.rst
@@ -35,12 +35,38 @@
 
 .. raw:: html
 
-    <h2 style="text-align: center; font-size: 2.5em; margin-top: 0px;">
-    ⚡ The Library to Build and Auto-optimize Any LLM Task Pipeline ⚡
-    </h2>
-    <h3 style="text-align: center; font-size: 1.5em; margin-top: 20px; margin-bottom: 20px;">
-      Embracing a design philosophy similar to PyTorch, AdalFlow is powerful, light, modular, and robust.
+    <div class="desktop-only">
+      <h2 style="text-align: center; font-size: 2.5em; margin-top: 0px;">
+      ⚡ The Library to Build and Auto-optimize Any LLM Task Pipeline ⚡
+      </h2>
+      <h3 style="text-align: center; font-size: 1.5em; margin-top: 20px; margin-bottom: 20px;">
+        Embracing a design philosophy similar to PyTorch, AdalFlow is powerful, light, modular, and robust.
       </h3>
+    </div>
+    <div class="mobile-only">
+      <h2 style="text-align: center; font-size: 1.8em; margin-top: 0px;">
+      ⚡ The Library to Build and Auto-optimize Any LLM Task Pipeline ⚡
+      </h2>
+      <h3 style="text-align: center; font-size: 0.9em; margin-top: 20px; margin-bottom: 20px;">
+        Embracing a design philosophy similar to PyTorch, AdalFlow is powerful, light, modular, and robust.
+      </h3>
+    </div>
+
+    <style>
+      .mobile-only {
+        display: none;
+      }
+
+      @media (max-width: 600px) {
+        .desktop-only {
+          display: none;
+        }
+        .mobile-only {
+          display: block;
+        }
+      }
+    </style>
+
 
 ..  <div style="text-align: center;">
 ..      <p>
@@ -160,10 +186,17 @@ This trace graph demonstrates how our auto-differentiation works: :doc:`trace_gr
 
 **Trainable Task Pipeline**
 
+Just define it as a ``Parameter`` and pass it to our ``Generator``.
+
+
 .. figure:: /_static/images/trainable_task_pipeline.png
    :alt: AdalFlow Trainable Task Pipeline
    :align: center
 
+
+
+``AdalComponent`` acts as the `interpreter`  between task pipeline and the trainer, defining training and validation steps, optimizers, evaluators, loss functions, backward engine for textual gradients or tracing the demonstrations, the teacher generator.
+
 **AdalComponent & Trainer**
 
 .. figure:: /_static/images/trainer.png