better title colors? (mah)

AngeloChecked · Oct 21, 2024 · d197763 · d197763
1 parent 9bf7db2
commit d197763
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/blog/style/css.ts b/blog/style/css.ts
@@ -36,15 +36,14 @@ type CssProperty =
   | { gridTemplateColumns: string };
 
 type CssProperties<T = CssProperty> = {
-  [Key in keyof T]: T[Key];
+  [Key in keyof Partial<T>]: T[Key];
 };
 
 export function cssElement(
   cssObject: { elementName: HtmlElement } & CssObject,
 ): CssElement {
-  const { styleProperties, mergedCssProperties } = adjustAndMergeCssProps(
-    cssObject,
-  );
+  const { styleProperties, mergedCssProperties } =
+    adjustAndMergeCssProps(cssObject);
   const style = `
 ${cssObject.elementName} {
   ${styleProperties.join("\n  ")}
@@ -59,9 +58,8 @@ ${cssObject.elementName} {
 }
 
 export function cssClass(cssObject: { className: string } & CssObject) {
-  const { styleProperties, mergedCssProperties } = adjustAndMergeCssProps(
-    cssObject,
-  );
+  const { styleProperties, mergedCssProperties } =
+    adjustAndMergeCssProps(cssObject);
 
   const style = `
 .${cssObject.className} {
@@ -87,23 +85,27 @@ type CssOutput = {
 
 type CssObject = {
   properties: CssProperties;
-  from?: {
-    cssProperties: Record<string, string>;
-  } | undefined;
+  from?:
+    | {
+        cssProperties: Record<string, string>;
+      }
+    | undefined;
 };
 
 function adjustAndMergeCssProps(cssObject: CssObject) {
   const propertiesUnited = Object.entries(
     cssObject.from?.cssProperties ?? {},
   ).concat(
-    Object.entries(cssObject.properties as never as object)
-      .map(([key, value]) => [fromCamelCaseToKebabCase(key), value]),
+    Object.entries(cssObject.properties as never as object).map(
+      ([key, value]) => [fromCamelCaseToKebabCase(key), value],
+    ),
   );
 
   const mergedCssProperties = Object.fromEntries(propertiesUnited);
 
-  const styleProperties = Object.entries(mergedCssProperties)
-    .map(([key, value]) => `${key}: ${value};`);
+  const styleProperties = Object.entries(mergedCssProperties).map(
+    ([key, value]) => `${key}: ${value};`,
+  );
   return { styleProperties, mergedCssProperties };
 }
 

diff --git a/blog/style/mainCss.ts b/blog/style/mainCss.ts
@@ -73,11 +73,33 @@ export const rowClass = cssClass({
   },
 });
 
+export const h1Element = cssElement({
+  elementName: "h1",
+  properties: {
+    color: "#ff9061",
+  },
+});
+const h2Element = cssElement({
+  elementName: "h2",
+  properties: {
+    color: "#eba157",
+  },
+});
+const h3Element = cssElement({
+  elementName: "h3",
+  properties: {
+    color: "#ebd057",
+  },
+});
+
 export const styleCssFile = cssFile({
   aStyle,
   htmlStyle,
   imgStyle,
   mainClass,
   hoverAStyle,
   preStyle,
+  h1Element,
+  h2Element,
+  h3Element,
 });