style(navbar): show icons only on medium screens (769-1100px)

Hide text labels and show only icons when screen narrows, before collapsing to hamburger menu. Saves space while keeping navigation accessible.
fix(darkmode): ensure consistent navbar icon colors
2025-12-05 19:17:28 -06:00 · 2025-12-03 08:36:58 -08:00 · 2025-12-03 08:33:33 -08:00 · 2025-12-03 07:14:44 -08:00 · 2025-12-03 07:10:20 -08:00 · 2025-12-03 06:39:19 -08:00
11 changed files with 109 additions and 35 deletions
--- a/README.md
+++ b/README.md
@@ -105,10 +105,14 @@ This textbook gives you a **systems level understanding of machine learning**, b

 ### Show Support

-Star the repository. It signals interest and helps us secure resources for open education.
+Star the repository to join us on the journey.

 [![Stars](https://img.shields.io/github/stars/harvard-edge/cs249r_book?style=for-the-badge&logo=github&color=gold)](https://github.com/harvard-edge/cs249r_book/stargazers)

+[![Star History Chart](https://api.star-history.com/svg?repos=harvard-edge/cs249r_book&type=Date)](https://star-history.com/#harvard-edge/cs249r_book&Date)
+
+**Tracking our way to 1 million learners.**
+
 ### Fund the Mission
 Your support helps provide TinyML kits, workshops, and infrastructure for learners worldwide.

--- a/quarto/assets/scripts/subscribe-modal.js
+++ b/quarto/assets/scripts/subscribe-modal.js
@@ -14,49 +14,53 @@
          <button class="modal-close" data-close-modal aria-label="Close">&times;</button>
          <div class="modal-content">
            <div class="modal-header">
-              <div class="modal-icon">📚</div>
-              <h2 class="modal-title">Get MLSysBook Updates</h2>
-              <p class="modal-subtitle">Be the first to know about new chapters, labs, and resources.</p>
+              <div class="modal-badges">
+                <span class="modal-badge">📚 MLSysBook</span>
+                <span class="modal-badge-plus">+</span>
+                <span class="modal-badge">🔥 TinyTorch</span>
+              </div>
+              <h2 class="modal-title">Stay in the Loop</h2>
+              <p class="modal-subtitle">Get updates on new chapters, hands-on labs, and ML systems resources.</p>
            </div>
            <form id="subscribe-modal-form" class="subscribe-form" action="https://buttondown.email/api/emails/embed-subscribe/mlsysbook" method="post">
              <div class="form-row">
                <div class="form-group">
                  <label for="modal-first-name">First name</label>
-                  <input type="text" id="modal-first-name" name="metadata__first_name" required placeholder="First name">
+                  <input type="text" id="modal-first-name" name="metadata__first_name" required placeholder="Jane">
                </div>
                <div class="form-group">
                  <label for="modal-last-name">Last name</label>
-                  <input type="text" id="modal-last-name" name="metadata__last_name" required placeholder="Last name">
+                  <input type="text" id="modal-last-name" name="metadata__last_name" required placeholder="Smith">
                </div>
              </div>
              <div class="form-group">
                <label for="modal-email">Email</label>
-                <input type="email" id="modal-email" name="email" required placeholder="you@example.com">
+                <input type="email" id="modal-email" name="email" required placeholder="jane@university.edu">
              </div>
              <div class="form-group">
-                <label>Role</label>
+                <label>I am a...</label>
                <div class="role-options role-options-three-compact">
                  <label class="role-option">
                    <input type="radio" name="metadata__role" value="educator" required>
-                    <span class="role-label">Educator</span>
+                    <span class="role-label">👩‍🏫 Educator</span>
                  </label>
                  <label class="role-option">
                    <input type="radio" name="metadata__role" value="student">
-                    <span class="role-label">Student</span>
+                    <span class="role-label">🎓 Student</span>
                  </label>
                  <label class="role-option">
                    <input type="radio" name="metadata__role" value="industry">
-                    <span class="role-label">Industry</span>
+                    <span class="role-label">💼 Industry</span>
                  </label>
                </div>
              </div>
              <div class="form-group">
                <label for="modal-organization">Organization <span class="optional-label">(optional)</span></label>
-                <input type="text" id="modal-organization" name="metadata__organization" placeholder="University, company, or school">
+                <input type="text" id="modal-organization" name="metadata__organization" placeholder="University or company">
              </div>
              <input type="hidden" name="tag" value="mlsysbook-textbook">
              <button type="submit" class="btn btn-primary subscribe-btn">Subscribe</button>
-              <p class="form-note">No spam. Unsubscribe anytime.</p>
+              <p class="form-note">No spam, ever. Unsubscribe anytime.</p>
            </form>
            <div id="modal-subscribe-success" class="subscribe-success" style="display: none;">
              <div class="success-icon">🎉</div>
@@ -153,11 +157,31 @@
        margin-bottom: 2rem;
      }

-      .modal-icon {
-        font-size: 2.5rem;
+      .modal-badges {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
        margin-bottom: 1rem;
      }

+      .modal-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.5rem 0.875rem;
+        background: #f1f5f9;
+        border-radius: 20px;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: #334155;
+      }
+
+      .modal-badge-plus {
+        color: #94a3b8;
+        font-size: 1rem;
+      }
+
      .modal-title {
        font-size: 1.75rem;
        font-weight: 700;
@@ -369,6 +393,15 @@
        color: #cbd5e1;
      }

+      body.quarto-dark .modal-badge {
+        background: #334155;
+        color: #e2e8f0;
+      }
+
+      body.quarto-dark .modal-badge-plus {
+        color: #64748b;
+      }
+
      body.quarto-dark .form-group input[type="text"],
      body.quarto-dark .form-group input[type="email"] {
        background: #0f172a;
--- a/quarto/assets/styles/dark-mode.scss
+++ b/quarto/assets/styles/dark-mode.scss
@@ -396,6 +396,17 @@ div[class*="margin"] {
  &.active {
    color: $link-color-dark !important;
  }
+  
+  // Ensure all Bootstrap icons in navbar have consistent color
+  .bi {
+    color: inherit !important;
+    fill: currentColor !important;
+  }
+  
+  // Target SVG icons directly
+  svg {
+    fill: currentColor !important;
+  }
 }

 // Dark mode toggle - show sun icon when in dark mode (clicking switches TO light)
--- a/quarto/assets/styles/style.scss
+++ b/quarto/assets/styles/style.scss
@@ -1310,7 +1310,34 @@ blockquote {
  }
 }

-// Medium tablets and small laptops - show shortened title
+// Medium tablets and small laptops - icons only in navbar
+@media (min-width: 769px) and (max-width: 1100px) {
+  // Hide text labels, show only icons
+  .navbar-nav .nav-link {
+    .menu-text,
+    .nav-text {
+      display: none !important;
+    }
+    
+    // Keep icons visible and properly sized
+    .bi {
+      font-size: 1.1rem !important;
+    }
+  }
+  
+  // Also hide text in dropdown toggles
+  .navbar-nav .dropdown-toggle {
+    .menu-text {
+      display: none !important;
+    }
+  }
+  
+  // Tighter spacing for icon-only nav
+  .navbar-nav .nav-item {
+    margin: 0 0.125rem !important;
+  }
+}
+
@media (min-width: 769px) and (max-width: 991px) {
  .navbar-brand {
    font-size: 1.1rem !important;
--- a/quarto/config/_quarto-html.yml
+++ b/quarto/config/_quarto-html.yml
@@ -64,19 +64,19 @@ website:
    collapse-below: "md"
    title: "Machine Learning Systems"
    right:
+      - icon: fire
+        text: "TinyTorch"
+        href: https://tinytorch.ai
+        target: _blank
      - icon: code
        text: "Hands-on"
        menu:
          - icon: code
            text: "Labs"
-            href: contents/labs/labs.qmd
+            href: /labs
          - icon: box
            text: "Kits"
-            href: contents/labs/kits.qmd
-      - icon: fire
-        text: "TinyTorch"
-        href: https://tinytorch.ai
-        target: _blank
+            href: /kits
      - text: "Downloads"
        menu:
          - icon: file-pdf
@@ -87,10 +87,6 @@ website:
            text: "EPUB"
            href: assets/downloads/Machine-Learning-Systems.epub
            target: _blank
-      - icon: envelope
-        text: "Subscribe"
-        href: https://buttondown.email/mlsysbook
-        target: _blank
      - icon: star
        text: "Star"
        href: https://github.com/harvard-edge/cs249r_book
@@ -99,6 +95,9 @@ website:
        text: "Support"
        href: https://opencollective.com/mlsysbook
        target: _blank
+      - icon: envelope
+        text: "Subscribe"
+        href: https://buttondown.email/mlsysbook
      - icon: github
        text: "GitHub"
        menu:
--- a/quarto/config/announcement.yml
+++ b/quarto/config/announcement.yml
@@ -12,8 +12,8 @@ website:
    type: primary
    position: below-navbar
    content: |
-      🎄 **December Release:** Tiny🔥Torch. Don't just `import torch`. [Build it →](https://mlsysbook.github.io/TinyTorch/intro.html)<br>
+      🎄 **December Release:** Tiny🔥Torch. Don't just `import torch`. [Build it →](https://tinytorch.ai)<br>

-      🌟 **2025 Goal:** Help us reach 10,000 stars. Each star spreads the word. [Learn more ↓](#support-our-mission)<br>
+      🌟 **2025 Goal reached!** 10,000 stars. Thank you for your support!<br>

      🎉 **Coming 2026:** Textbook published by The MIT Press. [See the news →](https://www.linkedin.com/posts/vijay-janapa-reddi-63a6a173_tinyml-tikz-ai-activity-7338324711145136128-6WU-?utm_source=share&utm_medium=member_desktop&rcm=ACoAAA-V7E4BcYtyZgLSeGhXC2t9jRSlmazfp-I)
--- a/quarto/contents/core/data_engineering/data_engineering.qmd
+++ b/quarto/contents/core/data_engineering/data_engineering.qmd
@@ -2171,7 +2171,7 @@ Our KWS system exemplifies governance challenges that arise when sophisticated s
 \resizebox{.8\textwidth}{!}{
 \begin{tikzpicture}[line join=round,font=\usefont{T1}{phv}{m}{n}]
 %Gear style
-% #1 number of teeths
+% #1 number of teeth
 % #2 radius intern
 % #3 radius extern
 % #4 angle from start to end of the first arc
--- a/quarto/contents/core/frontiers/frontiers.qmd
+++ b/quarto/contents/core/frontiers/frontiers.qmd
@@ -1545,7 +1545,7 @@ pics/stit/.style = {
  }
 }
 %gear
-% #1 number of teeths
+% #1 number of teeth
 % #2 radius intern
 % #3 radius extern
 % #4 angle from start to end of the first arc
--- a/quarto/contents/core/ops/ops.qmd
+++ b/quarto/contents/core/ops/ops.qmd
@@ -1281,7 +1281,7 @@ The operational frameworks, infrastructure components, and governance practices
 ```{.tikz}
 \begin{tikzpicture}[line join=round,font=\small\usefont{T1}{phv}{m}{n}]
 \definecolor{Siva}{RGB}{161,152,130}
-% #1 number of teeths
+% #1 number of teeth
 % #2 radius intern
 % #3 radius extern
 % #4 angle from start to end of the first arc
--- a/quarto/contents/core/optimizations/optimizations.qmd
+++ b/quarto/contents/core/optimizations/optimizations.qmd
@@ -1470,7 +1470,7 @@ arc[radius=0.53*\ra, start angle=245, end angle= 290];
 %%top
 \begin{scope}[local bounding box=GEAR,shift={($(90: 0.5*\ra)+(0,-0.75)$)},
 scale=1.0, every node/.append style={transform shape}]
-% #1 number of teeths
+% #1 number of teeth
 % #2 radius intern
 % #3 radius extern
 % #4 angle from start to end of the first arc
--- a/quarto/contents/core/robust_ai/robust_ai.qmd
+++ b/quarto/contents/core/robust_ai/robust_ai.qmd
@@ -1827,7 +1827,7 @@ LineA/.style={violet!80!black!50,line width=3pt,shorten <=2pt,shorten >=2pt,{{Tr
 Line/.style={violet!80!black!50,line width=2pt,shorten <=2pt,shorten >=10pt}
 }
 %Gear
-% #1 number of teeths
+% #1 number of teeth
 % #2 radius intern
 % #3 radius extern
 % #4 angle from start to end of the first arc
@@ -2092,7 +2092,7 @@ Online learning systems represent another unique attack surface. These systems c
    Line/.style={line width=1.0pt,Violet,text=black},
    DLine/.style={dashed,line width=1.0pt,Violet,text=black}
 }
-% #1 number of teeths
+% #1 number of teeth
 % #2 radius intern
 % #3 radius extern
 % #4 angle from start to end of the first arc
@@ -3287,7 +3287,7 @@ Larrow/.style={fill=orange, single arrow,  inner sep=2pt, single arrow head exte
            single arrow head indent=0pt,minimum height=6mm, minimum width=3pt}
 }
 %Gear style
-% #1 number of teeths
+% #1 number of teeth
 % #2 radius intern
 % #3 radius extern
 % #4 angle from start to end of the first arc
Author	SHA1	Message	Date
Vijay Janapa Reddi	1d9610e1bb	style(navbar): show icons only on medium screens (769-1100px) Hide text labels and show only icons when screen narrows, before collapsing to hamburger menu. Saves space while keeping navigation accessible.	2025-12-03 08:36:58 -08:00
Vijay Janapa Reddi	4374fa6738	fix(darkmode): ensure consistent navbar icon colors Star and Heart icons were appearing brighter than others in dark mode due to SVG fill not inheriting text color.	2025-12-03 08:33:33 -08:00
Vijay Janapa Reddi	bfd45bd7a6	style(subscribe): redesign modal with improved layout - Add MLSysBook + TinyTorch badges at top - Change header to 'Stay in the Loop' - Use 'I am a...' instead of 'Role' - Better placeholders (Jane, Smith, jane@university.edu) - Add emojis to role buttons - Update footer to 'No spam, ever' - Keep blue button (MLSysBook theme)	2025-12-03 07:14:44 -08:00
Vijay Janapa Reddi	4111ae4a85	style(subscribe): add emojis to role selection buttons - Educator → 👩‍🏫 Educator - Student → 🎓 Student - Industry → 💼 Industry Makes the form more visually scannable and friendly.	2025-12-03 07:10:20 -08:00
Vijay Janapa Reddi	7fb47b274d	docs(readme): add star history chart with punchy narrative - Star to 'join the journey' (not just signal interest) - Chart speaks for itself without justification - Punchline: 'Tracking our way to 1 million learners'	2025-12-03 06:39:19 -08:00
github-actions[bot]	a54c1b716a	Update contributors list [skip ci]	2025-12-03 14:15:25 +00:00
Vijay Janapa Reddi	188f80e3ba	style(readme): resize star history chart and add learner context - Constrain chart width to 400px for better visual balance - Add caption connecting stars to the mission of reaching learners	2025-12-03 06:10:54 -08:00
github-actions[bot]	439b29e562	Update contributors list [skip ci]	2025-12-03 13:48:06 +00:00
Vijay Janapa Reddi	92184a711c	feat(readme): add Star History chart to Support section Adds star-history.com chart showing repository growth trajectory. Placed in the Support This Work section alongside the Stars badge for better contextual relevance. Closes #1061	2025-12-03 05:43:47 -08:00
Vijay Janapa Reddi	f2586f9046	feat(nav): reorder navbar and update announcements - Reorder navbar: TinyTorch, Hands-on, Downloads, Star, Support, Subscribe, GitHub - Use short URLs for Labs (/labs) and Kits (/kits) - Update TinyTorch link to tinytorch.ai - Celebrate 10k stars milestone with thank you message - Remove target=_blank from Subscribe to enable modal popup	2025-12-03 05:43:11 -08:00
Didier Durand	24d241c26d	[Doc] removed all remaining 'teeths' (#1062 )	2025-12-03 05:32:21 -08:00