Styling

Author: davidsklar99

pages/lex/timescales/@id/+Page.ts

@@ -76,14 +76,17 @@ export function Page() {
       h("div.timescale-content", [
         h("h1", titleCase(timescale)),
         h("h3", max_age + " - " + min_age + " Ma"),
-        h(Timescale, {
-          length: 970,
-          levels: [0, 5],
-          ageRange: [min_age, max_age],
-          orientation: "horizontal",
-          absoluteAgeScale: true,
-          onClick: handleClick,
-        }),
+        h('div.timescale-container', 
+          h(Timescale, {
+            length: 970,
+            levels: [0, 5],
+            ageRange: [min_age, max_age],
+            orientation: "horizontal",
+            absoluteAgeScale: true,
+            onClick: handleClick,
+            className: "timescale",
+          }),
+        ),
         h(
           "div.int-list",
           Object.entries(grouped).map(([intType, group]) =>

pages/lex/timescales/@id/main.module.scss

@@ -13,8 +13,16 @@ h3 {
   gap: 1em;
 }
 
+.timescale-container {
+  color: var(--text-emphasized-color) !important;
+
+  line {
+    stroke: var(--text-emphasized-color) !important;
+  }
+}
+
 tspan {
-  fill: var(--text-color); // sets the color to deep orange
+  fill: var(--text-color); 
   font-size: 14px;
 }
 
@@ -43,4 +51,4 @@ tspan {
       border-radius: 0.2em;
     }
   }
-}
+}

pages/maps/+Page.ts

@@ -77,4 +77,4 @@ function SourceItem({ source }) {
     },
     [h("a", { href: url, target: "_blank" }, ref_title)]
   );
-}
+}