Molecule Design Guide

@@ -8,17 +8,17 @@   }   * { box-sizing:border-box; margin:0; padding:0; }   html, body { background:var(--bg); color:var(--body);-    font:15px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-    scrollbar-width:none; -ms-overflow-style:none; }+    font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;+    scrollbar-width:none; -ms-overflow-style:none; overflow:hidden; }   html::-webkit-scrollbar, body::-webkit-scrollbar { width:0; height:0; display:none; }-  #wrap { max-width:880px; margin:0 auto; padding:28px 20px 60px; }-  h2 { color:var(--text); font-size:26px; margin:10px 0 6px; letter-spacing:-.01em; }-  h3 { color:var(--text); font-size:20px; margin:34px 0 10px; }-  h4 { color:var(--text); font-size:16px; margin:26px 0 8px; }-  h5 { color:var(--text); font-size:14.5px; margin:20px 0 6px; }-  p  { margin:10px 0; }-  ul { margin:8px 0 8px 26px; }-  li { margin:5px 0; }+  #wrap { max-width:880px; margin:0 auto; padding:24px 20px 40px; }+  h2 { color:var(--text); font-size:25px; margin:8px 0 6px; letter-spacing:-.01em; }+  h3 { color:var(--text); font-size:19px; margin:28px 0 8px; }+  h4 { color:var(--text); font-size:16px; margin:22px 0 6px; }+  h5 { color:var(--text); font-size:14.5px; margin:18px 0 5px; }+  p  { margin:9px 0; }+  ul { margin:7px 0 7px 26px; }+  li { margin:4px 0; }   a  { color:var(--accent); text-decoration:none; }   a:hover { text-decoration:underline; }   strong { color:var(--text); }@@ -27,36 +27,31 @@     background:var(--elevated); border:1px solid var(--border); border-radius:4px; padding:1px 5px; }   pre.code { font-family:ui-monospace,Consolas,monospace; font-size:13px; color:var(--text);     background:var(--elevated); border:1px solid var(--border); border-radius:8px;-    padding:12px 14px; margin:6px 0; overflow-x:auto; }+    padding:11px 14px; margin:6px 0; overflow-x:auto; }   pre.code code { background:none; border:none; padding:0; }   .kicker { color:var(--accent); font-weight:600; font-size:12px; letter-spacing:.12em; }-  .pagehead h1 { color:var(--text); font-size:34px; margin:6px 0 8px; letter-spacing:-.02em; }+  .pagehead h1 { color:var(--text); font-size:33px; margin:6px 0 8px; letter-spacing:-.02em; }   .sub { color:var(--muted); max-width:640px; }-  .rule { height:3px; width:64px; background:var(--accent); border-radius:2px; margin:18px 0 0; }-  /* tabs */-  .tabs { display:flex; gap:6px; margin:26px 0 26px; border-bottom:1px solid var(--border); }+  .rule { height:3px; width:64px; background:var(--accent); border-radius:2px; margin:16px 0 0; }+  .tabs { display:flex; gap:6px; margin:22px 0 22px; border-bottom:1px solid var(--border); }   .tab { background:none; border:none; border-bottom:2px solid transparent; color:var(--muted);     font:600 14px/1 inherit; font-family:inherit; padding:10px 16px 12px; cursor:pointer; }-  .tab:hover { color:var(--text); }-  .tab.on { color:var(--accent); border-bottom-color:var(--accent); }-  .panel { display:none; }-  .panel.on { display:block; }-  .meta { color:var(--muted); font-size:13px; margin:2px 0 14px; }+  .tab:hover { color:var(--accent); }+  .meta { color:var(--muted); font-size:13px; margin:2px 0 12px; }   .seealso { color:var(--muted); font-size:13px; background:var(--surface);-    border:1px solid var(--border); border-radius:8px; padding:9px 13px; margin:12px 0; }+    border:1px solid var(--border); border-radius:8px; padding:8px 13px; margin:11px 0; }   .fig { background:var(--surface); border:1px solid var(--border); border-radius:10px;-    padding:14px; margin:18px 0 6px; text-align:center; }-  .fig img { max-width:100%; height:auto; border-radius:6px; }+    padding:12px; margin:16px 0 6px; text-align:center; }+  .fig img { max-width:100%; max-height:400px; width:auto; height:auto; border-radius:6px; }   .fig img + img { margin-top:10px; }-  .figcap { color:var(--muted); font-size:12.5px; text-align:center; margin:6px 0 18px; }-  .tblwrap { overflow-x:auto; margin:14px 0; }+  .figcap { color:var(--muted); font-size:12.5px; text-align:center; margin:6px 0 16px; }+  .tblwrap { overflow-x:auto; margin:13px 0; }   table { border-collapse:collapse; width:100%; font-size:13.5px; }-  th,td { border:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top; }+  th,td { border:1px solid var(--border); padding:7px 10px; text-align:left; vertical-align:top; }   th { background:var(--elevated); color:var(--text); }   tr:nth-child(even) td { background:var(--surface); }-  /* slideshow */   .deck { position:relative; background:var(--surface); border:1px solid var(--border);-    border-radius:12px; padding:14px 14px 10px; margin:16px 0 8px; }+    border-radius:12px; padding:14px 14px 10px; margin:14px 0 8px; }   .stage { position:relative; aspect-ratio:16/9; }   .slide { display:none; position:absolute; inset:0; width:100%; height:100%;     object-fit:contain; border-radius:6px; }@@ -70,7 +65,8 @@   .dot.on { background:var(--accent); }   .count { color:var(--muted); font-size:12.5px; min-width:46px; text-align:right; }   .srcnote { color:var(--muted); font-size:13px; }-  footer { color:var(--muted); font-size:12.5px; margin-top:56px; border-top:1px solid var(--border); padding-top:14px; }+  .secdiv { border:none; border-top:1px solid var(--border); margin:40px 0 0; }+  footer { color:var(--muted); font-size:12.5px; margin-top:34px; border-top:1px solid var(--border); padding-top:12px; } </style></head><body> <div id="wrap">   <div class="pagehead">@@ -81,13 +77,13 @@     <div class="rule"></div>   </div> -  <nav class="tabs" role="tablist">-    <button class="tab on" data-tab="deck">Slide deck</button>-    <button class="tab" data-tab="wp">White paper</button>-    <button class="tab" data-tab="guide">Design guide</button>+  <nav class="tabs" id="nav-top">+    <button class="tab" data-go="sec-deck">Slide deck</button>+    <button class="tab" data-go="sec-wp">White paper</button>+    <button class="tab" data-go="sec-guide">Design guide</button>   </nav> -  <section class="panel on" id="panel-deck">+  <section id="sec-deck">     <h2>What is a Molecule? — The Slide Deck</h2>     <p class="meta">11 slides · the beginner introduction. Also available       <a href="https://docs.google.com/presentation/d/1LQSI1YMCZsVmC5ofULPHoJVyt0phHyBwX1fbb88-CRs/edit" target="_blank" rel="noopener">in Google Slides</a>.</p>@@ -113,10 +109,10 @@       </div>     </div>     <p class="srcnote">Use the arrows, the dots, or your keyboard&rsquo;s arrow keys.</p>-    <p class="seealso related">Related wiki pages: <a href="https://wiki.adom.inc/adom/adom-machine-parts-library" target="_blank" rel="noopener">Machine parts library</a> · <a href="https://wiki.adom.inc/adom/base-scaffold-system" target="_blank" rel="noopener">Base Scaffold system</a> · <a href="https://wiki.adom.inc/adom/bmi270-molecule" target="_blank" rel="noopener">BMI270 Molecule</a></p>   </section> -  <section class="panel" id="panel-wp">+  <hr class="secdiv">+  <section id="sec-wp">     <h2>White Paper: Molecule Design</h2>     <p class="meta">Adom Industries, Inc. · Version 1.0 · September 2025</p>     <p class="seealso related">Related wiki pages: <a href="https://wiki.adom.inc/adom/base-scaffold-system" target="_blank" rel="noopener">Base Scaffold system</a> · <a href="https://wiki.adom.inc/adom/base-scaffold-control-panel" target="_blank" rel="noopener">Workcell Control Panel</a> · <a href="https://wiki.adom.inc/adom/adom-machine-parts-library" target="_blank" rel="noopener">Machine parts library</a></p>@@ -339,7 +335,8 @@ <p>While there are several technical classifications of wings being defined, the details thereof exceed the scope of this document.</p>   </section> -  <section class="panel" id="panel-guide">+  <hr class="secdiv">+  <section id="sec-guide">     <h2>The Working Design Guide</h2>     <p class="meta">Practical guidance: sane PCB design practices, naming, clamping, wings.       Live version <a href="https://docs.google.com/document/d/1LkYCzQ6w03saC3rsyJgP75t7mG2T0FIEeN36KHn8VPE/edit" target="_blank" rel="noopener">in Google Docs</a>.</p>@@ -347,7 +344,6 @@     <h3>Welcome to the Adom Molecule Design Guide!</h3> <p>Here we will walk you through a number of concepts and provide resources so that you can design your own Molecules for the Adom Factory in no time!</p> <p>First, please review the W<a href="https://docs.google.com/presentation/d/1LQSI1YMCZsVmC5ofULPHoJVyt0phHyBwX1fbb88-CRs/edit" target="_blank" rel="noopener">hat is a Molecule Slide Deck </a>- this will cover beginner concepts.</p>-<p>Fusion 360 PCB/Molecule Workshop: <a href="https://youtu.be/Psn8gl7UtIA" target="_blank" rel="noopener">https://youtu.be/Psn8gl7UtIA</a></p> <h4>Next steps:</h4> <p>After you have reviewed the above, you can create your first Molecule! The design concepts are the same but your actual design process may vary slightly depending on which EDA Software you use. We have schematic symbol and footprint libraries for Fusion360 Electronics and KiCad. We also have a Medium Pin Molecule Template available for KiCad. We will do our best to illustrate the design concepts in a software-agnostic manner, but please do expect to see things demonstrated in specific softwares.</p> <h3>Sane PCB Design Practices</h3>@@ -493,6 +489,12 @@ <p>The benefit of doing this is that we don’t take up the next position on the 8mm grid of the Scaffold below with our machine pins. Thus, another Molecule that does not have a wing on its top edge could still fit in that scaffold hole pattern, allowing maximum density in the circuit layout.</p>   </section> +  <nav class="tabs" id="nav-bottom">+    <button class="tab" data-go="sec-deck">Slide deck</button>+    <button class="tab" data-go="sec-wp">White paper</button>+    <button class="tab" data-go="sec-guide">Design guide</button>+  </nav>+   <footer>Sources: &ldquo;White Paper - Molecule Design&rdquo; v1.0 and &ldquo;[CURRENT] Molecule Design Guide 2&rdquo;,     both maintained in Google Drive; slide deck rebuilt July 2026 from wiki component pages     (machine pins, contacts, base-scaffold-system). Maintained by the Adom hardware team.</footer>@@ -503,17 +505,13 @@   function post() {     parent.postMessage({type: 'readme-height', height: wrap.offsetHeight + 20}, '*');   }-  // tabs-  function setTab(name) {-    document.querySelectorAll('.tab').forEach(function(t) { t.classList.toggle('on', t.dataset.tab === name); });-    document.querySelectorAll('.panel').forEach(function(p) { p.classList.toggle('on', p.id === 'panel-' + name); });-    post(); setTimeout(post, 250); setTimeout(post, 1200);+  function go(id) {+    var el = document.getElementById(id);+    if (el) el.scrollIntoView({behavior: 'smooth', block: 'start'});   }-  document.querySelectorAll('.tab').forEach(function(t) { t.onclick = function() { setTab(t.dataset.tab); }; });-  document.querySelectorAll('.tablink').forEach(function(a) {-    a.onclick = function(e) { e.preventDefault(); setTab(a.dataset.tab); };+  document.querySelectorAll('.tab, .jumplink').forEach(function(b) {+    b.addEventListener('click', function(e) { e.preventDefault(); go(b.dataset.go); });   });-  // slideshow   var n = 1, N = 11;   function show(k) {     n = ((k - 1 + N) % N) + 1;@@ -528,11 +526,10 @@     if (e.key === 'ArrowLeft') show(n - 1);     if (e.key === 'ArrowRight') show(n + 1);   });-  // height contract   window.addEventListener('load', post);   window.addEventListener('resize', post);   document.querySelectorAll('img').forEach(function(im) { im.addEventListener('load', post); });-  setTimeout(post, 800); setTimeout(post, 2500);+  setTimeout(post, 800); setTimeout(post, 2500); setTimeout(post, 6000); })(); </script> </body></html>