chiark / gitweb /
~bjharris / bedstead.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 3a6e2bc)
webstead: better layout
authorBen Harris <bjh21@bjh21.me.uk>
Sat, 20 Sep 2025 15:12:57 +0000 (16:12 +0100)
committerBen Harris <bjh21@bjh21.me.uk>
Tue, 13 Jan 2026 21:42:18 +0000 (21:42 +0000)
webstead.xhtml patch | blob | history

diff --git a/webstead.xhtml b/webstead.xhtml
index b07c812200f58e4ea24bdb7de8fffb5d8da946a8..4f80f56500a203edaeca60111cc08b57bec2f010 100644 (file)
--- a/webstead.xhtml
+++ b/webstead.xhtml
@@ -7,17 +7,30 @@
       :root {
           --pix: 50px;
       }
+      #inout {
+          display: flex;
+      }
+      #inout > * {
+          margin-left: var(--pix);
+          margin-top: var(--pix);
+      }
+      #outpane {
+          width: calc(5 * var(--pix));
+          height: calc(9 * var(--pix));
+      }
       #pixels {
           border-spacing: 0;
       }
       #pixels td {
           padding: 0;
+          line-height: 0;
+          border: 1px solid #33ff88;
       }
       #pixels input {
           appearance: none;
           margin: 0;
-          width: var(--pix);
-          height: var(--pix);
+          width: calc(var(--pix) - 2px);
+          height: calc(var(--pix) - 2px);
       }
       #pixels input:checked {
           background: #33ff88;
@@ -59,80 +72,82 @@
     </script>
   </head>
   <body>
-    <form>
-      <table id="pixels">
-        <tr>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-        </tr>
-        <tr>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-        </tr>
-        <tr>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-        </tr>
-        <tr>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-        </tr>
-        <tr>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-        </tr>
-        <tr>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-        </tr>
-        <tr>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-        </tr>
-        <tr>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-        </tr>
-        <tr>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-          <td><input type="checkbox"/></td>
-        </tr>
-      </table>
-    </form>
-    <p><code id="output"></code></p>
-    <div>
-      <svg width="600" height="1000"  xmlns="http://www.w3.org/2000/svg">
-        <g transform="scale(1,-1) translate(0,-800)">
-          <path id="rendered" fill="currentColor"/>
-        </g>
-      </svg>
+    <div id="inout">
+      <form id="inpane">
+        <table id="pixels">
+          <tr>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+          </tr>
+          <tr>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+          </tr>
+          <tr>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+          </tr>
+          <tr>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+          </tr>
+          <tr>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+          </tr>
+          <tr>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+          </tr>
+          <tr>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+          </tr>
+          <tr>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+          </tr>
+          <tr>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+            <td><input type="checkbox"/></td>
+          </tr>
+        </table>
+      </form>
+      <div id="outpane">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="100 100 500 1000">
+          <g transform="scale(1,-1) translate(0,-800)">
+            <path id="rendered" fill="currentColor"/>
+          </g>
+        </svg>
+      </div>
     </div>
+    <p><code id="output"></code></p>
   </body>
 </html>
Unnamed repository; edit this file 'description' to name the repository.