Add some styling (still very early stages)

2023-11-26 16:25:23 -08:00
parent 250dbb4ee8
commit 33c3f87564
2 changed files with 64 additions and 17 deletions
--- a/index.html
+++ b/index.html
@@ -2,10 +2,45 @@
 <html>
 <head>
  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Main</title>
  <script type="module" src="https://unpkg.com/@navsnpm/katex-expression/dist/katex-expression/katex-expression.esm.js"></script>
  <script nomodule="" src="https://unpkg.com/@navsnpm/katex-expression/dist/katex-expression/katex-expression.js"></script>
  <style>body { padding: 0; margin: 0; }</style>
+  <style>
+textarea {
+    display: block;
+    width: 100%;
+    height: 10em;
+    resize: none;
+}
+
+input[type="text"] {
+    width: 100%;
+}
+
+.rule-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.rule-list katex-expression {
+    margin-left: .5em;
+    margin-right: .5em;
+    flex-grow: 1;
+    flex-basis: 0;
+}
+
+.elm-root {
+    max-width: 800px;
+    margin: auto;
+    padding: 1em;
+    border: 1px solid #c3c3c3;
+    border-radius: 0.5em;
+}
+  </style>
 </head>

 <body>