From bb16421a87a31019931166c8d8bf8af0585be2b3 Mon Sep 17 00:00:00 2001
From: CentreMetre <luckyminer01@gmail.com>
Date: Sun, 31 May 2026 14:29:51 +0100
Subject: [PATCH] Start styling output box. Remove readonly.

---
 public/index.html | 11 +----------
 public/style.css  | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 10 deletions(-)
 create mode 100644 public/style.css
diff --git a/public/index.html b/public/index.html
index 49beb2c..f879126 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>HTML 5 Boilerplate</title>
-    <!-- <link rel="stylesheet" href="style.css"> -->
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <h1>CodeList</h1>
@@ -27,10 +27,6 @@
         Output
       </h3>
       <div>
-        <div>
-          <label for="checkbox-read-only">Read-only?</label>
-          <input id="checkbox-read-only" type="checkbox">
-        </div>
         <div id="output">
           <div id="gutter"></div>
           <div contenteditable="true" id="output-area" class="output-area"></div>
@@ -39,7 +35,6 @@
     </div>
 
     <script>
-      const readOnlyCheckbox = document.getElementById("checkbox-read-only");
 
       const gutter = document.getElementById("gutter");
       const outputArea = document.getElementById("output-area");
@@ -53,10 +48,6 @@
         return outputArea.children.length;
       }
 
-      readOnlyCheckbox.addEventListener("change", (event) => {
-        outputArea.readOnly = readOnlyCheckbox.checked;
-      })
-
       function updateGutterLineCount() { // TODO: Refactor so its not slow when theres more
         gutter.innerHTML = ""
         console.log("update gutter line count")
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..48a4675
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,16 @@
+#output-area {
+    border-right: 2px solid grey;
+    width: 30ch;
+}
+
+#output-area:focus {
+    outline: none;
+}
+
+#gutter {
+    background-color: rgb(230, 230, 230);
+}
+
+#output {
+    display: flex;
+}
\ No newline at end of file
