#40 add custom text color for contribution (#41)

FabDonRixos · Nov 26, 2024 · f45caae · f45caae
2 parents 9697b53 + 7e81f3b
commit f45caae
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/eslint.config.js b/eslint.config.js
@@ -42,7 +42,7 @@ export default [
             "import/order": [
                 "warn",
                 {
-                    groups: ["builtin", "external", "internal", "parent", "sibling", "index", "unknown"],
+                    groups: ["builtin", "external", "internal", ["parent", "sibling"], "index", "unknown"],
                     pathGroups: [
                         {
                             pattern: "**/*.scss",

diff --git a/src/artworks/0_artworks-list/artworksList.tsx b/src/artworks/0_artworks-list/artworksList.tsx
@@ -14,6 +14,7 @@ export interface IArtworkItem {
     gitHubName: string;
     tags?: EArtworkTags[] | string[];
     backgroundColor?: `#${string}`; // No transparent backgrounds
+    textColor?: `#${string}`;
     full?: boolean; // Only use this if you really have no other but to claim more space.
     oneLink?: ILink;
     editedAt?: Date;
@@ -27,6 +28,7 @@ const artworksList: IArtworkItem[] = [
         gitHubName: "FabDonRixos",
         tags: [EArtworkTags.SIMPLE],
         backgroundColor: "#000000",
+        textColor: "#ffffff",
         full: true,
         oneLink: {
             name: "fabian.li",

diff --git a/src/website/artwork/Artwork.tsx b/src/website/artwork/Artwork.tsx
@@ -11,9 +11,13 @@ export default function Artwork({ artwork }: ArtWrapperProps): ReactElement {
         <div
             className={`${style.component} ${artwork.full ? `${style.full}` : undefined}`}
             style={
-                artwork.backgroundColor && artwork.backgroundColor.length <= 7
-                    ? ({ "--background-color": artwork.backgroundColor } as CSSProperties)
-                    : ({ "--background-color": "#000000" } as CSSProperties)
+                {
+                    "--background-color":
+                        artwork.backgroundColor && artwork.backgroundColor.length <= 7
+                            ? artwork.backgroundColor
+                            : "#000000",
+                    "--text-color": artwork.textColor && artwork.textColor.length <= 7 ? artwork.textColor : "#ffffff",
+                } as CSSProperties
             }
         >
             <div className={style.content}>{artwork.component}</div>

diff --git a/src/website/artwork/artwork.module.scss b/src/website/artwork/artwork.module.scss
@@ -43,6 +43,7 @@
     gap: 0.5rem;
     border-top: #737373 1px solid;
     background-color: rgba(255, 255, 255, 0.25);
+    color: var(--text-color);
     backdrop-filter: blur(10px);
     padding: 1rem;
     width: 100%;
@@ -54,14 +55,14 @@
       gap: 0.5rem;
 
       & a {
-        color: white;
+        color: var(--text-color);
         text-decoration: none;
-        border-bottom: 1px dotted white;
+        border-bottom: 1px dotted var(--text-color);
         width: fit-content;
 
         &:is(:hover, :focus) {
           outline: none;
-          border-bottom: 1px solid white;
+          border-bottom: 1px solid var(--text-color);
         }
       }
     }