style: colors
This commit is contained in:
parent
327970c609
commit
63b1c8955f
3 changed files with 6 additions and 3 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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%;
|
||||||
|
|
Loading…
Reference in a new issue