chore: add TailwindCSS for demo styles

cheminfo · Jul 24, 2024 · 61f17d5 · 61f17d5
1 parent 1f1da4e
commit 61f17d5
Show file tree

Hide file tree

Showing 7 changed files with 897 additions and 27 deletions.
diff --git a/examples/base.css b/examples/base.css
@@ -1,3 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
-  font-family: sans-serif;
+  @apply font-sans m-4;
+}
+
+a {
+  @apply text-blue-600 underline;
+}
+
+button {
+  @apply bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white py-1 px-2 rounded;
+}
+
+h1 {
+  @apply text-3xl font-bold mb-3;
+}
+
+h2 {
+  @apply text-2xl font-bold mb-2;
+}
+
+h3 {
+  @apply text-xl font-bold mb-1;
+}
+
+ul > li {
+  @apply list-disc ml-4;
 }
diff --git a/examples/generic_editor/demo.html b/examples/generic_editor/demo.html
@@ -4,28 +4,18 @@
   <head>
     <title>Generic editor - PoC</title>
     <link rel="stylesheet" href="../base.css" />
-    <link rel="stylesheet" href="demo/demo.css" />
     <script type="module" src="demo/demo.ts"></script>
   </head>
-  <body style="font-family: sans-serif">
-    <div
-      style="display: flex; flex-direction: row; gap: 1em; margin-bottom: 1em"
-    >
+  <body>
+    <div class="flex flex-row gap-4 mb-4">
       <button id="loadMolecule">Load molecule</button>
       <button id="loadFragment">Load fragment</button>
       <button id="loadReaction">Load reaction</button>
     </div>
-    <div style="background-color: aquamarine; padding: 10px">
-      <div id="editor" style="width: 800px; height: 600px"></div>
+    <div class="bg-green-300 p-3">
+      <div id="editor" class="w-[800px] h-[600px]"></div>
     </div>
-    <div
-      style="
-        margin-top: 1em;
-        display: grid;
-        grid-template-columns: repeat(2, fit-content(100%));
-        gap: 1em;
-      "
-    >
+    <div class="mt-4 grid grid-cols-2 gap-4">
       <div>Change count</div>
       <div id="changeCount"></div>
       <div>ID Code</div>

diff --git a/examples/generic_editor/demo/demo.css b/examples/generic_editor/demo/demo.css