Simplify editor toolbar to minimal design

Remove unnecessary features and simplify toolbar to match
Tufte-style minimalist design philosophy.

Changes:
- Remove "New equation mode" button and functionality
- Remove "Download" button
- Replace "Contribute" button with direct GitHub repo link
- Move "View source" link from title bar to editor toolbar
- Remove all borders/frames from toolbar buttons
- Use simple text links with subtle underlines on hover
- Cleaner toolbar with just toggle + two links

UI improvements:
- No title bar in main content (just h1 directly)
- Toolbar background matches sidebar (#f9fafb)
- Toggle button with no border, opacity hover effect
- Consistent minimal styling throughout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: stared

index.html

@@ -14,10 +14,7 @@ <h2>Equations</h2>
       </aside>
 
       <main id="main-content" class="main-content">
-        <div class="title-bar">
-          <h1 id="equation-title">Interactive Equations</h1>
-          <a id="source-link" class="source-link" href="#" target="_blank" rel="noopener">View source</a>
-        </div>
+        <h1 id="equation-title">Interactive Equations</h1>
         <p class="subtitle">Hover over colored terms to explore their meaning</p>
 
         <div id="color-scheme-switcher" class="color-scheme-switcher"></div>
@@ -45,9 +42,8 @@ <h1 id="equation-title">Interactive Equations</h1>
           <button id="toggle-editor-btn" class="toolbar-btn" title="Show/hide editor">
             <span class="icon">◀</span>
           </button>
-          <button id="new-equation-btn" class="toolbar-btn" title="Create new equation">New</button>
-          <button id="download-btn" class="toolbar-btn" title="Download markdown">Download</button>
-          <button id="contribute-btn" class="toolbar-btn" title="Contribute to repository">Contribute</button>
+          <a id="source-link" class="toolbar-link" href="#" target="_blank" rel="noopener">View source</a>
+          <a href="https://github.com/stared/equations-explained-colorfully" class="toolbar-link" target="_blank" rel="noopener">Contribute</a>
         </div>
         <div id="editor-container" class="editor-container"></div>
       </aside>

src/main.ts

@@ -71,7 +71,6 @@ let parsedContent: ParsedContent | null = null;
 
 // Editor state
 let editor: any = null;
-let isNewEquationMode = false;
 let currentMarkdown = '';
 let previewTimeout: number | null = null;
 
@@ -263,10 +262,8 @@ async function loadEquation(equationId: string, updateHash = true) {
     });
   }
 
-  // Load markdown into editor (for existing equation mode)
-  if (!isNewEquationMode) {
-    await loadMarkdownIntoEditor(`./examples/${equation.file}`);
-  }
+  // Load markdown into editor
+  await loadMarkdownIntoEditor(`./examples/${equation.file}`);
 }
 
 // Create equation selector buttons
@@ -410,97 +407,6 @@ function setupEditorControls() {
       editorSidebar.classList.toggle('collapsed');
     });
   }
-
-  // New equation mode toggle
-  const newEquationBtn = document.getElementById('new-equation-btn');
-  if (newEquationBtn && editorSidebar) {
-    newEquationBtn.addEventListener('click', () => {
-      isNewEquationMode = !isNewEquationMode;
-
-      if (isNewEquationMode) {
-        // Switch to new mode: show editor, load template
-        editorSidebar.classList.remove('collapsed');
-        newEquationBtn.textContent = 'Exit New Mode';
-
-        // Load template
-        const template = `# Equation
-
-$$
-\\mark[term1]{E} = \\mark[term2]{m} \\mark[term3]{c^2}
-$$
-
-# Description
-
-The famous [mass-energy equivalence]{.term2}: [energy]{.term1} equals [mass]{.term2} times the [speed of light]{.term3} squared.
-
-## .term1
-
-Energy (E) is the capacity to do work, measured in joules.
-
-## .term2
-
-Mass (m) is the amount of matter in an object, measured in kilograms.
-
-## .term3
-
-The speed of light (c) is approximately 299,792,458 meters per second.
-`;
-        currentMarkdown = template;
-        if (editor) {
-          editor.updateCode(template);
-        }
-      } else {
-        // Exit new mode: reload current equation
-        newEquationBtn.textContent = 'New';
-        if (currentEquationId) {
-          loadEquation(currentEquationId);
-        }
-      }
-    });
-  }
-
-  // Download markdown
-  const downloadBtn = document.getElementById('download-btn');
-  if (downloadBtn) {
-    downloadBtn.addEventListener('click', () => {
-      const markdown = currentMarkdown || '';
-      const blob = new Blob([markdown], { type: 'text/markdown' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = isNewEquationMode ? 'new-equation.md' : `${currentEquationId}.md`;
-      a.click();
-      URL.revokeObjectURL(url);
-    });
-  }
-
-  // Contribute instructions
-  const contributeBtn = document.getElementById('contribute-btn');
-  if (contributeBtn) {
-    contributeBtn.addEventListener('click', () => {
-      showContributeInstructions();
-    });
-  }
-}
-
-function showContributeInstructions() {
-  const instructions = `To contribute your equation to the repository:
-
-1. Download your markdown file using the Download button
-2. Fork the repository: https://github.com/stared/equations-explained-colorfully
-3. Add your .md file to the public/examples/ directory
-4. Add an entry to public/examples/equations.json:
-   {
-     "id": "your-equation-id",
-     "title": "Your Equation Name",
-     "category": "Field (e.g., Physics, Math)",
-     "file": "your-file.md"
-   }
-5. Submit a pull request with your changes
-
-Thank you for contributing!`;
-
-  alert(instructions);
 }
 
 // Initialize - load content and render

src/style.css

@@ -50,31 +50,12 @@ body {
   margin: 0 auto;
 }
 
-.title-bar {
-  display: flex;
-  align-items: baseline;
-  gap: 1rem;
-  margin-bottom: 0.5rem;
-}
-
 h1 {
   font-size: 2rem;
   font-weight: 400;
   color: var(--text-color);
   margin: 0;
-}
-
-.source-link {
-  font-size: 0.875rem;
-  color: #6b7280;
-  text-decoration: none;
-  border-bottom: 1px solid transparent;
-  transition: color 0.2s ease, border-color 0.2s ease;
-}
-
-.source-link:hover {
-  color: var(--text-color);
-  border-bottom-color: #6b7280;
+  margin-bottom: 0.5rem;
 }
 
 .subtitle {
@@ -252,41 +233,54 @@ h1 {
 
 .editor-toolbar {
   display: flex;
-  gap: 0.5rem;
+  gap: 1rem;
   padding: 1rem;
   border-bottom: 1px solid var(--border-color);
-  background-color: #ffffff;
+  background-color: #f9fafb;
   flex-shrink: 0;
+  align-items: center;
 }
 
 .editor-sidebar.collapsed .editor-toolbar {
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.5rem;
   padding: 0.5rem 0.25rem;
 }
 
 .toolbar-btn {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--border-color);
-  background-color: transparent;
+  padding: 0;
+  border: none;
+  background: none;
   color: var(--text-color);
-  font-size: 0.875rem;
+  font-size: 1rem;
   cursor: pointer;
   font-family: inherit;
-  transition: background-color 0.2s ease, color 0.2s ease;
-  white-space: nowrap;
+  transition: opacity 0.2s ease;
 }
 
 .toolbar-btn:hover {
-  background-color: var(--text-color);
-  color: var(--bg-color);
+  opacity: 0.6;
 }
 
-.editor-sidebar.collapsed .toolbar-btn {
-  padding: 0.5rem 0.25rem;
-  font-size: 0.75rem;
+.toolbar-link {
+  font-size: 0.875rem;
+  color: #6b7280;
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: color 0.2s ease, border-color 0.2s ease;
+  white-space: nowrap;
+}
+
+.toolbar-link:hover {
+  color: var(--text-color);
+  border-bottom-color: #6b7280;
+}
+
+.editor-sidebar.collapsed .toolbar-btn,
+.editor-sidebar.collapsed .toolbar-link {
   writing-mode: vertical-rl;
   text-orientation: mixed;
+  font-size: 0.875rem;
 }
 
 #toggle-editor-btn .icon {