Fully functional logic gates page

Signed-off-by: Alexander Lyall <alex@adcm.uk>

src/pages/logic-gates.astro

@@ -4,41 +4,31 @@ import "../styles/logic-gates.css";
 ---
 
 <BaseLayout title="Logic Gate Builder | Computing:Box">
-  <div class="binaryPage" id="logicPage">
+  <div id="logicPage" class="lg-container">
     
     <button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true">
       <span class="toolboxIcon" aria-hidden="true">🧰</span>
       <span class="toolboxText">TOOLBOX</span>
     </button>
 
-    <section class="topGrid" style="display:flex; flex-direction:column; height: 100%;">
-      
-      <div class="readout">
-        <div class="readoutBlock">
-          <div class="label" style="margin-bottom: 8px;">Interactive Simulator</div>
-          <div class="num denaryValue" style="font-size: 56px; line-height: 1;">LOGIC GATES</div>
-        </div>
-        <div style="color: var(--muted); font-size: 15px; font-family: var(--ui-font); text-align: center; max-width: 800px; margin-top: 12px;">
-          Drag items from the toolbox to the board. Drag from output ports to input ports to wire. Click a wire or node and press <kbd style="background:rgba(255,255,255,0.1); padding:2px 6px; border-radius:4px; font-family:var(--ui-font);">Delete</kbd> to remove it.
-        </div>
+    <div class="lg-top-header">
+      <div class="lg-title">Interactive Logic Circuit Builder</div>
+      <div class="lg-subtitle">
+        Drag items from the toolbox to the board. Drag from output ports to input ports to wire. Click a wire or node and press <kbd>Delete</kbd> to remove it.
       </div>
+    </div>
 
-      <div class="divider"></div>
-
-      <div class="lg-workspace" id="workspace">
-        <svg class="lg-svg-layer" id="wireLayer"></svg>
-        </div>
-      
-    </section>
-
-    <aside id="toolboxPanel" class="panelCol" aria-label="Toolbox">
+    <div class="lg-workspace" id="workspace">
+      <svg class="lg-svg-layer" id="wireLayer"></svg>
+      </div>
+    
+    <aside id="toolboxPanel" class="lg-toolbox" aria-label="Toolbox">
       
       <div class="card">
         <div class="cardTitle">Components</div>
         
         <div class="tb-icon-grid" id="toolboxGrid">
           </div>
-
       </div>
 
       <div class="card">