Set style in css file

openproblems-bio · Oct 24, 2024 · e617021 · e617021
1 parent 6cf6dff
commit e617021
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 41 deletions.
diff --git a/documentation/index.qmd b/documentation/index.qmd
@@ -128,30 +128,7 @@ function Swatches(color, {
   }
 
   if (columns !== null) return htl.html`<div>
-  <style>
-
-.${id}-item {
-  break-inside: avoid;
-  display: flex;
-  align-items: center;
-  padding-bottom: 1px;
-}
-
-.${id}-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: calc(100% - ${+swatchWidth}px - 0.5em);
-}
-
-.${id}-swatch {
-  width: ${+swatchWidth}px;
-  height: ${+swatchHeight}px;
-  margin: 0 0.5em 0 0;
-}
-
-  </style>
-  <div style=${{width: "100%", columns}}>${domain.map(value => {
+  <div style=${{columns}}>${domain.map(value => {
     const label = `${format(value)}`;
     return htl.html`<div class=${id}-item>
       <div class=${id}-swatch style=${{background: color(value)}}></div>
@@ -162,23 +139,6 @@ function Swatches(color, {
 </div>`;
 
   return htl.html`<div>
-  <style>
-
-.${id} {
-  display: inline-flex;
-  align-items: center;
-  margin-right: 1em;
-}
-
-.${id}::before {
-  content: "";
-  width: ${+swatchWidth}px;
-  height: ${+swatchHeight}px;
-  margin-right: 0.5em;
-  background: var(--color);
-}
-
-  </style>
   <div>${domain.map(value => htl.html`<span class="${id}" style="--color: ${color(value)}">${format(value)}</span>`)}</div>`;
 }
 ```

diff --git a/documentation/milestones.css b/documentation/milestones.css
@@ -109,3 +109,42 @@
   background: #efefef;
   color: #313131;
 }
+
+/* legend */
+.legend-swatches {
+
+  display: inline-flex;
+  align-items: center;
+  margin-right: 1em;
+}
+
+.legend-swatches::before {
+  content: "";
+  width: 18px;
+  height: 18px;
+  margin-right: 0.5em;
+  background: var(--color);
+}
+
+
+.legend-swatches-item {
+  break-inside: avoid;
+  display: flex;
+  align-items: center;
+  padding-bottom: 1px;
+}
+
+.legend-swatches-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: calc(100% - 18px - 0.5em);
+}
+
+.legend-swatches-swatch {
+  width: 18px;
+  height: 18px;
+  margin: 0 0.5em 0 0;
+}
+
+