style: colors

This commit is contained in:
Ayo 2022-09-18 16:20:02 +02:00
parent 327970c609
commit 63b1c8955f
3 changed files with 6 additions and 3 deletions

View file

@ -31,6 +31,7 @@ import Footer from '../components/Footer.astro';
--color-text: hsl(12, 5%, 4%); --color-text: hsl(12, 5%, 4%);
--color-bg: hsl(10, 21%, 95%); --color-bg: hsl(10, 21%, 95%);
--color-border: hsl(17, 24%, 90%); --color-border: hsl(17, 24%, 90%);
--color-link: #416fff;
--color-brand-blue-1: #3054bf; --color-brand-blue-1: #3054bf;
--color-brand-blue-2: #203880; --color-brand-blue-2: #203880;
@ -38,7 +39,8 @@ import Footer from '../components/Footer.astro';
--color-brand-blue-4: #101c40; --color-brand-blue-4: #101c40;
--color-brand-blue-5: #3964e6; --color-brand-blue-5: #3964e6;
--ayo-gradient: linear-gradient(45deg, #3054bf, #203880);
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
} }
html { html {
@ -80,7 +82,7 @@ import Footer from '../components/Footer.astro';
a { a {
font-weight: 900; font-weight: 900;
color: var(--color-brand-blue-2); color: var(--color-link);
border-radius: 0.4rem; border-radius: 0.4rem;
} }

View file

@ -80,7 +80,7 @@ import Footer from "../components/Footer.astro";
.highlighted-section { .highlighted-section {
background: var(--ayo-gradient); background: var(--ayo-gradient);
background-size: 400% 400%; background-size: 500% 500%;
background-color: var(--); background-color: var(--);
animation: pulse 15s ease-in-out infinite; animation: pulse 15s ease-in-out infinite;
box-shadow: 0 8px 8px -4px lightblue; box-shadow: 0 8px 8px -4px lightblue;

View file

@ -44,6 +44,7 @@ import Footer from '../components/Footer.astro';
font-weight: 900; font-weight: 900;
background-image: var(--ayo-gradient); background-image: var(--ayo-gradient);
animation: pulse 4s ease-in-out infinite; animation: pulse 4s ease-in-out infinite;
background-size: 500% 500%;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-size: 100% 200%; background-size: 100% 200%;