ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

common color gradient

Browse source
This commit is contained in:
Ayo 2022-09-18 15:42:48 +02:00
parent 4a7f913d45
commit ce9348cf5a
4 changed files with 15 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Footer.astro
View file

@ -9,10 +9,6 @@
</footer>
<style>
:root {
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
}
footer {
color: #888;
font-size: small;
@ -22,7 +18,7 @@
footer a {
font-weight: 900;
background-image: var(--astro-gradient);
background-image: var(--ayo-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;

11
src/layouts/Layout.astro
View file

@ -23,6 +23,7 @@ import Footer from '../components/Footer.astro';
</html>
<style>
:root {
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
--content-width: 700px;
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
@ -44,6 +45,15 @@ import Footer from '../components/Footer.astro';
margin: 0;
}
@keyframes pulse {
0%,
100% {
background-position-y: 0%;
}
50% {
background-position-y: 80%;
}
}
</style>
@ -60,4 +70,5 @@ import Footer from '../components/Footer.astro';
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
</style>

20
src/pages/index.astro
View file

@ -47,10 +47,6 @@ import Footer from "../components/Footer.astro";
</Layout>
<style>
:root {
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
}
h1 {
margin: 0;
color: rgba(255, 255, 255, 0.75);
@ -83,10 +79,10 @@ import Footer from "../components/Footer.astro";
}
.highlighted-section {
background: var(--astro-gradient);
background: var(--ayo-gradient);
background-size: 400% 400%;
background-color: var(--);
animation: gradient 15s ease-in-out infinite;
animation: pulse 15s ease-in-out infinite;
box-shadow: 0 8px 8px -4px lightblue;
}
@ -97,18 +93,6 @@ import Footer from "../components/Footer.astro";
padding: 0.15em 0.25em;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));

16
src/pages/social.astro
View file

@ -30,10 +30,6 @@ import Footer from '../components/Footer.astro';
</Layout>
<style>
:root {
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
}
h1 {
margin: 2rem 0;
}
@ -46,7 +42,7 @@ import Footer from '../components/Footer.astro';
.text-gradient {
font-weight: 900;
background-image: var(--astro-gradient);
background-image: var(--ayo-gradient);
animation: pulse 4s ease-in-out infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@ -55,16 +51,6 @@ import Footer from '../components/Footer.astro';
border-radius: 0.4rem;
}
@keyframes pulse {
0%,
100% {
background-position-y: 0%;
}
50% {
background-position-y: 80%;
}
}
.highlighted-content {
line-height: 1.6;
margin: 1rem 0;