Make a textbox with the function definition

rose-lang · Nov 16, 2023 · 16fe5e6 · 16fe5e6
1 parent 737ac0d
commit 16fe5e6
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/packages/site/index.html b/packages/site/index.html
@@ -30,10 +30,10 @@
       ></a>
     </div>
     <div class="example">
+      <input class="textbox" value="x^y" readonly />
       <canvas width="300" height="300" id="canvas"></canvas>
     </div>
     <div></div>
-    <div></div>
     <div class="bottom">
       <a href="https://github.com/rose-lang/rose-icons">icons</a> by
       <a href="https://github.com/aatxe">Aaron Weiss</a> /

diff --git a/packages/site/style.css b/packages/site/style.css
@@ -51,7 +51,24 @@ body {
 
 .example {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  gap: 25px;
+}
+
+.textbox {
+  border: none;
+  background-color: #111;
+  padding: 5px;
+  border-radius: 10px;
+  color: grey;
+  font-family: monospace;
+  font-size: 20px;
+  text-align: center;
+}
+
+.textbox:focus {
+  outline: 2px solid var(--color-link-dark-hover);
 }
 
 .bottom {