diff --git a/src/components/Button.astro b/src/components/Button.astro index 75381e5..1a78633 100644 --- 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 index 8d802a3..7a1f871 100644 --- 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 index 25ad1f1..9baffaf 100644 --- 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 */