common color gradient
This commit is contained in:
parent
4a7f913d45
commit
ce9348cf5a
4 changed files with 15 additions and 38 deletions
|
@ -9,10 +9,6 @@
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
|
||||||
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
color: #888;
|
color: #888;
|
||||||
font-size: small;
|
font-size: small;
|
||||||
|
@ -22,7 +18,7 @@
|
||||||
|
|
||||||
footer a {
|
footer a {
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
background-image: var(--astro-gradient);
|
background-image: var(--ayo-gradient);
|
||||||
-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%;
|
||||||
|
|
|
@ -23,6 +23,7 @@ import Footer from '../components/Footer.astro';
|
||||||
</html>
|
</html>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
|
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
|
||||||
--content-width: 700px;
|
--content-width: 700px;
|
||||||
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
|
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
|
||||||
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
|
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
|
||||||
|
@ -44,6 +45,15 @@ import Footer from '../components/Footer.astro';
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
background-position-y: 0%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position-y: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
@ -60,4 +70,5 @@ import Footer from '../components/Footer.astro';
|
||||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -47,10 +47,6 @@ import Footer from "../components/Footer.astro";
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
|
||||||
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: rgba(255, 255, 255, 0.75);
|
||||||
|
@ -83,10 +79,10 @@ import Footer from "../components/Footer.astro";
|
||||||
}
|
}
|
||||||
|
|
||||||
.highlighted-section {
|
.highlighted-section {
|
||||||
background: var(--astro-gradient);
|
background: var(--ayo-gradient);
|
||||||
background-size: 400% 400%;
|
background-size: 400% 400%;
|
||||||
background-color: var(--);
|
background-color: var(--);
|
||||||
animation: gradient 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -97,18 +93,6 @@ import Footer from "../components/Footer.astro";
|
||||||
padding: 0.15em 0.25em;
|
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 {
|
.link-card-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||||||
|
|
|
@ -30,10 +30,6 @@ import Footer from '../components/Footer.astro';
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
|
||||||
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin: 2rem 0;
|
margin: 2rem 0;
|
||||||
}
|
}
|
||||||
|
@ -46,7 +42,7 @@ import Footer from '../components/Footer.astro';
|
||||||
|
|
||||||
.text-gradient {
|
.text-gradient {
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
background-image: var(--astro-gradient);
|
background-image: var(--ayo-gradient);
|
||||||
animation: pulse 4s ease-in-out infinite;
|
animation: pulse 4s ease-in-out infinite;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
|
@ -55,16 +51,6 @@ import Footer from '../components/Footer.astro';
|
||||||
border-radius: 0.4rem;
|
border-radius: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
background-position-y: 0%;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
background-position-y: 80%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlighted-content {
|
.highlighted-content {
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
|
|
Loading…
Reference in a new issue