.

jacobp100 · May 5, 2024 · fe30cf1 · fe30cf1
1 parent cb9e2a4
commit fe30cf1
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 21 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -51,12 +51,10 @@
 :root {
   --pocket-jam: #f97f51;
   --piano-tabs: #fc427b;
-  --technicalc-light: #0652dd;
-  --technicalc-dark: #2771f9; /* 12% lighter */
-  --technicalc: var(--technicalc-light);
+  --technicalc: #2874ff;
   --calipers: #ffc312;
-  --freebies: #5f27cd;
-  --blog: #341f97;
+  --freebies: var(--color);
+  --blog: var(--color);
   --primary: var(--color);
   --color: black;
   --background: white;
@@ -157,7 +155,6 @@ a.header__logo {
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --technicalc: var(--technicalc-dark);
     --color: white;
     --background: black;
   }

diff --git a/assets/index.css b/assets/index.css
@@ -1,3 +1,8 @@
+:root {
+  /* Lighter to fit other app colours better */
+  --calipers: #ffc636;
+}
+
 .links {
   display: grid;
   grid-template-columns: repeat(auto-fit, calc(100% / var(--columns)));
@@ -6,15 +11,23 @@
 
 .link {
   position: relative;
-  background-color: currentColor;
   overflow: hidden;
   --allow-font-scaling: 0;
 }
 
+.link--primary {
+  color: white;
+  background: var(--color);
+}
+
+.link--secondary {
+  color: var(--color);
+}
+
 .link__app {
   display: block;
   width: 100%;
-  fill: white;
+  fill: currentColor;
   transform-origin: center;
   transition-duration: 300ms;
 }
@@ -26,7 +39,7 @@
   bottom: 0.5em;
   text-align: center;
   --font-weight: 600;
-  color: white;
+  color: currentColor;
 }
 
 .link__title--discretionary {

diff --git a/pages/index.mdx b/pages/index.mdx
@@ -7,8 +7,8 @@ export const css = "/assets/index.css";
 <div className={classNames("links")}>
   <A
     href="/pages/pocket-jam.mdx"
-    className={"link"}
-    style={{ color: `var(${cssVariable("--pocket-jam")})` }}
+    className="link link--primary"
+    style={{ [cssVariable('--color')]: `var(${cssVariable("--pocket-jam")})` }}
   >
     <Icon name="pocket-jam" className="link__app" />
     {/* MDX makes this a paragraph element without using the string */}
@@ -19,8 +19,8 @@ export const css = "/assets/index.css";
   </A>
   <A
     href="/pages/piano-tabs.mdx"
-    className={"link"}
-    style={{ color: `var(${cssVariable("--piano-tabs")})` }}
+    className="link link--primary"
+    style={{ [cssVariable('--color')]: `var(${cssVariable("--piano-tabs")})` }}
   >
     <Icon name="piano-tabs" className="link__app" />
     <span
@@ -30,8 +30,8 @@ export const css = "/assets/index.css";
   </A>
   <A
     href="/pages/technicalc.mdx"
-    className={"link"}
-    style={{ color: `var(${cssVariable("--technicalc")})` }}
+    className="link link--primary"
+    style={{ [cssVariable('--color')]: `var(${cssVariable("--technicalc")})` }}
   >
     <Icon name="technicalc" className="link__app" />
     <span
@@ -41,8 +41,8 @@ export const css = "/assets/index.css";
   </A>
   <A
     href="/pages/calipers.mdx"
-    className={"link"}
-    style={{ color: `var(${cssVariable("--calipers")})` }}
+    className="link link--primary"
+    style={{ [cssVariable('--color')]: `var(${cssVariable("--calipers")})` }}
   >
     <Icon name="calipers" className="link__app" />
     <span
@@ -52,16 +52,16 @@ export const css = "/assets/index.css";
   </A>
   <A
     href="/pages/freebies.mdx"
-    className={"link"}
-    style={{ color: `var(${cssVariable("--freebies")})` }}
+    className="link link--secondary"
+    style={{ [cssVariable('--color')]: `var(${cssVariable("--freebies")})` }}
   >
     <Icon name="link" className="link__app" />
     <span className={classNames("link__title")} children="Freebies" />
   </A>
   <A
     href="/pages/blog.mdx"
-    className={"link"}
-    style={{ color: `var(${cssVariable("--blog")})` }}
+    className="link link--secondary"
+    style={{ [cssVariable('--color')]: `var(${cssVariable("--blog")})` }}
   >
     <Icon name="link" className="link__app" />
     <span className={classNames("link__title")} children="Blog" />