style: add effect to about

This commit is contained in:
MAZE 2024-02-09 20:56:33 +03:30
parent 4515aa8e7a
commit 1a499be244
3 changed files with 9 additions and 33 deletions

View file

@ -1,13 +1,12 @@
.about {
margin-top: 80px;
& .title {
font-family: var(--font-display);
font-size: var(--font-lg);
font-weight: 600;
& .effect {
position: sticky;
top: 0;
height: 80px;
background: linear-gradient(var(--color-neutral-50), transparent);
}
.paragraph {
& .paragraph {
padding: 30px 0;
background: linear-gradient(
transparent,
@ -35,20 +34,6 @@
& .desc {
line-height: 1.6;
color: var(--color-foreground-subtle);
/* text-align: center; */
}
}
/* & .divider {
width: 80px;
height: 1px;
margin: 0 auto 24px;
background: linear-gradient(
90deg,
transparent,
var(--color-neutral-300),
transparent
);
} */
}

View file

@ -1,5 +1,3 @@
import { Balancer } from 'react-wrap-balancer';
import { Container } from '@/components/container';
import { count as soundCount } from '@/lib/sounds';
@ -17,22 +15,16 @@ export function About() {
return (
<section className={styles.about}>
<Container tight>
<h1 className={styles.title}>Free Ambient Sounds</h1>
<div className={styles.effect} />
<Container tight>
{paragraphs.map((paragraph, index) => (
<div className={styles.paragraph} key={index}>
<div className={styles.counter}>
<span>0{index + 1}</span> / 0{paragraphs.length}
</div>
<p className={styles.desc}>
<Balancer>{paragraph}</Balancer>
</p>
{index < paragraphs.length - 1 && (
<div className={styles.divider} />
)}
<p className={styles.desc}>{paragraph}</p>
</div>
))}
</Container>

View file

@ -1,7 +1,6 @@
.source {
/* margin-top: 80px; */
/* margin-top: 40px; */
margin-top: 20px;
& .wrapper {