button background and link colors

neuland · Jun 14, 2024 · 1aee3c2 · 1aee3c2
1 parent a8e69fd
commit 1aee3c2
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/src/components/Button.astro b/src/components/Button.astro
@@ -19,16 +19,24 @@ const { title, variant = "primary", href } = Astro.props;
   }
 
   a.c_Button {
+    --background-color: #eeebe2;
     text-decoration: none;
     display: inline-block;
-    height: var(--button-height);
-    border-radius: calc(var(--button-height) / 2);
+    min-height: var(--button-height);
+    border-radius: 100px;
+    align-self: start;
     padding: 2px;
     border: 0;
-    background: linear-gradient(180deg, rgb(168, 168, 168), rgb(255, 255, 255)),
+    background: linear-gradient(
+        180deg,
+        rgba(0, 0, 0,0.4),
+        var(--background-color, rgb(255, 255, 255))
+      ),
       var(--accent-color);
-    box-shadow: 0 -2px 3px rgb(229, 229, 229), 0 2px 3px 2px rgb(255, 255, 255),
-      0 0 25px rgba(0, 0, 0, 0.05), 0 -10px 5px rgb(255, 255, 255) inset;
+    box-shadow: 0 -2px 3px rgb(229, 229, 229),
+      0 2px 3px 3px var(--background-color, rgb(255, 255, 255)),
+      0 0 25px rgba(0, 0, 0, 0.1),
+      0 -10px 5px var(--background-color, rgb(255, 255, 255)) inset;
     position: relative;
     text-transform: uppercase;
     letter-spacing: 0.3em;
@@ -37,6 +45,10 @@ const { title, variant = "primary", href } = Astro.props;
     font-size: 16px;
   }
 
+  :global(.dark) a.c_Button {
+    --background-color: #090d19;
+  }
+
   .c_Button--primary {
     --accent-color: #ff5a55;
     color: #fff;

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -67,7 +67,7 @@
     width: 100vw;
     left: calc(-50vw + 50%);
     height: 100px;
-    background: linear-gradient(#fff, #f2f3ee);
+    background: linear-gradient(rgba(238, 235, 226, 0), rgba(238, 235, 226, 0.35));
     margin-bottom: 4rem;
     margin-top: 2rem;
   }

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -11,8 +11,8 @@
 @layer base {
   /* light theme */
   .theme-bubblegum {
-    /* Custom #8AE6FB */
-    --color-primary-blue: 138 230 251;
+    /* Custom #ff5a55 */
+    --color-primary-blue: 255 90 85;
     /* Tailwind lime-300 #bef264 */
     --color-primary-green: 190 242 100;
     /* Custom #FFDE69 */
@@ -26,8 +26,8 @@
     --color-text-bold: 62 51 85;
     /* Tailwind slate-500 #64748b */
     --color-text-muted: 100 116 139;
-    /* Tailwind cyan-500 #06b6d4 */
-    --color-text-link: 6 182 212;
+    /* Tailwind cyan-500 #ca4848 */
+    --color-text-link: 202 72 72;
     /* black */
     --color-text-code: 0 0 0;
     /* black */