Add minimal layout to the example

remcohaszing · Aug 8, 2024 · 2a5efa2 · 2a5efa2
1 parent 3062856
commit 2a5efa2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/example/index.css b/example/index.css
@@ -1,5 +1,29 @@
 body {
   font-family: system-ui;
+  margin: 0;
+}
+
+nav {
+  background: #043d20;
+  padding: 0.5rem;
+  text-align: right;
+
+  & a {
+    color: #92b5ff;
+    padding: 0 0.5rem;
+    &:not(:last-child) {
+      border-right: 1px solid #545454;
+    }
+  }
+}
+
+.buttons {
+  text-align: center;
+  margin: 1rem;
+}
+
+.cm-editor {
+  margin: 0.5rem;
 }
 
 .cm-lintRange-deprecated {

diff --git a/example/index.html b/example/index.html
@@ -8,8 +8,14 @@
     <link rel="stylesheet" href="./index.css" />
   </head>
   <body>
-    <button id="lowercase-button" type="button">Lowercase</button>
-    <button id="uppercase-button" type="button">Uppercase</button>
+    <nav>
+      <a href="https://github.com/remcohaszing/codemirror-languageservice">GitHub</a
+      ><a href="https://www.npmjs.com/package/codemirror-languageservice">npm</a>
+    </nav>
+    <div class="buttons">
+      <button id="lowercase-button" type="button">Lowercase</button>
+      <button id="uppercase-button" type="button">Uppercase</button>
+    </div>
     <script type="module" src="./index.ts"></script>
   </body>
 </html>